/* ============================================================================
   The workday console
   ----------------------------------------------------------------------------
   Layout note: DOM order is the reading order and the tab order — telemetry,
   mission, fleet, backlog, repository, activity, table. Grid areas do the
   visual rearranging, so no visual choice ever costs a keyboard user.
   ========================================================================= */

.console {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
  grid-template-areas:
    "hud     hud"
    "mission stage"
    "mission backlog"
    "shop    backlog"
    "feed    feed"
    "table   table";
  align-items: start;
}

.console__hud { grid-area: hud; }
.panel--mission { grid-area: mission; }
.panel--stage   { grid-area: stage; }
.panel--backlog { grid-area: backlog; }
.panel--shop    { grid-area: shop; }
.panel--feed    { grid-area: feed; }
.panel--table   { grid-area: table; }

@media (max-width: 84rem) {
  .console {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hud" "mission" "stage" "backlog" "shop" "feed" "table";
  }
}

.console__loading { color: var(--fg-muted); font-size: var(--t-sm); padding: var(--s-6) 0; }

.console__error {
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--danger);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--danger) 12%, transparent);
  color: var(--fg);
  font-size: var(--t-sm);
}

/* --- Panels -------------------------------------------------------------- */

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  padding: var(--s-5);
}

.panel__h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  letter-spacing: var(--tracking-tight);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.panel__sub {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  letter-spacing: 0;
}

/* Small caps label, used for sub-headings inside panels. */
.ck {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: var(--s-5) 0 var(--s-2);
}
.ck:first-child { margin-top: 0; }

/* --- HUD: meters --------------------------------------------------------- */

.hud {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-raised);
  padding: var(--s-4) var(--s-5);
  position: sticky;
  top: 4.25rem;
  z-index: 20;
  box-shadow: var(--shadow-md);
}

.meters__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--s-4);
}

.meter { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.meter__label {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.meter__hint {
  font-family: var(--font-sans);
  font-size: var(--t-2xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-faint);
  line-height: 1.35;
  max-width: 20ch;
}
.meter__value {
  font-size: var(--t-xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.meter[data-tone="good"] .meter__value { color: var(--success); }
.meter[data-tone="warn"] .meter__value { color: var(--warn); }
.meter[data-tone="bad"]  .meter__value { color: var(--danger); }

@media (max-width: 48rem) {
  .hud { padding: var(--s-3) var(--s-4); top: 3.5rem; }
  .meters__list { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--s-3); }
  .meter__hint { display: none; }
  .meter__value { font-size: var(--t-lg); }
}

.budget { margin-top: var(--s-4); }
.budget__track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--inset);
  overflow: hidden;
}
.budget__fill {
  height: 100%;
  width: calc(var(--fill, 0) * 100%);
  background: var(--success);
  border-radius: inherit;
  transition: width var(--d-mid) var(--ease-orb), background-color var(--d-mid) var(--ease-out);
}
.budget[data-tone="warn"] .budget__fill { background: var(--warn); }
.budget[data-tone="bad"]  .budget__fill { background: var(--danger); }

/* --- HUD: transport ------------------------------------------------------ */

.transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.transport__buttons { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.transport__note {
  flex-basis: 100%;
  font-size: var(--t-2xs);
  color: var(--fg-faint);
  max-width: 60ch;
}

/* `position: relative` contains the visually-hidden radio inputs, which are
   absolutely positioned so they stay focusable without taking up space. */
.seg { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: var(--s-2); position: relative; flex-wrap: wrap; }
.seg__legend {
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  /* `.seg` is a flex container, so the legend is simply its first flex item
     and sits inline with the buttons. No float needed — floats are ignored
     on flex items anyway. */
  margin-inline-end: var(--s-2);
}
.seg__opt { display: contents; }
.seg__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.seg__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 36px;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.seg__label:hover { color: var(--fg); border-color: var(--line-strong); }
.seg__input:checked + .seg__label {
  color: var(--brand-ink);
  background: var(--brand);
  border-color: var(--brand);
  font-weight: 600;
}
@media (pointer: coarse) { .seg__label { min-height: var(--tap); min-width: var(--tap); } }

/* --- Mission ladder ------------------------------------------------------ */

.ladder { display: grid; gap: var(--s-2); }

.ladder__item {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  gap: var(--s-3);
  align-items: start;
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.ladder__item:hover:not(:disabled) { background: var(--card-hover); border-color: var(--line-strong); }
.ladder__item:disabled { opacity: 0.42; cursor: not-allowed; }
.ladder__item[data-state="active"] { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 10%, transparent); }
.ladder__item[data-state="done"] .ladder__idx { color: var(--success); }

.ladder__idx { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.5; }
.ladder__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ladder__title { font-size: var(--t-sm); font-weight: 500; }
.ladder__kicker { font-size: var(--t-2xs); color: var(--fg-muted); line-height: 1.4; }
.ladder__grade {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--success);
  line-height: 1;
}

/* --- Briefing and objectives --------------------------------------------- */

.brief { margin-top: var(--s-5); }
.brief__h {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  letter-spacing: var(--tracking-tight);
}
.brief__kicker { font-size: var(--t-sm); color: var(--fg-muted); margin-top: var(--s-1); text-wrap: pretty; }
.brief__body { margin-top: var(--s-4); font-size: var(--t-sm); display: grid; gap: var(--s-3); }
.brief__body p { color: var(--fg-muted); line-height: 1.6; text-wrap: pretty; }
.brief__body strong { color: var(--fg); font-weight: 600; }
.brief__body code { color: var(--fg); }

.objectives { display: grid; gap: var(--s-2); }
.objective {
  display: grid;
  grid-template-columns: 1rem 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
  font-size: var(--t-sm);
  color: var(--fg-muted);
}
.objective__mark {
  width: 11px; height: 11px;
  border: 1.5px solid var(--fg-faint);
  border-radius: 3px;
  align-self: center;
}
.objective[data-done="true"] { color: var(--fg); }
.objective[data-done="true"] .objective__mark {
  background: var(--success);
  border-color: var(--success);
  /* a tick, drawn rather than typed, so it survives any font */
  background-image: linear-gradient(45deg, transparent 44%, var(--bg) 44%, var(--bg) 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 62%, var(--bg) 62%, var(--bg) 74%, transparent 74%);
}
.objective__prog { font-size: var(--t-2xs); color: var(--fg-faint); }
/* Optional objectives raise the grade but never block completion, and the
   label says so rather than leaving it to a colour. */
.objective[data-optional="true"] .objective__mark { border-radius: 50%; border-style: dashed; }
.objective__opt { color: var(--fg-faint); font-style: italic; }

.brief__teaches { margin-top: var(--s-4); font-size: var(--t-2xs); color: var(--fg-faint); }
.brief__teaches-label {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.brief .btn { margin-top: var(--s-4); }

/* --- Debrief ------------------------------------------------------------- */

.debrief {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--success);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--success) 10%, transparent);
}
.debrief__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--success);
}
.debrief__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--s-1);
}
.debrief__grade { font-size: var(--t-4xl); color: var(--success); line-height: 1; }
.debrief__body { margin-top: var(--s-3); display: grid; gap: var(--s-3); font-size: var(--t-sm); }
.debrief__body p { color: var(--fg-muted); line-height: 1.6; text-wrap: pretty; }
.debrief__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-3);
  margin: var(--s-4) 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.debrief__stats dt {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.debrief__stats dd { font-size: var(--t-lg); margin: 0; }
.debrief__end { font-size: var(--t-sm); color: var(--fg-muted); }

/* --- Radio lists (spawn sizes, job placement) ---------------------------- */

.radio-list { display: grid; gap: var(--s-2); }
.radio { position: relative; }
.radio__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.radio__label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-1) var(--s-3);
  align-items: baseline;
  padding: var(--s-3);
  padding-inline-start: calc(var(--s-3) + 1.4rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.radio__label::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--s-3);
  top: calc(var(--s-3) + 0.28rem);
  width: 13px; height: 13px;
  border: 1.5px solid var(--fg-faint);
  border-radius: 50%;
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.radio__label:hover { background: var(--card-hover); border-color: var(--line-strong); }
.radio__input:checked + .radio__label { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 9%, transparent); }
.radio__input:checked + .radio__label::before { border-color: var(--brand); box-shadow: inset 0 0 0 3px var(--brand); }

.radio__title { font-size: var(--t-sm); font-weight: 500; }
.radio__est { font-size: var(--t-sm); color: var(--fg); white-space: nowrap; }
.radio__note { grid-column: 1 / -1; font-size: var(--t-2xs); color: var(--fg-muted); line-height: 1.45; }
.radio__tag {
  grid-column: 1 / -1;
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--success);
}
.radio[data-risk="oom"] .radio__est { color: var(--danger); }
.radio[data-risk="oom"] .radio__note { color: var(--danger); }
.radio[data-risk="local"] .radio__est { color: var(--warn); }

/* --- Spawn panel --------------------------------------------------------- */

.spawn {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  margin-bottom: var(--s-5);
}
.spawn__set { border: 0; margin: 0; padding: 0; }
.spawn__legend, .assign__legend {
  padding: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.radio-list--sizes { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.spawn__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.spawn__note { font-size: var(--t-2xs); color: var(--fg-faint); max-width: 42ch; }
.spawn__note[data-tone="warn"] { color: var(--warn); }

/* --- Fleet --------------------------------------------------------------- */

/* `auto-fit` with a bounded track keeps a lone orb from either stranding an
   empty column beside it or stretching into an absurdly wide card. Cards sit
   between 25rem and 34rem and pack from the start. */
.fleet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 34rem));
  justify-content: start;
  gap: var(--s-4);
}

.orb-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  transition: border-color var(--d-mid) var(--ease-out);
}
.orb-card[data-status="working"] { border-color: color-mix(in oklab, var(--state-working) 45%, var(--line)); }
.orb-card[data-status="paused"]  { border-color: color-mix(in oklab, var(--state-paused) 38%, var(--line)); }
.orb-card[data-status="failed"]  { border-color: var(--state-failed); }

.orb-card__viz { --orb-px: 92; display: grid; place-items: start center; }
.orb-card__body { display: grid; gap: var(--s-2); min-width: 0; }

.orb-card__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--t-md);
}
.orb-card__thread { font-family: var(--font-mono); font-weight: 500; }
.orb-card__size {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--fg-muted);
  font-weight: 400;
}

.orb-card__status { display: flex; flex-direction: column; gap: 2px; }
.orb-card__status-word { font-size: var(--t-sm); font-weight: 500; }
.orb-card__status-note { font-size: var(--t-2xs); color: var(--fg-muted); line-height: 1.4; }

.orb-card[data-status="working"] .orb-card__status-word { color: var(--state-working); }
.orb-card[data-status="paused"]  .orb-card__status-word { color: var(--state-paused); }
.orb-card[data-status="failed"]  .orb-card__status-word { color: var(--state-failed); }
.orb-card[data-status="setup"]   .orb-card__status-word { color: var(--state-setup); }
.orb-card[data-status="provisioning"] .orb-card__status-word { color: var(--state-provisioning); }
.orb-card[data-status="resuming"] .orb-card__status-word { color: var(--state-resuming); }

.orb-card__task { font-size: var(--t-sm); color: var(--fg-muted); text-wrap: pretty; }

.orb-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1) var(--s-3);
  font-size: var(--t-2xs);
}
.orb-card__stats dt { color: var(--fg-faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.orb-card__stats dd { margin: 0; color: var(--fg); }

.orb-card__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.orb-card__portal {
  flex-basis: 100%;
  font-size: var(--t-2xs);
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}
.orb-card__portal-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--state-provisioning);
  margin-inline-end: var(--s-2);
}

/* --- Progress bars ------------------------------------------------------- */

.bar {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--inset);
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: calc(var(--fill, 0) * 100%);
  background: var(--state-working);
  border-radius: inherit;
  transition: width var(--d-slow) var(--ease-orb);
}

/* --- Empty state --------------------------------------------------------- */

.fleet__empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  text-align: center;
}
.fleet__empty-head { font-family: var(--font-display); font-size: var(--t-2xl); letter-spacing: var(--tracking-tight); }
.fleet__empty-body {
  margin: var(--s-3) auto 0;
  max-width: 34rem;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* --- The laptop lane ----------------------------------------------------- */

.laptop {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  display: grid;
  gap: var(--s-2);
}
.laptop[data-status="working"] { border-color: var(--warn); }
.laptop[data-lid="closed"] { border-color: color-mix(in oklab, var(--success) 45%, var(--line)); }

.laptop__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.laptop__h { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-md); }
.laptop__spec { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-muted); font-weight: 400; }
.laptop__status { font-size: var(--t-sm); }
.laptop[data-status="working"] .laptop__status { color: var(--warn); }
.laptop[data-lid="closed"] .laptop__status { color: var(--success); }
.laptop__task { font-size: var(--t-sm); color: var(--fg-muted); }
.laptop__note { font-size: var(--t-2xs); color: var(--fg-faint); text-wrap: pretty; }
.laptop .bar__fill { background: var(--warn); }

/* --- Backlog ------------------------------------------------------------- */

.jobs { display: grid; gap: var(--s-4); }

.job {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  display: grid;
  gap: var(--s-3);
  transition: opacity var(--d-mid) var(--ease-out);
}
.job[data-state="done"] { opacity: 0.62; }
.job[data-state="active"] { border-color: color-mix(in oklab, var(--state-working) 40%, var(--line)); }
.job[data-state="failed"] { border-color: var(--danger); }

.job__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--t-md);
  font-weight: 500;
}
.job__badge {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  border: 1px solid currentColor;
}
.job__badge[data-tone="good"] { color: var(--success); }
.job__badge[data-tone="bad"]  { color: var(--danger); }
.job__badge[data-tone="info"] { color: var(--state-provisioning); }

.job__blurb { font-size: var(--t-sm); color: var(--fg-muted); text-wrap: pretty; }

.job__specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-3); }
.job__spec--wide { grid-column: 1 / -1; }
.job__specs dt {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 2px;
}
.job__specs dd { margin: 0; font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.45; }

.job__proof { font-size: var(--t-xs); color: var(--fg-muted); }
.job__proof-label {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--success);
}
.job__toggle { justify-self: start; }

.assign {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
}
.assign__set { border: 0; margin: 0; padding: 0; }
.assign__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --- The repository (upgrades) ------------------------------------------ */

.upgrades { display: grid; gap: var(--s-3); }

.upgrade {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: var(--s-2);
}
.upgrade[data-owned="true"] { border-color: color-mix(in oklab, var(--success) 45%, var(--line)); }

.upgrade__h { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-sm); }
.upgrade__file { color: var(--brand); font-size: var(--t-xs); }
.upgrade__title { font-weight: 500; }
.upgrade__effect { font-size: var(--t-xs); color: var(--fg); }
.upgrade__truth { font-size: var(--t-2xs); color: var(--fg-muted); line-height: 1.45; text-wrap: pretty; }
.upgrade__log { font-size: var(--t-2xs); color: var(--fg-faint); overflow-wrap: anywhere; }
.upgrade__status { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-2xs); color: var(--success); }
.upgrade__tick { width: 10px; height: 10px; border-radius: 2px; background: var(--success); flex: none; }
.upgrade .btn { justify-self: start; }

.trophies { display: grid; gap: var(--s-2); }
.trophy { display: grid; grid-template-columns: 1rem 1fr; gap: var(--s-3); align-items: start; }
.trophy__mark {
  width: 11px; height: 11px;
  margin-top: 5px;
  border: 1.5px solid var(--fg-faint);
  transform: rotate(45deg);
}
.trophy[data-unlocked="true"] .trophy__mark { background: var(--brand); border-color: var(--brand); }
.trophy__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.trophy__title { font-size: var(--t-xs); font-weight: 500; }
.trophy[data-unlocked="false"] .trophy__title { color: var(--fg-faint); }
.trophy__text { font-size: var(--t-2xs); color: var(--fg-muted); line-height: 1.4; }

/* --- Activity feed ------------------------------------------------------- */

.feed__inner { position: relative; }
.feed__list {
  display: grid;
  gap: var(--s-1);
  max-height: 22rem;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-inline-end: var(--s-2);
}
.feed__line {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xs);
}
.feed__time { color: var(--fg-faint); font-size: var(--t-2xs); }
.feed__text { color: var(--fg-muted); line-height: 1.5; text-wrap: pretty; }
.feed__detail { display: block; color: var(--fg-faint); font-size: var(--t-2xs); margin-top: 2px; }
.feed__line[data-level="good"] .feed__text { color: var(--success); }
.feed__line[data-level="warn"] .feed__text { color: var(--warn); }
.feed__line[data-level="bad"]  .feed__text { color: var(--danger); }
.feed__empty { font-size: var(--t-sm); color: var(--fg-faint); }

/* --- Fleet status table -------------------------------------------------- */

.statusgrid__wrap { overflow-x: auto; }
.statusgrid { width: 100%; border-collapse: collapse; font-size: var(--t-xs); min-width: 52rem; }
.statusgrid__caption {
  text-align: start;
  font-size: var(--t-2xs);
  color: var(--fg-muted);
  padding-bottom: var(--s-3);
}
.statusgrid th, .statusgrid td {
  text-align: start;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.statusgrid thead th {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 400;
}
.statusgrid tbody th { font-family: var(--font-mono); font-weight: 500; }
.statusgrid tbody td { color: var(--fg-muted); }
.statusgrid__empty { font-size: var(--t-sm); color: var(--fg-faint); }

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 40rem) {
  .panel { padding: var(--s-4); border-radius: var(--r-lg); }
  .fleet { grid-template-columns: 1fr; }
  .orb-card { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); }
  .orb-card__viz { --orb-px: 64; }
  .orb-card__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radio-list--sizes { grid-template-columns: 1fr; }
  .feed__line { grid-template-columns: 4.2rem 1fr; gap: var(--s-2); }
  .transport { gap: var(--s-3); }
  .debrief__h { flex-direction: row; }
}