/* SANROK — Minister of Foreign Affairs
   Tokens lifted from the SANROK Figma library (colours + padding scale). */
:root {
  --s1: 4px; --s2: 6px; --s3: 8px; --s4: 12px; --s4t: 11px; --s5: 16px; --s7: 32px;

  --ink: #293b3c;                    /* 100    */
  --ink-75: rgba(41, 59, 60, 0.75);  /* 100_75 */
  --ink-50: rgba(41, 59, 60, 0.5);   /* 100_50 */
  --ink-35: rgba(41, 59, 60, 0.35);  /* 100_35 */
  --line:   rgba(41, 59, 60, 0.15);  /* 100_15 */

  --bg: #d9d7d2;       /* 300 */
  --card: #e5e2dd;     /* 400 */
  --field: #edeae6;    /* 500 */

  --confirm: #298233;
  --error: #e23c2a;
  /* the library has no amber, and the working-hours face needs a third state
     between confirm and error; swap this if one is added */
  --caution: #d08a1e;

  --radius: 4px;
  --mono: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Platypi", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: -0.01em;
}

img { display: block; max-width: 100%; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* ------------------------------------------------------------- masthead */

.masthead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5);
  border-bottom: 1px solid var(--line);
}

/* The lockup is one asset now, wordmark and logogram together, so the two-line
   setting and the small-caps OF come from the file rather than from spans. It
   holds its own ratio and only ever scales down. */
.logo {
  flex: 0 1 auto;
  width: auto;
  height: 39px;
  max-width: 100%;
  min-width: 0;
  object-fit: contain;
  object-position: left center;
}

.standfirst {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
  color: var(--ink-50);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- hero */

/* the strip absorbs whatever height the other rows leave, as in the frame */
/* The band is the BTC price history, dithered into a mountain range. The
   blocks are drawn in the ink colour at full strength, so the canvas needs
   neither the opacity nor the multiply blend it used to carry. */
.chart {
  position: relative;
  flex: 1 1 173px;
  /* the card is ~106px tall and inset 12px, so anything shorter than this
     clips its delta line against the band's overflow */
  min-height: 140px;
  overflow: hidden;
}
.chart canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.chart-card {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--bg);
  border-radius: var(--radius);
}
.chart-label { margin: 0; font-size: 14px; }
.chart-value {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.28px;
  white-space: nowrap;
}

/* -------------------------------------------------------------- content */

.content {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
}
.panel--currencies {
  flex: 1 1 0;
  min-width: 650px;
  border-right: 1px solid var(--line);
}
.panel--timezone { flex: 1 1 0; min-width: 550px; }

/* the design hangs "snap to now" off the panel's own heading, where it is
   reachable without hunting down the panel for it */
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
}
.panel-title { margin: 0; font-size: 14px; font-weight: 300; white-space: nowrap; }

/* a labelled hairline rule that names the block beneath it */
.bumper {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin: 0;
  font-size: 10px;
  color: var(--ink-50);
}
.bumper i { flex: 1 1 0; height: 1px; background: var(--line); }
.bumper-note {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  color: var(--ink-50);
}

/* -------------------------------------------------------------- controls */

.control { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); }
.control--tz { align-items: flex-start; }

.convert { display: flex; align-items: flex-end; gap: var(--s7); width: 310px; }

.field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.field--short { width: 100px; }
.field--period { width: 220px; }
/* /city fills the row; /calendar and /time hug, sizing to their own content so
   nothing clips whatever width the browser gives a native date or time field */
.field--city { flex: 1 1 0; min-width: 0; }
.field--date,
.field--time { flex: 0 0 auto; width: max-content; }

.select--hug { width: max-content; }
.select--hug input { flex: 0 0 auto; width: auto; cursor: text; }
/* the caret is the affordance; the browser's own glyph would double it up and
   push the value out of the box */
.select--hug input::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
.select--hug input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.select--hug input::-webkit-datetime-edit { padding: 0; }

.field-label { font-size: 14px; color: var(--ink); }

.text-field,
.select {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 40px;
  padding: 0 var(--s4);
  background: var(--field);
  border: 0;
  border-top: 1px solid var(--ink-35);
  border-radius: var(--radius);
}

.text-field {
  width: 100%;
  font: inherit;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
  outline: none;
}
.text-field::placeholder { color: var(--ink-50); }

.select { position: relative; }
.select select,
.select input {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  font: inherit;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink-75);
  background: none;
  border: 0;
  outline: none;
  appearance: none;
  cursor: pointer;
}
.select .caret { width: 16px; height: 16px; flex: 0 0 16px; pointer-events: none; }
/* on the date and time fields the caret is the picker's handle, so unlike the
   select's it has to take the click itself */
.select--hug .caret { pointer-events: auto; cursor: pointer; }

.to-from { display: flex; flex-direction: column; justify-content: center; gap: var(--s3); }

.radio { display: flex; align-items: center; gap: var(--s3); cursor: pointer; }
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.dial {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--field);
  border: 1px solid var(--ink-35);
}
/* The on state used to be an exported SVG, but Figma writes
   preserveAspectRatio="none" onto its exports, and the box it sat in came out
   16x18 — so the circle drew as an ellipse. It is a 1.5px ring and a 10px dot,
   which CSS states exactly and cannot distort. */
.radio input:checked + .dial { border: 1.5px solid var(--ink-75); }
.radio input:checked + .dial::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-75);
  transform: translate(-50%, -50%);
}
.radio input:focus-visible + .dial { outline: 1px solid var(--ink); outline-offset: 2px; }

/* ----------------------------------------------------------------- grids */

/* Both boards take whatever the panel has left and share it between their
   rows, so the timezone cards finish level with the currency cards however
   tall the row gets — the design has both grids at the same height now. */
.grid {
  display: grid;
  gap: var(--s3);
  flex: 1 1 auto;
  min-height: 0;
  grid-auto-rows: 1fr;
}
.grid--3 { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
/* The timezone board is also three across, but it sits in a 550px panel
   rather than a 650px one, so its columns cannot carry that 180px floor —
   three of those plus the gaps overflow the panel. */
.grid--3-narrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  overflow: hidden;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius);
}
.stat-label {
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A clock card is a third of a 550px panel, so its city line drops to 12px
   to fit "Zurich, Switzerland" without clipping. The currency cards are
   wider and keep 14px. The -0.01em on body lands this at the design's
   -0.12px tracking. */
.panel--timezone .stat-label { font-size: 12px; }
/* the design pairs the time with the working-hours face on one line */
.clock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
}
.mood { flex: 0 0 20px; width: 20px; height: 20px; display: block; }
.mood path, .mood rect, .mood g { fill: currentColor; }
.mood--safe { color: var(--confirm); }
.mood--dubious { color: var(--caution); }
.mood--unsafe { color: var(--error); }

.stat-value {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.28px;
  overflow-wrap: anywhere;
}
.stat-delta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
}
.stat-delta .arrow { width: 10px; flex: 0 0 10px; }
.stat-delta .arrow.is-down { transform: scaleY(-1); }
.stat-delta .muted { color: var(--ink-50); }

.up { color: var(--confirm); }
.down { color: var(--error); }
.flat { color: var(--ink); }

.stat.is-loading .stat-value,
.stat.is-loading .stat-delta { opacity: 0.35; }
/* Stands in for a number while the first fetch runs.
   It is inline rather than block, and shorter than one line: that way the line
   box is still set by the text strut the number would have used, so the card is
   exactly as tall with a bar in it as with a figure in it. Giving the bar its
   own block height instead left the delta line 1.7px over, which multiplied
   into 5px across the grid the moment the numbers landed.
   The sweep runs in steps rather than smoothly: everything else on this page is
   drawn on a 2px grid, and a gliding gradient would be the one thing that is
   not. */
.skeleton {
  display: inline-block;
  vertical-align: middle;
  width: 60%;
  height: 0.72em;
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent, rgba(41, 59, 60, 0.16), transparent)
      -60% 0 / 60% 100% no-repeat,
    var(--field);
  animation: sweep 1.5s steps(14, end) infinite;
}
.skeleton--delta { width: 72%; }

@keyframes sweep { to { background-position: 220% 0; } }

/* a ten-second wait should not also be a ten-second flicker */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* ------------------------------------------------------------ colophon */

.linky { font-size: 12px; color: var(--ink-50); text-decoration: underline; text-underline-offset: 2px; }
.linky:hover { color: var(--ink); }

.colophon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s5);
  font-size: 12px;
  color: var(--ink-50);
  border-bottom: 1px solid var(--line);
}
.colophon p { margin: 0; }

/* -------------------------------------------------------------- narrow */

/* The panels' minimums total exactly 1200, so at a 1200px window a scrollbar
   leaves them 15px short and the page scrolls sideways. Stack just above that
   instead — sideways scrolling is a worse outcome than an early stack. */
@media (max-width: 1215px) {
  .content { flex-direction: column; }
  .panel--currencies,
  .panel--timezone { flex: 0 0 auto; min-width: 0; }
  .panel--currencies { border-right: 0; border-bottom: 1px solid var(--line); }
  .control { flex-wrap: wrap; }
  .convert { width: auto; }
}

@media (max-width: 720px) {
  .masthead { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .standfirst { text-align: left; white-space: normal; }
  .grid--3, .grid--2, .grid--3-narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control--tz { flex-direction: column; align-items: stretch; }
  .field--date, .field--time, .field--period, .field--short { width: auto; }
  .convert { flex-wrap: wrap; gap: var(--s5); }
}

@media (max-width: 460px) {
  .grid--3, .grid--2, .grid--3-narrow { grid-template-columns: minmax(0, 1fr); }
}