/* ═══════════════════════════════════════════════════════════════════════════
   MILO — design system.

   Palette is taken literally from MiloApp/Theme.swift, not approximated.
   Type is the canonical stack from MILO_GOSPEL §11.2, self-hosted so the app
   works with no network.

   Two constraints govern everything here and outrank taste (MILO-SPEC §2.2):
     · NO SUDDEN MOTION. Change is legible and calm, or instant. Never performed.
     · THINGS STAY PUT. Nothing reorders or relocates between screens, because
       muscle memory has to hold.
   ═══════════════════════════════════════════════════════════════════════════ */


/* Inter, the same variable file timetime ships, copied into this app rather
   than named and hoped for. The old comment here claimed the face was
   "self-hosted so the app works with no network" while shipping NO font files
   at all - it named Gill Sans and relied on the Mac having it. That is why the
   two apps did not look alike: timetime renders Inter, Milo rendered whatever
   the OS had. Gill Sans is not timetime's face; it is one of its optional
   skins ("linen"). */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* v4 palette, exact from Theme.swift */
  --cream:    #faf7f2;
  --charcoal: #1e1614;
  --slate:    #6b5f58;
  --sienna:   #c4632d;
  --forest:   #3a6b48;
  /* DR06, the functional red from the same palette card timetime took its
     signal from. The old #c71424 was a screen red; against a warm ceramic field
     this reads as painted lacquer. --purple was removed: it had a definition
     and ZERO uses, and PHASE6 is explicit that a third hue is a bug. */
  --alarm:    #bf1b1b;
  --warn:     #ed8008;

  /* ── The case, and the things on it ──────────────────────────────────────
     Milo was one shade: a near-white page with near-white cards on it, so
     "raised" had nothing to rise from and every tactile trick landed as a faint
     grey line. timetime's ground is mid-tone plaster for exactly this reason -
     an object can sit ON a surface or be cut INTO it only if the surface is
     darker than one and lighter than the other.

     miloGround (#faf7f2, from offline's Theme.swift) stays the OBJECT colour,
     which is what it always effectively was; the page gets its own plaster. The
     cobrand token is unchanged - this adds the layer under it. */
  /* THE RAMP, copied from timetime/css/tokens.css rather than approximated.
     Milo had no ramp - it had six ad-hoc values, so there was no systematic
     relationship between the body, a panel and a well, and every surface was a
     judgement call. These are the Dieter Rams palette-card steps (DR01/DR06)
     that timetime measured its contrast against. */
  --ramp-000: #fffefb;   /* specular: the lit top edge of a raised part */
  --ramp-050: #faf8f1;   /* raised control face */
  --ramp-100: #f5f2e9;   /* CERAMIC - the product case */
  --ramp-150: #edebe2;   /* BODY - the surrounding field */
  --ramp-200: #ece9e0;   /* FACE - recessed surfaces */
  --ramp-250: #e3dfd4;   /* sunk: the floor of a recessed well */
  --ramp-300: #d9d2c6;   /* EDGE - seams, fine rims, quiet separators */
  --ramp-400: #bfb1a8;
  --ramp-500: #9d8f83;
  --ramp-600: #6b5b4e;   /* ink-3, tertiary  - contrast-tested on the well */
  --ramp-700: #574a40;   /* ink-2, secondary */
  --ramp-800: #3a3029;
  --ramp-900: #261f1b;   /* INK - DR01 near-black, warmed */

  --case:   var(--ramp-150);
  --ground: var(--case);
  --ink:    var(--ramp-900);
  --quiet:  var(--ramp-600);
  --ink-2:  var(--ramp-700);
  --edge:   var(--ramp-300);
  --line:   rgba(46, 40, 30, .16);
  --hair:   rgba(46, 40, 30, .09);

  /* ── Depth ───────────────────────────────────────────────────────────────
     Three states and no more: sunk into the case, sitting on it, pressed. Each
     is one crisp step rather than a soft cloud, because a physical control
     reads by its edge - a bevel catching light at the top and losing it at the
     bottom. A blurred drop shadow says "floating", which is the one thing none
     of these objects are. */
  --well:  inset 0 0 0 1px rgba(46, 40, 30, .10);
  --raise: 0 1px 0 rgba(46, 40, 30, .16);
  --press: inset 0 1px 0 rgba(46, 40, 30, .14);
  --lift:  none;
  --raised: var(--ramp-050);
  --sunk:   var(--ramp-250);
  --accent: var(--sienna);
  --on-accent: #fff;

  /* ── Type ────────────────────────────────────────────────────────────────
     One humanist face, no downloads. Gill Sans is the Braun/Rams tell and it
     ships on both Apple platforms, so the app stops carrying 72K of webfont it
     was using to look unlike its own sibling. offline uses the system stack and
     SF Mono; timetime uses this exact chain. Milo was the odd one out.

     There is no separate display serif any more. Instrument Serif was doing the
     work of "this is the important line", which weight and tracking do better
     and without a second voice in a two-app system. */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
           "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue",
           Arial, "Noto Sans", sans-serif;
  --serif: var(--sans);
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Weights carry the hierarchy now that one family carries everything. */
  --wt-light: 300; --wt-reg: 400; --wt-med: 500; --wt-semi: 600;

  /* 4-point grid (gospel §11.3) */
  --g1: 4px; --g2: 8px; --g3: 12px; --g4: 16px; --g5: 24px; --g6: 32px; --g8: 48px;
  --r-s: 4px; --r-m: 8px; --r-l: 16px; --r-pill: 999px;
  --tap: 44px;

  --shadow-raise: 0 1px 2px rgba(30,22,20,.05), 0 2px 8px rgba(30,22,20,.04);
  /* The one thing here that really is floating - a sheet over the page - so it is
   the one thing that casts. Warmed to the case rather than neutral grey. */
  --shadow-lift:  0 2px 3px rgba(58, 48, 38, .18), 0 10px 24px rgba(58, 48, 38, .14);

  color-scheme: light;
}

/* Workspace recolours the accent so you can never mistake which life you are in.
   Same control, same place, different signal. */
:root[data-ws="work"] { --accent: var(--forest); }

/* ── Time atmosphere ───────────────────────────────────────────────────────
   Six states, from Theme.swift. The light genuinely changes through the day
   because it orients you in time - it is not decoration, and unlike the last
   build these values are actually distinguishable. Transition is slow and
   continuous so it is never a visible event. */
:root[data-time="dawn"]      { --case: #ece0cc; }
:root[data-time="morning"]   { --case: #e9e7e0; }
:root[data-time="midday"]    { --case: #eeebe3; }
:root[data-time="afternoon"] { --case: #ecdcc6; }
:root[data-time="sunset"]    { --case: #e8d6bf; }
:root[data-time="night"]     { --case: #e6e2d6; }

/* ── GRAPHITE ────────────────────────────────────────────────────────────────
   The dark half of ONE system. These are timetime's graphite atoms and they are
   the same values offline's Theme.swift carries, so the desktop half and the
   phone half are the same object in two lights rather than two applications.

   THE OPERATING SYSTEM DECIDES. Milo used to reach dark only by the clock or by
   an explicit toggle, and offline was hard-wired dark — so on one machine, with
   one appearance setting, the two halves disagreed. The media query below is
   what makes them answer to the same switch. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ramp-000: #ffffff;
    --ramp-050: #34302a;
    --ramp-100: #2a2721;
    --ramp-150: #221f1a;
    --ramp-200: #1c1a15;
    --ramp-250: #16130f;
    --ramp-300: #100e0a;
    --ramp-400: #4a443c;
    --ramp-500: #6b6459;
    --ramp-600: #9a9186;
    --ramp-700: #b8b0a4;
    --ramp-800: #d2cbc0;
    --ramp-900: #ede9e0;

    --case:   var(--ramp-150);
    --ground: var(--case);
    --ink:    var(--ramp-900);
    --quiet:  var(--ramp-600);
    --ink-2:  var(--ramp-700);
    --edge:   var(--ramp-400);
    --raised: var(--ramp-050);
    --sunk:   var(--ramp-250);
    --line:   rgba(232, 230, 225, .14);
    --hair:   rgba(232, 230, 225, .08);
    --on-accent: #fff;
    color-scheme: dark;
  }
}

/* An explicit choice still outranks the system, in both directions. */
:root[data-theme="dark"] {
  --ramp-050: #34302a; --ramp-100: #2a2721; --ramp-150: #221f1a;
  --ramp-250: #16130f; --ramp-300: #100e0a; --ramp-400: #4a443c;
  --ramp-600: #9a9186; --ramp-700: #b8b0a4; --ramp-900: #ede9e0;
  --case: var(--ramp-150); --ground: var(--case); --ink: var(--ramp-900);
  --quiet: var(--ramp-600); --ink-2: var(--ramp-700); --edge: var(--ramp-400);
  --raised: var(--ramp-050); --sunk: var(--ramp-250);
  --line: rgba(232,230,225,.14); --hair: rgba(232,230,225,.08);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --case: var(--ramp-150); --ground: var(--case); --ink: var(--ramp-900);
  --quiet: var(--ramp-600); --raised: var(--ramp-050); --sunk: var(--ramp-250);
  --line: rgba(46,40,30,.16); --hair: rgba(46,40,30,.09);
  color-scheme: light;
}

/* The light eases over 40s so the day's change is never a visible event.
   A deliberate press is a different thing entirely: waiting 40 seconds for a
   switch you just flipped reads as broken, so an explicit choice snaps. */
body { transition: background-color 40s linear; }
:root.snap, :root.snap body, :root.snap * { transition: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
  padding-bottom: env(safe-area-inset-bottom);
}

/* NO SUDDEN MOTION. Only opacity and colour may transition, and only slowly.
   Nothing translates, scales, bounces or springs. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

h1, h2, h3, .display {
  font-family: var(--sans); font-weight: var(--wt-light); letter-spacing: -.035em;
}
/* Wide-tracked micro caps. In the sans rather than the mono, because a
   monospaced label in a humanist interface reads as a terminal escaping into the
   product, and the tracking already does the work the mono was doing. */
.label {
  font-family: var(--sans); font-size: 11px; font-weight: var(--wt-med);
  letter-spacing: .14em; text-transform: uppercase; color: var(--quiet);
}
.muted { color: var(--quiet); }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }

/* ── Chrome ────────────────────────────────────────────────────────────────
   Three fixed anchors, matching offline exactly: workspace left, app switch
   centre, system right. Below 760 they stack as full-width bars. */
.head {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--g3); padding: var(--g3) var(--g4);
  padding-top: max(var(--g3), env(safe-area-inset-top));
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair);
}
.seg {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--sunk); border-radius: var(--r-m);
}
.seg button {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--quiet);
  min-height: 32px; padding: 0 var(--g3); border-radius: 10px;
  transition: color .18s linear, background-color .18s linear;
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
/* Grid items stretch by default, which turned the workspace switch into a
   third of the screen with a vast empty half. Each anchor takes only the room
   it needs and sits where it belongs. */
.head > *:first-child { justify-self: start; }
.head .right { justify-self: end; }

@media (max-width: 760px) {
  /* ONE row, not three stacked bars. Stacking gave a 430px phone a 162px header
     - nineteen percent of the screen spent on two toggles you touch twice a day,
     sitting above the one thing you are meant to be looking at. The controls
     keep their 44px touch target; only the layout changes. */
  .head {
    grid-template-columns: auto auto 1fr; gap: var(--g2);
    padding-left: var(--g3); padding-right: var(--g3);
  }
  .head > * { justify-self: start !important; }
  .head .right { justify-self: end !important; }
  .seg button { min-height: var(--tap); padding: 0 var(--g2); font-size: 9.5px; }
  .pill { font-size: 9.5px; padding: 0 var(--g2); }
}

/* ── Now ───────────────────────────────────────────────────────────────────
   The current thing dominant, the next two or three visible so you know what
   is after without seeing the wave, and a pull-up to the full timeline. */
.wrap { max-width: 720px; margin: 0 auto; padding: var(--g5) var(--g4) 120px; }
.datestrip { display: flex; gap: var(--g2); align-items: baseline; margin-bottom: var(--g2); }
.greeting { font-size: clamp(30px, 8vw, 46px); line-height: 1.05; margin: 0 0 var(--g6); }

.nowcard {
  background: var(--raised); border-radius: var(--r-l); padding: var(--g5);
  box-shadow: var(--raise); border: 1px solid var(--hair); border-radius: var(--r-l);
}
.nowcard .when { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--g3); }
.nowcard .title { font-family: var(--serif); font-size: clamp(24px, 6vw, 34px); line-height: 1.15; margin: 0 0 var(--g3); }
.ladder { display: inline-flex; align-items: center; gap: var(--g2); }
.ladder .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

.actions { display: flex; gap: var(--g2); margin-top: var(--g5); flex-wrap: wrap; }
.btn {
  min-height: var(--tap); padding: 0 var(--g4); border-radius: var(--r-m);
  background: var(--raised); color: var(--ink);
  font-family: var(--sans); font-size: 14px; font-weight: var(--wt-med);
  letter-spacing: 0; text-transform: lowercase;
  display: inline-flex; align-items: center; gap: var(--g2);
  box-shadow: var(--raise);
  transition: box-shadow 70ms linear, transform 70ms linear, background-color .18s linear;
}
/* 1px of travel. Enough to feel, far too little to read as motion - §2.2 forbids
   sudden movement and this is deliberately below that threshold. */
.btn:active { box-shadow: var(--press); transform: translateY(1px); }
/* The primary key. PHASE6 forbids the inset white highlight that used to sit
   here - a simulated gloss is the single thing Rams, Vignelli and LeWitt all
   reject, and it was hardcoded past the token so deleting --lift did not remove
   it. Flat fill, one contact crescent, contrast carried by the label. */
.btn.primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--raise);
}
.btn:hover { background: color-mix(in srgb, var(--accent) 14%, var(--sunk)); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); }

.next { margin-top: var(--g6); display: grid; gap: var(--g2); }
.nextrow {
  display: grid; grid-template-columns: 58px 1fr auto; gap: var(--g3);
  align-items: baseline; padding: var(--g3);
  border-radius: var(--r-m); background: transparent;
  border: 1px solid var(--hair);
}
/* THE CHOSEN ONE.
   Selection used to be `box-shadow: var(--raise)`, and when --raise became a
   single contact crescent under PHASE6 the chosen row stopped being visibly
   different from the other two — so the depth step could not be completed at
   all. A choice has to be legible without a bevel: the accent takes the border
   and the label, which is flat, obvious, and survives greyscale because the
   border also thickens. */
.nextrow.on {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.nextrow.on .t { color: var(--accent); }
.nextrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nextrow .t { font-family: var(--mono); font-size: 11px; color: var(--quiet); }

/* ── Timeline ──────────────────────────────────────────────────────────────
   Vertical, chronological, scrolling forward is time passing. Pinch to zoom;
   the far future fogs into intentions and goals. */
.tl { position: relative; margin-top: var(--g5); }
.tl-scale { position: absolute; inset: 0; pointer-events: none; }
.tl-hour {
  position: absolute; left: 0; right: 0; border-top: 1px solid var(--hair);
  font-family: var(--mono); font-size: 9px; color: var(--quiet); padding-left: 2px;
}
.tl-body { position: relative; margin-left: 52px; }
.tl-item {
  position: absolute; left: 0; right: 0;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: var(--g2) var(--g3); overflow: hidden;
  box-shadow: var(--shadow-raise);
}
.tl-item.anchor { border-left: 3px solid var(--accent); }
.tl-item.done { opacity: .45; }
/* A run of consecutive work, collapsed (§5.3). Dashed rather than a new colour:
   the border says "this is several things" without inventing a signal the rest
   of the app does not use, and §2.2 forbids colour as the only carrier. */
.tl-item.run { border-style: dashed; }
.tl-item .ti { font-size: 14px; line-height: 1.25; }
/* When the block is genuinely short, the title truncates on one line rather
   than being sliced in half - a half-word is worse than an ellipsis. */
.tl-item.short { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.tl-item.short .ti { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.tl-item .tm { font-family: var(--mono); font-size: 9px; color: var(--quiet); }
.tl-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--alarm); z-index: 5; }
/* The marker sits clear of the cards rather than on top of one - it is a
   reference line, and a label that lands on your current task obscures the one
   thing you most need to read. */
.tl-now::before {
  content: "now"; position: absolute; right: 0; top: -15px;
  padding: 0 4px; background: var(--ground);
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--alarm);
}
/* Open time. It was a 45-degree hatch at 5px pitch, which on a real day - three
   tasks and eight free hours - filled most of the screen with texture and read
   as the loudest thing on the timeline. Free time is the QUIET part of a day;
   drawing it as the busiest part inverts what the surface is for.

   Now: a recess, the same one a field gets, so open time reads as a slot
   something could drop into rather than as hazard tape. */
.tl-gap {
  position: absolute; left: 0; right: 0; border-radius: var(--r-s);
  background: var(--sunk); box-shadow: var(--well); opacity: .55;
  transition: opacity .18s linear;
}
.tl-gap:hover { opacity: 1; }
/* Long stretches earn a word, so an empty afternoon says what it is instead of
   being a blank the eye has to measure against the hour rules. */
.tl-gap[data-hours]::after {
  content: attr(data-hours); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 11px; font-weight: var(--wt-med);
  letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); opacity: .8;
}

/* ── Sheet ─────────────────────────────────────────────────────────────────
   Appears instantly. No slide-up, because sudden motion is the thing we do not do. */
.scrim { position: fixed; inset: 0; background: rgba(30,22,20,.32); z-index: 60; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--ground); border-top-left-radius: var(--r-l); border-top-right-radius: var(--r-l);
  padding: var(--g5) var(--g4) calc(var(--g5) + env(safe-area-inset-bottom));
  max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow-lift);
}
@media (min-width: 761px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%);
           width: min(560px, 92vw); border-radius: var(--r-l); max-height: 82vh; }
}
.field { display: grid; gap: var(--g2); margin-bottom: var(--g4); }
/* A field is a recess, not a raised plate: you put something INTO it. The inset
   highlight along the top edge is the whole trick - it reads as a lip catching
   light, which is what tells a thumb the surface is below the case. */
.field input, .field select, .field textarea {
  min-height: var(--tap); padding: 0 var(--g3); border-radius: var(--r-m);
  border: 0; background: var(--sunk); box-shadow: var(--well);
}
.field textarea { padding: var(--g3); min-height: 88px; line-height: 1.45; }

/* ── Bottom bar ────────────────────────────────────────────────────────── */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-auto-flow: column; gap: 2px;
  padding: var(--g2) var(--g3) calc(var(--g2) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--hair);
}
.bar button {
  min-height: var(--tap); border-radius: var(--r-m); color: var(--quiet);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  transition: color .18s linear, background-color .18s linear;
}
.bar button[aria-pressed="true"] { color: var(--ink); background: var(--sunk); }

/* ── Proposal ──────────────────────────────────────────────────────────────
   Everything confirms by default (§3.4). This is what confirmation looks like:
   what changed, why, and one tap to accept or reject. */
.proposal { border: 1px solid var(--accent); border-radius: var(--r-m); padding: var(--g4); margin-bottom: var(--g4); background: var(--raised); }
.proposal ul { margin: var(--g2) 0 var(--g4); padding-left: var(--g4); }
.proposal li { font-size: 14px; margin-bottom: var(--g1); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--sunk); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
.pill.live { color: var(--forest); } .pill.stale { color: var(--sienna); } .pill.off { color: var(--quiet); }

.energy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; background: var(--sunk); border-radius: var(--r-m); }
.energy button { min-height: var(--tap); border-radius: 10px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); line-height: 1.2; padding: 4px; }
.energy button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

.empty { text-align: center; padding: var(--g8) var(--g4); color: var(--quiet); }
.empty .display { font-size: 22px; color: var(--ink); margin-bottom: var(--g2); }

/* ── DESKTOP OVERRIDES — DELIBERATELY LAST ────────────────────────────────
   These target elements whose base rules are declared further down the file.
   Written any earlier they have identical specificity and simply lose on source
   order, which is silent: the rule is present, correct, and has no effect. That
   has now caused three separate bugs in this project, so every override that
   competes with a later base rule lives here, at the end, where it wins. */
@media (min-width: 761px) {
  /* The bottom bar is a phone pattern. On a desk it stays a bar, but a centred
     one at the width of the content rather than a 1440px sprawl. */
  .bar {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(720px, 100%);
    border-radius: var(--r-l) var(--r-l) 0 0;
    border: 1px solid var(--hair); border-bottom: 0;
    gap: var(--g1); padding: var(--g2) var(--g3);
  }
  .wrap { padding-bottom: 150px; }
}

/* One action carries the card. Full width, so the thumb does not have to aim. */
.btn.wide { width: 100%; justify-content: center; min-height: 52px; font-size: 12px; }

/* The rest step back: still real controls with a 44px target, but they stop
   competing with the thing you are meant to press. Text, a hairline between
   them, no plates. */
.minor {
  display: flex; align-items: stretch; margin-top: var(--g3);
  border-top: 1px solid var(--hair); padding-top: var(--g2);
}
.minor button {
  flex: 1; min-height: var(--tap); color: var(--quiet);
  font-family: var(--sans); font-size: 11px; font-weight: var(--wt-med);
  letter-spacing: .12em; text-transform: uppercase;
  transition: color .18s linear;
}
.minor button + button { border-left: 1px solid var(--hair); }
.minor button:hover { color: var(--ink); }

/* The gauge sits in the middle of the card, in its own air. */
.dialwrap { display: flex; justify-content: center; margin: var(--g6) 0 var(--g5); }
.dialwrap svg { width: clamp(150px, 46vw, 190px); height: auto; }

/* The first run is the interview and nothing else. The chrome and the empty
   view behind it are hidden rather than dimmed: a dimmed control still reads as
   a control you could reach, and reaching past the interview lands you in an
   app with no goals, which §3.2 makes unusable by design. */
body.interviewing .head,
body.interviewing #bar,
body.interviewing #view { visibility: hidden; }
body.interviewing .scrim { background: var(--case); }