/* ──────────────────────────────────────────────────────────────────────────
   Base — the fonts, the reset, the type scale, and focus.

   Both fonts are served from this host. Not a preference: the panel sends
   `default-src 'self'`, so a request to fonts.gstatic.com would simply be
   blocked, and the page would silently fall back to whatever the system has.

   The icon font is the Material Symbols variable font SUBSET to the icons
   this panel actually uses. The full file is 4 MB, and with `font-display:
   block` — which an icon font needs, or every icon flashes as a word first —
   that is 4 MB of blank squares on a slow connection. Subset, it is 42 KB.
   ────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Variable.woff2?v=1791112541') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;          /* text is readable immediately in a fallback */
}

@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('../fonts/MaterialSymbolsOutlined.woff2?v=1791408530') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: block;         /* never show the ligature name as text */
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

/* Inherit rather than re-declare, so the font lives in exactly one place. */
button, input, select, textarea, optgroup {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* ── Type scale ──────────────────────────────────────────────────────────── */

.t-page   { font-size: 24px; font-weight: 600; line-height: 1.25;
            letter-spacing: -0.01em; }
.t-card   { font-size: 15px; font-weight: 600; }
.t-body   { font-size: 14px; font-weight: 500; }
/* t-xs and t-sm set SIZE ONLY and no colour. t-help and t-muted are the same
   sizes with a meaning attached. A utility that also sets colour is a
   component in disguise, so the two jobs are kept apart. */
.t-xs     { font-size: 12px; font-weight: 400; }
.t-sm     { font-size: 13px; font-weight: 400; }
.t-help   { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.t-muted  { font-size: 12px; font-weight: 400; color: var(--text-muted); }

/* Table headers and the little section labels above a group of fields. */
.t-label {
  font-size: 11px; font-weight: 600; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Figures line up in a column without a monospace face: tabular-nums gives
   every digit the same width, which is the only part of monospace a number
   actually needs. */
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ── Links ───────────────────────────────────────────────────────────────── */

/* Safari and Firefox fade a placeholder by default on top of its colour, so
   the contrast you set is not the contrast you get. */
::placeholder { color: var(--text-muted); opacity: 1; }

/* Anything a fragment can point at has to clear the sticky topbar and the
   environment banner. Without this the browser scrolls the target to y=0,
   where the topbar sits on top of it, so you land on a card whose heading is
   hidden — which reads as "the link went to the wrong place". */
[id] { scroll-margin-top: calc(var(--topbar-h) + var(--s-6)); }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Focus ───────────────────────────────────────────────────────────────── */

/* :focus-visible, so a mouse click does not draw a ring but a Tab key does.
   Black rather than the browser default blue, because the default is the one
   colour on the page that belongs to no token. */
:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ── Icons ───────────────────────────────────────────────────────────────── */

/* `.material-symbols-rounded` is the class the nineteen not-yet-migrated
   screens use. Without it bound to the font, every icon on those pages renders
   as its own ligature name — "support_agent" sitting in the page as the words.
   It is an alias, not a second style, and it goes when the last screen moves. */
.icon,
.material-symbols-rounded {
  font-family: 'Material Symbols Outlined';
  font-weight: 300;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  display: inline-block;
  flex: none;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  vertical-align: middle;
}
.icon--sm, .material-symbols-rounded.icon-sm { font-size: 18px; }
.icon--lg { font-size: 24px; }

/* ── Utility, deliberately few ───────────────────────────────────────────── */

.u-muted   { color: var(--text-muted); }
.u-dim     { color: var(--text-secondary); }
.u-right   { text-align: right; }
.u-center  { text-align: center; }
.u-strong  { font-weight: 600; }
.u-nowrap  { white-space: nowrap; }
.u-full    { width: 100%; }
.u-row     { display: flex; align-items: center; gap: var(--s-2); }
.u-row-end { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; }
.u-stack   { display: flex; flex-direction: column; gap: var(--s-2); }
.u-spread  { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }