/* ==========================================================================
   MARS!PLATZ — COMMUNICATION STATION

   Visual language: a soft instrument. A pale grey ground, lit from above;
   the things you touch are raised off it as pale slabs with deep, soft
   shadows; the things you read are dark glass screens set into them. One
   orange, kept for what is live, what is Mars, and what wants pressing.
   Small hardware details — an LED, a ribbed grip, a knob, a row of vents —
   make the composer read as a device rather than a form.

   Status is still carried by SYMBOL as well as hue, so it survives print
   and colourblindness. Every stack is a system stack: nothing is fetched.
   ========================================================================== */

/* ZKM Serendipity, self-hosted from public/fonts/ — nothing is fetched from
   outside the station, so the venue can stay unplugged. Regular carries
   100–500; Semibold stands in for everything bolder, so a `bold` never
   renders as a synthetic double-stroke. */
@font-face {
  font-family: "ZKM Serendipity";
  src: url("/fonts/ZKMSerendipity-Regular.woff2") format("woff2"),
       url("/fonts/ZKMSerendipity-Regular.ttf") format("truetype");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ZKM Serendipity";
  src: url("/fonts/ZKMSerendipity-Semibold.woff2") format("woff2"),
       url("/fonts/ZKMSerendipity-Semibold.ttf") format("truetype");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
/* Mission control is set in Open Sans — a plain working face for someone at a
   desk in the dark — self-hosted like Serendipity. The station keeps its own. */
@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular.woff2") format("woff2"), url("/fonts/OpenSans-Regular.ttf") format("truetype"); font-weight: 100 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Bold.woff2") format("woff2"), url("/fonts/OpenSans-Bold.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Italic.woff2") format("woff2"), url("/fonts/OpenSans-Italic.ttf") format("truetype"); font-weight: 100 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-BoldItalic.woff2") format("woff2"), url("/fonts/OpenSans-BoldItalic.ttf") format("truetype"); font-weight: 600 900; font-style: italic; font-display: swap; }


:root {
  /* ground, slabs, wells, screens */
  --ground:      #e7e7e8;
  --ground-2:    #dfdfe1;              /* the lower band of the page */
  --raise:       #f8f8f8;              /* a raised slab, top face */
  --raise-2:     #ededee;              /* a raised slab, lower face */
  --well:        #ffffff;              /* an inset field */
  --screen:      #1d1d20;              /* dark glass */
  --screen-2:    #0f0f11;
  --bezel:       #2a2a2e;

  /* ink */
  --ink:         #151517;
  --dim:         #707076;
  --faint:       #a6a6ab;
  --rule:        rgba(21, 21, 23, 0.10);
  --rule-hard:   rgba(21, 21, 23, 0.20);
  --edge:        rgba(255, 255, 255, 0.9);   /* the lit top edge of a slab */

  /* on a screen */
  --on-screen:     #f2f2ef;
  --on-screen-dim: rgba(242, 242, 239, 0.52);
  --screen-rule:   rgba(255, 255, 255, 0.09);

  /* the one colour */
  --orange:      #ff6a1a;
  --orange-deep: #e8560c;
  --orange-soft: rgba(255, 106, 26, 0.12);
  --orange-ink:  #ffffff;              /* text sitting on orange */

  /* light */
  --sh-raise:    0 1px 1px rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.05), 0 22px 44px rgba(0,0,0,.08);
  --sh-raise-lg: 0 2px 2px rgba(0,0,0,.04), 0 18px 34px rgba(0,0,0,.09), 0 54px 90px rgba(0,0,0,.12);
  --sh-raise-sm: 0 1px 1px rgba(0,0,0,.05), 0 3px 8px rgba(0,0,0,.06);
  --sh-inset:    inset 0 1px 3px rgba(0,0,0,.09), inset 0 0 0 1px rgba(0,0,0,.035);
  --sh-screen:   0 2px 2px rgba(0,0,0,.18), 0 18px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  --sh-orange:   0 1px 1px rgba(0,0,0,.05), 0 8px 22px rgba(255, 106, 26, .35);

  /* aliases so older markup keeps working */
  --paper: var(--ground);
  --card: var(--raise);
  --panel: var(--raise);
  --panel-lift: var(--well);
  --void: var(--ground);
  --mars: var(--orange);
  --earth: var(--ink);
  --oxide: var(--orange);
  --signal: var(--orange);
  --alarm: var(--orange);
  --nominal: var(--ink);
  --ink-bright: var(--ink);
  --rule-bright: var(--rule-hard);

  /* type: ZKM Serendipity everywhere — wordmark, headings, codes, labels,
     values and reading prose alike — self-hosted, system stacks behind it. */
  --display: "ZKM Serendipity", "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial, sans-serif;
  --mono: "ZKM Serendipity", ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono",
          "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "ZKM Serendipity", "Helvetica Neue", Helvetica, Inter, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Arial, sans-serif;

  --rail: 0px;
  --gutter: clamp(16px, 2.6vw, 30px);
  --r: 14px;                /* a slab corner */
  --r-lg: 24px;             /* a device corner */
  --r-sm: 9px;              /* a field corner */
}

/* ---------------------------------------------------------------- dark set */
:root[data-theme="dark"] {
  --ground:      #1a1a1d;
  --ground-2:    #141416;
  --raise:       #27272b;
  --raise-2:     #1f1f23;
  --well:        #151518;
  --screen:      #0d0d10;
  --screen-2:    #060607;
  --bezel:       #2e2e33;
  --ink:         #ececea;
  --dim:         #9c9ca2;
  --faint:       #5d5d64;
  --rule:        rgba(255, 255, 255, 0.08);
  --rule-hard:   rgba(255, 255, 255, 0.17);
  --edge:        rgba(255, 255, 255, 0.09);
  --on-screen:   #f2f2ef;
  --sh-raise:    0 1px 1px rgba(0,0,0,.3), 0 8px 18px rgba(0,0,0,.35), 0 26px 50px rgba(0,0,0,.45);
  --sh-raise-lg: 0 2px 2px rgba(0,0,0,.3), 0 20px 40px rgba(0,0,0,.45), 0 60px 100px rgba(0,0,0,.5);
  --sh-raise-sm: 0 1px 1px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.35);
  --sh-inset:    inset 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  --sh-screen:   0 2px 2px rgba(0,0,0,.4), 0 18px 36px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* no blue square where a finger presses (13 October: "why is there a blue square behind Know more when you click it on
   mobile — fix that"): the phone browser's own tap highlight, a rectangle laid over whatever is pressed whatever its
   shape, is off on every page — the site, the screens, mission control; the keys show their own pressed state (inherited,
   so one line does it) */
html { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-hard); }
a:hover { border-bottom-color: var(--orange); color: var(--orange); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ================================================================ PRIMITIVES */

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A raised slab: the base of every panel, card and pill. */
.slab, .panel, .card, .msg, .dp-inner, .hbt .tile, .mday, .fold, .quoted, .gauge, .scale, .orbit-frame {
  background: linear-gradient(180deg, var(--raise), var(--raise-2));
  box-shadow: var(--sh-raise), inset 0 1px 0 var(--edge);
  border: 0;
  border-radius: var(--r);
}

/* A dark screen set into the ground. */
.screen {
  background: linear-gradient(180deg, var(--screen), var(--screen-2));
  color: var(--on-screen);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-screen);
}

/* The old caution hatch is now the ribbed orange grip. */
.hatch {
  height: 26px; width: 96px; margin: 0 auto;
  border-radius: 0 0 8px 8px;
  background: repeating-linear-gradient(90deg, #d4500f 0 2px, #ff7a2e 2px 6px);
  box-shadow: 0 2px 4px rgba(0,0,0,.18), inset 0 -2px 0 rgba(0,0,0,.15);
}

/* Registration crosshair */
.reg { position: relative; width: 16px; height: 16px; flex: none; }
.reg::before, .reg::after { content: ''; position: absolute; background: currentColor; }
.reg::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.reg::after { top: 50%; left: 0; right: 0; height: 1px; }

/* Vent lines, used as a divider */
.barcode {
  height: 16px; width: 100%;
  background: repeating-linear-gradient(90deg, var(--rule-hard) 0 1.5px, transparent 1.5px 6px);
}

/* Bracketed code, as in [ 145 ELEMENTS ] */
.brk { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.brk::before { content: '[ '; color: var(--faint); }
.brk::after { content: ' ]'; color: var(--faint); }

/* Empty placeholder: an inset well with a dashed edge */
.xbox, .empty {
  border: 1.5px dashed var(--rule-hard); border-radius: var(--r);
  background: transparent;
  min-height: 90px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--dim); padding: 24px; text-align: center;
}

/* Labels: every small code on the instrument */
.lbl, .eyebrow, .dp-head, .secsub, .counter, .kv dt, .readout .label, .legend,
.crossing-labels, .card-foot, .card-sent, .tagrow span {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em;
}

/* ===================================================================== RAIL */
/* The status rail on the inner pages: a thin dark strip. On the landing page
   the same readings live in the masthead instead (see .status). */
.rail {
  position: sticky; top: 0; left: 0; right: 0; height: 40px; z-index: 100;
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, var(--screen), var(--screen-2)); color: var(--on-screen);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow-x: auto; scrollbar-width: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.rail::-webkit-scrollbar { display: none; }
.rail-cell {
  padding: 0 14px; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  border-right: 1px solid var(--screen-rule);
  color: var(--on-screen-dim);
}
.rail-cell b { color: var(--on-screen); font-weight: 600; letter-spacing: 0.1em; }
.rail-cell.rail-brand { color: var(--orange); font-weight: 700; letter-spacing: 0.3em; border-right: 0; }
.rail-cell.push { margin-left: auto; border-right: 0; border-left: 1px solid var(--screen-rule); }
.rail-cell .you { color: var(--orange); }

/* The theme toggle */
.rail-cell.theme { padding: 0; }
.rail-cell.theme button {
  border: 0; background: none; color: inherit; height: 100%; padding: 0 14px;
  border-radius: 0; font-size: 9.5px; letter-spacing: 0.16em; box-shadow: none; transform: none;
}
.rail-cell.theme button:hover { background: rgba(255,255,255,0.08); box-shadow: none; transform: none; }
.theme-mark { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* The language switch: DE · EN · FR, three small buttons in one form,
   drawn as the theme switch's twin — a rail cell on the inner pages, a
   pill in the masthead. The current language stands in orange. */
.rail-cell.lang { padding: 0; gap: 0; }
.rail-cell.lang button {
  border: 0; background: none; color: inherit; height: 100%; padding: 0 9px; min-width: 0;
  border-radius: 0; font-size: 9.5px; letter-spacing: 0.16em; box-shadow: none; transform: none;
  font-family: var(--mono); text-transform: uppercase; cursor: pointer;
}
.rail-cell.lang button:hover { background: rgba(255,255,255,0.08); box-shadow: none; transform: none; }
.rail-cell.lang button.on { color: var(--orange); font-weight: 700; }

/* =============================================================== NAVIGATION */
.nav {
  position: sticky; top: 40px; z-index: 90;
  display: flex; overflow-x: auto; scrollbar-width: none;
  background: var(--ground); border-bottom: 1px solid var(--rule);
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim); border: 0;
  padding: 13px 16px; white-space: nowrap; position: relative;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--orange); }

.shell { max-width: 1300px; margin: 0 auto; padding: 0 var(--gutter) 70px; }

/* ================================================================ TYPOGRAPHY */
h1, h2, h3 {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  margin: 0 0 12px; letter-spacing: -0.02em; line-height: 1.05;
}
h1 { font-size: clamp(30px, 4.6vw, 48px); }
h2 { font-size: 20px; }
h3 { font-size: 14px; letter-spacing: 0.02em; }

.spec {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim);
  display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0;
}
.spec > span { padding: 6px 12px; border-radius: 20px; background: var(--well); box-shadow: var(--sh-raise-sm); }
.spec b { color: var(--ink); font-weight: 600; }

p { margin: 0 0 13px; max-width: 66ch; color: var(--ink); }
.lede { font-size: 15.5px; max-width: 62ch; color: var(--ink); }
.prose { max-width: 66ch; }
.prose h2 { margin-top: 34px; }
.note { font-size: 12.5px; color: var(--dim); }

.eyebrow {
  font-size: 9.5px; color: var(--dim); margin: 0 0 12px;
  display: flex; align-items: center; gap: 10px; font-weight: 500;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
@media (max-width: 700px) { .eyebrow { flex-wrap: wrap; gap: 4px 10px; } .eyebrow .brk { white-space: nowrap; } .eyebrow::after { display: none; } }

/* =================================================================== PANELS */
/* A panel is a raised slab with a small channel code in its corner. */
.panel { position: relative; padding: 38px 24px 24px; margin: 0 0 var(--gutter); }
.panel:not(:has(> .chan)) { padding-top: 24px; }
.panel > .chan {
  position: absolute; top: 15px; right: 22px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint); font-weight: 500;
}
.panel.mars-side > .chan { color: var(--orange); }

/* Who we are (info.js, whoFold): the crew's portraits, six to a row, each with its name under it, in the order of their
   surnames (public/crew/crew.json) — and the partners' logos, small, each on a white tile so that it reads on the dark
   ground as on the light, under Produced by */
.crew-wall { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px 10px; }   /* sixteen — the crew and the robot dog — in two rows of eight (fourteen in two rows of seven until Laura Benetschik's and Ralf Eger's photographs came, 14 October); four rows of four on a tablet, four rows of four on a phone */
.crew-pic { margin: 0; min-width: 0; }
.crew-pic img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; background: #101012; }
.crew-pic figcaption { margin-top: 8px; font-family: var(--display); font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink); text-align: center; overflow-wrap: anywhere; }
@media (max-width: 1024px) { .crew-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .crew-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; } .crew-pic figcaption { margin-top: 6px; font-size: 11.5px; } }
.partners { display: grid; gap: 16px; margin-top: 20px; }
.partner-row .eyebrow { margin-bottom: 10px; }
.logos { display: flex; flex-wrap: wrap; gap: 10px; }
.logos .logo { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 8px 14px; border-radius: 8px; background: #fff; box-sizing: border-box; }
.logos .logo img { display: block; height: 100%; width: auto; max-width: 150px; object-fit: contain; }

.grid { display: grid; gap: var(--gutter); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .g-hero, .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .g2, .g3, .g4, .g-hero { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================= READOUTS */
.readout { display: flex; flex-direction: column; gap: 4px; }
.readout .label { font-size: 9px; color: var(--dim); }
.readout .value {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(30px, 4.6vw, 46px); line-height: 0.95; color: var(--ink); letter-spacing: -0.02em;
}
.readout .value small { font-family: var(--mono); font-size: 0.26em; letter-spacing: 0.16em; color: var(--dim); margin-left: 7px; }
.readout .sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 6px; }

/* ================================================================== SYMBOLS */
.sym {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--ink); position: relative;
}
.sym::before, .sym::after { content: ''; position: absolute; background: var(--ink); }
.sym.ok::before { width: 5px; height: 5px; border-radius: 50%; }
.sym.warn::before { width: 7px; height: 1.5px; }
.sym.bad { border-color: var(--orange); }
.sym.bad::before, .sym.bad::after { width: 9px; height: 1.5px; background: var(--orange); }
.sym.bad::before { transform: rotate(45deg); }
.sym.bad::after { transform: rotate(-45deg); }
.sym.none { border-color: var(--faint); }

/* The LED */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none;
  background: var(--faint); box-shadow: inset 0 1px 1px rgba(0,0,0,.2); }
.dot.ok { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft), 0 0 8px rgba(255,106,26,.6); }
.dot.warn { background: var(--faint); }
.dot.bad { background: var(--orange); }

.legend { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 9px; color: var(--dim); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }

/* Badges are small stamped pills */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 4px 10px; font-weight: 500;
  border: 1px solid var(--rule-hard); border-radius: 20px; color: var(--dim); background: var(--well);
}
.badge.ok { color: var(--ink); }
.badge.warn { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); }
.badge.bad, .badge.mars { color: var(--orange); border-color: var(--orange); }
.badge.earth { color: var(--dim); }
.badge.new { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); font-weight: 700; }

/* ============================================================ MESSAGE GRID */
/* The exchange, as a sheet of cards. */
.cards {
  display: grid; gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.card {
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-raise-lg), inset 0 1px 0 var(--edge); }
.card .card-top {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
}
.card .cs { font-weight: 700; color: var(--orange); letter-spacing: 0.14em; }
.card .card-day { margin-left: auto; color: var(--faint); }
.card .card-top .card-state { margin-left: auto; font-size: 8px; padding: 3px 8px; }
.card .card-top .card-state ~ .card-day { margin-left: 8px; }
.card-sent { display: flex; gap: 10px; padding: 4px 16px 0; font-size: 8.5px; letter-spacing: 0.12em; color: var(--faint); }
.card-sent span:last-child { margin-left: auto; }
.card .card-body { padding: 12px 16px 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink); flex: 1; }
.card .card-tags { padding: 0 16px 12px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }   /* the message's tags, under its text */
.card .card-reply { margin: 0 12px 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--orange-soft); }
.card .card-reply .who { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: 6px; }
.card .card-reply p { margin: 0; font-size: 14px; line-height: 1.5; }
.card .card-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--rule); font-size: 8.5px; letter-spacing: 0.1em; color: var(--faint); }
.card .card-foot a { border: 0; margin-left: auto; }
.card.fresh { box-shadow: var(--sh-raise), 0 0 0 1.5px var(--orange), inset 0 1px 0 var(--edge); }
.card .tagrow { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 16px 12px; }
.card .tagrow span { font-size: 8px; letter-spacing: 0.12em; border: 1px solid var(--rule-hard); border-radius: 20px; padding: 2px 8px; color: var(--dim); }

/* Kept for the pages that still show a single wide message */
.msg { margin-bottom: 14px; }
.msg-head { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; }
.msg-head .cs { color: var(--orange); font-weight: 700; letter-spacing: 0.14em; }
.msg-body { padding: 16px; font-size: 15.5px; line-height: 1.55; }
.msg-reply { margin: 0 12px 12px; padding: 14px; border-radius: var(--r-sm); background: var(--orange-soft); }
.msg-reply .who { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--orange); margin-bottom: 7px; text-transform: uppercase; font-weight: 700; }
.msg-reply p { margin: 0; }
.msg.fresh { box-shadow: var(--sh-raise), 0 0 0 1.5px var(--orange); }

/* ============================================================ ORBITAL PLOT */
.orbit-frame { overflow: hidden; }
.orbit-frame svg { display: block; width: 100%; height: auto; }
.orbit-caption { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); }
.orbit-caption > div { flex: 1 1 120px; padding: 10px 14px; border-right: 1px solid var(--rule); }
.orbit-caption > div:last-child { border-right: 0; }
.orbit-caption .k { font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em; color: var(--dim); text-transform: uppercase; display: block; margin-bottom: 2px; }
.orbit-caption .v { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.orbit-line { stroke: var(--rule-hard); fill: none; }
.orbit-chord { stroke: var(--orange); stroke-dasharray: 3 4; stroke-width: 1.25; }
.orbit-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; fill: var(--ink); text-transform: uppercase; }
.leader { stroke: var(--rule-hard); stroke-width: 1; fill: none; }

.spark { display: block; width: 100%; height: 52px; }
.spark path { fill: none; stroke-width: 1.25; }
.spark .band { fill: var(--orange-soft); }

/* ===================================================================== LISTS */
.rows { border-top: 1px solid var(--rule); }
.row { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.row .t { font-family: var(--mono); font-size: 11px; color: var(--dim); min-width: 48px; flex: none; }
.row .m { flex: 1; min-width: 0; }
.row .m b { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; }
.row .m span { display: block; font-size: 12.5px; color: var(--dim); }
.row.done .m b { color: var(--faint); text-decoration: line-through; }
.row.active { background: var(--orange-soft); margin: 0 -12px; padding: 11px 12px; border-radius: var(--r-sm); border-bottom-color: transparent; }
.row.active .m b { color: var(--orange); }

/* =============================================================== SCALE STRIP */
.scale { padding: 16px 16px 12px; display: flex; align-items: flex-end; gap: 4px; }
.scale div { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; }
.scale i { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--ground-2); box-shadow: var(--sh-inset); }
.scale div.past i { background: var(--ink); }
.scale div.now i { background: var(--orange); height: 14px; box-shadow: var(--sh-orange); }
.scale span { font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; color: var(--dim); }
.scale div.now span { color: var(--orange); font-weight: 700; }

.bar { height: 8px; background: var(--ground-2); position: relative; border-radius: 4px; overflow: hidden; box-shadow: var(--sh-inset); }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); display: block; border-radius: 4px; }
.bar i.bad, .bar i.warn { background: var(--orange); }

/* ===================================================================== FORMS */
label.f { display: block; margin-bottom: 13px; }
label.f > span {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 6px;
}
input[type=text], input[type=password], input[type=number], input[type=time],
input[type=date], textarea, select {
  width: 100%; background: var(--well); color: var(--ink);
  border: 0; border-radius: var(--r-sm); padding: 11px 14px;
  box-shadow: var(--sh-inset);
  font-family: var(--mono); font-size: 13px;
  transition: box-shadow 140ms ease;
}
textarea { resize: vertical; min-height: 110px; line-height: 1.6; font-family: var(--sans); font-size: 15px; }
textarea::placeholder, input::placeholder { color: var(--faint); font-style: italic; }
input:focus, textarea:focus, select:focus {
  outline: none; box-shadow: var(--sh-inset), 0 0 0 2px var(--orange);
}

button, .btn {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600; padding: 11px 18px; cursor: pointer;
  background: linear-gradient(180deg, var(--raise), var(--raise-2)); color: var(--ink);
  border: 0; border-radius: 12px;
  box-shadow: var(--sh-raise-sm), inset 0 1px 0 var(--edge);
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 90ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: var(--sh-raise), inset 0 1px 0 var(--edge); color: var(--ink); }
button:active, .btn:active { transform: translateY(1px); box-shadow: var(--sh-inset); }
button.primary, .btn.primary {
  background: linear-gradient(180deg, #ff8a45, var(--orange) 55%, var(--orange-deep));
  color: var(--orange-ink); box-shadow: var(--sh-orange), inset 0 1px 0 rgba(255,255,255,.35);
}
button.primary:hover { box-shadow: 0 2px 2px rgba(0,0,0,.05), 0 12px 28px rgba(255,106,26,.45), inset 0 1px 0 rgba(255,255,255,.35); color: var(--orange-ink); }
button.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-hard); color: var(--dim); }
button.ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); transform: none; }
button.danger { color: var(--dim); }
button.danger:hover { background: var(--orange); color: var(--orange-ink); }
button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 13px; }
.actions form { display: inline-flex; margin: 0; }
.actions .spacer { flex: 1 1 auto; min-width: 8px; }
.actions select { width: auto; min-width: 170px; }

/* Tag chips: pale pills, the chosen ones dark. */
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tags input { position: absolute; opacity: 0; pointer-events: none; }
.tags label, .chip {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; font-weight: 500;
  padding: 7px 13px; border-radius: 20px; min-height: 28px;
  color: var(--dim); cursor: pointer; user-select: none; text-transform: uppercase;
  background: var(--well); box-shadow: inset 0 0 0 1px var(--rule-hard);
  display: inline-flex; align-items: center; gap: 6px;
  transition: box-shadow 120ms ease, color 120ms ease, background-color 120ms ease;
}
.tags label:hover, .chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tags label:has(input:checked), .chip.active {
  background: var(--ink); color: var(--ground); box-shadow: var(--sh-raise-sm); font-weight: 700;
}
:root[data-theme="dark"] .tags label:has(input:checked), :root[data-theme="dark"] .chip.active {
  background: var(--on-screen); color: var(--screen);
}
.tags label:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }
.counter { font-size: 9px; letter-spacing: 0.16em; color: var(--faint); }
.counter.over { color: var(--orange); font-weight: 700; }

/* =================================================================== TRANSIT */
.transit { padding: 0; }
.transit .state { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.transit .state b { color: var(--ink); font-weight: 700; }
.transit .clock {
  font-family: var(--mono); font-size: clamp(34px, 5vw, 56px); font-weight: 500;
  line-height: 1; margin: 6px 0 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  max-width: 100%;
}
/* Size the clock against its own column, not the viewport, wherever
   container queries exist — "T-00:11" then always fits the box. */
@supports (font-size: 1cqi) {
  .transit-read { container-type: inline-size; }
  .transit .clock { font-size: clamp(30px, 19cqi, 64px); }
}
.transit.done .clock { color: var(--orange); }
.transit .clock.is-word { white-space: nowrap; }   /* ARRIVED in the clock's place, on one line, made to fit its column (composer.js, fitWord) */
.honesty {
  margin-top: 18px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--dim); line-height: 1.75; text-transform: uppercase; max-width: 52ch;
}
.honesty b { color: var(--ink); font-weight: 700; }

.pipe { display: flex; flex-wrap: wrap; background: var(--well); border-radius: var(--r-sm); box-shadow: var(--sh-inset); overflow: hidden; }
.pipe div { flex: 1 1 88px; padding: 10px 6px; text-align: center; font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; color: var(--faint); border-right: 1px solid var(--rule); text-transform: uppercase; }
.pipe div:last-child { border-right: 0; }
.pipe div.past { color: var(--dim); }
.pipe div.at { background: var(--orange); color: var(--orange-ink); font-weight: 700; }

/* ====================================================================== MISC */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 12px; }
.kv dt { font-size: 9px; color: var(--dim); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.empty { padding: 30px 20px; font-size: 10px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 22px 0; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--gutter); }
.filters a {
  flex: 1 1 auto; padding: 11px 14px; border: 0; border-radius: 20px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); display: flex; align-items: center; gap: 9px; justify-content: center;
  background: var(--well); box-shadow: inset 0 0 0 1px var(--rule-hard);
}
.filters a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.filters a b { font-weight: 700; color: var(--ink); font-size: 12px; letter-spacing: 0; }
.filters a.on { background: var(--ink); color: var(--ground); box-shadow: var(--sh-raise-sm); font-weight: 700; }
.filters a.on b { color: var(--orange); }

.quoted { font-size: 16px; line-height: 1.55; margin: 16px 0; padding: 16px 18px; max-width: 62ch; background: var(--well); box-shadow: var(--sh-inset); }

.choose { display: grid; gap: 9px; margin-top: 16px; }
.choose button { width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; text-align: left; }
.choose button em { font-style: normal; font-size: 9px; letter-spacing: 0.16em; opacity: 0.7; text-transform: uppercase; }

.flash {
  border-radius: var(--r-sm); padding: 11px 16px; margin-bottom: 16px;
  background: var(--well); box-shadow: var(--sh-inset), inset 4px 0 0 var(--ink);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
}
.flash.err { box-shadow: var(--sh-inset), inset 4px 0 0 var(--orange); color: var(--orange); }

/* The footer is a dark slab carrying the navigation. */
.foot {
  margin: 56px auto 0; width: calc(100% - 2 * var(--gutter)); max-width: calc(1300px - 2 * var(--gutter)); padding: 28px 32px 24px;
  display: block; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--screen), var(--screen-2)); color: var(--on-screen-dim);
  box-shadow: var(--sh-screen);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.foot a { border: 0; margin-right: 18px; color: var(--on-screen); }
.foot a:hover { color: var(--orange); }
.foot .foot-links { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px 0; }
.foot .foot-base { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--screen-rule); }
.foot .foot-brand { color: var(--orange); }

/* ===================================================================== ADMIN */
.ctrl-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--gutter); }
@media (max-width: 820px) { .ctrl-grid { grid-template-columns: minmax(0, 1fr); } }
.side { border-right: 1px solid var(--rule); padding-right: 14px; }
.side a { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); padding: 8px 0; border-bottom: 1px solid var(--rule); }
.side a[aria-current="page"] { color: var(--orange); }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); }
th { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
td.n { font-family: var(--mono); text-align: right; }
tr:hover td { background: rgba(0,0,0,0.03); }
:root[data-theme="dark"] tr:hover td { background: rgba(255,255,255,0.04); }

input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 26px; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--ground-2); box-shadow: var(--sh-inset); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--ground-2); box-shadow: var(--sh-inset); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%;
  background: linear-gradient(180deg, #ff8a45, var(--orange)); box-shadow: var(--sh-orange); cursor: grab;
}
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--orange); box-shadow: var(--sh-orange); cursor: grab; }
.axis-row { margin-bottom: 14px; }
.axis-row .poles { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8px; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; margin-bottom: 5px; }
.axis-read { font-family: var(--mono); font-size: 10px; color: var(--orange); min-height: 16px; font-weight: 500; }

/* =============================================================== TERMINAL */
body.habitat .shell { max-width: 1040px; }
body.habitat textarea { min-height: 200px; }
body.control, body.habitat { padding-top: 0; }
body.control .shell, body.habitat .shell { padding-top: var(--gutter); }

#write, #exchanges, #about { scroll-margin-top: 24px; }

/* ===================================================================== MOBILE */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tw table { min-width: 460px; }

@media (max-width: 760px) {
  :root { --gutter: 14px; --r: 12px; --r-lg: 18px; }
  body { font-size: 15px; }
  .rail-cell.opt { display: none; }
  .rail-cell { padding: 0 10px; font-size: 9.5px; }
  .rail-cell.theme { position: sticky; right: 0; background: var(--screen-2); }
}
@media (max-width: 560px) {
  /* a phone: the one-way time and the callsign leave the rail (both are on
     the page itself), so the day, the link and the theme toggle stay on screen */
  .rail-cell.narrow-opt { display: none; }
  h1 { font-size: clamp(26px, 8vw, 34px); }
  .panel { padding: 18px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  button, .btn { padding: 13px 16px; min-height: 44px; }
  .tags label, .chip { padding: 10px 14px; min-height: 40px; }
  input, select, textarea { font-size: 16px; }
  .nav a { padding: 13px 13px; }
  .scale span { display: none; }
  .scale div.now span { display: block; }
  .orbit-caption > div { flex: 1 1 50%; border-right: 0; border-top: 1px solid var(--rule); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 1px 0; }
  .kv dd { margin-bottom: 9px; }
  .foot { padding: 22px 20px; border-radius: var(--r); }
  .foot a { display: inline-block; margin: 0 14px 6px 0; }
  .spec > span { flex: 1 1 auto; }
}

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

@media print {
  body { background: #fff; padding: 0; }
  .rail, .nav, .foot, form, button, .btn, .hatch, .dev-led, .dev-grip, .dev-vents { display: none !important; }
  .panel, .card { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
}

/* ================================================================== GAUGES */
/* Resources as fill bars: what is left against what was carried in. */
.gauges { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.gauge { padding: 13px 14px 11px; }
.gauge-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.gauge-name { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); flex: 1; min-width: 0; }
.gauge-val { font-family: var(--mono); font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: -0.02em; }
.gauge-val em { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--dim); margin-left: 4px; }
.gauge-track { height: 8px; border-radius: 4px; overflow: hidden; background: var(--ground-2); box-shadow: var(--sh-inset); }
.gauge-track i { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.gauge.low .gauge-track i { background: var(--orange); }
.gauge.low .gauge-val { color: var(--orange); }
.gauge-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* ================================================================ SECTIONS */
.sec { display: flex; align-items: flex-start; gap: 14px; margin: calc(var(--gutter) * 1.4) 0 var(--gutter); padding-top: 14px; border-top: 1px solid var(--rule); }
.sec-n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 600; background: var(--ink); color: var(--ground); padding: 4px 8px; border-radius: 6px; flex: none; }
.sec-t { flex: 1; min-width: 0; }
.sec-t h2 { margin: 0 0 3px; font-size: clamp(19px, 2.6vw, 26px); }
.sec-t .note { margin: 0; max-width: 60ch; }

/* ================================================================ SCROLLER */
/* All the messages, in one scrollable field rather than an endless page. */
.scroller { max-height: 66vh; overflow-y: auto; padding: 3px; margin-bottom: var(--gutter); }
.scroller .cards { padding: 11px; }
.scroller::-webkit-scrollbar { width: 8px; }
.scroller::-webkit-scrollbar-track { background: transparent; }
.scroller::-webkit-scrollbar-thumb { background: var(--rule-hard); border-radius: 6px; }
.scroller { scrollbar-width: thin; scrollbar-color: var(--rule-hard) transparent; }
.scroller.tall { max-height: 74vh; }
@media (max-width: 760px) { .scroller { max-height: 78vh; } .scroller.tall { max-height: 80vh; } }

/* The mission-state row reuses .kv as a set of cells */
.kv > div { display: contents; }
@supports (display: grid) {
  .kv[style*="auto-fit"] { display: grid; }
  .kv[style*="auto-fit"] > div { display: block; border-radius: var(--r-sm); padding: 10px 12px; background: var(--well); box-shadow: var(--sh-inset); }
  .kv[style*="auto-fit"] > div dt { margin-bottom: 4px; }
}

/* ========================================================= MISSION SCHEDULE */
.days { display: grid; gap: var(--gutter); }
.dayblock { padding: 0 18px 12px; }
.dayblock.past { opacity: 0.68; }
.dayblock.now { box-shadow: var(--sh-raise), 0 0 0 1.5px var(--orange); }
.dayblock-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.dayblock-head > div { display: flex; flex-direction: column; }
.dayblock-head b { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }
.dayblock-head span:not(.badge):not(.daynum) { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.daynum { font-family: var(--mono); font-weight: 600; font-size: 22px; line-height: 1; background: var(--ink); color: var(--ground); padding: 8px 10px; border-radius: 8px; }
.dayblock.now .daynum { background: var(--orange); color: var(--orange-ink); }
@media (max-width: 640px) { .dayblock-head .btn { width: 100%; justify-content: center; margin-left: 0 !important; } }

/* ================================================================ TEMPLATES */
/* The name of a composer box, above its eyebrow */
.block-title { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.01em; font-weight: 700; }

/* =============================================================== TAG BARS */
.tagbars { display: grid; gap: 5px; }
.tagbar { display: flex; align-items: center; gap: 12px; border: 0; padding: 4px 0; color: var(--dim); }
.tagbar:hover { color: var(--ink); }
.tagbar-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; width: 104px; flex: none; }
.tagbar-t { flex: 1; height: 8px; border-radius: 4px; background: var(--ground-2); box-shadow: var(--sh-inset); overflow: hidden; }
.tagbar-t i { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.tagbar.on .tagbar-t i { background: var(--orange); }
.tagbar-n { font-family: var(--mono); font-size: 10px; width: 30px; text-align: right; flex: none; }
.tagbar.on .tagbar-k, .tagbar.on .tagbar-n { color: var(--orange); font-weight: 700; }
@media (max-width: 560px) { .tagbar-k { width: 78px; font-size: 8px; } }

/* ======================================================= HABITAT TERMINAL */
.term { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--gutter); align-items: start; }
@media (max-width: 820px) { .term { grid-template-columns: minmax(0, 1fr); } }
.whoami { display: grid; gap: 8px; position: sticky; top: 16px; }
.whoami form { margin: 0; }
.whoami button { width: 100%; flex-direction: column; align-items: flex-start; gap: 2px; padding: 13px 12px; text-align: left; margin: 0; }
.whoami button b { font-size: 13px; letter-spacing: 0.02em; }
.whoami button em { font-style: normal; font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; }
.whoami button.on { background: var(--orange); color: var(--orange-ink); box-shadow: var(--sh-orange); }
.whoami button.on:hover { background: var(--orange); color: var(--orange-ink); }
@media (max-width: 820px) { .whoami { grid-template-columns: repeat(3, 1fr); position: static; } .whoami button { align-items: center; text-align: center; } }

/* ================================================================= GRAPHS */
.graph { margin-bottom: 20px; }
.graph:last-child { margin-bottom: 0; }
.graph-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px; }
.graph-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.graph-label i { width: 12px; height: 3px; display: block; border-radius: 2px; }
.graph-stat { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-left: auto; }
.graph-svg { display: block; width: 100%; height: auto; color: var(--ink); border-radius: var(--r-sm); background: var(--well); box-shadow: var(--sh-inset); }
.graph-axis { font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em; fill: currentColor; opacity: 0.55; }
.graph-axis.now { fill: var(--orange); opacity: 1; font-weight: 700; }

/* ======================================================= MARS!PLATZ LANDING */
/* The page is lit from above: the top of the ground is a shade paler than
   the band the mission data sits on. */
body.landing { padding-top: 0; overflow-x: clip;
  background: linear-gradient(180deg, #ececed 0, var(--ground) 420px); }
:root[data-theme="dark"] body.landing { background: linear-gradient(180deg, #202023 0, var(--ground) 420px); }
body.landing .shell { padding-bottom: 0; }

/* The masthead: the wordmark, its line, and the readings on the right. */
.masthead {
  max-width: 1300px; margin: 0 auto; padding: 54px var(--gutter) 30px;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px;
}
.wordmark {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(44px, 5.2vw, 72px); line-height: 0.95; letter-spacing: -0.045em; color: var(--ink);
}
.wordmark .bang { color: var(--orange); }
.tagline { margin: 12px 0 0; font-size: 13px; color: var(--dim); max-width: none; }
.tagline b { font-weight: 500; color: var(--ink); }
/* the run, named plainly under the wordmark */
.run-dates { margin: 8px 0 0; white-space: nowrap; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.run-dates b { color: var(--orange); font-weight: 700; }

/* About · What this is · Who we are: three buttons in a row under the
   masthead. Each opens its text in a pop-up over the page — a raised slab on
   a dimmed ground, closed by its ×, by Escape, or by pressing the ground. */
.about-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 var(--gutter); }
.about-top .fold-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 14px 18px; margin: 0;
  text-align: left; cursor: pointer; font: inherit; text-transform: none; letter-spacing: 0; color: var(--ink);
  border-radius: var(--r); box-shadow: var(--sh-raise), inset 0 1px 0 var(--edge);
}
.about-top .fold-btn::before {
  content: "+"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--orange); color: var(--orange-ink); font-family: var(--mono); font-size: 13px; font-weight: 700; line-height: 1;
}
.about-top .fold-btn .fold-title { font-family: var(--display); font-size: 15px; letter-spacing: -0.01em; font-weight: 700; }
.about-top .fold-btn .fold-sub { margin-left: auto; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); text-align: right; }
.about-top .fold-btn:hover { transform: translateY(-1px); }
.about-top .fold-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (max-width: 900px) { .about-top { grid-template-columns: minmax(0, 1fr); gap: 8px; } .about-top .fold-btn .fold-sub { display: none; } }

dialog.popup {
  width: min(860px, calc(100vw - 32px)); max-height: min(86vh, 900px); margin: auto; padding: 0; border: 0;
  border-radius: var(--r-lg); background: linear-gradient(180deg, var(--raise), var(--raise-2)); color: var(--ink);
  box-shadow: var(--sh-raise-lg), inset 0 1px 0 var(--edge); overflow: hidden; display: none; flex-direction: column;
}
dialog.popup[open] { display: flex; }
dialog.popup::backdrop { background: rgba(20, 20, 22, 0.55); backdrop-filter: blur(3px); }
dialog.reset-dialog { width: min(580px, calc(100vw - 32px)); }
dialog.reset-dialog #reset-word { font-family: var(--mono); letter-spacing: 0.2em; font-size: 16px; }
.popup-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--rule); flex: none; }
.popup-head .fold-title { font-family: var(--display); font-size: 20px; letter-spacing: -0.01em; font-weight: 700; }
.popup-head .fold-sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.popup-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.popup-close {
  margin-left: auto; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--well); box-shadow: var(--sh-inset); color: var(--ink); font-size: 0; line-height: 1; letter-spacing: 0; display: grid; place-items: center;
}
.popup-close svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.popup-close:hover { color: var(--orange); }
.popup-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.popup-body { padding: 6px 24px 24px; overflow: auto; -webkit-overflow-scrolling: touch; }
.popup-body .prose h3 { margin: 22px 0 6px; font-size: 15px; }
@media (max-width: 760px) {
  dialog.popup { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .popup-head { padding: 14px 14px 12px 18px; }
  .popup-body { padding: 4px 18px 20px; }
}

/* The readings: a row of small pills, the link LED first, the theme switch last. */
.status { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.status-cell {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px;
  border-radius: 20px; background: var(--well); box-shadow: var(--sh-inset);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
  white-space: nowrap;
}
.status-cell b { color: var(--ink); font-weight: 600; }
.status-cell .you { color: var(--orange); }
.status form { margin: 0; display: inline-flex; }
.status .theme button { min-height: 30px; padding: 0 12px; font-size: 9px; border-radius: 20px; gap: 8px; }
/* The language switch as one pill holding three buttons — the theme
   switch's twin: the same raised slab, the same type, the current language
   in orange. */
.status .lang {
  display: inline-flex; align-items: stretch; min-height: 30px; padding: 0 4px;
  border-radius: 20px; background: linear-gradient(180deg, var(--raise), var(--raise-2));
  box-shadow: var(--sh-raise-sm), inset 0 1px 0 var(--edge);
}
.status .lang button {
  min-height: 0; padding: 0 8px; border: 0; border-radius: 20px; background: none; box-shadow: none; transform: none;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); cursor: pointer;
}
.status .lang button:hover, .status .lang button:active { color: var(--ink); background: none; box-shadow: none; transform: none; }
.status .lang button.on { color: var(--orange); font-weight: 700; }
.status .lang button:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

/* ------------------------------------------------------------------ portal */
/* The composer device on the left, the board screen on the right, the
   station's name spelled down the outer left, the run's days down the outer
   right. Both columns share one height; the board scrolls inside it. */
.portal-grid {
  position: relative;
  display: grid; gap: var(--gutter); align-items: stretch;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr);
  margin: 6px 0 0;
}
.portal-main { min-width: 0; display: flex; flex-direction: column; }

/* Spelled down the margin, letter by letter */
.portal-letters {
  position: absolute; left: calc(var(--gutter) * -1.6); top: 30px;
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0; color: var(--faint); text-transform: uppercase;
  pointer-events: none; user-select: none;
}
/* The nine days of the run, today marked */
.day-rail {
  position: absolute; right: calc(var(--gutter) * -1.7); top: 70px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--faint);
}
.day-rail span { position: relative; padding: 5px 0; line-height: 1; }
.day-rail span.past { color: var(--dim); }
.day-rail span.now {
  color: var(--ground); background: var(--ink); border-radius: 5px; padding: 4px 5px; margin: 1px 0; font-weight: 700;
}
:root[data-theme="dark"] .day-rail span.now { color: var(--screen); background: var(--on-screen); }
.day-rail i { width: 1px; height: 12px; background: var(--rule-hard); display: block; }
.day-rail i.past { background: var(--orange); }
.day-rail .day-rail-cap { writing-mode: vertical-rl; margin-top: 10px; letter-spacing: 0.24em; font-size: 8px; }
@media (max-width: 1420px) { .portal-letters, .day-rail { display: none; } }

/* ------------------------------------------------------------------ device */
.device {
  position: relative; padding: 78px 34px 32px; flex: 1 1 auto;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fbfbfb, var(--raise-2));
  box-shadow: var(--sh-raise-lg), inset 0 1px 0 var(--edge);
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), box-shadow 500ms ease;
  display: flex; flex-direction: column;
}
:root[data-theme="dark"] .device { background: linear-gradient(180deg, #2b2b30, var(--raise-2)); }
.device.sending { box-shadow: 0 3px 3px rgba(0,0,0,.05), 0 30px 60px rgba(0,0,0,.14), 0 90px 140px rgba(0,0,0,.16), inset 0 1px 0 var(--edge); }

/* the hardware */
.dev-led {
  position: absolute; left: 32px; top: 18px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb27f, var(--orange) 55%, var(--orange-deep));
  box-shadow: 0 0 0 3px rgba(255,106,26,.12), 0 0 10px rgba(255,106,26,.55);
}
.device.sending .dev-led { animation: led 1.1s ease-in-out infinite; }
@keyframes led { 50% { box-shadow: 0 0 0 5px rgba(255,106,26,.18), 0 0 18px rgba(255,106,26,.9); } }
.dev-grip {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 96px; height: 26px;
  border-radius: 0 0 9px 9px;
  background: repeating-linear-gradient(90deg, #d24d0e 0 2px, #ff7a2e 2px 6px);
  box-shadow: 0 3px 6px rgba(0,0,0,.2), inset 0 -3px 0 rgba(0,0,0,.14);
}
.dev-vents {
  position: absolute; right: 30px; top: 16px; width: 40px; height: 28px;
  background: repeating-linear-gradient(90deg, var(--rule-hard) 0 1.5px, transparent 1.5px 7px);
}
.dev-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: -32px 0 22px; position: relative; z-index: 1;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint);
}
.dev-chip {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; font-weight: 700; color: var(--ink);
  padding: 5px 12px; border-radius: 8px; background: var(--well); box-shadow: var(--sh-inset); white-space: nowrap;
}
.dev-chan { margin-left: auto; }

/* the writing surface */
.composer .msgbox textarea {
  width: 100%; min-height: 240px; resize: none; border-radius: 14px; padding: 22px 26px 34px;
  font-size: 17px; line-height: 1.6; background: var(--well);
  box-shadow: var(--sh-inset), inset 0 -40px 60px -30px rgba(0,0,0,.03);
}
.composer .msgbox .counter { right: 20px; bottom: 16px; }
.composer .tagbar { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.composer .tagbar .lbl { line-height: 28px; }
.composer .tagbar .lbl { font-size: 9px; color: var(--faint); margin-right: 8px; flex: none; }
.composer .tagbar .tags { flex: 1 1 0; min-width: 0; }
.composer hr { margin: 26px 0 22px; }
.composer .dev-foot { display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex-wrap: wrap; }
.composer .dev-foot .note { margin: 0; font-style: italic; }
.composer button.primary { border-radius: 12px; padding: 16px 44px; font-size: 12.5px; letter-spacing: 0.24em; font-weight: 700; }
button.primary:active { transform: translateY(2px); }

/* ------------------------------------------------------------------- board */
.feed-col { display: flex; flex-direction: column; min-width: 0; }
.feed-wrap { position: relative; flex: 1 1 auto; min-height: 600px; }
.feed-scroll { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; }
/* The filters sit at the foot of the screen, under the scrolling field. */
.feed-filter { display: flex; flex-wrap: wrap; gap: 6px; flex: none; padding-top: 14px; border-top: 1px solid var(--screen-rule); }
.feed-filter .chip {
  min-height: 26px; padding: 5px 11px; font-size: 8.5px; margin: 0;
  background: transparent; color: var(--on-screen-dim); box-shadow: inset 0 0 0 1px var(--screen-rule);
}
.feed-filter .chip:hover { color: var(--on-screen); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.feed-filter .chip.active { background: var(--on-screen); color: var(--screen); box-shadow: none; }
.feed-filter .chip.mine { color: var(--orange); box-shadow: inset 0 0 0 1px rgba(255,106,26,.6); }
.feed-filter .chip.mine.active { background: var(--orange); color: var(--orange-ink); box-shadow: var(--sh-orange); }
.feed-filter .chip .chip-count { display: inline-block; min-width: 16px; padding: 1px 5px; border-radius: 9px; background: var(--orange); color: var(--orange-ink); font-size: 8px; text-align: center; letter-spacing: 0; }
.feed-filter .chip.mine.active .chip-count { background: var(--orange-ink); color: var(--orange); }
.feed-filter[hidden], .feed-foot[hidden], .board .feed-foot[hidden], .board .feed-note[hidden], .feed-filter .chip .chip-count[hidden], .feed-note[hidden] { display: none; }

.board { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 26px 28px 18px; }
/* The board is a pale slab like the composer beside it, not dark glass. Its
   child rules are written against the on-screen tokens, so those are remapped
   here to ink on the slab — callsigns and replies keep their orange. Under
   the dark theme the slab tokens are already dark, so it follows the page. */
.screen.board {
  --on-screen: var(--ink);
  --on-screen-dim: var(--dim);
  --screen-rule: var(--rule);
  --screen: var(--ground);            /* text on an active (ink) chip */
  background: linear-gradient(180deg, var(--raise), var(--raise-2));
  color: var(--ink);
  box-shadow: var(--sh-raise-lg), inset 0 1px 0 var(--edge);
}
:root[data-theme="dark"] .screen.board { --screen: var(--raise); }
.board .feed-filter .chip:hover { box-shadow: inset 0 0 0 1px var(--rule-hard); }
.board .card .card-body { font-size: 15px; }
.board .card .card-reply p { font-size: 15px; }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--screen-rule); }
.board-head h2 { margin: 0; font-size: 16px; color: var(--on-screen); letter-spacing: -0.01em; }
.board .live { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--on-screen-dim); white-space: nowrap; }
.board .live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff3b30; margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 6px #ff3b30; animation: live-pulse 2.4s ease-in-out infinite; }
.board .live.stale::before { background: transparent; box-shadow: none; border: 1px solid var(--on-screen-dim); animation: none; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.feed-note { margin: 8px 0 0; flex: none; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--orange); padding: 8px 10px; border: 1px dashed rgba(255,106,26,.5); border-radius: 8px; }

.board .scroller { flex: 1 1 auto; min-height: 0; max-height: none; margin: 0 0 12px; padding: 0; border-radius: 0; box-shadow: none; background: transparent; }
.board .scroller::-webkit-scrollbar-thumb { background: var(--orange); }
.board .scroller { scrollbar-color: var(--orange) transparent; }
.board .cards { display: block; padding: 0; }
.board .card {
  background: transparent; box-shadow: none; border-radius: 0; margin: 0; width: 100%;
  border-bottom: 1px solid var(--screen-rule); padding: 14px 0 15px; transform: none; overflow: visible;
}
.board .card:hover { transform: none; box-shadow: none; }
.board .card .card-top { padding: 0; }
.board .card .cs { color: var(--orange); font-size: 8.5px; }
.board .card .card-day, .board .card .card-sent, .board .card .tagrow, .board .card .card-foot { display: none; }
.board .card .card-state { margin-left: auto; background: transparent; border: 0; padding: 0; color: var(--on-screen-dim); font-size: 8.5px; letter-spacing: 0.16em; }
.board .card .card-state.warn { color: var(--orange); }
.board .card .card-body { padding: 8px 0 0; color: var(--on-screen); font-size: 14px; line-height: 1.5; }
.board .card .card-tags { padding: 6px 0 0; color: var(--on-screen-dim); }
.board .card .card-reply { margin: 7px 0 0; padding: 0; background: transparent; }
.board .card .card-reply .who { display: none; }
.board .card .card-reply p { color: var(--orange); font-size: 14px; }
.board .card .card-reply p::before { content: "✧ "; }
.board .card.fresh { box-shadow: none; }
.board .card .badge.new { display: none; }
.board .empty { border-color: var(--screen-rule); color: var(--on-screen-dim); margin-top: 14px; }
.feed-scroll .empty { display: grid; place-items: center; }
.board .feed-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--screen-rule); font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-screen-dim); flex: none; }
.feed .card.is-hidden { display: none; }
.feed .card[data-pending]:not(.is-listed) { display: none; }

@media (max-width: 980px) {
  .portal-grid { grid-template-columns: minmax(0, 1fr); }
  .feed-wrap { min-height: 0; }
  .feed-scroll { position: static; }
  .board .scroller { max-height: 60vh; }
}

/* ---------------------------------------------------- the writing surface */
.composer .msgbox { position: relative; }
.composer .msgbox .counter { position: absolute; right: 20px; bottom: 16px; pointer-events: none; }
.composer .tags-note { display: none; }

/* While a message crosses, the writing form stays in the box — invisible
   and inert — so the box keeps exactly the size it had; the dial is laid
   over it. */
.dev-stage { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }
.composer.ghost { visibility: hidden; pointer-events: none; }
.dev-stage .transit-block { position: absolute; inset: 0; overflow: hidden; }

/* ---------------------------------------------------------------- crossing */
/* The transmission as a dial: a dark screen behind glass, Earth at the foot,
   Mars at the head, the message crossing on an arc. */
.transit-block { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 34px; align-items: center; flex: 1 1 auto; }
.xdial { width: 100%; height: auto; display: block; }
.xdial-wrap { position: relative; }
.xdial-bezel { fill: url(#bezelGrad); }
.xdial-face { fill: url(#faceGrad); }
.xdial-grid { stroke: rgba(255,255,255,.055); stroke-width: 1; }
.xdial-ring { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 1; }
.xdial-screw { fill: #0b0b0d; stroke: rgba(255,255,255,.12); stroke-width: 1; }
.xdial-route { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1.2; stroke-dasharray: 3 5; }
.xdial-trail { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255,106,26,.6)); }
.xdial-earth { fill: #d9ecff; stroke: #9cc7f2; stroke-width: 2; }
.xdial-mars { fill: var(--orange); stroke: rgba(255,140,80,.5); stroke-width: 6; }
.xdial-mars-halo { fill: none; stroke: var(--orange); stroke-width: 1; opacity: 0; transform-origin: center; animation: waiting 2.6s ease-out infinite; }
@keyframes waiting { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.xdial-packet { fill: #fff; stroke: var(--orange); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(255,120,40,.9)); }
.xdial-label { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: 0.12em; fill: rgba(242,242,239,.9); text-transform: uppercase; }   /* the worlds' names large on the face (8 October) */
.xdial-label.mars { fill: var(--orange); text-transform: none; letter-spacing: 0.04em; }   /* MARS!platz, as it is written */
.xdial-word { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.3em; fill: var(--orange); text-anchor: middle; text-transform: uppercase; }
.transit.done .xdial-word { fill: #d9ecff; }
.transit.done .xdial-trail { filter: none; }
.transit-read { min-width: 0; overflow: hidden; }
.transit .tbar { height: 8px; border-radius: 4px; background: var(--ground-2); box-shadow: var(--sh-inset); overflow: hidden; margin-bottom: 18px; }
.transit .tbar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--orange-deep), var(--orange)); box-shadow: 0 0 10px rgba(255,106,26,.5); transition: width 200ms linear; }
@media (max-width: 760px) { .transit-block { grid-template-columns: minmax(0, 1fr); gap: 22px; } .xdial { max-width: 300px; margin: 0 auto; } }
.transit.closed .clock { font-size: clamp(30px, 4.6vw, 48px); }
.transit.closed .state { color: var(--orange); font-weight: 700; }

/* --------------------------------------------------------------- sections */
.bigsec { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.8vw, 38px); margin: 4px 0; letter-spacing: -0.03em; }
.sechead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin: calc(var(--gutter) * 1.6) 0 var(--gutter); }
.sechead .secsub { font-size: 9.5px; letter-spacing: 0.24em; color: var(--dim); }

/* The lower band: everything from the daily plan to the resources sits a
   shade lower than the portal, bleeding to the viewport edges. */
body.landing .foot { margin-top: 44px; margin-bottom: 44px; }

/* ================================================================ DASHBOARD */
/* Everything below the landing fold, on the lower band, dense: headline
   figures, the run as a strip, then one twelve-column grid of panels of
   fixed height that scroll inside themselves. */
.dash {
  margin: calc(var(--gutter) * 2) calc(50% - 50vw) 0;
  padding: 34px calc(50vw - 50%) 44px;
  background: var(--ground-2);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04), inset 0 24px 40px -30px rgba(0,0,0,.10);
}
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-head .bigsec { margin: 0; font-size: 22px; }
.dash-sub { margin: 4px 0 0; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); max-width: none; }
.dash-clock { text-align: right; font-family: var(--mono); display: flex; align-items: baseline; gap: 10px; }
.dash-clock-label { font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.dash-clock b { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }

/* Headline figures */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.kpi {
  padding: 10px 14px 9px; border-radius: 10px; min-width: 0;
  background: linear-gradient(180deg, var(--raise), var(--raise-2));
  box-shadow: var(--sh-raise-sm), inset 0 1px 0 var(--edge);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
}
.kpi-label { font-family: var(--mono); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value { font-family: var(--mono); font-size: 20px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.kpi-value em { font-style: normal; font-size: 9px; letter-spacing: 0.12em; color: var(--dim); margin-left: 5px; text-transform: uppercase; }
.kpi-sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--dim); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.warn .kpi-value { color: var(--orange); }
.kpi .dot { width: 6px; height: 6px; }

/* The run as a strip of days */
.run-strip { display: flex; gap: 4px; margin-bottom: 10px; padding: 0 2px; }
.run-strip > div { flex: 1 1 0; display: flex; align-items: center; gap: 6px; min-width: 0; }
.run-strip i { display: block; flex: 1; height: 4px; border-radius: 2px; background: var(--rule-hard); }
.run-strip .past i { background: var(--ink); }
.run-strip .now i { background: var(--orange); box-shadow: 0 0 0 2px var(--orange-soft), 0 2px 8px rgba(255,106,26,.45); }
.run-strip .run-n { font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; color: var(--dim); }
.run-strip .now .run-n { color: var(--orange); font-weight: 700; }
.run-strip .run-d { display: none; }

/* The grid */
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.dpanel {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0; border-radius: 12px;
  background: linear-gradient(180deg, var(--raise), var(--raise-2));
  box-shadow: var(--sh-raise-sm), inset 0 1px 0 var(--edge);
}
.dpanel.h-1 { height: 380px; }
.dpanel.h-2 { height: 250px; }
.dpanel.h-3 { height: 330px; }
.dpanel-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex: none;
  padding: 10px 14px 8px; border-bottom: 1px solid var(--rule);
}
.dpanel-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dpanel-code { font-family: var(--mono); font-size: 8px; letter-spacing: 0.2em; color: var(--orange); font-weight: 700; }
.dpanel-title h3 { margin: 0; font-size: 12.5px; letter-spacing: -0.01em; white-space: nowrap; }
/* A panel whose title is a door to its own page */
.dpanel-title h3 a { color: inherit; text-decoration: none; }
.dpanel-title h3 a:hover { color: var(--orange); }
.dpanel-arrow { color: var(--orange); font-weight: 400; }
.dpanel-more { flex: none; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; }
.dpanel-more .btn { font-size: 9.5px; }
.dpanel-meta { font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dpanel-body { padding: 10px 14px 12px; flex: 1 1 auto; min-width: 0; min-height: 0; }
.dpanel.scroll .dpanel-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule-hard) transparent; }
.dpanel.scroll .dpanel-body::-webkit-scrollbar { width: 6px; }
.dpanel.scroll .dpanel-body::-webkit-scrollbar-thumb { background: var(--rule-hard); border-radius: 3px; }
.dpanel .rows { border-top: 0; }
.dpanel .row { padding: 6px 0; gap: 10px; }
.dpanel .row .t { font-size: 10px; min-width: 38px; }
.dpanel .row .m b { font-size: 12.5px; }
.dpanel .row .m span { font-size: 11px; line-height: 1.35; }
.dpanel .row:last-child { border-bottom: 0; }
.dpanel .row.active { margin: 0 -8px; padding: 6px 8px; }
.dpanel .empty { min-height: 90px; padding: 16px; font-size: 9px; }
/* The run's last day where a day had its mission or its schedule (14 October: the performance closes at 10:00, the day
   has no mission, no blogs, no schedule; the habitat open to visitors 15:00–17:00) — the day in two sentences, read as
   a note rather than an empty slot (layout.js, lastDayNote) */
.last-day-note { margin: 0; padding: 16px 18px; border: 1.5px solid var(--mars); border-radius: var(--r); font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }

/* Habitat, compact */
.dpanel .hbt { margin: 0; }
.dpanel .hbt .tile { box-shadow: var(--sh-inset); background: var(--well); padding: 12px 14px; border-radius: 10px; }
.dpanel .hbt .tile h3 { font-size: 12.5px; }
.dpanel .hbt .sub { font-size: 9px; }
.dpanel .hbt .bento { gap: 8px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dpanel .hbt .t-co2 { grid-column: 1 / 3; grid-row: 1 / 3; }
.dpanel .hbt .t-temp { grid-column: 3; grid-row: 1 / 3; }
.dpanel .hbt .t-hum { grid-column: 4; grid-row: 1; }
.dpanel .hbt .t-pres { grid-column: 4; grid-row: 2; }
.dpanel .hbt .t-steps { grid-column: 5 / 7; grid-row: 1 / 3; }   /* the calories consumed above it are no longer kept (October) */
/* the third row: the air quality index, the volatile organic compounds, the light */
.dpanel .hbt .t-iaq { grid-column: 1 / 3; grid-row: 3; }
.dpanel .hbt .t-voc { grid-column: 3 / 5; grid-row: 3; }
.dpanel .hbt .t-light { grid-column: 5 / 7; grid-row: 3; }
.dpanel .hbt .t-iaq svg, .dpanel .hbt .t-voc svg, .dpanel .hbt .t-light svg { max-width: 420px; }
.dpanel .hbt .t-iaq .verdict { margin-top: 2px; }
.dpanel .hbt .aux { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dpanel .hbt .aux .t-res, .dpanel .hbt .aux .t-days, .dpanel .hbt .aux .t-pwr { grid-column: auto; grid-row: auto; }

/* Trends: every trend on one graph — the last fifteen days, a smooth line
   per series on its own 0–100 scale, a point a day, today at the right.
   The legend beneath is a row of chips: press to switch a line off, hover to
   lift it above the rest. */
.hbt .bento.aux { margin-top: 8px; }
.tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.trends { display: flex; flex-direction: column; gap: 12px; }
.tchart { border-radius: 12px; background: var(--well); box-shadow: var(--sh-inset); padding: 14px 16px 8px; min-width: 0; position: relative; }
.tchart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tgrid { stroke: var(--rule); stroke-width: 1; }
.tgrid.base { stroke: var(--rule-hard); }
.ttoday { fill: var(--orange); opacity: .06; }
.tcurve { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tpt { stroke-width: 2; }
.tseries { transition: opacity .15s ease; }
.taxis-t { font-family: var(--mono); font-size: 9px; fill: var(--dim); letter-spacing: 0.04em; }
.taxis-t.today { fill: var(--orange); font-weight: 700; }
.tlegend.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.tlegend-group { flex-basis: 100%; margin-top: 6px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.tlegend-group:first-child { margin-top: 0; }
.tchip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 11px 4px 9px; border-radius: 20px;
  background: var(--well); box-shadow: var(--sh-inset); color: var(--ink);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: none; font-weight: 500; cursor: pointer;
}
.tchip:hover { transform: none; box-shadow: var(--sh-inset), inset 0 0 0 1px var(--rule-hard); color: var(--ink); }
.tchip i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tchip b { font-weight: 700; }
.tchip span { color: var(--dim); }
.tchip.off { opacity: .45; text-decoration: line-through; }
.tchip.off i { background: var(--faint) !important; }
.tchip.none { opacity: .5; cursor: default; }
.tchip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.tnote { min-height: 0; padding: 14px 16px; margin: 0 0 4px; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 12px; line-height: 1.5; }
@media (max-width: 760px) {
  .tchart { padding: 10px 8px 6px; }
  .tchart-svg.narrow .taxis-t { font-size: 15px; }
  .tchart-svg.narrow .tcurve { stroke-width: 2.5; }
  .tchart-svg.narrow .tpt { stroke-width: 2.5; }
  /* the panel's long subtitle wraps under the title instead of colliding with it */
  .dpanel-head { flex-wrap: wrap; }
  .dpanel-meta { flex-basis: 100%; text-align: left; white-space: normal; line-height: 1.5; }
}
:root[data-theme="dark"] .tchart { background: var(--well); }

/* Compact habitat: smaller tiles, the stores as a bank of cells */
.dpanel.compact .dpanel-body { padding: 8px 10px 10px; }
.dpanel.compact .hbt .bento { gap: 6px; }
.dpanel.compact .hbt .tile { padding: 9px 12px; border-radius: 8px; }
.dpanel.compact .hbt .tile h3 { font-size: 11.5px; }
.dpanel.compact .hbt .sub { font-size: 8px; }
.dpanel.compact .hbt .dial-wrap { min-height: 150px; }
.dpanel.compact .hbt .dial-wrap svg { max-width: 100%; width: 100%; }
.dpanel.compact .hbt .dial-center .big { font-size: 34px; }
.dpanel.compact .hbt .ruler-row { min-height: 96px; gap: 8px; }
.dpanel.compact .hbt .ruler-num .big { font-size: 22px; }
.dpanel.compact .hbt .ruler-wrap { width: 30px; }
.dpanel.compact .hbt .lvl .big, .dpanel.compact .hbt .spk .big { font-size: 19px; }
.dpanel.compact .hbt .lvl svg, .dpanel.compact .hbt .spk svg { margin-top: 4px; }
.dpanel.compact .hbt .verdict { font-size: 9.5px; margin-top: 2px; }
.dpanel.compact .hbt .t-fig .fig-row { margin-top: 4px; gap: 10px; }
.dpanel.compact .hbt .t-fig .big { font-size: 19px; }
.dpanel.compact .hbt .t-fig .fig-spark { max-width: 200px; height: 30px; }
.dpanel.compact .hbt .t-fig .verdict { font-size: 9px; }
.dpanel.compact .hbt .drow { padding: 3px 0; }
.dpanel.compact .hbt .note { margin-top: 6px; padding: 7px 10px; font-size: 10.5px; }
.dpanel.compact .hbt > .empty { min-height: 44px; padding: 10px; }

.gauges.rounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px 6px; margin-top: 8px; }
.gauge.round { display: grid; justify-items: center; gap: 3px; padding: 0; background: transparent; box-shadow: none; border-radius: 0; min-width: 0; }
.gauge.round svg { width: 64px; height: 64px; display: block; }
.round-track { fill: none; stroke: var(--ground-2); stroke-width: 6; }
:root[data-theme="dark"] .round-track { stroke: rgba(255,255,255,.08); }
.round-arc { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.gauge.round.low .round-arc { stroke: var(--orange); }
.round-num { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: var(--ink); text-anchor: middle; letter-spacing: -0.02em; }
.gauge.round.low .round-num { fill: var(--orange); }
.round-unit { font-family: var(--mono); font-size: 6px; letter-spacing: 0.08em; fill: var(--dim); text-anchor: middle; text-transform: uppercase; }
.cell-name { font-family: var(--mono); font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-align: center; line-height: 1.25; max-width: 100%; }
.dpanel .hbt .dial-wrap { min-height: 170px; }
.dpanel .hbt .dial-wrap svg { max-width: 230px; }
.dpanel .hbt .dial-center .big { font-size: 38px; }
.dpanel .hbt .t-fig .fig-row { margin-top: 14px; }
.dpanel .hbt .t-fig .fig-spark { max-width: 220px; height: 44px; }
@media (max-width: 1100px) {
  .dpanel .hbt .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dpanel .hbt .t-co2, .dpanel .hbt .t-temp, .dpanel .hbt .t-fig, .dpanel .hbt .t-days, .dpanel .hbt .t-res,
  .dpanel .hbt .t-hum, .dpanel .hbt .t-pres, .dpanel .hbt .t-iaq, .dpanel .hbt .t-voc, .dpanel .hbt .t-light { grid-column: span 2; grid-row: auto; }
  .dpanel .hbt .t-hum, .dpanel .hbt .t-pres, .dpanel .hbt .t-iaq, .dpanel .hbt .t-voc, .dpanel .hbt .t-light { grid-column: span 1; }
  /* The resources row keeps the whole width: nine gauges wrap in threes. */
  .dpanel .hbt .bento.aux { grid-template-columns: minmax(0, 1fr); }
  .dpanel .hbt .aux .t-res, .dpanel .hbt .aux .t-pwr { grid-column: 1 / -1; }
  .gauges.rounds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dpanel .hbt .dial-wrap { min-height: 150px; }
.dpanel .hbt .dial-wrap svg { max-width: 210px; }
.dpanel .hbt .dial-center .big { font-size: 34px; }
.dpanel .hbt .ruler-row { min-height: 130px; gap: 10px; }
.dpanel .hbt .ruler-num .big { font-size: 28px; }
.dpanel .hbt .ruler-wrap { width: 40px; }
.dpanel .hbt .lvl .big, .dpanel .hbt .spk .big { font-size: 24px; }
.dpanel .hbt .lvl svg, .dpanel .hbt .spk svg { margin-top: 8px; }
.dpanel .hbt .verdict { font-size: 11px; margin-top: 3px; }
.dpanel .hbt .drow { padding: 5px 0; gap: 10px; }
.dpanel .hbt .dkey { width: 90px; }
.dpanel .hbt .dkey .k { font-size: 11.5px; }
.dpanel .hbt .dkey .v { font-size: 9px; }
.dpanel .hbt .daxis .dkey { width: 90px; }
.dpanel .hbt .note { margin-top: 8px; padding: 9px 12px; font-size: 11.5px; border-radius: 8px; }
.dpanel .hbt > .empty { min-height: 60px; }
/* the crew's figures as small tiles inside the bento */
.dpanel .hbt .t-fig { grid-column: span 2; }
.fig-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 8px; }
.fig-row .big { font-size: 24px; flex: none; }
.fig-spark { width: 46%; max-width: 170px; height: 36px; display: block; flex: 1 1 auto; overflow: visible; color: var(--ink); }
.t-fig .verdict { font-size: 10px; margin-top: 5px; }

/* Charts */
.dpanel .graph { margin: 0; }
.dpanel .graph-head { margin-bottom: 4px; }
.dpanel .graph-label { font-size: 8.5px; }
.dpanel .graph-stat { font-size: 8px; }
.dpanel .graph-svg { max-height: 170px; }

/* Stores */
.dpanel .gauges.strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
.dpanel .gauge-head { margin-bottom: 5px; }
.dpanel .gauge-name { font-size: 8px; }
.dpanel .gauge-val { font-size: 14px; }
.dpanel .gauge-val em { font-size: 8px; }
.dpanel .gauge-track { height: 5px; }
.dpanel .gauge-foot { margin-top: 4px; font-size: 7.5px; }

/* Galley */
.meals { display: grid; gap: 0; }
.meal { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.meal:first-child { padding-top: 2px; }
.meal:last-child { border-bottom: 0; }
.meal-slot { font-family: var(--mono); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); }
.meal b { font-size: 12.5px; letter-spacing: -0.01em; line-height: 1.3; }
.meal-figs { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--dim); }
/* under the meals: the hours the kitchen meter is read for each (the watt hours above come from it) */
.meal-hours { margin: 8px 0 0; font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em; color: var(--dim); line-height: 1.5; }

/* Crew, as rows */
.officers { display: grid; gap: 8px; }
.officer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px; align-items: center; min-width: 0;
  padding: 10px 12px; border-radius: 10px; background: var(--well); box-shadow: var(--sh-inset);
}
.officer-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.officer-id b { font-family: var(--display); font-size: 12.5px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.officer-role { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.officer .badge { font-size: 7.5px; padding: 3px 8px; }
.officer-axes { display: grid; gap: 5px; min-width: 0; grid-column: 1 / -1; }
.axis-mini { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 8px; font-family: var(--mono); font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.axis-mini span:last-child { text-align: right; }
.axis-mini .bar { height: 5px; }
.officer-note { grid-column: 1 / -1; font-size: 11px; color: var(--dim); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Crew log: filter, then a scrolling list */
.dpanel.h-3 .dpanel-body { display: flex; flex-direction: column; min-height: 0; }
.log-filter { border-top: 0; padding-top: 0; margin-bottom: 8px; flex: none; }
.log-filter .chip { background: var(--well); color: var(--dim); box-shadow: inset 0 0 0 1px var(--rule-hard); min-height: 22px; padding: 3px 9px; font-size: 8px; }
.log-filter .chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.log-filter .chip.active { background: var(--ink); color: var(--ground); box-shadow: var(--sh-raise-sm); }
:root[data-theme="dark"] .log-filter .chip.active { background: var(--on-screen); color: var(--screen); }
.log-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--rule-hard) transparent; }
.log-day { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.log-day-head { grid-column: 1 / -1; }
@media (max-width: 1100px) { .log-day { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .log-day { grid-template-columns: minmax(0, 1fr); } }
.log-scroll::-webkit-scrollbar { width: 6px; }
.log-scroll::-webkit-scrollbar-thumb { background: var(--rule-hard); border-radius: 3px; }
.log-day-head { display: flex; gap: 10px; align-items: baseline; padding: 6px 0 4px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); position: sticky; top: 0; background: var(--raise); z-index: 1; }
.log-day-head .cs { color: var(--ink); font-weight: 700; white-space: nowrap; }
.log-day-head > span { white-space: nowrap; }
.log-day-head .count { white-space: normal; }
@media (max-width: 700px) { .log-day-head { flex-wrap: wrap; gap: 4px 10px; } .log-day-head .count { flex-basis: 100%; } }
.log-entry { box-shadow: var(--sh-inset); background: var(--well); border-radius: 8px; margin-bottom: 6px; }
.log-entry:hover { transform: none; box-shadow: var(--sh-inset); }
.log-entry .card-top { padding: 8px 12px 0; font-size: 7.5px; }
.log-entry .card-day { text-transform: uppercase; }
.log-entry .card-body { padding: 5px 12px 9px; font-size: 12px; line-height: 1.45; white-space: pre-line; }

/* The three daily blogs under the trend graph — Daily Mission Report, Health
   Report, Commander Log. Each panel shows the current day's post and
   nothing else. It is as tall as that post, up to a limit, and the post
   scrolls inside the panel from there. The three share a row, so they stand
   at the height of the fullest. */
.dpanel.h-4 { max-height: 540px; }
.blogp .dpanel-body { display: flex; flex-direction: column; min-height: 0; }
/* a long title (the German one is) keeps its line: the code never wraps, the
   day beside it gives way first, and only then is the title cut short */
.blogp .dpanel-code { white-space: nowrap; flex: none; }
.blogp .dpanel-title { flex-shrink: 0; max-width: 100%; }
.blogp .dpanel-title h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The post is read where it stands, by scrolling: nothing in a panel is a
   link, so there is nothing to click into and back out of. The scroller says
   that it scrolls — the orange bar of the message board, and the text fading
   out at the foot while there is more below — and it takes the keyboard.
   Two pixels at the sides keep the card's edge from being clipped. */
.blog-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -2px; padding: 2px 6px 0 2px; scrollbar-width: thin; scrollbar-color: var(--orange) transparent; outline: none; }
.blog-scroll::-webkit-scrollbar { width: 8px; }
.blog-scroll::-webkit-scrollbar-track { background: transparent; }
.blog-scroll::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 6px; }
.blog-scroll:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; border-radius: 6px; }
/* the fade is a mask on the scroller itself, so it takes whatever ground the
   panel has, light or dark, and shows nothing when the whole post fits */
.blog-scroll { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
.blog-scroll > :last-child { margin-bottom: 26px; }   /* the fade falls on this, never on the end of the post */
.blogp .log-entry { margin: 0 0 6px; }
.blogp .log-entry .card-body { padding: 11px 13px 12px; font-size: 13px; line-height: 1.55; }
/* a picture keeps to the text's measure, however wide the panel gets — and
   is shown, not linked: it does not open another page */
.blogp .entry-figure { margin: 10px 0; border-radius: 8px; max-width: 500px; }
/* nothing written for the day yet: a low dashed well — which fills the panel
   when a neighbour in the same row has a post and the row is tall */
.blogp .dpanel-body > .empty { flex: 1 1 auto; min-height: 90px; display: flex; align-items: center; justify-content: center; text-align: center; }
@media (max-width: 1100px) and (min-width: 701px) {
  /* two to a row at this width: the third takes the whole row rather than half */
  #blog-commander { grid-column: span 6; }
}
@media (max-width: 700px) {
  /* on a phone the limit is most of the screen */
  .dpanel.h-4 { max-height: 74vh; max-height: 74dvh; }
  .blog-scroll { -webkit-overflow-scrolling: touch; }
}
@media print {
  .dpanel.h-4 { max-height: none; }
  .blog-scroll { overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* The whole mission as thirteen day cards, one per day of the run */
.days-strip { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; align-items: start; }
.dcard { border-radius: 10px; background: var(--well); box-shadow: var(--sh-inset); min-width: 0; }
.dcard.now { box-shadow: var(--sh-inset), 0 0 0 1.5px var(--orange); }
.dcard.ahead { opacity: 0.7; }
.dcard > summary { list-style: none; cursor: pointer; padding: 9px 11px; display: grid; gap: 2px; }
.dcard > summary::-webkit-details-marker { display: none; }
.dcard-n { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ink); }
.dcard.now .dcard-n { color: var(--orange); }
.dcard-date { font-family: var(--mono); font-size: 8.5px; color: var(--dim); }
.dcard-state { font-family: var(--mono); font-size: 7px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-top: 3px; }
.dcard.now .dcard-state { color: var(--orange); }
.dcard-count { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.06em; color: var(--dim); }
.dcard-body { padding: 0 11px 10px; border-top: 1px solid var(--rule); }
.dcard-task { display: flex; gap: 6px; font-size: 10.5px; line-height: 1.3; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.dcard-task span { font-family: var(--mono); font-size: 9px; color: var(--dim); flex: none; }
.dcard-task.done { color: var(--faint); text-decoration: line-through; }
.dcard-meals { font-size: 9.5px; color: var(--dim); padding-top: 6px; line-height: 1.35; }
.dcard-notes { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 4px; }
.dcard-note { font-size: 10px; line-height: 1.35; padding: 4px 0; color: var(--ink); }
.dcard-note span { display: block; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 1px; }
.dcard-note.anomaly span { color: var(--orange); }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .span-3 { grid-column: span 3; } .span-4, .span-5 { grid-column: span 3; } .span-6, .span-8, .span-12 { grid-column: span 6; }
  .days-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .dash { padding-top: 26px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .span-3, .span-4, .span-5, .span-6, .span-8, .span-12 { grid-column: span 1; }
  .dpanel.h-1, .dpanel.h-2, .dpanel.h-3 { height: auto; max-height: none; }
  .dpanel.h-3.linked { max-height: 74vh; max-height: 74dvh; }
  .dpanel.h-3.linked .dpanel-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .days-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-clock { text-align: left; }
}

/* The sensor dials (older markup, kept) */
.dials { flex: 1 1 auto; align-content: center; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 26px 14px; margin-bottom: 14px; }
.dial { text-align: center; min-width: 0; }
.dial svg { width: min(100%, 148px); height: auto; display: block; margin: 0 auto; }
.dial-track { fill: none; stroke: var(--rule); stroke-width: 7; }
.dial-arc { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.dial.alert .dial-arc { stroke: var(--orange); }
.dial-num { font-family: var(--mono); font-weight: 600; font-size: 22px; fill: var(--ink); text-anchor: middle; }
.dial.alert .dial-num { fill: var(--orange); }
.dial.dead .dial-num { fill: var(--dim); }
.dial-unit { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--dim); margin-top: 5px; text-transform: uppercase; }
.dial-foot { display: flex; justify-content: center; gap: 6px; align-items: center; margin-top: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--dim); }
.dial-label { font-size: 10.5px; color: var(--dim); margin-top: 3px; }
.crewrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.crewrow .crewwho { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crewrow .crewwho b { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; }
.crewrow .crewwho span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; }

/* Resources as one slim strip inside the panel */
.gauges.strip { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px 28px; }
.gauges.strip .gauge { box-shadow: none; padding: 0; background: transparent; border-radius: 0; }
.gauges.strip .gauge-foot { font-size: 8.5px; }

/* ===================================================== HABITAT DASHBOARD */
.hbt { margin-bottom: var(--gutter); }
.hbt .bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hbt .tile { padding: 22px 24px; position: relative; overflow: hidden; min-width: 0; }
.hbt .tile h3 { font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; margin: 0 0 2px; }
.hbt .sub { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.06em; }
.hw-in-habitat { margin-top: 18px; }
.hw-in-habitat .hw-head h3 { margin: 0 0 2px; font-size: 15px; }
.hw-in-habitat .hw-head .sub { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.06em; }
.hbt .t-co2 { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.hbt .t-temp { grid-column: span 1; grid-row: span 2; display: flex; flex-direction: column; }
.hbt .t-hum { grid-column: span 1; }
.hbt .t-pres, .hbt .t-iaq, .hbt .t-voc, .hbt .t-light { grid-column: span 1; }
.hbt .t-days { grid-column: span 4; }
.hbt .big { font-family: var(--mono); font-weight: 400; letter-spacing: -0.04em; line-height: 0.92; font-variant-numeric: tabular-nums; }
.hbt .big em { font-style: normal; font-size: 0.34em; font-weight: 400; letter-spacing: 0; color: var(--dim); margin-left: 0.18em; }
.hbt .verdict { font-size: 13px; color: var(--dim); margin-top: 6px; }
.hbt .hot { color: var(--orange) !important; }
.hbt .dial-wrap { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-height: 230px; }
.hbt .dial-wrap svg { width: 100%; max-width: 320px; height: auto; display: block; }
.hbt .dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.hbt .dial-center .big { font-size: 58px; }
.hbt .ruler-row { flex: 1; display: flex; align-items: center; gap: 16px; min-height: 200px; }
.hbt .ruler-num { flex: 1; }
.hbt .ruler-num .big { font-size: 42px; }
.hbt .ruler-wrap { width: 56px; align-self: stretch; }
.hbt .ruler-wrap svg { width: 100%; height: 100%; display: block; }
.hbt .lvl .big, .hbt .spk .big { font-size: 38px; }
.hbt .lvl svg, .hbt .spk svg { width: 100%; display: block; margin-top: 14px; }
.hbt .drows { margin-top: 10px; }
.hbt .drow { display: flex; align-items: center; gap: 16px; padding: 9px 0; border-top: 1px solid var(--rule); }
.hbt .drow:first-child { border-top: 0; }
.hbt .dkey { width: 108px; flex: none; }
.hbt .dkey .k { display: block; font-size: 13px; }
.hbt .dkey .v { display: block; font-family: var(--mono); font-size: 10px; color: var(--dim); letter-spacing: 0.02em; margin-top: 2px; }
.hbt .dplot { flex: 1; min-width: 0; }
.hbt .dplot svg { display: block; width: 100%; }
.hbt .daxis { display: flex; gap: 16px; padding-top: 5px; }
.hbt .daxis .dkey { width: 108px; flex: none; }
.hbt .dticks { flex: 1; min-width: 0; display: flex; }
.hbt .dtick { flex: 1 1 0; min-width: 0; text-align: center; font-family: var(--mono); font-size: 9.5px; color: var(--dim); white-space: nowrap; overflow: hidden; }
.hbt .dtick.today { color: var(--orange); }
.hbt .dtick .mo { display: block; font-size: 8.5px; opacity: 0.75; }
.hbt .note { margin-top: 14px; padding: 14px 22px; border-radius: var(--r); background: var(--well); box-shadow: var(--sh-inset); font-size: 13px; color: var(--dim); }
.hbt .note.alert { box-shadow: var(--sh-inset), inset 0 0 0 1.5px var(--orange); color: var(--ink); }
.hbt .note b { color: var(--ink); font-weight: 500; }
.hbt > .empty { min-height: 160px; }
@media (max-width: 880px) {
  .hbt .bento { grid-template-columns: repeat(2, 1fr); }
  .hbt .t-co2, .hbt .t-temp, .hbt .t-days { grid-column: span 2; grid-row: span 1; }
  .hbt .ruler-row { min-height: 150px; }
}
@media (max-width: 520px) {
  .hbt .bento { grid-template-columns: 1fr; }
  .hbt .t-co2, .hbt .t-temp, .hbt .t-hum, .hbt .t-pres, .hbt .t-iaq, .hbt .t-voc, .hbt .t-light, .hbt .t-days { grid-column: span 1; }
  .hbt .dkey, .hbt .daxis .dkey { width: 74px; }
  .hbt .dtick { font-size: 8.5px; }
  .hbt .dtick .mo { display: none; }
  .hbt .dial-center .big { font-size: 48px; }
}

/* Crew log: three voices, three columns */
.log-day .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .log-day .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .log-day .cards { grid-template-columns: minmax(0, 1fr); } }

/* Crew: the officer panels */
.crew-name { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.01em; }

/* ============================================================ LANDING: FOLDS */
.mday, .fold { margin-bottom: 12px; }
.mday > summary, .fold > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 16px 20px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.mday > summary::-webkit-details-marker, .fold > summary::-webkit-details-marker { display: none; }
.mday > summary::before, .fold > summary::before {
  content: "+"; font-family: var(--mono); font-size: 13px; width: 24px; height: 24px; border-radius: 50%;
  display: inline-grid; place-items: center; color: var(--orange); font-weight: 700;
  background: var(--well); box-shadow: var(--sh-inset);
}
.mday[open] > summary::before, .fold[open] > summary::before { content: "−"; }
.mday > summary .cs { color: var(--orange); font-weight: 700; }
.mday > summary .mday-n { margin-left: auto; letter-spacing: 0.08em; }
.mday.ahead { opacity: 0.72; }
.mday.now { box-shadow: var(--sh-raise), 0 0 0 1.5px var(--orange), inset 0 1px 0 var(--edge); }
.mday > .rows, .mday > .note, .mday > .empty { margin: 0 20px 18px; }
.mday > .empty { padding: 16px; }
.fold > summary .fold-title { font-family: var(--display); font-size: 17px; letter-spacing: -0.01em; color: var(--ink); font-weight: 700; text-transform: none; }
.fold > summary .fold-sub { margin-left: auto; letter-spacing: 0.1em; }
.fold-body { padding: 6px 22px 22px; border-top: 1px solid var(--rule); }
.fold-body .prose h3 { margin: 22px 0 6px; font-size: 15px; }
@media (max-width: 700px) { .fold > summary .fold-sub, .mday > summary .mday-n { margin-left: 0; width: 100%; padding-left: 34px; } }

/* ======================================================= MISSION CONTROL */
.control .queue { margin-bottom: calc(var(--gutter) * 1.5); }
.control .sechead { margin-top: var(--gutter); }
.control .sechead .waiting { display: inline-block; min-width: 22px; padding: 2px 8px; border-radius: 11px; text-align: center; background: var(--orange); color: var(--orange-ink); font-size: 11px; letter-spacing: 0; margin-right: 6px; }
.control .queue-new { display: flex; align-items: center; gap: 12px; }
.control .queue-new .btn { margin-left: auto; }
.control .queue-new[hidden] { display: none; }
.control .msg { padding: 18px 20px 16px; margin-bottom: 14px; }
.control .msg.pending { box-shadow: var(--sh-raise), inset 4px 0 0 var(--orange), inset 0 1px 0 var(--edge); }
.control .msg.rejected { opacity: 0.72; }
.control .msg-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; }
.control .msg-top .cs { color: var(--orange); font-weight: 700; letter-spacing: 0.14em; }
.control .msg-top .msg-meta { margin-left: auto; letter-spacing: 0.08em; }
.control .msg .quoted { margin: 12px 0; max-width: none; }
.control .msg .reply { margin: 0; }
/* The reply box is never allowed to collapse: at least four lines tall
   whatever the script measures, and a plain framed field with its label. */
.control .msg .reply-box { min-height: 112px; height: auto; resize: vertical; overflow: auto; font-size: 16px; line-height: 1.55; padding: 12px 14px; }
.control .msg .reply-label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--c-text, var(--ink)); }
.control .msg .reply-bar { margin-top: 10px; }
.control .msg.pending .reply-box { box-shadow: var(--sh-inset), 0 0 0 1px var(--orange); }
.control .msg .reply-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.control .msg .reply-bar select { width: auto; min-width: 170px; }
.control .msg .reply-bar .primary { font-weight: 700; }
.control .msg .reply-count { order: 9; margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--dim); font-variant-numeric: tabular-nums; }   /* the answer's characters against its five hundred (8 October) */
.control .msg .reply-count.is-full { color: var(--orange); font-weight: 700; }
.control .msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.control .msg-actions form { display: inline-flex; margin: 0; }
.control .msg-actions .spacer { flex: 1 1 auto; }
.control button.small { padding: 6px 10px; min-height: 0; font-size: 9px; }
.control .work { border-top: 1px solid var(--rule); padding-top: 4px; }
.control .daypick { margin-bottom: 10px; }
.control .daypick a { padding: 9px 10px; }
.control .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--gutter); }
.control .tabs a {
  font-family: var(--display); font-size: 14px; letter-spacing: -0.01em; font-weight: 700;
  padding: 12px 18px; border-radius: 14px; color: var(--dim); border: 0;
  background: var(--well); box-shadow: inset 0 0 0 1px var(--rule-hard);
}
.control .tabs a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.control .tabs a.on { background: var(--ink); color: var(--ground); box-shadow: var(--sh-raise-sm); }
.control .tabs.officer-bar { margin: 4px 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.control .tabs.officer-bar a { font-size: 15px; padding: 14px 22px; display: inline-flex; align-items: center; gap: 10px; }
.control .tabs a .waiting { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 10px; text-align: center; background: var(--orange); color: var(--orange-ink); font-family: var(--mono); font-size: 10px; letter-spacing: 0; }
.control .queue { margin-bottom: calc(var(--gutter) * 1.2); padding-bottom: var(--gutter); border-bottom: 1px solid var(--rule); }
:root[data-theme="dark"] .control .tabs a.on { background: var(--on-screen); color: var(--screen); }
.control .tab-pane { display: none; }
.control .tab-pane.on { display: block; }
.control .tab-note { max-width: 64ch; margin-bottom: var(--gutter); }
.control .actions .note { font-size: 11px; }
@media (max-width: 700px) {
  .control .msg-top .msg-meta { margin-left: 0; width: 100%; }
  .control .msg .reply-bar .primary { flex: 1 1 100%; }
  .control .tabs a { flex: 1 1 45%; text-align: center; }
}

/* ===================================================================== MOBILE */
@media (max-width: 760px) {
  .masthead { padding-top: 34px; }
  .status { width: 100%; justify-content: flex-start; }
  .dev-stage .transit-block { position: static; }
  .dev-stage .composer.ghost { display: none; }
  .device { padding: 48px 16px 18px; }
  .dev-head { margin-top: -14px; }
  /* The composer, compact: writing and the board sit together on a phone —
     a comfortable box to type in, the tags one thumb-scrollable row, the
     note short, TRANSMIT full width, and the Message Board directly under
     it rather than a whole screen of scrolling away. */
  .composer .msgbox textarea { min-height: 132px; padding: 16px 16px 32px; font-size: 16px; }
  .composer button.primary { width: 100%; justify-content: center; }
  .composer .tagbar { margin-top: 14px; }
  .composer .tagbar .lbl { flex-basis: 100%; line-height: 1; }
  .composer .tagbar .tags { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .composer .tagbar .tags::-webkit-scrollbar { display: none; }
  .composer .tagbar .tags label { flex: none; }
  .composer hr { margin: 14px 0 12px; }
  .composer .dev-foot { gap: 10px; }
  .composer .dev-foot .note { font-size: 11px; line-height: 1.45; }
  .portal-grid { gap: 10px; }
  .board { padding: 20px 18px 14px; }
  .board .scroller { max-height: 62vh; }
  .dayplan { padding: 16px; }
  .dp-inner { padding: 14px 16px; }
}

/* ------------------------------------------------------------ crew log page */
/* Every day so far, newest first, each with what the three officers wrote.
   The strip at the top is the run's days: a count per day, today marked, days
   ahead dimmed and not links. */
.logpage-top { padding: 30px 0 18px; }
.logpage-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--gutter); }
.logpage-strip a, .logpage-strip > span {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 8px 10px;
  border-radius: 12px; background: linear-gradient(180deg, var(--raise), var(--raise-2)); box-shadow: var(--sh-raise-sm), inset 0 1px 0 var(--edge);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); text-decoration: none; position: relative;
}
.logpage-strip b { color: var(--ink); font-weight: 700; font-size: 10px; }
.logpage-strip i { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center;
  background: var(--orange); color: var(--orange-ink); font-style: normal; font-size: 8.5px; letter-spacing: 0; font-weight: 700; }
.logpage-strip .quiet i { background: var(--faint); }
.logpage-strip a:hover { transform: translateY(-1px); box-shadow: var(--sh-raise), inset 0 1px 0 var(--edge); }
.logpage-strip a.now { box-shadow: inset 0 0 0 2px var(--orange), var(--sh-raise-sm); }
.logpage-strip a.now b { color: var(--orange); }
.logpage-strip > span.ahead { opacity: .45; box-shadow: var(--sh-inset); background: var(--ground); }
.logpage-filter { border-top: 0; padding-top: 0; margin-bottom: var(--gutter); }
.logpage-filter .chip { color: var(--dim); box-shadow: inset 0 0 0 1px var(--rule-hard); }
.logpage-filter .chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.logpage-filter .chip.active { background: var(--ink); color: var(--ground); box-shadow: none; }
:root[data-theme="dark"] .logpage-filter .chip.active { background: var(--on-screen); color: var(--screen); }
.logpage-days { display: flex; flex-direction: column; gap: 14px; }
.logpage-day {
  padding: 14px 16px 12px; border-radius: var(--r);
  background: linear-gradient(180deg, var(--raise), var(--raise-2)); box-shadow: var(--sh-raise), inset 0 1px 0 var(--edge);
  scroll-margin-top: 90px; gap: 10px;
}
.logpage-day .log-day-head { position: static; background: transparent; padding: 0 0 10px; margin-bottom: 2px; border-bottom: 1px solid var(--rule); font-size: 9px; }
.logpage-day .log-day-head .cs { font-size: 12px; }
.logpage-day .log-day-head .now { color: var(--orange); font-weight: 700; }
.logpage-day .log-day-head .count { margin-left: auto; }
.logpage-strip a.quiet i { background: var(--faint); }
.logpage-day .log-entry { margin-bottom: 0; }
.logpage-day .log-entry .card-body { font-size: 14.5px; line-height: 1.6; }
.logpage-quiet { grid-column: 1 / -1; }
@media (max-width: 760px) { .logpage-top { padding-top: 18px; } .logpage-strip a, .logpage-strip > span { min-width: 56px; padding: 7px 8px; } }

  padding: 14px 16px 14px; border-radius: var(--r);
  background: linear-gradient(180deg, var(--raise), var(--raise-2)); box-shadow: var(--sh-raise), inset 0 1px 0 var(--edge);
  scroll-margin-top: 80px;
}

/* A crew-log slot not yet written: its cue, greyed, where the entry will go */
.log-entry.placeholder { background: var(--ground); box-shadow: var(--sh-inset), inset 0 0 0 1px var(--rule); }
.log-entry.placeholder .card-body { color: var(--dim); font-style: italic; }
.log-entry.placeholder .card-top .cs { color: var(--faint); }
.log-entry.placeholder .card-day { color: var(--orange); }

/* ------------------------------------------------------------------ media */
/* What the crew send out of the habitat. A tile is a preview on a dark
   ground with the caption beneath; a strip is a row of them, a grid a sheet. */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; grid-column: 1 / -1; }
.mstrip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; scrollbar-color: var(--rule-hard) transparent; }
.mstrip .mtile { flex: 0 0 200px; }
.mtile { display: flex; flex-direction: column; min-width: 0; border-radius: 10px; overflow: hidden; background: var(--well); box-shadow: var(--sh-inset); color: var(--ink); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.mtile:hover { transform: translateY(-2px); box-shadow: var(--sh-raise); }
.mtile-visual { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #101012; overflow: hidden; }
.mtile-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(242,242,239,.6); }
.media-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(16,16,18,.7); color: #fff; font-style: normal; font-size: 15px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.mtile-text { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; min-width: 0; }
.mtile-text b { font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mtile-text span { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtile.more .mtile-visual { background: var(--ground); }
.mtile.more .media-kind { color: var(--ink); font-size: 16px; letter-spacing: 0; }
.chip-gap { flex-basis: 100%; height: 0; }
a.chip { text-decoration: none; }

/* the media strip under a day on the crew log page */
.logpage-media { grid-column: 1 / -1; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--rule); }
.logpage-media-head { display: flex; gap: 6px; align-items: baseline; margin-bottom: 8px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.logpage-media-head span { color: var(--ink); font-weight: 700; margin-right: auto; }

/* one item, whole */
.mview { border-radius: var(--r-lg); background: #101012; box-shadow: var(--sh-screen); overflow: hidden; display: grid; place-items: center; min-height: 240px; margin-bottom: var(--gutter); }
.mview-img { max-width: 100%; max-height: 80vh; display: block; }
.mview-video { width: 100%; max-height: 80vh; display: block; background: #000; }
.mview-audio { width: min(100%, 720px); margin: 40px 20px; }
.mview-doc { width: 100%; height: 80vh; border: 0; background: #fff; }
.mview-note { grid-column: 1 / -1; color: rgba(242,242,239,.55); margin: 0 16px 12px; }
.mview-kv dd.mono { font-family: var(--mono); font-size: 11px; word-break: break-all; }
.mview-top .actions { flex-wrap: wrap; }

/* ------------------------------------------------- control: media tab */
.media-form { display: flex; flex-direction: column; gap: 12px; }
.media-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 20px; border-radius: 12px; border: 2px dashed var(--rule-hard); background: var(--well); cursor: pointer; text-align: center; }
.media-drop.over { border-color: var(--orange); background: var(--orange-soft); }
.media-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.media-drop b { font-size: 15px; }
.media-drop span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.media-fields label { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.media-fields input, .media-fields select { font-size: 14px; }
.media-progress { display: flex; flex-direction: column; gap: 6px; }
.media-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; }
.media-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-row-size, .media-row-state { color: var(--dim); }
.media-row.ok .media-row-state { color: var(--ink); }
.media-row.err .media-row-state { color: var(--orange); }
.media-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--ground); box-shadow: var(--sh-inset); overflow: hidden; }
.media-bar i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .15s linear; }
.media-row-done { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; padding-top: 6px; }
.media-list { display: flex; flex-direction: column; gap: 14px; margin-top: var(--gutter); }
.media-day .log-day-head { position: static; background: transparent; padding-bottom: 8px; border-bottom: 1px solid var(--rule); margin-bottom: 10px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.media-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: linear-gradient(180deg, var(--raise), var(--raise-2)); box-shadow: var(--sh-raise-sm), inset 0 1px 0 var(--edge); min-width: 0; }
.media-card.hidden-item { opacity: .6; }
.media-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #101012; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-edit { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.media-edit label { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.media-edit textarea { min-height: 52px; font-size: 13px; }
.media-edit select { font-size: 13px; }
.media-meta { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--dim); }
.media-meta b { color: var(--ink); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-sha { color: var(--faint); }
.media-hide { margin: 0; }
@media (max-width: 760px) { .mstrip .mtile { flex-basis: 160px; } .mgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .media-grid { grid-template-columns: minmax(0, 1fr); } }
.mtile-visual .media-play ~ .media-kind, .mtile-visual .media-kind:not(:only-child) { position: absolute; left: 10px; bottom: 8px; }
.media-thumb .media-kind:not(:only-child) { position: absolute; left: 10px; bottom: 8px; }
/* media attached to a crew-log entry: a row of tiles under the text */
.entry-media { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.entry-media .mstrip .mtile { flex-basis: 150px; }
.entry-media .mtile-text b { font-size: 11px; }
/* files attached to a blog entry, in the control forms */
.attach { display: flex; flex-direction: column; gap: 6px; }
.attach-pick { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; border: 1.5px dashed var(--rule-hard); background: var(--well); cursor: pointer; }
.attach-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attach-pick b { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.attach-pick .attach-chosen { margin-left: auto; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.attach input[type=text] { font-size: 13px; }
.slot-media { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.slot-media a { display: grid; place-items: center; width: 64px; height: 48px; border-radius: 6px; overflow: hidden; background: #101012; color: rgba(242,242,239,.6); font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.slot-media a img { width: 100%; height: 100%; object-fit: cover; }
.slot-media .slot-media-more { width: auto; height: auto; background: transparent; color: var(--dim); padding: 0 4px; text-decoration: underline; }

/* ------------------------------------------------------ entries as posts */
/* A crew-log entry: paragraphs, with photographs, video and sound set in
   between them at full width. Tiles elsewhere carry nothing beneath them. */
.entry-post { white-space: normal; }
.entry-post p { margin: 0 0 0.9em; }
.entry-post p:last-child { margin-bottom: 0; }
.entry-figure { margin: 12px 0; border-radius: 10px; overflow: hidden; background: #101012; white-space: normal; font-size: 0; line-height: 0; }
.entry-figure figcaption, .entry-figure .entry-doc { font-size: 12.5px; line-height: 1.45; }
.entry-figure:first-child { margin-top: 2px; }
.entry-figure:last-child { margin-bottom: 0; }
.entry-figure a { display: block; }
.entry-figure img, .entry-figure video { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: #101012; }
.entry-figure audio { display: block; width: 100%; padding: 14px; box-sizing: border-box; }
.entry-figure .entry-doc { display: block; padding: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242,242,239,.7); }
.entry-figure .entry-doc a { color: var(--orange); }
.entry-figure figcaption { padding: 8px 12px 10px; font-family: var(--sans); font-size: 12.5px; line-height: 1.45; color: rgba(242,242,239,.75); background: #101012; }
.mtile-dur { position: absolute; right: 8px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(16,16,18,.7); color: #fff; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; }
.attach-hint { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--faint); line-height: 1.5; }
.attach-hint code { font-family: inherit; color: var(--dim); }
.slot-insert { position: relative; display: grid; place-items: center; width: 72px; height: 54px; padding: 0; border-radius: 6px; overflow: hidden; background: #101012; color: rgba(242,242,239,.6); font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: none; }
.slot-insert img { width: 100%; height: 100%; object-fit: cover; }
.slot-insert i { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; background: rgba(16,16,18,.75); color: #fff; font-style: normal; font-size: 7.5px; letter-spacing: 0.14em; text-align: center; }
.slot-insert:hover { transform: none; box-shadow: inset 0 0 0 2px var(--orange); }
.entry-figure img { max-height: none; object-fit: fill; }

/* ------------------------------------------------------ the entry composer */
/* The entry as it will be read: a column of paragraphs and pictures with a
   ＋ between every two. Everything is touch-sized; the one orange button is
   the one that matters. */
.ed-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; }
.ed { display: flex; flex-direction: column; gap: 8px; border-radius: 12px; }
.ed.over { outline: 2px dashed var(--orange); outline-offset: 4px; }
.ed-blocks { display: flex; flex-direction: column; }
.ed-block { position: relative; }
.ed-block-text .ed-text { width: 100%; min-height: 56px; padding: 12px 88px 12px 14px; border-radius: 10px; font-size: 14.5px; line-height: 1.55; resize: none; overflow: hidden; }
.ed-block-media { border-radius: 10px; background: var(--well); box-shadow: var(--sh-inset); overflow: hidden; }
.ed-figure { position: relative; display: grid; place-items: center; background: #101012; min-height: 120px; max-height: 360px; overflow: hidden; }
.ed-figure img, .ed-figure video { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.ed-figure audio { width: calc(100% - 40px); margin: 30px 20px; }
.ed-kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(242,242,239,.6); padding: 40px; }
.ed-caption { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.ed-caption input { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.ed-caption-state { flex: none; min-width: 52px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-align: right; }
.ed-caption a { flex: none; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.ed-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; }
.ed-tools button { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 8px; font-size: 12px; letter-spacing: 0; display: grid; place-items: center; background: var(--raise); box-shadow: var(--sh-raise-sm); }
.ed-block-media .ed-tools button { background: rgba(16,16,18,.72); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.ed-tools .ed-remove:hover { background: var(--orange); color: var(--orange-ink); }
.ed-uploading .ed-figure { min-height: 90px; }
.ed-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 10px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; }
.ed-progress .media-bar { grid-column: 1 / -1; }
.ed-progress-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-progress-state { color: var(--dim); }
.ed-failed .ed-progress-state { color: var(--orange); }
@media (max-width: 760px) { .ed-block-text .ed-text { padding-right: 14px; } .ed-tools { position: static; justify-content: flex-end; padding: 4px 0 0; } }
@media (max-width: 760px) { .run-dates { white-space: normal; line-height: 1.6; } }

/* ======================================================= mission control */
/* Mission control is a desk, not a stage: flat white panels with a hairline
   border, black on white, one typeface size that reads across a room, and
   one colour kept for the button that publishes, the open tab, the count of
   messages waiting and what has been edited — blue since 14 October ("in the
   Control page, replace the Orange theme with a blue button theme"; orange
   until then: the station's orange is redefined here, so every rule below
   that draws in it draws in blue). Everything else control does in grey. */
body.control {
  --c-bg: #f3f3f2; --c-panel: #ffffff; --c-line: #d9d9d6; --c-line-soft: #ebebe8; --c-text: #161616; --c-muted: #666; --c-faint: #9a9a97;
  --c-field: #ffffff; --c-quoted: #fafaf9; --c-bar: #f6f7f7; --c-hover: #f0f0ee; --c-face: #f3f1ee; --c-line-strong: #8c8f94; --c-on-text: #ffffff; --c-bad: #b00; --c-edit: #eef1ff;
  --orange: #2f45e8; --orange-deep: #2236c9; --orange-soft: rgba(47,69,232,.12); --orange-ink: #ffffff; --mars: var(--orange);   /* the desk's blue, the landing page's cobalt */
  /* Every face on this page is Open Sans: the three font stacks are
     redefined here, so headings, labels, codes and reading matter all follow. */
  --display: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--c-bg); color: var(--c-text); font-size: 15px; font-family: var(--sans);
}
/* the same desk in the dark: every grey drawn from these, so nothing on the page is left white */
:root[data-theme="dark"] body.control {
  --c-bg: #141416; --c-panel: #1f1f22; --c-line: #35363c; --c-line-soft: #2a2b30; --c-text: #ececea; --c-muted: #a5a5ab; --c-faint: #6e6e75;
  --c-field: #17171a; --c-quoted: #26262a; --c-bar: #26262a; --c-hover: #2d2d32; --c-face: #2d2d32; --c-line-strong: #6b6c74; --c-on-text: #141416; --c-bad: #ff7b6b; --c-edit: #1b2042;
  --orange: #4a5ef5; --orange-deep: #3a4ee6; --orange-soft: rgba(110,128,255,.18); --c-accent-text: #a3adff;   /* the dark desk's blue; a lighter one for words in it */
  color-scheme: dark;
}
body.control h1, body.control h2, body.control h3, body.control .bigsec, body.control .block-title, body.control .quoted, body.control .kv dd, body.control table, body.control .popup-head .fold-title { color: var(--c-text); }
body.control input, body.control select, body.control textarea, body.control button { font-family: var(--sans); }
body.control .shell { max-width: 1680px; }   /* wider on a big screen (14 October: "increase the width of the Mission control area on screen"; 1240 until then) */
/* surfaces: no gradients, no shadows */
body.control .panel, body.control .slab, body.control .card, body.control .msg, body.control .quoted,
body.control .ed-block-media, body.control .fold {
  background: var(--c-panel); box-shadow: none; border: 1px solid var(--c-line); border-radius: 8px;
}
body.control .panel { padding: 22px 22px 20px; }
body.control .panel > .chan, body.control .panel.mars-side > .chan { color: var(--c-faint); }
body.control .quoted { background: var(--c-quoted); }
/* type: bigger, plainer, no micro-caps */
body.control .eyebrow, body.control .lbl, body.control label.f > span, body.control .secsub,
body.control .media-meta, body.control .msg-top,
body.control .poles, body.control .axis-read, body.control .ed-caption-state, body.control .attach-hint, body.control .attach-pick b {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--c-muted); font-weight: 500;
}
body.control .eyebrow { margin-bottom: 12px; }
/* the tally — messages sent and visitors, mission control's own figures, on the archive (The tally): the two totals in
   a row, the days under them in the contents' table dress */
.tally { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 40px; margin: 0 0 14px; }
.tally-item { display: flex; align-items: baseline; gap: 10px; }
.tally-k { font-family: var(--display); font-size: 13px; font-weight: 500; color: var(--dim); }
.tally-n { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tally-sub { font-family: var(--display); font-size: 12.5px; color: var(--faint); }
.tally-days th.n { text-align: right; }
body.control .eyebrow::after { background: var(--c-line-soft); }
body.control h1 { font-size: 28px; letter-spacing: -0.02em; }
body.control .bigsec { font-size: 22px; }
body.control .msg-top .cs { color: var(--c-text); font-weight: 700; font-size: 14px; }
body.control .block-title { font-size: 22px; margin-bottom: 2px; }
/* the Habitat tab: each block's head — Schedule, Meals, Steps taken, the stores, Power,
   the gallery, the reset — in bold and large, like the block titles on the officer tabs */
body.control [data-pane="habitat"] .panel > .eyebrow { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--c-text); line-height: 1.25; margin-bottom: 16px; }
body.control [data-pane="habitat"] .panel > .eyebrow .fold-chev { font-size: 0; }
body.control .note, body.control .tab-note { font-size: 13.5px; color: var(--c-muted); }
body.control .row .m b { font-size: 15px; }
body.control .row .m span, body.control .row .t { font-size: 13px; }
/* fields: white, one line around them */
body.control input[type=text], body.control input[type=password], body.control input[type=number], body.control input[type=time],
body.control input[type=date], body.control textarea, body.control select, body.control .ed-block-text .ed-text {
  background: var(--c-field); box-shadow: none; border: 1px solid var(--c-line); border-radius: 6px; color: var(--c-text); font-size: 15px;
}
body.control textarea:focus, body.control input:focus, body.control select:focus, body.control .ed-text:focus { outline: 2px solid var(--c-text); outline-offset: -1px; }
body.control ::placeholder { color: var(--c-faint); font-style: normal; }
/* buttons: grey outline; the one that publishes is blue */
body.control button, body.control .btn, body.control .filters a, body.control .daypick a, body.control .chip, body.control .ed-tools button, body.control .attach-pick {
  background: var(--c-panel); box-shadow: none; border: 1px solid var(--c-line); color: var(--c-text); font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 500; border-radius: 6px; transform: none;
}
body.control button:hover, body.control .btn:hover, body.control .filters a:hover, body.control .daypick a:hover, body.control .ed-tools button:hover {
  background: var(--c-hover); color: var(--c-text); box-shadow: none; transform: none; border-color: var(--c-line-strong);
}
body.control button.primary, body.control .btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; box-shadow: none; }
body.control button.primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: #fff; box-shadow: none; }
body.control button.ghost, body.control button.danger { background: transparent; color: var(--c-muted); }
body.control button.danger:hover { background: var(--c-panel); color: var(--c-text); }
body.control .filters a.on, body.control .daypick a.on, body.control .chip.active { background: var(--c-text); color: var(--c-on-text); border-color: var(--c-text); }
body.control .filters a.on b { color: var(--c-on-text); }
body.control .filters a b { font-size: 13px; }
/* the editor's toolbar and tabs keep their own shape under the control rules */
body.control .ed-bar-add button { border: 1px solid var(--c-line-strong); border-radius: 3px; }
body.control .ed-bar-add button:hover { border-color: var(--c-text); background: var(--c-panel); }
body.control .ed-block-text .ed-text { border: 1px solid var(--c-line-soft); }
body.control .ed-block-text .ed-text:focus { border-color: var(--c-text); outline: 0; }
body.control textarea.ed-source { border: 0; }
body.control textarea.ed-source:focus { outline: 0; }
body.control .ed-block-media .ed-tools button { background: var(--c-panel); color: var(--c-text); box-shadow: none; }
body.control .ed-tools .ed-remove:hover { background: var(--c-panel); color: var(--c-bad); border-color: var(--c-bad); }
/* the tab bar: plain text with an underline on the open tab */
body.control .tabs.officer-bar { gap: 0; border-bottom: 1px solid var(--c-line); padding-bottom: 0; margin-bottom: 14px; }
body.control .tabs.officer-bar a {
  background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; box-shadow: none; margin-bottom: -1px;
  color: var(--c-muted); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 12px 16px;
}
body.control .tabs.officer-bar a:hover { color: var(--c-text); box-shadow: none; }
body.control .tabs.officer-bar a.on { color: var(--c-text); font-weight: 700; border-bottom-color: var(--c-text); background: transparent; }
body.control .tabs a .waiting, body.control .sechead .waiting { background: var(--orange); color: #fff; font-family: var(--sans); font-weight: 700; }
/* badges and states: outlined grey, no colour */
body.control .badge { background: var(--c-panel); border: 1px solid var(--c-line); color: var(--c-muted); font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; }
body.control .badge.mars, body.control .badge.ok { color: var(--c-text); border-color: var(--c-text); }
body.control .badge.warn { background: var(--c-panel); color: var(--c-bad); border-color: var(--c-bad); }
/* messages: the one waiting for a reply has a black edge, not orange */
body.control .msg.pending { box-shadow: none; border-left: 3px solid var(--c-text); }
body.control .msg.pending .reply-box { box-shadow: none; border: 2px solid var(--c-text); background: var(--c-field); }
body.control .msg .reply-box { border: 2px solid var(--c-line); background: var(--c-field); }
body.control .msg .reply-box:focus { border-color: var(--orange); outline: 0; }
body.control .flash { background: var(--c-panel); border: 1px solid var(--c-line); box-shadow: none; color: var(--c-text); }
/* the relay to space: its mark on every message (control/index.js, spaceMark) */
body.control .badge.space-sent { color: var(--orange); border-color: var(--orange); text-decoration: none; }
body.control .badge.space-sent:hover { background: var(--orange-soft); }
body.control .badge.space-wait { color: var(--c-muted); border-style: dashed; }
body.control .badge.space-dry { color: var(--c-text); border-style: dashed; }
body.control .badge.space-none { color: var(--c-faint); }
body.control .badge.space-bad { color: var(--c-bad); border-color: var(--c-bad); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
body.control .flash.err { color: var(--c-bad); border-color: var(--c-bad); }
body.control .work { border-top: 0; }
/* mood sliders: grey track, black thumb */
body.control input[type=range]::-webkit-slider-runnable-track { background: var(--c-line-soft); box-shadow: none; }
body.control input[type=range]::-moz-range-track { background: var(--c-line-soft); box-shadow: none; }
body.control input[type=range]::-webkit-slider-thumb { background: var(--c-text); box-shadow: none; }
body.control input[type=range]::-moz-range-thumb { background: var(--c-text); box-shadow: none; }
body.control .rows, body.control .row, body.control table th, body.control table td { border-color: var(--c-line-soft); }
/* the rail stays dark and thin; the page under it is plain */
body.control .ed-figure { border-radius: 0; }
body.control .ed-fig .ed-caption input { border-color: transparent; background: transparent; }
body.control .ed-fig .ed-caption input:focus { border-color: var(--c-line); outline: 0; }
body.control .ed-block-text .ed-text { padding-right: 96px; }
body.control .media-bar { background: var(--c-line-soft); box-shadow: none; }
body.control .media-bar i { background: var(--c-text); }
body.control button.small, body.control .btn.small { font-size: 12.5px; padding: 7px 12px; min-height: 34px; }
body.control .badge.warn { color: var(--c-text); border-color: var(--c-text); }
body.control .rail-cell.theme button { font-size: 10px; }
/* edits (control.js): a field holding something other than what the page was drawn with is marked in orange — the
   field, its row, its caption, the face chosen, the sheet — and the form's buttons say how many fields differ */
body.control input[type=text].is-edited, body.control input[type=number].is-edited, body.control input[type=time].is-edited,
body.control input[type=date].is-edited, body.control textarea.is-edited, body.control select.is-edited { border-color: var(--orange); background: var(--c-edit); box-shadow: inset 3px 0 0 var(--orange); }
body.control .msg textarea.reply-box.is-edited { border-color: var(--orange); }
body.control tr.is-edited > td:first-child, body.control tr.is-edited > th:first-child { box-shadow: inset 3px 0 0 var(--orange); }
body.control label.f.is-edited > span { color: var(--orange); }
body.control label.f.is-edited > span::after { content: " · edited"; font-weight: 700; }
body.control .fig-officer.is-edited .fig-officer-name { color: var(--orange); }
body.control .mood-face.is-edited { box-shadow: inset 0 0 0 2px var(--orange); }
body.control .mood-face.is-edited span::after { content: " · edited"; }
body.control .ed.is-edited { border-color: var(--orange); box-shadow: inset 3px 0 0 var(--orange); }
body.control .ed.is-edited .ed-foot::after { content: "Edited — not published"; color: var(--orange); font-weight: 700; }
body.control .ed.is-edited .ed-hint { display: none; }
body.control input[type=checkbox].is-edited { outline: 2px solid var(--orange); outline-offset: 2px; }
body.control .edits { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--orange); white-space: nowrap; }
body.control .edits::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
body.control .edits[hidden] { display: none; }
/* a meal chosen from the dropdown and not saved yet: said, but not in orange — a choice is not an edit */
body.control .edits.quiet { color: var(--c-muted); font-weight: 600; }
body.control .edits.quiet::before { background: var(--c-muted); }
body.control form.has-edits button.primary { box-shadow: 0 0 0 3px rgba(47,69,232,.32); }
/* an edit once saved stays marked (control_edit, routes/control.js): the same orange, without the unsaved tint */
body.control input[type=text].was-edited, body.control input[type=number].was-edited, body.control input[type=time].was-edited,
body.control textarea.was-edited, body.control select.was-edited { border-color: var(--orange); box-shadow: inset 3px 0 0 var(--orange); }
body.control label.f.was-edited > input, body.control label.f.was-edited > textarea { border-color: var(--orange); box-shadow: inset 3px 0 0 var(--orange); }
body.control label.f.was-edited > span { color: var(--orange); }
body.control label.f.was-edited > span::after { content: " · edited"; font-weight: 700; }
body.control tr.was-edited > td:first-child, body.control tr.was-edited > th:first-child { box-shadow: inset 3px 0 0 var(--orange); }
body.control .mood-face.was-edited { box-shadow: inset 0 0 0 2px var(--orange); }
body.control .mood-face.was-edited span::after { content: " · edited"; }
body.control form.was-edited .ed, body.control form.was-edited textarea.blog-box { border-color: var(--orange); box-shadow: inset 3px 0 0 var(--orange); }
body.control form.was-edited .ed .ed-foot::after { content: "Edited on this desk"; color: var(--orange); font-weight: 700; }
body.control form.was-edited .ed.is-edited .ed-foot::after { content: "Edited — not published"; }
body.control form.was-edited .ed .ed-hint { display: none; }
/* when the form was last saved, beside its button */
body.control .saved-at { font-size: 12.5px; color: var(--c-muted); white-space: nowrap; }
body.control .saved-at.saved-never { color: var(--c-faint); }
/* the tab bar: bold, larger, the open tab in blue */
body.control .tabs.officer-bar a { font-size: 17px; font-weight: 700; padding: 12px 18px; }
body.control .tabs.officer-bar a.on { color: var(--orange); border-bottom-color: var(--orange); font-weight: 700; }
/* in the dark the open tab is the same: its name in blue over a blue line — not the light box it stood in until 14 October */
:root[data-theme="dark"] body.control .tabs.officer-bar a.on { background: transparent; color: var(--c-accent-text); box-shadow: none; }
/* every block's head folds its block (control.js): a chevron at the right of the head, the block hidden while folded */
body.control .panel > .eyebrow, body.control .block-head, body.control .sechead { cursor: pointer; user-select: none; }
/* the chevron large and plain to see (14 October: "make the size of the arrow next to headings for collapse bigger" —
   a 12 px ▾ until then): drawn as a chevron 18 px across in the text's colour, in a round 30 px place of its own */
body.control .fold-chev { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; margin-left: 10px; border-radius: 50%;
  font-size: 0; line-height: 1; color: var(--c-text); background: var(--c-hover); vertical-align: middle; transition: transform .15s, background .15s; }
body.control .fold-chev::before { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
body.control .fold-head:hover .fold-chev { background: var(--orange-soft); color: var(--orange); }
body.control .is-folded > .fold-head .fold-chev { transform: rotate(-90deg); }
body.control .panel.is-folded > :not(.chan):not(.fold-head), body.control .queue.is-folded > :not(.fold-head) { display: none; }
body.control .fold-head:focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; }
body.control .fig-grid { gap: 0 12px; }
body.control .actions > form.theme { display: inline-flex; margin: 0; }
body.control .block-title .fold-chev { margin-left: 10px; }
body.control .block-state.draft { border-color: var(--c-line-strong); color: var(--c-text); font-weight: 600; }
/* the meals: each card named large; an added meal's × at the right of its name, its number small beside it */
body.control .slot-name { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--c-text); }
body.control .meal-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
body.control .meal-card-head .slot-name { margin-bottom: 4px; }
body.control .slot-n { font-size: 14px; font-weight: 600; color: var(--c-muted); margin-left: 2px; }
body.control .meal-remove { flex: none; min-height: 0; width: 28px; height: 28px; padding: 0; line-height: 1; font-size: 18px; border-radius: 50%; color: var(--c-muted); }
body.control .meal-remove:hover { color: var(--c-bad); border-color: var(--c-bad); }
/* what the kitchen meter read for the meal, under its name (data.mealsFor) — in orange while there is a figure */
body.control .meal-power { margin: 0 0 10px; font-size: 12.5px; color: var(--c-muted); }
body.control .meal-power b { color: var(--orange); font-weight: 700; }
body.control .meal-power.is-none { color: var(--c-faint); }
body.control .meal-add-row { margin: 4px 0 0; }
body.control .meal-add { font-weight: 600; }
/* the power block: every figure locked behind Edit, the figure and its keys on one line */
body.control .pw-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
body.control .pw-meter input[type=number] { flex: 1 1 110px; min-width: 0; }
body.control .pw-meter input[readonly] { color: var(--c-muted); background: var(--c-panel); }
/* the day's science mission: the day and its date on one line, the dropdown of the sheets under them */
body.control .mission-day { display: block; }
body.control .mission-day .mp-day { display: inline; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mars); margin-right: 10px; }
body.control .mission-day .mp-date { display: inline; font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--c-text); }
body.control .mission-day select { display: block; width: 100%; margin-top: 8px; }
/* the recipe book: a dropdown over each of Breakfast, Lunch and Dinner, the per-serving figures folded beneath */
body.control .recipe-pick { width: 100%; }
body.control .meal-slot-edit { min-width: 0; }
body.control .meal-recipe-figs { margin: 4px 0 12px; border: 1px solid var(--c-line); border-radius: 2px; padding: 0 12px; background: var(--c-panel); }
body.control .meal-recipe-figs > summary { cursor: pointer; padding: 10px 0; font-size: 13.5px; color: var(--c-muted); list-style-position: inside; }
body.control .meal-recipe-figs[open] > summary { border-bottom: 1px solid var(--c-line-soft); margin-bottom: 10px; }
body.control .meal-recipe-figs.just-filled { outline: 2px solid var(--orange); outline-offset: 2px; }
/* the message card: who wrote and what they wrote first, in a larger hand; the state, the time and the quiet actions in the
   top line at the right; the reply beneath with its own head — "Reply as …" — one box and one orange button */
body.control .msg { padding: 18px 22px 18px; margin-bottom: 16px; }
body.control .msg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 18px; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--c-muted); }
body.control .msg-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.control .msg-who .cs { font-size: 17px; font-weight: 700; color: var(--c-text); margin-right: 4px; }
body.control .msg-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
body.control .msg-side .msg-meta { margin: 0; letter-spacing: 0; font-size: 12px; color: var(--c-faint); white-space: nowrap; }
body.control .msg-side .msg-actions { margin: 0; gap: 4px; }
body.control .msg-side .msg-actions button { border-color: transparent; background: transparent; color: var(--c-muted); font-size: 12.5px; padding: 4px 8px; min-height: 0; }
body.control .msg-side .msg-actions button:hover { color: var(--c-text); background: var(--c-hover); border-color: transparent; }
body.control .msg-side .msg-actions button.danger:hover { color: var(--c-bad); }
body.control .msg .quoted { margin: 14px 0 16px; padding: 16px 20px; font-size: 18px; line-height: 1.5; color: var(--c-text); border-left: 3px solid var(--c-line-strong); }
body.control .msg.pending .quoted { border-left-color: var(--orange); }
body.control .msg.pending { border-left: 1px solid var(--c-line); }
body.control .msg .reply { margin: 0; padding: 14px 16px 14px; border-radius: 8px; background: var(--c-bar); }
body.control .msg .reply-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 8px; }
body.control .msg .reply-label { margin: 0; font-size: 14px; font-weight: 700; color: var(--c-text); }
body.control .msg .reply-as { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-muted); }
body.control .msg .reply-as select { width: auto; min-width: 0; padding: 4px 28px 4px 10px; min-height: 32px; font-size: 13px; }
body.control .msg .reply-box, body.control .msg.pending .reply-box { border: 1px solid var(--c-line); box-shadow: none; }
body.control .msg .reply-box:focus, body.control .msg.pending .reply-box:focus { border-color: var(--orange); outline: 2px solid var(--orange); outline-offset: -1px; }
body.control .msg .reply-bar { align-items: center; gap: 12px; margin-top: 10px; }
body.control .msg .reply-bar .primary { min-width: 120px; }
body.control .msg .reply-hint { font-size: 12.5px; color: var(--c-muted); }
body.control .msg.rejected .quoted { border-left-color: var(--c-line); }
/* a long question wraps inside its box (9 October: "for long questions, make sure it is wrapped properly in the controls
   page"): a run of letters with no space in it — a link, a word typed on and on — breaks at the box's edge instead of
   running out past it and off the page; words with spaces between them wrap as before, between the words */
body.control .msg .quoted { overflow-wrap: anywhere; word-break: normal; min-width: 0; }
@media (max-width: 700px) {
  body.control .msg-top { flex-direction: column; }
  body.control .msg-side { align-items: flex-start; }
}



/* ============================================================ TOUCH & PHONES
   Everything below only makes things bigger on small or touch screens: tap
   targets of at least 40px, mono labels no smaller than 9px, and the control
   room's tab bar and day picker as one swipeable row instead of a stack. */
@media (max-width: 760px) {
  .cs, .card-day, .dcard-state, .dcard-count, .log-day-head .cs, .fold-sub, .chan, .gauge-foot, .gauge-name { font-size: 9px; }
  .chip, .feed-filter .chip, .log-filter .chip { min-height: 36px; padding: 8px 13px; font-size: 10px; }
  .feed-filter, .log-filter { gap: 8px; }
  .foot a { display: inline-block; padding: 10px 0; margin: 0 16px 4px 0; font-size: 11px; }
  .side a { padding: 12px 0; font-size: 10.5px; }
  .run-strip { gap: 2px; }
  .run-strip .run-n { font-size: 8px; }
  .tags label, .tag-pick label { min-height: 40px; }
  .dpanel .actions a, .dpanel .actions button, .panel-actions a { min-height: 44px; display: inline-flex; align-items: center; }
  .gauge.round svg { width: 60px; height: 60px; }
}
@media (pointer: coarse) {
  .ed-bar-add button, .ed-tools button, .attach-pick, .daypick a, .filters a { min-height: 40px; }
  .ed-tools button { min-width: 40px; }
  .chip { min-height: 36px; }
}
@media (max-width: 700px) {
  /* mission control on a phone: tabs and days swipe sideways in one row */
  body.control .tabs.officer-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  body.control .tabs.officer-bar::-webkit-scrollbar { display: none; }
  body.control .tabs.officer-bar a { flex: 0 0 auto; padding: 12px 14px; font-size: 14px; white-space: nowrap; }
  body.control .daypick { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 6px; scrollbar-width: none; }
  body.control .daypick::-webkit-scrollbar { display: none; }
  body.control .daypick a { flex: 0 0 auto; }
  body.control .ed-text { padding: 12px; font-size: 16px; }   /* 16px stops iOS zooming into the field */
  body.control textarea, body.control input[type=text], body.control input[type=number], body.control input[type=time], body.control select { font-size: 16px; }
  .msgbox textarea, .composer textarea { font-size: 16px; }
}


/* ========================================================== PHONE & TABLET */
/* The station's small mono labels are drawn at 7.5–9px for a laptop. On a
   phone that is too small to read, so every label gets a floor here. Mission
   control has its own rules (body.control) and is not touched. */
@media (max-width: 700px) {
  body:not(.control) .eyebrow, body:not(.control) .dpanel-code, body:not(.control) .dpanel-meta,
  body:not(.control) .kpi-label, body:not(.control) .kpi-sub, body:not(.control) .dash-sub,
  body:not(.control) .dash-clock-label, body:not(.control) .meal-slot, body:not(.control) .meal-figs,
  body:not(.control) .officer-role, body:not(.control) .badge, body:not(.control) .cs,
  body:not(.control) .status-cell, body:not(.control) .lbl, body:not(.control) .counter,
  body:not(.control) .live, body:not(.control) .card-day, body:not(.control) .card-top,
  body:not(.control) .count, body:not(.control) .mtile-dur, body:not(.control) .foot-brand,
  body:not(.control) .foot-note, body:not(.control) .log-day-head span, body:not(.control) .popup-head .fold-sub,
  body:not(.control) .fold-sub, body:not(.control) .hbt .sub, body:not(.control) .hbt .verdict,
  body:not(.control) .gauge-label, body:not(.control) .gauge-sub, body:not(.control) .dcard-date,
  body:not(.control) .dcard-state, body:not(.control) .dcard-count, body:not(.control) .legend-k,
  body:not(.control) .run-dates, body:not(.control) .status-cell b {
    font-size: 10px;
  }
  body:not(.control) .rail-cell, body:not(.control) .rail-cell.theme button { font-size: 10px; }
  body:not(.control) .officer-note { white-space: normal; font-size: 12px; }
  body:not(.control) .dpanel-title h3 { white-space: normal; }
  body:not(.control) .dpanel-more { justify-content: stretch; }
  body:not(.control) .dpanel-more .btn { flex: 1 1 auto; justify-content: center; font-size: 10.5px; }
  body:not(.control) .mstrip .mtile { flex-basis: 46vw; }
  body:not(.control) .dcard > summary { padding: 9px 9px; }
  body:not(.control) .logpage-strip { gap: 6px; }
  body:not(.control) .run-strip .run-n { font-size: 8.5px; }
}
/* Anything a finger has to hit is at least 40px tall up to tablet width,
   whatever the pointer reports. */
@media (max-width: 1024px) {
  /* the rail loses its optional readings before it needs to scroll */
  .rail-cell.opt { display: none; }
  body:not(.control) .status .theme button, body:not(.control) .status-cell { min-height: 36px; }
  body:not(.control) .status .lang { min-height: 36px; }
  body:not(.control) .status .lang button { min-height: 36px; }
  body:not(.control) .chip, body:not(.control) .feed-filter .chip, body:not(.control) .log-filter .chip,
  body:not(.control) .filters a, body:not(.control) .tags label, body:not(.control) .tag-pick label {
    min-height: 40px; padding: 9px 14px; font-size: 10.5px; display: inline-flex; align-items: center;
  }
  body:not(.control) .foot a, body:not(.control) .side a { display: inline-block; padding: 12px 0; margin: 0 16px 4px 0; font-size: 11px; }
  body:not(.control) .mday-head .count a, body:not(.control) .log-day-head a { display: inline-block; padding: 10px 4px; margin: -10px 0; }
  body:not(.control) .btn, body:not(.control) button { min-height: 44px; }
  body:not(.control) .rail-cell.theme button { min-height: 0; height: 100%; min-width: 44px; }
  body:not(.control) .rail-cell.lang button { min-height: 0; height: 100%; min-width: 36px; }
  body:not(.control) .ed-tools button { min-height: 40px; }
  body:not(.control) .tlegend .tchip { min-height: 36px; padding: 6px 12px; }
  body:not(.control) .tlegend-group { font-size: 10px; }
  body:not(.control) .popup-close { min-width: 44px; min-height: 44px; }
  body:not(.control) .logpage-strip a { min-height: 44px; }
  body:not(.control) .dcard > summary { min-height: 44px; }
}

/* ================================================== INNER PAGES, SEAMLESS */
/* The crew log and the media pages open with the same masthead as the
   station, then a row of pills — the same pills as About · What this is ·
   Who we are — as their navigation. The page's own title sits in a raised
   slab like every panel on the dashboard. */
.wordmark a, .wordmark a:hover { color: inherit; text-decoration: none; border-bottom: 0; }
.wordmark a:hover .bang { color: var(--ink); }
.page-nav a, .page-nav a:hover { border-bottom: 0; }
.page-nav {
  max-width: 1300px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; gap: 10px;
}
.page-nav a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px;
  border-radius: var(--r); background: linear-gradient(180deg, var(--raise), var(--raise-2));
  box-shadow: var(--sh-raise), inset 0 1px 0 var(--edge);
  font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
}
.page-nav a::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--rule-hard);
}
.page-nav a:hover { transform: translateY(-1px); }
.page-nav a[aria-current="page"] { color: var(--orange); }
.page-nav a[aria-current="page"]::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(255,106,26,.18); }

body.landing.inner .shell { padding-bottom: 0; }
body.landing.inner .logpage-top {
  margin: var(--gutter) 0; padding: 26px 26px 22px; border-radius: 12px;
  background: linear-gradient(180deg, var(--raise), var(--raise-2));
  box-shadow: var(--sh-raise-sm), inset 0 1px 0 var(--edge);
}
body.landing.inner .logpage-top h1 { margin: 6px 0 10px; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.03em; }
body.landing.inner .logpage-top .lede { margin: 0 0 16px; }
body.landing.inner .logpage-top .actions { margin: 0; }
body.landing.inner .foot { margin-top: 44px; margin-bottom: 44px; }
@media (max-width: 760px) {
  .page-nav { gap: 8px; }
  .page-nav a { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  body.landing.inner .logpage-top { padding: 18px; }
}

/* ============================================================ BOARD STAMPS */
/* Every card on the board carries when it was sent — and, once the crew have
   answered, when the reply came — in the venue's own time. The cards stand
   in one sequence, the newest first; the viewer's own among the rest, with
   a rule of orange at the left. */
.card-when { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 4px 16px 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--faint); }
.card-when time { white-space: nowrap; }
.card-when .card-when-reply { color: var(--orange); }
.board .card .card-when { padding: 5px 0 0; font-size: 9.5px; color: var(--on-screen-dim); }
.board .card .card-when .card-when-reply { color: var(--orange); }
.board .card[data-mine] { box-shadow: inset 2px 0 0 var(--orange); padding-left: 10px; }
@media (max-width: 700px) { body:not(.control) .card-when { font-size: 10px; } }

/* At a Glance: the button under the mission dashboard, and the day sections. */
.glance-link {
  display: flex; align-items: center; gap: 16px; margin: 18px 0 22px; padding: 20px 24px;
  border-radius: var(--r-lg); background: linear-gradient(180deg, var(--raise), var(--raise-2));
  box-shadow: var(--sh-raise), inset 0 1px 0 var(--edge); text-decoration: none; color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.glance-link:hover { transform: translateY(-2px); box-shadow: var(--sh-raise-lg), inset 0 1px 0 var(--edge); }
.glance-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.glance-link-title { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.glance-link-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); flex: 1; min-width: 0; }
.glance-link-arrow { font-family: var(--mono); font-size: 16px; color: var(--orange); flex: none; }
@media (max-width: 760px) { .glance-link { flex-wrap: wrap; gap: 8px; } .glance-link-sub { flex-basis: 100%; } }
/* the two doors under the dashboard head: At a Glance and Media, side by side */
body.landing.inner .logpage-filter:first-child { margin-top: 26px; }
body.landing.inner .cloud-gallery:first-child { margin-top: 26px; }
/* the newest six from the cloud, at the foot of the Habitat panel */
.cloud-latest { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.cloud-latest-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 10px; }
.cloud-latest-head .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.cloud-latest-head .sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.cloud-latest-head .sub a { color: var(--orange); text-decoration: none; }
/* the cloud pictures are 1920×1080: the tiles are 16:9, and the picture
   fills the tile edge to edge — nothing cropped, no letterbox */
.cloud-strip .mtile-visual, .cloud-grid .mtile-visual { aspect-ratio: 16 / 9; background: var(--well); }
.cloud-strip .mtile-visual img, .cloud-grid .mtile-visual img { width: 100%; height: 100%; object-fit: cover; }
.cloud-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* LIVE, top right of the gallery head: an orange dot that breathes */
.cloud-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px; border-radius: 20px; border: 1px solid #ff3b30; font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #d0261c; white-space: nowrap; }   /* LIVE in red, as everywhere (9 October) */
.cloud-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 0 rgba(255,59,48,.5); animation: cloud-pulse 1.8s ease-out infinite; }
@keyframes cloud-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,59,48,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); } }
.cloud-gallery .log-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cloud-latest-head .sub .cloud-live { margin-left: 10px; }
.dpanel-title .cloud-live { margin-left: 10px; align-self: center; }
@media (prefers-reduced-motion: reduce) { .cloud-live i { animation: none; } }
.cloud-strip .mtile { flex: 0 0 240px; }
/* tiles arrive and leave softly, and slide to their new place */
.cloud-strip .mtile, .cloud-grid .mtile { transition: opacity .28s ease, transform .28s ease; }
.cloud-strip .mtile.is-arriving, .cloud-grid .mtile.is-arriving { opacity: 0; transform: translateY(6px); }
.cloud-strip .mtile.is-leaving, .cloud-grid .mtile.is-leaving { opacity: 0; transform: scale(.96); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cloud-strip .mtile, .cloud-grid .mtile { transition: none; } }
@media (min-width: 1180px) { .cloud-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; } .cloud-strip .mtile { flex: none; } }
@media (max-width: 760px) { .cloud-strip .mtile { flex-basis: 200px; } }
.dash-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 22px; }
.dash-links .glance-link { margin: 0; }
@media (max-width: 900px) { .dash-links { grid-template-columns: 1fr; } }

/* The booklet: one day per page, turned by scrolling sideways. */
.booklet-shell { position: relative; }
.booklet {
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  gap: 18px; padding-bottom: 6px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; outline: none;
}
.booklet:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.bk-page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.bk-page .panel.glance-day {
  height: min(78vh, 940px); overflow-y: auto; overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch; margin: 0;
}
.bk-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 64px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, var(--raise), var(--raise-2)); color: var(--ink);
  box-shadow: var(--sh-raise), inset 0 1px 0 var(--edge); font-size: 26px; line-height: 1;
}
.bk-arrow:hover { color: var(--orange); }
.bk-arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.bk-arrow.prev { left: -14px; }
.bk-arrow.next { right: -14px; }
.bk-counter { margin: 10px 0 26px; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--dim); }
@media (max-width: 760px) {
  .bk-arrow { display: none; }                    /* a thumb turns the pages */
  .bk-page .panel.glance-day { height: min(74vh, 820px); }
}
@media (prefers-reduced-motion: reduce) { .booklet { scroll-behavior: auto; } }

.glance-day { scroll-margin-top: 90px; }
.glance-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; scroll-margin-top: 90px; }
.glance-head h2 { margin: 2px 0 0; font-size: 22px; }
.glance-n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--orange); }
.glance-spec { margin: 8px 0 4px; }
.glance-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.glance-block .cards { margin-top: 4px; }

/* The ticker across the very top: the habitat's clock, then a running line
   of what is happening in there — the current task, the next one, the node's
   readings. The line is in the strip twice and scrolled by CSS, so it runs
   without end; hovering holds it, and reduced motion stops it. */
.ticker {
  display: flex; align-items: stretch; gap: 0; overflow: hidden;
  background: var(--ink); color: #f3f1ee; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
}
[data-theme="dark"] .ticker { background: #000; }
.tk-window { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.tk-track { display: inline-flex; white-space: nowrap; animation: tk-run 40s linear infinite; will-change: transform; }
@media (hover: hover) and (pointer: fine) { .tk-window:hover .tk-track { animation-play-state: paused; } }   /* a real pointer resting on the line holds it; a tap on a phone (whose :hover then sticks) does not */
.tk-line { display: inline-flex; align-items: center; padding-right: 48px; }
.tk-cell { padding: 10px 0; white-space: nowrap; }
.tk-cell b { color: var(--orange); font-weight: 600; }
.tk-sep { padding: 0 18px; opacity: .45; }
@keyframes tk-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; } }
@media (max-width: 760px) { .ticker { font-size: 9.5px; } }

/* The mood scale: five faces, calm to angry. The chosen one is orange. */
.mood-faces { display: flex; gap: 6px; justify-content: space-between; margin: 8px 0 4px; }
.mood-face { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 8px 2px 6px; border-radius: 12px; color: var(--dim); }
.mood-face svg { width: 40px; height: 40px; display: block; }
.mood-face span { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.mood-face input { position: absolute; opacity: 0; pointer-events: none; }
.mood-face:hover { color: var(--ink); background: var(--well); }
.mood-face:has(input:checked) { color: var(--orange); background: var(--well); box-shadow: var(--sh-inset); }
.mood-face:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.control .mood-face:hover, .control .mood-face:has(input:checked) { background: var(--c-face, #f3f1ee); }
@media (max-width: 760px) { .mood-face svg { width: 44px; height: 44px; } }
.mood-poles { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
/* The record under the state: every state filed for the officer, the newest first — the day and time, the sol, the
   mood and its words, who filed it — and the key to the CSV of all three. */
.mood-record { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-line-soft, var(--rule)); }
.mood-record-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 6px; }
.mood-record-head .eyebrow { margin: 0; flex: none; }
.mood-record-head .eyebrow::after { display: none; }
.mood-record-head .note { flex: 1 1 260px; margin: 0; }
.mood-record-csv { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--orange); text-decoration: none; border-bottom: 1px solid currentColor; }
.mood-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mood-table th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted, var(--dim)); padding: 8px 12px 6px 0; border-bottom: 1px solid var(--c-line-soft, var(--rule)); }
.mood-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--c-line-soft, var(--rule)); vertical-align: top; }
.mood-table td b { display: block; font-weight: 600; }
.mood-table td span { display: block; font-size: 12px; color: var(--c-muted, var(--dim)); }
.mood-table .mr-when { white-space: nowrap; }
.mood-table .mr-sol, .mood-table .mr-by { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--c-muted, var(--dim)); white-space: nowrap; }
.mood-table .mr-mood b { color: var(--orange); letter-spacing: .06em; }
.mood-table tbody tr:first-child td { background: var(--orange-soft); }
.mood-table th:first-child, .mood-table td:first-child { padding-left: 8px; }
.mood-table tbody tr:first-child td:first-child { border-radius: 6px 0 0 6px; }
.mood-table tbody tr:first-child td:last-child { border-radius: 0 6px 6px 0; }
.mood-table .mr-by { text-transform: none; }

/* Mission control: the officer's blocks in one column, and room to write. */
.officer-stack { display: flex; flex-direction: column; gap: 14px; }
.officer-stack .panel { margin: 0; }
textarea.blog-box { min-height: 340px; font-size: 16px; line-height: 1.65; }
.daypick-dates a { white-space: nowrap; }
@media (max-width: 760px) { textarea.blog-box { min-height: 280px; } }

/* The officer's tab: numbered blocks, one shape each. A head with the number,
   the title, whose and which day and where it goes, and on the right whether
   anything is live yet; then the writing sheet — the composer on its own
   pale ground with a border, so the entry is visibly one thing; then the
   Publish row. No empty well: the sheet is exactly as tall as what is in it,
   and the first paragraph box is tall enough to invite writing. */
.officer-stack { gap: 22px; }
.officer-stack .officer-block { padding: 22px 24px 20px; }
.block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line-soft, var(--rule)); }
.block-head .block-title { display: flex; align-items: center; gap: 10px; margin: 0 0 3px; font-size: 20px; }
.block-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-text, var(--ink)); color: var(--c-on-text, #fff); font-size: 13px; font-weight: 700; flex: none; }
.block-sub { margin: 0; font-size: 13px; color: var(--c-muted, var(--dim)); }
.block-sub b { color: var(--c-text, var(--ink)); font-weight: 600; }
.block-state { flex: none; align-self: center; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--c-line, var(--rule)); font-size: 12px; color: var(--c-muted, var(--dim)); white-space: nowrap; }
.block-state.live { border-color: #e0291e; color: #d0261c; font-weight: 600; }                       /* LIVE in red, as everywhere (9 October) */
.block-state.live::before { content: "●"; margin-right: 6px; font-size: 9px; vertical-align: 1px; }
.block-hint { margin: 0 0 12px; }
/* The composer, laid out like a classic post editor: a grey toolbar strip
   across the top with the add buttons on the left and Visual | Text tabs on
   the right, one white sheet under it, a foot with the word count. */
.ed { gap: 0; border: 1px solid var(--c-line, var(--rule)); border-radius: 4px; background: var(--c-panel, #fff); overflow: hidden; }
.ed-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 8px 10px 0; background: var(--c-bar, #f6f7f7); border-bottom: 1px solid var(--c-line, var(--rule)); }
.ed-bar-add { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
.ed-bar-add button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--c-line-strong, #8c8f94); border-radius: 3px; background: var(--c-panel, #fff); color: var(--c-text, var(--ink));
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: none; transform: none; cursor: pointer;
}
.ed-bar-add button svg { flex: none; color: var(--c-muted, var(--dim)); }
.ed-bar-add button:hover { border-color: var(--c-text, var(--ink)); background: var(--c-panel, #fff); color: var(--c-text, var(--ink)); box-shadow: none; transform: none; }
.ed-bar-add button:hover svg { color: var(--orange); }
.ed-blocks { padding: 10px 12px 4px; min-height: 0; }
/* the sheet: one document, text flowing round the pictures */
.ed-doc { position: relative; padding: 18px 20px 12px; min-height: 240px; outline: 0; font-size: 16px; line-height: 1.65; color: var(--c-text, var(--ink)); cursor: text; }
.ed-doc p { margin: 0 0 0.9em; max-width: none; }   /* the sheet's own width — not the 66ch a page's paragraph is kept to */
.ed-doc p:last-child { margin-bottom: 0; }
.ed-doc.is-empty::before { content: attr(data-placeholder); position: absolute; left: 20px; top: 18px; right: 20px; color: var(--c-faint, var(--dim)); pointer-events: none; }
.ed-fig { position: relative; display: table; max-width: 100%; margin: 6px 0 16px; border: 0; border-radius: 0; background: transparent; overflow: visible; user-select: none; -webkit-user-select: none; }
.ed-fig .ed-figure { position: relative; display: block; place-items: start; justify-items: start; background: transparent; min-height: 0; max-height: none; overflow: visible; }
.ed-fig .ed-figure img, .ed-fig .ed-figure video { display: block; width: auto; max-width: 100%; max-height: 440px; object-fit: contain; border-radius: 3px; }
.ed-fig .ed-figure .ed-kind { padding: 34px; color: #bbb; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.ed-fig .ed-caption { display: flex; align-items: center; gap: 10px; padding: 6px 0 0; border: 0; background: transparent; }
.ed-fig .ed-caption input { flex: 1; min-width: 0; margin: 0; padding: 6px 8px; font-size: 13.5px; font-style: italic; color: var(--c-muted, var(--dim)); border: 1px solid transparent; border-radius: 3px; background: transparent; box-shadow: none; }
.ed-fig .ed-caption input:focus { border-color: var(--c-line, var(--rule)); background: var(--c-field, #fff); outline: 0; }
.ed-fig .ed-caption a, .ed-fig .ed-caption-state { font-size: 12px; color: var(--c-muted, var(--dim)); white-space: nowrap; }
.ed-fig .ed-tools { position: absolute; top: 8px; right: 8px; }
.ed-fig .ed-tools button { width: 30px; height: 30px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 3px; background: rgba(255,255,255,.92); color: #111; border: 1px solid rgba(0,0,0,.25); box-shadow: none; }
.ed-fig .ed-tools button:hover { background: var(--c-panel, #fff); color: var(--c-bad, #b00); border-color: var(--c-bad, #b00); }
.ed-fig .ed-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 10px; font-size: 12px; background: var(--c-panel, #fff); }
.ed-fig .ed-progress .media-bar { grid-column: 1 / -1; }
.ed-fig.ed-uploading .ed-figure { min-height: 90px; }
.ed-fig.ed-failed .ed-progress-state { color: var(--orange); }
.ed-fig.ed-failed .ed-tools { top: auto; bottom: 8px; }
@media (max-width: 760px) { .ed-doc { padding: 14px; } .ed-doc.is-empty::before { left: 14px; top: 14px; } }
.ed-block-text .ed-text { background: var(--c-field, #fff); border: 1px solid var(--c-line-soft, var(--rule)); border-radius: 4px; font-size: 16px; line-height: 1.65; box-shadow: none; }
.ed-block-text .ed-text:focus { border-color: var(--c-text, var(--ink)); outline: 0; }
.ed-block:first-child .ed-text { min-height: 180px; }
textarea.ed-source { display: block; width: 100%; min-height: 260px; margin: 0; padding: 12px 14px; border: 0; border-radius: 0; box-shadow: none; background: var(--c-field, #fff); font-family: var(--mono); font-size: 13.5px; line-height: 1.6; resize: vertical; }
textarea.ed-source:focus { outline: 0; }
.ed-foot { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; background: var(--c-bar, #f6f7f7); border-top: 1px solid var(--c-line, var(--rule)); font-size: 12px; color: var(--c-muted, var(--dim)); }
.ed-hint { text-align: right; }
.officer-stack .actions { margin-top: 14px; }
.ed.over { outline: 2px dashed var(--orange); outline-offset: -4px; }
@media (max-width: 760px) {
  .ed-bar { flex-direction: column; align-items: stretch; }
  .ed-bar-add button span { display: none; }
  .ed-bar-add button { padding: 0 10px; }
  .ed-hint { display: none; }
}
@media (max-width: 760px) {
  .block-head { flex-direction: column; gap: 8px; }
  .block-state { align-self: flex-start; }
  .officer-stack .officer-block { padding: 16px 14px 14px; }
}
.dash-grid .glance-link { grid-column: 1 / -1; margin-top: 0; }

/* At a Glance: the day's habitat as tiles, like the dashboard. */
.glance-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.glance-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--well); box-shadow: var(--sh-inset); }
.glance-tile.is-over .gt-value { color: #e0322b; }   /* above its device's range of normal readings (glance.js; 15 October) */
:root[data-theme="dark"] .glance-tile.is-over .gt-value { color: #ff5a52; }
.gt-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.gt-value { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }
.gt-value em { font-family: var(--mono); font-style: normal; font-size: 10px; margin-left: 4px; color: var(--dim); }
.gt-range { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; color: var(--faint); }

/* Power consumed by category: a bar per category against the day's biggest
   draw, the figure at its end, the day total beneath. Used on the landing
   Habitat panel and, per day, in the At a Glance booklet. */
.pwr { display: grid; gap: 7px; margin-top: 12px; }
.pwr-row { display: grid; grid-template-columns: minmax(64px, auto) 1fr 44px; align-items: center; gap: 10px; }
.pwr-name { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.pwr-track { height: 10px; border-radius: 5px; background: var(--ground-2); box-shadow: var(--sh-inset); overflow: hidden; }
:root[data-theme="dark"] .pwr-track { background: rgba(255,255,255,.08); }
.pwr-track i { display: block; height: 100%; border-radius: 5px; background: var(--orange); }
.pwr-row.none .pwr-name { color: var(--faint); }
.pwr-val { font-family: var(--mono); font-size: 10px; font-weight: 600; text-align: right; color: var(--ink); }
.pwr-row.none .pwr-val { color: var(--faint); font-weight: 400; }
.pwr-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--rule); }
.pwr-total span { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.pwr-total b { font-family: var(--display); font-size: 18px; letter-spacing: -0.02em; }
.glance-block .pwr { max-width: 520px; margin-top: 8px; }
.glance-block .gauges.rounds { margin-bottom: 14px; }

/* Every reading of the day in At a Glance: one small chart per channel,
   each pull a point across the day's 24 hours, drawn server-side as SVG. */
.gc-note { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin: 16px 0 8px; }
.glance-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.glance-chart { padding: 12px 14px 8px; border-radius: 12px; background: var(--well); box-shadow: var(--sh-inset); min-width: 0; }
.gc-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.gc-head b { font-size: 12px; }
.gc-head span { font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em; color: var(--faint); }
.gc-svg { display: block; width: 100%; height: auto; }
.gc-grid { stroke: var(--rule); stroke-width: 1; }
.gc-grid.base { stroke: var(--rule-hard); }
.gc-ax { font-family: var(--mono); font-size: 8.5px; fill: var(--dim); }
.gc-line { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; opacity: .55; }
.gc-dot { fill: var(--orange); }
@media (max-width: 760px) { .glance-charts { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================== ARCHIVE */
/* The contents page: one card per download, so what each copy is and how to
   take it read at a glance instead of from a wall of prose. */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 6px; }
.dl-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px;
  border-radius: 14px; background: var(--well); box-shadow: var(--sh-inset); min-width: 0;
}
.dl-card h3 { margin: 0; font-size: 15.5px; letter-spacing: -0.01em; }
.dl-card p { margin: 0 0 4px; font-size: 12.5px; color: var(--dim); flex: 1 1 auto; }
.dl-card .btn { align-self: flex-start; }

/* The day table: compact chip links per row, and days ahead kept quiet. */
.daylist td { vertical-align: middle; }
.day-links { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.day-links a {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; padding: 5px 9px; border-radius: 8px; white-space: nowrap;
  background: linear-gradient(180deg, var(--raise), var(--raise-2)); color: var(--ink);
  box-shadow: var(--sh-raise-sm), inset 0 1px 0 var(--edge); text-decoration: none;
}
.day-links a:hover { color: var(--orange); }
.ahead-row td { color: var(--faint); }
.badge.ahead { color: var(--faint); border-style: dashed; }
@media (max-width: 640px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } .dl-card .btn { align-self: stretch; justify-content: center; } }

/* ==================================================== HABITAT HARDWARE */
/* The habitat's own devices, read through Home Assistant: one chart per
   kind of quantity (temperature, energy, …), each with a proper Y axis in
   its unit, every line named at its end in its own colour like the Trends. */
.dpanel .hbt .hw-bento { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.t-hw h3 { display: flex; align-items: center; gap: 7px; }
.hw-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.t-hw .fig-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.t-hw .fig-spark { flex: 1 1 auto; min-width: 0; height: 36px; }
.hw-down { color: var(--orange); display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.hw-chart { margin: 10px 0 0; padding: 12px 14px 10px; border-radius: 10px; background: var(--well); box-shadow: var(--sh-inset); }
.hw-chart svg { display: block; width: 100%; height: auto; }
.hw-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.85; }
.hw-line:hover { stroke-width: 3; opacity: 1; }
.hw-ax { font-family: var(--mono); font-size: 10px; fill: var(--dim); }
.hw-name { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.hw-val { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.hw-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.hw-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.hw-title b { font-weight: 600; }
.hw-unit { color: var(--dim); text-transform: none; letter-spacing: 0.02em; }
.hw-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hw-legend li { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.hw-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; }
.hw-legend .hw-val { margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) { .dpanel .hbt .hw-bento { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- the dome
   The habitat as a picture, between the About row and the composer: a
   screen set into a pale slab, as the board is — but this screen is a sky,
   a grained gradient — by day a sunrise, periwinkle through lavender and
   peach to Mars orange at the floor; by night the night, black and starred
   at the top down through indigo to a band of gold and red at the horizon.
   The dome stands on it as translucent white glass, a fine wireframe of
   facets, a soft shadow beneath. Each system inside is a small
   pale key that floats about the whole interior, named on a leader line in
   the station's type with its channel code; under the hand a key turns
   orange. */
:root {
  /* the sky behind the dome: by day the sunrise, by night the night */
  --dome-sky:       linear-gradient(180deg, #7d8ed2 0%, #a3a5d6 22%, #c9b8d4 40%, #efc3aa 60%, #ff9a5c 82%, #ff7a33 100%);
  --dome-stars:     0;
  /* the pearl inside the shell */
  --dome-pearl-1:   #ffffff;
  --dome-pearl-2:   #f6f6f7;
  --dome-pearl-3:   #e9e9ec;
  --dome-line:      rgba(21, 21, 23, 0.16);
  --dome-hex:       #ffffff;
  --dome-hex-edge:  rgba(21, 21, 23, 0.34);
  --dome-hex-ink:   #151517;
  /* the names, on the sky */
  --dome-text:      #151517;
  --dome-code:      rgba(21, 21, 23, 0.62);
  --dome-lead:      rgba(21, 21, 23, 0.34);
  --dome-hot:       #ffffff;
  --dome-chip:      rgba(255, 255, 255, 0.55);
  --dome-chip-edge: rgba(21, 21, 23, 0.18);
}
:root[data-theme="dark"] {
  --dome-sky:       linear-gradient(180deg, #050508 0%, #0a0b1e 26%, #22245c 48%, #4a4a6e 62%, #b98a2a 72%, #f0a020 78%, #e8641c 89%, #b83115 100%);
  --dome-stars:     1;
  --dome-text:      #f2f2ef;
  --dome-code:      rgba(242, 242, 239, 0.62);
  --dome-lead:      rgba(160, 160, 170, 0.78);   /* reads on the night and on the pearl alike */
  --dome-hot:       var(--orange);
  --dome-chip:      rgba(0, 0, 0, 0.28);
  --dome-chip-edge: rgba(255, 255, 255, 0.22);
}

.dome-panel {
  margin: 0 0 var(--gutter); padding: 16px 18px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--raise), var(--raise-2));
  box-shadow: var(--sh-raise-lg), inset 0 1px 0 var(--edge);
}
.dome-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.dome-title { display: flex; align-items: baseline; gap: 10px; }
.dome-title h2 { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.dome-meta { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }

/* the sky: the gradient, and a film of grain laid over it */
.dome-screen {
  position: relative; padding: 22px 22px 16px; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); color: var(--dome-text);
  background: var(--dome-sky);
  box-shadow: var(--sh-screen);
}
.dome-screen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size: 240px 240px; opacity: 0.22; mix-blend-mode: overlay;
}
.dome-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: var(--dome-stars);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><circle cx='291' cy='136' r='0.6' fill='white' fill-opacity='0.4'/><circle cx='482' cy='329' r='0.6' fill='white' fill-opacity='0.94'/><circle cx='193' cy='77' r='1.3' fill='white' fill-opacity='0.4'/><circle cx='82' cy='382' r='0.7' fill='white' fill-opacity='0.97'/><circle cx='568' cy='525' r='0.6' fill='white' fill-opacity='0.73'/><circle cx='357' cy='879' r='0.6' fill='white' fill-opacity='0.71'/><circle cx='120' cy='377' r='2.0' fill='white' fill-opacity='0.43'/><circle cx='278' cy='735' r='0.8' fill='white' fill-opacity='0.42'/><circle cx='514' cy='169' r='0.7' fill='white' fill-opacity='0.71'/><circle cx='57' cy='54' r='0.9' fill='white' fill-opacity='0.67'/><circle cx='479' cy='700' r='1.6' fill='white' fill-opacity='0.73'/><circle cx='408' cy='270' r='0.8' fill='white' fill-opacity='0.8'/><circle cx='220' cy='517' r='2.0' fill='white' fill-opacity='0.67'/><circle cx='309' cy='404' r='0.7' fill='white' fill-opacity='0.43'/><circle cx='376' cy='681' r='0.8' fill='white' fill-opacity='0.96'/><circle cx='380' cy='866' r='0.7' fill='white' fill-opacity='0.85'/><circle cx='516' cy='788' r='1.1' fill='white' fill-opacity='0.57'/><circle cx='315' cy='447' r='1.6' fill='white' fill-opacity='0.39'/><circle cx='84' cy='243' r='0.7' fill='white' fill-opacity='0.39'/><circle cx='631' cy='582' r='1.6' fill='white' fill-opacity='0.53'/><circle cx='347' cy='602' r='0.6' fill='white' fill-opacity='0.96'/><circle cx='320' cy='550' r='1.6' fill='white' fill-opacity='0.39'/><circle cx='691' cy='116' r='0.9' fill='white' fill-opacity='0.61'/><circle cx='825' cy='447' r='0.8' fill='white' fill-opacity='0.64'/><circle cx='494' cy='795' r='1.3' fill='white' fill-opacity='0.91'/><circle cx='251' cy='374' r='1.1' fill='white' fill-opacity='0.79'/><circle cx='342' cy='208' r='0.7' fill='white' fill-opacity='0.46'/><circle cx='209' cy='210' r='1.6' fill='white' fill-opacity='0.89'/><circle cx='164' cy='254' r='0.8' fill='white' fill-opacity='0.62'/><circle cx='332' cy='510' r='0.8' fill='white' fill-opacity='0.8'/><circle cx='464' cy='556' r='0.6' fill='white' fill-opacity='0.65'/><circle cx='784' cy='857' r='2.0' fill='white' fill-opacity='0.61'/><circle cx='359' cy='93' r='1.3' fill='white' fill-opacity='0.39'/><circle cx='61' cy='188' r='0.8' fill='white' fill-opacity='0.42'/><circle cx='541' cy='92' r='0.8' fill='white' fill-opacity='0.7'/><circle cx='854' cy='552' r='0.7' fill='white' fill-opacity='0.92'/><circle cx='553' cy='134' r='1.0' fill='white' fill-opacity='0.97'/><circle cx='542' cy='427' r='0.7' fill='white' fill-opacity='0.9'/><circle cx='894' cy='419' r='1.6' fill='white' fill-opacity='0.55'/><circle cx='130' cy='675' r='1.0' fill='white' fill-opacity='0.66'/><circle cx='623' cy='465' r='0.9' fill='white' fill-opacity='0.97'/><circle cx='475' cy='132' r='2.0' fill='white' fill-opacity='0.94'/><circle cx='682' cy='268' r='0.7' fill='white' fill-opacity='0.8'/><circle cx='235' cy='330' r='0.8' fill='white' fill-opacity='0.58'/><circle cx='201' cy='487' r='2.0' fill='white' fill-opacity='0.56'/><circle cx='201' cy='730' r='0.9' fill='white' fill-opacity='0.87'/><circle cx='736' cy='666' r='0.9' fill='white' fill-opacity='0.48'/><circle cx='444' cy='658' r='0.6' fill='white' fill-opacity='0.86'/><circle cx='425' cy='174' r='1.1' fill='white' fill-opacity='0.64'/><circle cx='843' cy='889' r='1.1' fill='white' fill-opacity='0.4'/><circle cx='92' cy='423' r='1.1' fill='white' fill-opacity='0.48'/><circle cx='562' cy='810' r='0.6' fill='white' fill-opacity='0.66'/><circle cx='588' cy='720' r='0.7' fill='white' fill-opacity='0.89'/><circle cx='108' cy='350' r='0.9' fill='white' fill-opacity='0.66'/><circle cx='161' cy='710' r='1.1' fill='white' fill-opacity='0.41'/><circle cx='852' cy='650' r='1.6' fill='white' fill-opacity='0.61'/><circle cx='852' cy='652' r='0.8' fill='white' fill-opacity='1.0'/><circle cx='25' cy='532' r='1.6' fill='white' fill-opacity='0.87'/><circle cx='132' cy='744' r='1.6' fill='white' fill-opacity='0.78'/><circle cx='315' cy='494' r='0.8' fill='white' fill-opacity='0.36'/><circle cx='719' cy='654' r='0.7' fill='white' fill-opacity='0.69'/><circle cx='840' cy='390' r='0.9' fill='white' fill-opacity='0.89'/><circle cx='190' cy='227' r='1.0' fill='white' fill-opacity='0.68'/><circle cx='687' cy='293' r='2.0' fill='white' fill-opacity='0.62'/><circle cx='118' cy='819' r='1.1' fill='white' fill-opacity='0.93'/><circle cx='596' cy='734' r='2.0' fill='white' fill-opacity='0.62'/><circle cx='826' cy='451' r='2.0' fill='white' fill-opacity='0.45'/><circle cx='459' cy='786' r='0.8' fill='white' fill-opacity='0.75'/><circle cx='698' cy='135' r='0.8' fill='white' fill-opacity='0.66'/><circle cx='653' cy='501' r='1.1' fill='white' fill-opacity='0.79'/></svg>");
  background-size: 900px 900px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.7) 40%, transparent 68%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.7) 40%, transparent 68%);
}
.dome-stage { position: relative; z-index: 1; width: 100%; aspect-ratio: 1000 / 550; }
.dome-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* the drawing: translucent white glass inside the shell — a pearl, whiter
   at the apex than at the floor, through which the sky shows faintly; the
   facets a whisper of shade where the light does not reach, fine lines
   between */
#dome-pearl .s1 { stop-color: var(--dome-pearl-1); stop-opacity: 0.80; }
#dome-pearl .s2 { stop-color: var(--dome-pearl-2); stop-opacity: 0.70; }
#dome-pearl .s3 { stop-color: var(--dome-pearl-3); stop-opacity: 0.62; }
.dome-faces polygon { stroke: var(--dome-line); stroke-width: 0.9; stroke-linejoin: round; }
/* the keys: small pale hexagons floating in the shell, orange under the hand */
.dome-hex { cursor: pointer; outline: none; }
.dome-hex-body { transform-box: fill-box; transform-origin: center; transition: transform 180ms cubic-bezier(.2,.8,.2,1); }
.dome-hex polygon {
  fill: var(--dome-hex); stroke: var(--dome-hex-edge); stroke-width: 1; stroke-linejoin: round;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.28));
  transition: fill 150ms, stroke 150ms;
}
.dome-ic path { fill: var(--dome-hex-ink); transition: fill 150ms; }
.dome-hex:hover polygon, .dome-hex.lit polygon, .dome-hex:focus-visible polygon { fill: var(--orange); stroke: var(--orange-deep); }
.dome-hex:hover .dome-ic path, .dome-hex.lit .dome-ic path, .dome-hex:focus-visible .dome-ic path { fill: #fff; }
.dome-hex:hover .dome-hex-body, .dome-hex.lit .dome-hex-body, .dome-hex:focus-visible .dome-hex-body { transform: scale(1.14); }
.dome-hex:focus-visible polygon { stroke: #fff; stroke-width: 2; }

/* the names: channel code in the small mono, the name in the display face,
   on a leader that leaves the far end of the name and ends at the key —
   all in ink, which reads on every band of the sky */
.dome-label { cursor: pointer; outline: none; }
.dome-label .dome-code { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.2em; font-weight: 700; fill: var(--dome-code); transition: fill 150ms; }
.dome-label .dome-name { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0.005em; fill: var(--dome-text); transition: fill 150ms; }
.dome-lead { fill: none; stroke: var(--dome-lead); stroke-width: 1; stroke-linejoin: round; transition: stroke 150ms; }
.dome-lead-dot { fill: var(--dome-lead); transition: fill 150ms; }
.dome-label:hover .dome-name, .dome-label.lit .dome-name, .dome-label:focus-visible .dome-name,
.dome-label:hover .dome-code, .dome-label.lit .dome-code { fill: var(--dome-hot); }
.dome-label:hover .dome-lead, .dome-label.lit .dome-lead, .dome-label:focus-visible .dome-lead { stroke: var(--dome-hot); }
.dome-label:hover .dome-lead-dot, .dome-label.lit .dome-lead-dot { fill: var(--dome-hot); }

/* the same names as chips beneath the picture — the labels on a phone */
.dome-legend { display: none; position: relative; z-index: 1; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dome-legend .chip { color: var(--dome-text); background: var(--dome-chip); border-color: var(--dome-chip-edge); }
.dome-legend .chip-code { font-family: var(--mono); font-size: 8px; letter-spacing: 0.16em; color: var(--dome-code); margin-right: 7px; }

/* the pop-ups: what a part of the habitat is, and what is happening in it —
   the hexagon itself at the head, as it stands in the dome */
.dome-mark { flex: none; width: 52px; height: 52px; overflow: visible; }
.dome-mark polygon { fill: var(--dome-hex); stroke: var(--dome-hex-edge); stroke-width: 1; stroke-linejoin: round; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22)); }
.dome-mark .dome-ic path { fill: var(--dome-hex-ink); }
.dome-code-chip { color: var(--orange); font-weight: 700; }
.dome-popup .popup-body p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; }
.dome-popup .popup-body p:last-child { margin-bottom: 0; }
.dome-popup .dome-now {
  padding: 12px 14px; border-radius: var(--r-sm); background: var(--orange-soft);
  border-left: 3px solid var(--orange); font-weight: 600;
}
.dome-popup .dome-now-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); margin-right: 6px; }

@media (max-width: 760px) {
  .dome-panel { padding: 12px 12px 14px; }
  .dome-screen { padding: 14px 10px 12px; }
  .dome-hex-body { transform: scale(1.5); }
  .dome-hex:hover .dome-hex-body, .dome-hex.lit .dome-hex-body { transform: scale(1.65); }
  .dome-labels, .dome-meta { display: none; }
  .dome-legend { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .dome-hex-body, .dome-hex polygon { transition: none; } }
@media print { .dome-screen { background: #fff; box-shadow: none; } .dome-screen::before, .dome-screen::after { display: none; } .dome-popup { display: none; } }
/* the sky over the dome and the world's slowest chat (sky.js, slowchat.js) are drawn only in the landing page's own dress
   (aura.css) — without that stylesheet the page is as it was */
.dome-sky, .dome-seq, .slow-chat { display: none; }

/* mission control, closed (the end of the day after the run): its forms stand as they are, greyed, nothing to press */
body.control.closed form.is-closed { opacity: .55; pointer-events: none; }
body.control.closed .control-closed-note { margin-bottom: 14px; }