/* ============================================================================
   Stellae components — built ENTIRELY from tokens.css (ADR-0030).

   Like tokens.css this file has a byte-identical copy under
   src/Hosts/Stellae.Client/wwwroot/, audited by scripts/audit-design-tokens.sh.

   There is not a single literal colour, spacing value or font size below. If
   you need one that does not exist, add a token — do not inline it.
   ========================================================================= */

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

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--fg-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* ---- Numbers ------------------------------------------------------------
   Every figure a player compares. Tabular so columns align, which is the
   entire reason this class exists. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.num-lg { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--fg-primary); }
.num-xl { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--fg-primary); line-height: 1; }
/* The one figure a detail view is ABOUT: a colony's population, a design's cost. */
.num-hero {
  font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--fg-primary);
  line-height: 1; letter-spacing: var(--tracking-tight);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
/* A screen's subject, in the header. Proportional, not mono: it is a name. */
.subject {
  font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--fg-primary);
  line-height: 1.1; letter-spacing: var(--tracking-tight); margin: 0;
}

/* ---- Labels ------------------------------------------------------------- */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---- Layout ------------------------------------------------------------- */
/* minmax(0, 1fr) and not the implicit auto column: an auto grid column is sized by its content, so any
   screen whose widest row exceeded the viewport pushed the WHOLE PAGE sideways rather than scrolling
   inside itself. A fifth hull in the designer was enough to do it, 40px at 1280 (#108). */
.app { display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--topbar-height) 1fr var(--statusbar-height); height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-4);
  background: var(--bg-surface);
  border-bottom: var(--border-width) solid var(--border-default);
}

.statusbar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-4);
  background: var(--bg-surface);
  border-top: var(--border-width) solid var(--border-default);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.workspace { display: flex; min-height: 0; }
.workspace > .map { flex: 1; min-width: 0; position: relative; background: var(--bg-void); }

.panel {
  width: var(--panel-width);
  flex: 0 0 auto;
  background: var(--bg-surface);
  border-left: var(--border-width) solid var(--border-default);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
/* Over the star map. Translucent and blurred because it is floating over a
   starfield and should look like it -- and opaque everywhere else, because blur
   over a solid ground is fog for its own sake. */
.panel--float {
  background: var(--surface-float);
  backdrop-filter: blur(var(--overlay-blur));
  -webkit-backdrop-filter: blur(var(--overlay-blur));
  border-left-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.panel--wide { width: var(--panel-width-wide); }
.panel--left { border-left: none; border-right: var(--border-width) solid var(--border-default); }

.panel-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
  position: sticky; top: 0; background: var(--bg-surface); z-index: 1;
}
.panel-title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--fg-primary); }
.panel-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
/* A detail view a player stops and reads. Density everywhere reads as cramped
   rather than serious; this is where the contrast is spent. */
.panel-body--detail {
  padding: var(--space-detail-y) var(--space-detail);
  gap: var(--space-5);
}
.detail-page {
  max-width: 54rem; margin: 0 auto;
  padding: var(--space-detail-y) var(--space-detail) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-6);
}

.section { display: flex; flex-direction: column; gap: var(--space-2); }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.cluster { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.grow { flex: 1; }

/* ---- Cards and stats ---------------------------------------------------- */
.card {
  background: var(--bg-raised);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.card--detail { padding: var(--space-4); }

.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: var(--space-3); }

/* ---- Meter --------------------------------------------------------------
   One bar, used for habitability, population against capacity, fuel, damage,
   and the race designer's budget. Colour comes from a modifier, never inline. */
.meter { height: var(--space-2); background: var(--bg-base); border-radius: var(--radius-full); overflow: hidden; }
.meter-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); }
.meter-fill--ok     { background: var(--ok); }
.meter-fill--warn   { background: var(--warn); }
.meter-fill--danger { background: var(--danger); }
.meter--thick { height: var(--space-3); }

/* ---- Tables -------------------------------------------------------------
   Dense. This is a game of lists of numbers. */
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
table.data th {
  text-align: left; padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom: var(--border-width) solid var(--border-default);
  white-space: nowrap;
}
table.data td {
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--border-width) solid var(--border-subtle);
  color: var(--fg-secondary);
}
table.data td.n, table.data th.n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: var(--bg-hover); }
table.data tr.is-selected { background: var(--bg-selected); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--fg-primary);
  background: var(--bg-raised);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { color: var(--fg-faint); background: var(--bg-base); cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--danger { border-color: var(--danger); color: var(--danger); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--fg-muted); }
.btn--ghost:hover { background: var(--bg-hover); color: var(--fg-primary); }
.btn--sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
.btn--block { width: 100%; }

/* ---- Inputs ------------------------------------------------------------- */
.input, .select {
  width: 100%;
  padding: var(--space-2);
  font-family: inherit; font-size: var(--text-sm);
  color: var(--fg-primary);
  background: var(--bg-raised);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
}
.input:focus, .select:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.input.num { font-family: var(--font-mono); text-align: right; }

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field > .label { margin-bottom: 0; }

/* Range: the race designer is made of these. */
.range { width: 100%; accent-color: var(--accent); }

/* ---- Badges and pills --------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0 var(--space-2);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--border-default);
  color: var(--fg-muted);
  white-space: nowrap;
}
.badge--ok      { color: var(--ok);      border-color: var(--ok);      background: var(--ok-subtle); }
.badge--warn    { color: var(--warn);    border-color: var(--warn);    background: var(--warn-subtle); }
.badge--danger  { color: var(--danger);  border-color: var(--danger);  background: var(--danger-subtle); }
.badge--info    { color: var(--info);    border-color: var(--info);    background: var(--info-subtle); }
.badge--accent  { color: var(--accent);  border-color: var(--accent);  background: var(--accent-subtle); }

/* Relations. Always paired with a word — never colour alone (`0013` rule 1). */
.rel-own     { color: var(--own); }
.rel-ally    { color: var(--ally); }
.rel-neutral { color: var(--neutral); }
.rel-hostile { color: var(--hostile); }
.rel-unknown { color: var(--unknown); }

/* ---- Intel staleness ----------------------------------------------------
   Rule 1 of `0013`: a fact drawn from intel always shows the year it was
   learned, and old facts look older. */
.intel { display: inline-flex; align-items: baseline; gap: var(--space-1); }
.intel-year { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); }
.intel--current  .intel-value { color: var(--intel-current); }
.intel--recent   .intel-value { color: var(--intel-recent); }
.intel--stale    .intel-value { color: var(--intel-stale); }
.intel--ancient  .intel-value { color: var(--intel-ancient); font-style: italic; }

/* Rule 2: anything computed client-side is marked as a projection. */
.predicted { border-bottom: var(--border-width) dashed var(--fg-faint); }
.predicted::after { content: "~"; color: var(--fg-faint); margin-left: var(--space-1); }

/* ---- Minerals ----------------------------------------------------------- */
.min-i  { color: var(--ironium); }
.min-b  { color: var(--boranium); }
.min-g  { color: var(--germanium); }
.min-r  { color: var(--resources); }
.mineral-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }

/* ---- Tabs --------------------------------------------------------------- */
.tabs { display: flex; gap: var(--space-1); border-bottom: var(--border-width) solid var(--border-default); }
.tab {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); color: var(--fg-muted);
  background: none; border: none; border-bottom: var(--border-width-thick) solid transparent;
  cursor: pointer;
}
.tab:hover { color: var(--fg-primary); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Dialog ------------------------------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(7, 10, 16, 0.72); display: grid; place-items: center; }
.dialog {
  width: min(34rem, calc(100vw - var(--space-8)));
  background: var(--bg-overlay);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.scrim {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.dialog--wide { width: min(52rem, calc(100vw - var(--space-8))); }
.dialog-header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.dialog-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.dialog-footer {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
}

/* ---- Map furniture ------------------------------------------------------
   The real map is WebGL (ADR-0008). These classes style what sits OVER it. */
.map-overlay { position: absolute; display: flex; gap: var(--space-2); }
.map-overlay--tl { top: var(--space-3); left: var(--space-3); }
.map-overlay--tr { top: var(--space-3); right: var(--space-3); }
.map-overlay--bl { bottom: var(--space-3); left: var(--space-3); }
.map-legend {
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  box-shadow: var(--shadow-md);
}

/* ---- Utility ------------------------------------------------------------ */
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.strong { color: var(--fg-primary); font-weight: var(--weight-medium); }
.divider { height: var(--border-width); background: var(--border-subtle); border: none; margin: 0; }
.scroll { overflow-y: auto; }

/* ---- Planet bodies (ADR-0034) -------------------------------------------
   The canvas is drawn from a descriptor C# computed. These classes only place
   it and hang the habitability ring around it. */
.planet { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; }
.planet canvas { display: block; width: 100%; height: 100%; }
.planet-ring { position: absolute; inset: 0; }
.planet--xs { width: 2.5rem;  height: 2.5rem; }
.planet--sm { width: 4rem;    height: 4rem; }
.planet--md { width: 7rem;    height: 7rem; }
.planet--lg { width: 11rem;   height: 11rem; }

/* ---- Ship silhouettes (ADR-0034) ---------------------------------------- */
.ship { display: block; width: 100%; height: auto; }
.ship-frame {
  background: var(--bg-void);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.ship-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  font-size: var(--text-xs); color: var(--fg-muted);
}
.ship-legend b { color: var(--fg-secondary); font-weight: var(--weight-normal); }

/* ---- Motion -------------------------------------------------------------
   One orchestrated moment, not scattered effects: the year advancing is the
   event this whole game is built around, so it is the one thing that animates. */
@keyframes year-advance {
  0%   { opacity: 0; transform: translateY(0.35em); }
  100% { opacity: 1; transform: none; }
}
.year-tick { animation: year-advance var(--duration-base) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Habitability axis ---------------------------------------------------
   Used on two screens, and the two uses are mirror images of each other:

     Race designer — the BAND is what you drag. The planets are fixed.
     Colony screen — the band is fixed. A marker shows where THIS planet sits.

   One component for both, so a player learns the picture once. The band is a
   from–to zone with an ideal at its centre; brightness inside it falls off
   toward the edges because habitability does (`docs/design/0004`).

   The histogram behind the track is the galaxy's actual distribution on that
   axis. It is what turns an abstract band into a decision: a wide band over
   empty space buys nothing, and a narrow band over the peak buys a lot. */
.axis { display: flex; flex-direction: column; gap: var(--space-2); }

.axis-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }

.axis-track {
  position: relative;
  height: 3rem;
  background: var(--bg-base);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Where the galaxy's planets actually sit on this axis. */
.axis-hist { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1px; padding: 0 2px; }
.axis-hist i { flex: 1 1 0; background: var(--fg-faint); opacity: 0.4; border-radius: 1px 1px 0 0; min-height: 1px; }
/* Bars inside the band are the ones you can actually settle. */
.axis-hist i.in { background: var(--accent); opacity: 0.75; }

/* The tolerated zone. Brightest at the ideal, fading to the edges. */
.axis-zone {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-subtle) 26%,
    var(--accent-subtle) 74%,
    transparent 100%);
  border-left: var(--border-width-thick) solid var(--accent);
  border-right: var(--border-width-thick) solid var(--accent);
  pointer-events: none;
}
.axis-zone--immune {
  left: 0; right: 0;
  border-color: var(--info);
  background: linear-gradient(90deg, var(--info-subtle), var(--info-subtle));
}

/* The centre of the band: what this race would choose if it could. */
.axis-ideal { position: absolute; top: 0; bottom: 0; width: var(--border-width-thick); background: var(--accent); pointer-events: none; }
.axis-ideal::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--accent);
}

/* Where one particular planet sits — colony screen only. */
.axis-here { position: absolute; top: -2px; bottom: -2px; width: var(--border-width-thick); background: var(--fg-primary); pointer-events: none; }
.axis-here::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 5px solid var(--fg-primary);
}

/* Two range inputs stacked on one track. The track of each is transparent and
   ignores the pointer; only the thumbs are grabbable, so both handles live on
   the same line and the control stays keyboard-operable. */
.axis-handles { position: absolute; inset: 0; }
.axis-handles input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; pointer-events: none;
}
.axis-handles input[type="range"]:focus { outline: none; }
.axis-handles input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 12px; height: 2.25rem; border-radius: var(--radius-sm);
  background: var(--accent); border: var(--border-width) solid var(--bg-base);
  cursor: ew-resize; box-shadow: var(--shadow-sm);
}
.axis-handles input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 12px; height: 2.25rem; border-radius: var(--radius-sm);
  background: var(--accent); border: var(--border-width) solid var(--bg-base);
  cursor: ew-resize;
}
.axis-handles input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.axis-handles input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }

/* The axis in its own units, under the track. */
.axis-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); }

/* What the band buys, in worlds. The number that makes the control a decision. */
.axis-yield { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.axis-yield > span { display: flex; align-items: baseline; gap: var(--space-1); font-size: var(--text-xs); color: var(--fg-muted); }
.axis-yield b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-primary); font-weight: var(--weight-medium); }

/* ---- Immunity toggle -----------------------------------------------------
   Sits on the axis it applies to, because that is where the decision is made.
   Deliberately NOT a small checkbox: this is the single most expensive choice
   in the race designer, and it should read as a switch you throw rather than a
   box you tick on the way past. The price shows on the control itself. */
.axis-immune {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); color: var(--fg-muted);
  cursor: pointer; user-select: none;
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.axis-immune:hover { border-color: var(--border-strong); color: var(--fg-secondary); }
.axis-immune input { position: absolute; opacity: 0; pointer-events: none; }
.axis-immune input:focus-visible + .axis-switch { box-shadow: var(--focus-ring); }

.axis-switch {
  width: 1.75rem; height: 0.875rem; flex: 0 0 auto;
  background: var(--bg-base); border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full); position: relative;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.axis-switch::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 0.625rem; height: 0.625rem; border-radius: var(--radius-full);
  background: var(--fg-muted);
  transition: transform var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.axis-immune.is-on { border-color: var(--info); color: var(--info); }
.axis-immune.is-on .axis-switch { background: var(--info-subtle); border-color: var(--info); }
.axis-immune.is-on .axis-switch::after { transform: translateX(0.875rem); background: var(--info); }

/* The price, on the control. */
.axis-immune .axis-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.axis-immune.is-on .axis-price { color: var(--info); }

/* An immune axis is marked, and stays draggable.
   Widening a band to the whole axis IS immunity (docs/design/0003), so a player can reach this state by
   dragging -- and hiding the handles here left them with no way back that they could see. The switch worked,
   but nobody would guess that, which is a trap rather than a design (#56). The histogram below still says the
   axis is immune, which is the part that was worth keeping. */
.axis-track.is-immune .axis-hist i { background: var(--info); opacity: 0.55; }

/* ---- ship designer (docs/design/0007) --------------------------------------------------------------
   Promoted out of the mockup's own style block when the screen was built, the way the axis controls were.
   A hull is chosen from a row and its mounts are filled one at a time, so the two controls below are what
   the screen is made of rather than decoration on top of it. */

.hull-picker { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); }

.hull-opt {
  flex: 0 0 7.5rem; padding: var(--space-2); text-align: center; cursor: pointer;
  background: var(--bg-raised); border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.hull-opt.is-active { border-color: var(--accent); background: var(--accent-subtle); }
.hull-opt span { display: block; font-size: var(--text-xs); color: var(--fg-secondary); }

.slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-2); }

.slot-chip {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2); background: var(--bg-raised);
  border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md);
  font-size: var(--text-xs); cursor: pointer;
}
/* An empty mount is drawn as an outline: it reads as a place for something rather than as a thing. */
.slot-chip.is-empty { border-style: dashed; color: var(--fg-faint); }
.slot-chip.is-active { border-color: var(--accent); background: var(--accent-subtle); }

.slot-kind {
  width: 1.25rem; height: 1.25rem; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--bg-base);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted);
}