/* C&C.
 *
 * A briefing room, not a database.
 *
 * The palette is taken from the Command & Control set — sampled from a frame of
 * 2x01 rather than remembered. Two facts from that sample govern everything
 * here:
 *
 *   52% of the frame is near-black, tinted blue (#000008 – #080818).
 *   15% of it emits light, and that light is pale blue-white (#90c0f0, #b0d0f0),
 *   not saturated cyan. The saturated cyan is only the core of the strip.
 *
 * So: a very dark room, and light used sparingly. Panels are barely lighter
 * than the background; colour arrives as edges, glows and small dense blocks —
 * the way the set's consoles read against black — never as large fills.
 *
 * Colour carries meaning, and only meaning:
 *
 *   signal (cyan)  the interface itself — actions, focus, where you are
 *   alert (amber)  something wants a person; caution
 *   go    (green)  confirmed, agreed, done
 *   stop  (red)    cancelled, declined, destructive
 *
 * Anything decorative is grey. If a thing is coloured, it is saying something.
 *
 * No JavaScript anywhere. Every action is a form post, which means every action
 * works and survives a browser with opinions.
 */

:root {
  /* The room, with the relationship the right way round.
     On the set the *walls* are mid-dark panelled bulkhead — stippled, seamed,
     catching light — and the *consoles* are near-black slabs sitting against
     them. The first pass had it inverted: a black page with slightly lighter
     cards, which is why everything read as flat digital black. */
  /* Sampled from photographs of the corridor sets, not guessed: the wall is
     warm taupe at hue ~38°, saturation ~0.2 — not the blue-black I had. Value
     dropped from the set's 0.47 to roughly 0.10 so text still reads on it,
     which is the one liberty taken. */
  --wall:          #1a1714;   /* warm bulkhead */
  --course:        #0f0d0b;   /* the recessed groove between two courses */
  --course-lit:    #262119;   /* the lit top edge of the course below */
  --seam:          #0f0d0b;
  --bg:            var(--wall);
  --bg-raised:     #07080c;   /* a console slab, mounted on the wall */
  --bg-sunken:     #030407;   /* inset into one */
  --line:          #2a2b33;
  --line-soft:     #1d1e25;

  /* Brushed metal — the railings and window frame. Structure, never emphasis. */
  --metal:         #7d8894;

  --ink:           #dce6f2;
  --ink-quiet:     #7c8ba1;
  --ink-loud:      #ffffff;

  /* The light strips: a saturated core, a pale spill, a dim trace.
     `--signal` is not a fixed colour — it is *this section's* colour, rebound
     per area below. Everything that means "the interface itself" reads it, so
     the whole screen shifts hue as you move between sections. */
  --signal:        #38bdf8;
  --signal-pale:   #b0d0f0;
  --signal-dim:    #1a4763;
  --signal-wash:   #0a1a26;

  /* The mark never moves. It is the one thing that must not change meaning
     when the section does. */
  --brand:         #38bdf8;

  /* What a console field looks like: warm amber on near-black. */
  --readout:       #f2cf94;

  /* Console hues, measured from the panel banks rather than chosen: blue 31%,
     green 31%, cyan 20%, then red, amber, violet, yellow, magenta. Brightened
     to stay legible against a near-black room. */
  --violet:        #a78bfa;
  --violet-dim:    #43346b;
  --violet-wash:   #150f26;
  --leaf:          #6ee06a;
  --leaf-dim:      #2a5c28;
  --leaf-wash:     #0c1a0c;
  --rose:          #e879c8;
  --rose-dim:      #5e2b50;
  --rose-wash:     #1e0c1a;

  /* Console colours. Sampled from the panel blocks, kept saturated because on
     the set they are small and bright against black. */
  --alert:         #e8a33d;
  --alert-dim:     #6b4d1c;
  --alert-wash:    #1d1608;
  --go:            #4ade80;
  --go-dim:        #1c4633;
  --stop:          #f0524a;
  --stop-dim:      #58211f;

  /* Three radii, not one. The set's housings are moulded, not cut: a big slab
     carries a big corner and a legend chip carries a small one, and using a
     single value for both is what makes rounded interfaces read as inflated.
     Each is roughly proportional to the thing it is drawn on. */
  --radius-lg: 14px;   /* panels, cards — the housings          */
  --radius: 9px;       /* boxes inside them — rows, notes, wells */
  --radius-sm: 4px;    /* chips, pills, inputs, switches         */
  --gap: 1.25rem;
  --measure: 62ch;
  --container: 1040px;   /* one width, so the header and the panels agree */

  /* The keypad, named once.
   *
   * The header bank drew its faces and silkscreen rings inline. A button is the
   * same object as a key — the file already said so where the corner radius was
   * set — and an indicator is the silkscreen printed beside one. So the geometry
   * lives here and every key, lamp and legend on the site reads it.
   *
   * `--face` is what the individual thing is made of; `--lit` is that thing when
   * it is the one that is true right now. Both are set per element, which is why
   * a variant below is usually two lines rather than five.
   *
   * Two ring sizes, for the same reason there are three radii: the echo is
   * silkscreened *around* an object and has to be proportional to it. A key
   * carries the full four-ring echo; a chip carries a tighter one, or the halo
   * ends up wider than the legend inside it. */
  --key-ink:  #06070a;   /* the legend, cut out of the face */
  --key-slab: #04050a;   /* the panel showing between the rings */
  --key-radius: 8px;

  /* How strongly the echo prints, which is a property of the surface and not of
     the key. The bank in the header sits on the darkest slab on the site, so a
     faint ring reads there; a key on a panel or on the wall needs a heavier one
     or the echo disappears and the key is just a rounded rectangle. Measured by
     looking, not assumed: at the bank's own 52/26 the production track had no
     visible rings at all. */
  --ring-a: 52%;
  --ring-b: 26%;

  --rings:
    0 0 0 2px var(--key-slab),
    0 0 0 3px color-mix(in srgb, var(--face) var(--ring-a), transparent),
    0 0 0 5px var(--key-slab),
    0 0 0 6px color-mix(in srgb, var(--face) var(--ring-b), transparent);

  --rings-lit:
    0 0 0 2px var(--key-slab),
    0 0 0 3px var(--lit),
    0 0 0 5px var(--key-slab),
    0 0 0 6px color-mix(in srgb, var(--lit) 55%, transparent),
    0 0 22px -4px color-mix(in srgb, var(--lit) 70%, transparent);

  --rings-sm:
    0 0 0 1px var(--key-slab),
    0 0 0 2px color-mix(in srgb, var(--face) var(--ring-a), transparent),
    0 0 0 3px var(--key-slab),
    0 0 0 4px color-mix(in srgb, var(--face) var(--ring-b), transparent);

  --rings-sm-lit:
    0 0 0 1px var(--key-slab),
    0 0 0 2px var(--lit),
    0 0 0 3px var(--key-slab),
    0 0 0 4px color-mix(in srgb, var(--lit) 55%, transparent),
    0 0 16px -4px color-mix(in srgb, var(--lit) 60%, transparent);

  /* The legend. The prop's is not monospace — it is a tiny, heavy, widely
     tracked sans cut out of the face. Everything that is a key or a lamp says
     its name this way, which is most of what makes them read as one object. */
  --legend-size:  .68rem;
  --legend-track: .12em;

  /* An unlit key: powered, pressable, saying nothing in particular.
     Chartreuse, and the same chartreuse the bank in the header is cut from —
     one stock for every key on the station.

     The earlier draft made these steel, on the argument that chartreuse in the
     header means "a destination" and so a Save button drawn in it would claim
     to be a place you can go. Looked at on the actual display, that reasoning
     had it backwards: chartreuse is not what a destination is made of, it is
     what a *key* is made of — on the prop it is the field, and the coloured
     keys are the claims. Steel buttons read as a second, quieter kind of
     hardware bolted onto the same console. So the field colour is shared, and
     the claims stay where they were: cyan proceeds, green confirms, red
     destroys, and in the bank blue is Briefing and red is Recording.

     Josh's call, 2026-08-10. The legend clears 7.4:1 on the resting face and
     more on the lit one — measured against --key-ink, not judged by eye. */
  --key-face:     #98a62e;
  --key-face-lit: #cdf24f;   /* this key is the one that is true right now —
                                the lit prop's own green-yellow, not a
                                highlighter yellow */
  --key-dim:       #3d444e;   /* the same key, cut from darker stock */
  /* Bright enough that a near-black legend still clears 4.5:1 when a quiet key
     is the lit one — the first value tried was 3.56:1, which is a current state
     you cannot read. Still visibly below the steel key's lit face. */
  --key-dim-lit:   #7e8a99;

  /* Bulkhead finish. The station's interiors were sponged and stippled onto
     fiberglass and wood composite — partly for a worn, utilitarian look, partly
     because the texture diffuses hard studio light and hides the seams between
     modular panels. Flat digital black has neither problem and neither
     quality, so the noise is generated rather than borrowed: an SVG fractal
     turbulence, inline, no request and no asset to lose.

     Kept far below the threshold where it reads as "texture". It should only
     stop a surface looking like an absence. */
  --stipple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23s)'/%3E%3C/svg%3E");

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* The controls are the console. On the set the panels are black slabs carrying
   small, tightly packed blocks of saturated colour — green, cyan, amber, red,
   blue — all visible at once. So the palette appears together on every page and
   is carried by the controls themselves, rather than one hue per section.

   Colour still means something: cyan acts, green confirms, red destroys, amber
   is where you type. It is the *arrangement* that is console-like, not the
   licence to colour things at random. */

* { box-sizing: border-box; }

body {
  margin: 0;
  position: relative;
  /* Modular wall panels: vertical joins, horizontal courses, and the sponged
     finish over both. The seams are what stop a large dark area reading as an
     absence — the set never shows an unbroken surface. */
  background-color: var(--wall);
  background-image:
    /* Uneven light. The set is lit from somewhere and never evenly; a flat wash
       is the thing that reads as digital. Warm, to match the walls. */
    radial-gradient(130% 70% at 20% -5%, rgba(190, 160, 110, .07), transparent 62%),
    radial-gradient(90% 60% at 95% 105%, rgba(120, 100, 70, .06), transparent 60%),
    /* The courses. Wide horizontal bands, each about 68px tall and running the
       full width — the corridor walls are stacked courses, not tall panels.
       Each join is a dark recess with the lit top edge of the next course
       showing just below it. */
    repeating-linear-gradient(180deg,
      transparent 0 148px,
      rgba(0, 0, 0, .28) 148px 150px,
      rgba(255, 255, 255, .018) 150px 151px),
    var(--stipple);
  background-blend-mode: normal, normal, normal, soft-light;
  background-attachment: fixed, fixed, scroll, scroll;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The room's finish, laid over everything and under nothing you can click. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--stipple);
  opacity: .05;
  pointer-events: none;
  z-index: 1000;
  mix-blend-mode: overlay;
}

a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--signal); }

h1, h2, h3 { line-height: 1.25; font-weight: 600; }

/* --- chrome --------------------------------------------------------------- */

/* The header is the first bank of controls: five labelled destinations, all
   visible at once, with exactly one lit.

   Two things at once, which is why there are two elements. The band is the
   bulkhead and runs wall to wall — a housing that stopped short of the window
   edge would be a housing floating in a room. Its *contents* sit on the same
   left margin as every panel below, because two left margins on one page is
   the thing that reads as a mistake. */
.chrome {
  background: #14110e var(--stipple);
  background-blend-mode: soft-light;
  border-bottom: 1px solid var(--signal-dim);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--brand) 22%, transparent),
              0 6px 20px -8px color-mix(in srgb, var(--brand) 30%, transparent);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Three columns, not a flex row, and the reason is that the bank has to be
   centred on the *housing* rather than on whatever is left over.
   Flex put the mark first and let the keypad start wherever the mark's width
   ended, which landed the bank a hundred-odd pixels left of centre — near
   enough to centre to read as a mistake rather than as a decision, and it moved
   whenever the show name changed length. The outer columns are equal fractions,
   so the middle one is centred whether the mark is wider than the user block or
   the other way round. */
.chrome-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  /* The same three declarations `main` uses, so the mark and the first panel
     below it sit on one line. If main's padding changes, this changes with it. */
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.4rem;
  /* Tall enough for the keypad's outermost silkscreen ring to sit inside the
     housing rather than against its edge. */
  height: 68px;
}
.chrome-inner > .mark { justify-self: start; }
.chrome-inner > .chrome-user { justify-self: end; }

.mark { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; }
.mark-name {
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--brand);
  font-size: .95rem;
  text-shadow: 0 0 14px color-mix(in srgb, var(--brand) 45%, transparent);
}
.mark-show {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* The nav is a keypad, drawn after the console keypad prop from Babylon 5 —
   both the lit hero shot and the unlit prop, so the resting state comes from
   the object and the selected state from the way it reads on set.
   What the prop does, and what is copied:

     a black slab inside one thin steel-blue bezel, generous corner radius;
     solid, flat, unmodulated key faces — no gloss, no gradient, no bevel;
     the legend cut out of the face in near-black, tiny and letter-spaced;
     concentric outlines echoing each key's own shape outward;
     slanted tally marks silkscreened along the top edge.

   The prop is overwhelmingly one chartreuse field with a handful of accent
   keys, and that proportion is kept: chartreuse is what a station looks like,
   and a colour other than chartreuse is a claim. Only two are made — Briefing
   is the blue VAR/FAB pair, Recording is the single red key, since that is the
   one with a light on it when it matters.

   The cost, stated rather than hidden: Proposals, Guests and Episodes are no
   longer told apart by colour, so those three are read rather than recognised
   (UX.md §4). Position is stable and the lit key is unmistakable, which is
   what carries wayfinding instead. */
.chrome nav.keypad {
  display: flex;
  align-items: center;
  gap: .55rem;
  justify-self: center;
  /* The extra top padding is the slab's silkscreen margin — it is where the
     tally marks live on the prop, and without it they would cross the keys. */
  padding: .78rem .7rem .42rem;
  border: 1px solid #4c7fa0;
  border-radius: 16px;
  background: #04050a var(--stipple);
  background-blend-mode: soft-light;
  box-shadow: inset 0 0 26px -4px #000;
  position: relative;
}

.chrome nav.keypad::before {
  content: "";
  position: absolute;
  top: 3px; left: 16px;
  width: 104px; height: 7px;
  background: repeating-linear-gradient(74deg,
              rgba(200,212,230,.45) 0 2px, transparent 2px 10px);
  pointer-events: none;
}

.chrome nav.keypad a.key {
  --face: var(--key-face);     /* powered, not selected */
  --lit:  var(--key-face-lit); /* this station is live */
  text-decoration: none;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
  padding: .6rem .8rem;
  border-radius: var(--key-radius);
  background: var(--face);
  color: var(--key-ink);
  /* key · gap · ring · gap · fainter ring — the prop's silkscreen echo, now
     shared with every other key and lamp on the site. */
  box-shadow: var(--rings);
  transition: background .1s, box-shadow .1s;
}

.chrome nav.keypad a.key:hover { background: color-mix(in srgb, var(--face) 60%, var(--lit)); }

/* Exactly one key on the bank is lit, and it is where you are. */
.chrome nav.keypad a.key[aria-current="page"] {
  background: var(--lit);
  color: var(--key-ink);
  box-shadow: var(--rings-lit);
}

.chrome nav.keypad a.key:focus-visible { outline: 2px solid #fff; outline-offset: 8px; }

/* The two accent keys. Every legend clears 4.5:1 on both of its faces —
   measured against #06070a, not judged by eye. */
.chrome nav.keypad a.nav-briefing { --face: #4a86bd; --lit: #6cc0f2; }
.chrome nav.keypad a.nav-sessions { --face: #cb5b45; --lit: #f0705a; }

/* Below the point where the bank fits on one line it becomes two rows of keys,
   which is what the prop is anyway. */
@media (max-width: 860px) {
  /* Back to a wrapping row. Centring is a property of a header wide enough to
     have a middle; once the bank is on its own line there is nothing to centre
     it against, and a grid column would only stop it wrapping. */
  .chrome-inner { display: flex; height: auto; flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; gap: 1rem; }
  .chrome nav.keypad { flex-wrap: wrap; row-gap: .8rem; margin-right: auto; }
}

.chrome-user { display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: var(--ink-quiet); }

/* Everything below the header is on a lighter surface than the bank, so the
   echo prints harder there. Set once on `main` rather than per control. */
main { max-width: var(--container); margin: 0 auto; padding: 2rem 1.4rem 5rem;
       --ring-a: 74%; --ring-b: 40%; }

/* --- flashes -------------------------------------------------------------- */

.flashes { margin-bottom: 1.5rem; }
.flash {
  margin: 0 0 .5rem;
  padding: .7rem 1rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--line);
  background: var(--bg-raised);
  font-size: .9rem;
}
.flash-success { border-left-color: var(--go); }
.flash-error   { border-left-color: var(--stop); }
.flash-notice  { border-left-color: var(--alert); }

/* --- headings ------------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 1.5rem;
}
.head-actions { display: flex; gap: .9rem; row-gap: 1rem; flex-wrap: wrap; }
.page-title { margin: 0 0 .25rem; font-size: 1.6rem; letter-spacing: -.01em; }
.subtitle { margin: .1rem 0; color: var(--ink-quiet); }
.lede { color: var(--ink-quiet); max-width: var(--measure); margin-top: -.5rem; }
.breadcrumb { margin: 0 0 1rem; font-size: .85rem; }
.breadcrumb a { color: var(--ink-quiet); text-decoration: none; }
.breadcrumb a:hover { color: var(--signal); }
.quiet { color: var(--ink-quiet); font-size: .87rem; }
.hint { display: block; color: var(--ink-quiet); font-size: .8rem; margin-top: .35rem; max-width: var(--measure); }
.empty { color: var(--ink-quiet); padding: 2rem 0; }

/* --- panels --------------------------------------------------------------- */

/* Barely lighter than the room, with a hairline top edge catching the light —
   the way the console housings read: dark slabs with a lit lip. */
.panel {
  background: var(--bg-raised) var(--stipple);
  background-blend-mode: soft-light;
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  margin-bottom: var(--gap);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.panel h2 {
  margin: 0 0 .9rem;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-weight: 600;
}

/* A housing carrying nothing but a list of rows. It takes less padding than a
   headed panel because each row brings its own, and the two together push the
   first line a long way off the slab's edge. */
.panel-list { padding: .55rem 1.1rem; }

/* An empty state inside a housing is already framed by the housing. The 2rem
   it takes on the bare wall opens a hole in the slab. */
.panel .empty { padding: .8rem .1rem; }

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
@media (max-width: 780px) { .columns { grid-template-columns: 1fr; } }

/* --- the briefing: three questions, once each ------------------------------- */

/* The screen answers what is blocked on me, what is on the schedule, and what
   has to be decided — in that order, once each. Its previous version showed
   every proposal three times under three headings, which is why nothing on it
   could be found.

   Weight is carried by size and colour, not by headings. Five identically
   styled panels is a page saying everything matters equally, which reads the
   same as nothing mattering (UX.md §6). So: the blocked strip is small and
   loud, the date is the largest thing on the page, the votes are a housing,
   and everything else is one grey line at the foot. */

/* Blocked on you, and nothing else here shows it. Usually absent entirely —
   an empty strip renders nothing rather than rendering "nothing". */
.blocked { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; gap: .5rem; }
.blocked a {
  display: block;
  padding: .8rem 1.1rem;
  background: var(--alert-wash);
  border-left: 3px solid var(--alert);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-loud);
  font-weight: 600;
  font-size: .95rem;
}
.blocked a:hover { background: #241c0b; }

/* The schedule. A date is the most concrete thing on this page, so it is the
   biggest — you should be able to answer "when are we recording" from the
   doorway, without reading a label. */
.schedule-when { margin: 0 0 .3rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.schedule-when a { text-decoration: none; color: var(--ink-loud); }
.schedule-when a:hover { color: var(--signal); }
.schedule-none { color: var(--ink-quiet); font-weight: 500; }
/* The gate, when it is shut. Amber says the same thing here as everywhere else
   on this screen: something wants a person. It is the largest amber on the page
   because until it clears, nothing else on the page can move. */
.schedule-blocked { color: var(--alert); }
.schedule-act { margin: .9rem 0 0; }
.schedule-state { margin: 0; color: var(--ink-quiet); font-size: .92rem; }
.schedule-state a { color: var(--ink); }
.schedule-state.status-confirmed { color: var(--go); }
.schedule-later { margin: .7rem 0 0; font-size: .87rem; color: var(--ink-quiet); }
.schedule .etas { margin-top: .8rem; }

/* The running order. Top of the screen, and sized like the schedule panel it
   sits above: what you are making next and when you are making it are the two
   facts the page exists to hold, and they should read as a pair. */
.next-panel { border-left: 3px solid var(--readout); }
.next-episode { margin: 0 0 .3rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.next-episode a { text-decoration: none; color: var(--ink-loud); }
.next-episode a:hover { color: var(--signal); }
.next-episode.next-none { color: var(--ink-quiet); font-weight: 500; }
.next-state { margin: 0 0 .2rem; color: var(--ink-quiet); font-size: .92rem; max-width: var(--measure); }
.next-why {
  margin: .55rem 0 0;
  padding-left: .8rem;
  border-left: 2px solid var(--line);
  color: var(--ink-quiet);
  font-size: .9rem;
  max-width: var(--measure);
  white-space: pre-wrap;
}
.next-why strong { color: var(--ink); }
.next-questions { margin-top: 1rem; }
.next-act { margin: 1rem 0 0; }
/* A counter names what it answers. Quiet, because it is orientation rather than
   argument — but present, because half a question is not a question. */
.decide-answers {
  margin: .35rem 0 0;
  font-size: .87rem;
  color: var(--ink-quiet);
  font-style: italic;
}
.decide-answers a { color: var(--signal-pale); }
.kind-next { --face: var(--readout); }

/* Countering opens the same form that proposing does, so the thing being
   answered is quoted above it rather than remembered. */
.countering { border-left: 3px solid var(--readout); }
.countering-title { margin: 0 0 .3rem; font-size: 1.1rem; font-weight: 600; }
.countering-why { margin: 0 0 .6rem; color: var(--ink-quiet); white-space: pre-wrap; max-width: var(--measure); }
.pair-link { margin: 0 0 .8rem; color: var(--ink-quiet); font-size: .92rem; }

/* The votes, with the keys on them. Each proposal is one block you can answer
   without leaving: what it is, the case for it, the last thing said about it,
   and then the keys — in that order, because a row of naked buttons invites
   pressing before reading. */
.decide-panel h2 { display: flex; align-items: center; gap: .6rem; }
.decide-count {
  font-family: var(--mono);
  font-size: .7rem;
  padding: .1rem .4rem;
  border-radius: var(--radius-sm);
  background: var(--alert);
  color: var(--key-ink);
  letter-spacing: 0;
}
.decide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.decide-item {
  padding: 1rem 1.1rem;
  background: var(--bg-sunken);
  border-radius: var(--radius);
  border-left: 3px solid var(--line);
}
/* The one where your press settles it. The only coloured edge in the list, so
   it is findable without reading all of them. */
.decide-item.decides-it { border-left-color: var(--alert); }
.decide-head { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; }
.decide-title { font-size: 1.05rem; font-weight: 600; text-decoration: none; color: var(--ink-loud); }
.decide-title:hover { color: var(--signal); }
.decide-why {
  margin: .45rem 0 0;
  color: var(--ink);
  max-width: var(--measure);
  white-space: pre-wrap;
}
.decide-said {
  margin: .55rem 0 0;
  padding-left: .8rem;
  border-left: 2px solid var(--line);
  color: var(--ink-quiet);
  font-size: .9rem;
  max-width: var(--measure);
}
.decide-said strong { color: var(--ink); }
/* Keys first, then what your press is worth beside them — the sentence is about
   the keys, so it sits with them rather than above them. */
.decide-foot {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: .95rem;
}
.decide-standing { margin: 0; font-size: .87rem; color: var(--ink-quiet); }
.decide-standing strong { color: var(--alert); }
.decide-item form { display: inline-flex; }

/* Three answers, one row: agree, reply, counter — and declining last and small.
   Reply is a disclosure rather than a link because "yes but not yet" is the
   commonest answer to a proposal and it should not cost a page (UX.md §8). */
.answers { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; row-gap: .7rem; }
.answers .reply { display: inline-block; }
.answers .reply > summary {
  cursor: pointer;
  color: var(--ink-quiet);
  font-size: .9rem;
  list-style: none;
  padding: .35rem 0;
  border-bottom: 1px dotted var(--line);
}
.answers .reply > summary:hover { color: var(--ink-loud); border-bottom-color: var(--metal); }
.answers .reply > summary::-webkit-details-marker { display: none; }
.answers .reply[open] > summary { color: var(--ink); }
/* Opening it takes the whole row: a two-line textarea wedged between two keys is
   a control nobody types into. */
.answers .reply[open] { flex-basis: 100%; }
.answers .reply form {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin-top: .6rem;
  max-width: var(--measure);
}
.answers .reply textarea { flex: 1; }
.answers .counter-key { font-size: .9rem; }

/* Worth knowing, not a thing to do here. One grey line, counts not lists. */
.elsewhere-line {
  margin: var(--gap) 0 0;
  font-size: .87rem;
  color: var(--ink-quiet);
}
.elsewhere-line a { color: var(--ink-quiet); text-decoration-color: var(--line-soft); }
.elsewhere-line a:hover { color: var(--signal); }
.elsewhere-line .sep { margin: 0 .5rem; opacity: .5; }

.all-clear {
  padding: 0;
  border: none;
  color: var(--ink-quiet);
  margin: 0;
}

.next-session .when { margin: 0 0 .2rem; font-size: 1.05rem; }
.next-session .when a { text-decoration: none; }
.next-session .when a:hover { color: var(--signal); }
.session-state { margin: 0 0 .7rem; color: var(--ink-quiet); font-size: .87rem; }
.status-confirmed .session-state { color: var(--go); }
.etas {
  list-style: none;
  padding: .6rem .8rem;
  margin: 0 0 .8rem;
  background: var(--bg-sunken);
  border-left: 2px solid var(--alert-dim);
  border-radius: var(--radius);
  font-size: .87rem;
}
.etas strong { color: var(--alert); }

.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .92rem; }
.mini-list li { display: flex; align-items: center; gap: .8rem; }
.mini-list.later { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); }

.production-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.production-list li { display: flex; align-items: center; justify-content: space-between; gap: .9rem; }
.production-list a { text-decoration: none; }
.production-list a:hover { color: var(--signal); }

.discussion-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.discussion-list p { margin: .2rem 0 0; font-size: .9rem; color: var(--ink); }

/* --- console blocks ------------------------------------------------------- */

/* --- lamps ------------------------------------------------------------------ */

/* An indicator is not a key. It is the silkscreen printed *beside* one: the
   same rings, the same tiny tracked legend, but the face stays dark, because
   nothing happens when you press it. Keeping that one difference is the whole
   reason the two are built from one set of parts rather than as one part — a
   screen where the states look pressable is a screen that lies (UX.md §3).
   `--face` is the state's own colour, so the ring and the legend agree without
   either being restated per variant. */
.pill, .kind, .confirm, .pub-state, .window {
  --face: #93a2b5;
  font-family: inherit;
  font-size: var(--legend-size);
  font-weight: 800;
  letter-spacing: var(--legend-track);
  text-transform: uppercase;
  line-height: 1;
  padding: .3rem .52rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--key-slab);
  color: var(--face);
  box-shadow: var(--rings-sm);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* One line per state, because the face now carries the ring and the legend
   together. Every colour is the one it already was. */
.pill-ready, .pill-confirmed, .pill-accepted, .pill-completed,
.pill-listed, .pill-guest-appeared          { --face: var(--go); }
.pill-proposed, .pill-guest-prospect        { --face: #93a2b5; }
.pill-scheduled, .pill-guest-booked         { --face: var(--brand); }
.pill-recorded                              { --face: var(--violet); }
.pill-editing, .pill-open, .pill-guest-invited { --face: var(--alert); }
.pill-cancelled, .pill-declined, .pill-withdrawn,
.pill-guest-declined, .pill-guest-lapsed    { --face: var(--stop); }

.kind-episode { --face: var(--brand); }

/* What a row wants from you, in words. Only the ones that want something from
   *you* are lit; everything else is grey, so the list can be read by colour
   alone without the colour lying about how much is urgent (D21, D29). */
.awaiting {
  font-size: .8rem;
  color: var(--ink-quiet);
  white-space: nowrap;
}
.awaiting-you { color: var(--alert); font-weight: 600; }
.awaiting-clear { color: var(--go); }
.awaiting-line { margin: 0 0 .75rem; color: var(--ink-quiet); }
.awaiting-line strong { color: var(--alert); }

/* The calendar on the home screen is the same grid as the availability page,
   quieter: it is there to be read at a glance, not worked in. */
.cal-panel h2 { margin-bottom: .8rem; }
.cal-act { margin: .8rem 0 0; font-size: .9rem; }
.cal-hidden { margin: .7rem 0 0; font-size: .87rem; color: var(--alert); }
.cal-hidden a { color: var(--signal-pale); }
.cal-act a { color: var(--ink-quiet); text-decoration: none; }
.cal-act a:hover { color: var(--signal); }


/* --- tabs ----------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 1.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.tabs a {
  text-decoration: none;
  font-size: .86rem;
  color: var(--ink-quiet);
  padding: .5rem 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink-loud); border-bottom-color: var(--signal); }
.tabs .count { font-family: var(--mono); font-size: .74rem; opacity: .7; }
.tabs .tab-action { margin-left: auto; color: var(--signal); }

/* --- lists ---------------------------------------------------------------- */

.proposal-list, .episode-list, .session-list { list-style: none; margin: 0; padding: 0; }
.proposal-list li, .episode-list li, .session-list li { border-bottom: 1px solid var(--line-soft); }

.session-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem .5rem;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.session-row:hover {
  background: var(--bg-raised);
  border-left-color: var(--signal);
}
.proposal-title, .episode-title { font-weight: 500; }
.session-body { margin-left: auto; }
.episode-main { display: flex; flex-direction: column; margin-right: auto; }
.episode-row .quiet { flex-shrink: 0; }

.session-when { min-width: 12rem; }
.session-body { flex: 1; font-size: .9rem; }
.session-people { display: flex; gap: .75rem; flex-wrap: wrap; row-gap: .8rem; }
.confirm.confirm-confirmed { --face: var(--go); }
.confirm.confirm-pending   { --face: var(--alert); }
.confirm.confirm-declined  { --face: var(--stop); text-decoration: line-through; }
.session-list.past { opacity: .6; }

/* Phone width. A row is one non-wrapping line — number, title, kind, date, then
   the lamps — and it ran past the edge of a 420px screen on its own, before the
   housing existed: 425px of content in a 420px window, measured. The housing
   made a five-pixel problem a twenty-three-pixel one, so both are dealt with
   here. The title takes the full width and everything that qualifies it drops
   beneath, which is the order you read them in anyway. */
@media (max-width: 560px) {
  .panel-list { padding: .4rem .6rem; }
  .session-row { flex-wrap: wrap; row-gap: .45rem; }
  .episode-main, .session-body { min-width: 100%; }
  .session-body { margin-left: 0; }
  .session-when { min-width: 0; }
}

/* --- content -------------------------------------------------------------- */

.argument, .comment-body { white-space: pre-wrap; max-width: var(--measure); }
.comments { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 1rem; }
.comment-meta { margin: 0; font-size: .85rem; }
.comment-body { margin: .2rem 0 0; }
.comment-form { display: grid; gap: .6rem; justify-items: start; }
.comment-form textarea { width: 100%; }

.outcome-link, .outcome-note {
  padding: .8rem 1rem;
  background: var(--bg-raised);
  border-left: 3px solid var(--signal-dim);
  border-radius: var(--radius);
  margin: 0 0 var(--gap);
}

/* --- participants --------------------------------------------------------- */

.participants { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .5rem; }
.participants li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .8rem;
  background: var(--bg-sunken);
  border-radius: var(--radius);
  border-left: 3px solid var(--line);
}
.participants li.confirm-confirmed { border-left-color: var(--go); }
.participants li.confirm-pending   { border-left-color: var(--alert); }
.participants li.confirm-declined  { border-left-color: var(--stop); }
.participants.historical li { border-left-color: var(--line); }
.participant-name { font-weight: 500; min-width: 8rem; }
.confirm-state { color: var(--ink-quiet); font-size: .87rem; }
.eta { margin-left: auto; color: var(--alert); font-size: .85rem; }

.yours { border-color: var(--signal-dim); border-top-color: var(--signal-dim); }
/* Confirm · Decline · Undecided — three keys, and the one that is your answer
   is lit. `button.current` above does the lighting; the row only needs to leave
   room for the rings. */
.confirm-row { display: flex; gap: .9rem; row-gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.eta-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.eta-row label { flex-direction: row; align-items: center; gap: .4rem; font-size: .87rem; color: var(--ink-quiet); }
.eta-row input[type="number"] { width: 5rem; }
.eta-row input[type="text"] { flex: 1; min-width: 10rem; }
.eta-row .hint { width: 100%; margin-top: 0; }

.room { margin: 0 0 var(--gap); }
.room-past { margin: 0 0 var(--gap); word-break: break-all; }

/* --- availability --------------------------------------------------------- */

.overlap-panel { border-color: var(--signal-dim); border-top-color: var(--signal); }
.overlap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.overlap-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem .7rem;
  background: var(--bg-sunken);
  border-left: 2px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: .92rem;
}
.overlap-list .button { padding: .45rem .75rem; }
.overlap-when strong { color: var(--ink-loud); margin-right: .5rem; }

.availability-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; }
.availability-form label { font-size: .8rem; color: var(--ink-quiet); }

.calendar { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.calendar-day {
  display: flex;
  gap: 1rem;
  padding: .55rem .8rem;
  background: var(--bg-sunken);
  border-radius: var(--radius);
  border-left: 2px solid transparent;
}
.calendar-day.has-overlap { border-left-color: var(--signal); }
.calendar-date { min-width: 12rem; font-size: .9rem; }
.calendar-windows { display: flex; flex-wrap: wrap; gap: .75rem; row-gap: .8rem; }
.window { gap: .35rem; letter-spacing: .06em; }
.window-mine   { --face: var(--signal); }
.window-theirs { --face: #93a2b5; }
.window-booked { --face: var(--go); }
.window form { display: inline-flex; }

/* --- forms ---------------------------------------------------------------- */

.card {
  background: var(--bg-raised) var(--stipple);
  background-blend-mode: soft-light;
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  display: grid;
  gap: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.form-wide { max-width: 46rem; }

label { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; color: var(--ink-quiet); }
label.check { flex-direction: row; align-items: center; gap: .55rem; color: var(--ink); font-size: .92rem; }

.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row label { flex: 1; min-width: 8rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="date"], input[type="time"], input[type="number"], select, textarea {
  background: #07060a;
  border: 1px solid var(--alert-dim);
  border-radius: var(--radius-sm);
  color: var(--readout);
  padding: .5rem .65rem;
  font-family: var(--mono);
  font-size: .9rem;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--alert);
  box-shadow: inset 0 0 24px -14px var(--alert), 0 0 16px -6px color-mix(in srgb, var(--alert) 60%, transparent);
}
::placeholder { color: #6b573a; }
textarea { resize: vertical; line-height: 1.5; }

fieldset {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  display: grid;
  gap: .5rem;
}
legend {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-quiet); padding: 0 .4rem;
}
input[type="checkbox"] { accent-color: var(--signal); }

/* --- keys ------------------------------------------------------------------- */

/* A button is a key. The bank in the header established the object — a flat,
   unmodulated face, the legend cut out of it in near-black, the silkscreen echo
   ringing outward — and nothing on the page that presses is drawn any other
   way. The corner was already shared; now the whole object is. */
button, .button {
  --face: var(--key-face);
  --lit:  var(--key-face-lit);
  font-family: inherit;
  font-size: var(--legend-size);
  font-weight: 800;
  letter-spacing: var(--legend-track);
  text-transform: uppercase;
  line-height: 1;
  padding: .62rem .95rem;
  border: none;
  border-radius: var(--key-radius);
  background: var(--face);
  color: var(--key-ink);
  box-shadow: var(--rings);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: background .1s, box-shadow .1s;
}
button:hover, .button:hover {
  background: color-mix(in srgb, var(--face) 60%, var(--lit));
  color: var(--key-ink);
}
button:focus-visible, .button:focus-visible { outline: 2px solid #fff; outline-offset: 8px; }

/* Colour still means exactly what it meant: cyan proceeds, green confirms, red
   destroys. Only the drawing changed. The primary action stays brand cyan on
   every screen rather than taking the section hue — section colour says *where
   you are*, it does not repaint *what you press* (UX.md §3). */
button.primary, .button.primary { --face: var(--brand); --lit: #7dd3fc; }
button.go,      .button.go      { --face: var(--go);    --lit: #86f0a0; }
button.danger,  .button.danger  { --face: var(--stop);  --lit: #ff756c; }

/* Quiet is not the same as "not a key". Archive, Undecided and Withdraw sit in
   rows beside Confirm and Decline, and any of them can be the one that is
   currently true — drawing those as underlined text would hide the current
   state in the one element unable to show it. So: a key, cut from darker stock,
   with a light legend because a near-black one on this face is unreadable. */
button.quiet-button, button.link {
  --face: var(--key-dim);
  --lit:  var(--key-dim-lit);
  color: #ccd4e0;
}
button.quiet-button:hover, button.link:hover { color: var(--ink-loud); }

/* An unpowered key. The face goes dark rather than translucent: a key at 28%
   opacity over a stippled wall reads as a smudge on the wall, not as a control
   that is switched off. The dark face is what says "off"; the legend stays
   readable at 4.06:1 anyway, because a control you cannot read is one you
   cannot learn from, even when it is unavailable. */
button:disabled, button:disabled:hover {
  --face: #2b3038;
  --lit:  #2b3038;
  color: #868f9c;
  cursor: default;
}

/* The lit key — this is the one that is true right now. Identical to what the
   bank does for the page you are on, so the idiom is learned once and then
   recognised everywhere (UX.md §4). */
button.current, .button.current {
  background: var(--lit);
  color: var(--key-ink);
  box-shadow: var(--rings-lit);
}

/* The glyph controls in dense rows — move up, move down, remove. A solid key
   for each would put three slabs on every note, ranking and asset line, and the
   room does not look like that. They stay bare and take the ring only when
   reached for. */
.asset-list form button, .window button, .check-form + * button {
  --face: var(--key-face);
  --lit:  var(--key-face-lit);
  background: none;
  color: var(--ink-quiet);
  box-shadow: none;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: .18rem .4rem;
  min-width: 1.7rem;
}
.asset-list form button:hover, .window button:hover {
  background: none;
  color: var(--ink-loud);
  box-shadow: var(--rings-sm);
}
button.tiny:disabled:hover {
  background: none; box-shadow: none; color: #464e59;
}

/* Keys need room the border never did: the echo is drawn outside the box and
   does not push its neighbours away, so the gap has to clear it. */
.actions { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; row-gap: 1rem; }
.decide { display: grid; gap: .8rem; max-width: 34rem; }
.inline-form { display: flex; gap: .9rem; row-gap: 1rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.inline-form input[type="text"] { flex: 1; min-width: 12rem; }

.edit-block { margin-top: var(--gap); }
.edit-block summary {
  cursor: pointer;
  color: var(--ink-quiet);
  font-size: .87rem;
  padding: .5rem 0;
}
.edit-block summary:hover { color: var(--signal); }
.edit-block .card { margin-top: .6rem; }

/* --- sign in -------------------------------------------------------------- */

/* The one screen that is mostly empty room, so it gets the light strip. */
.signin { max-width: 22rem; margin: 12vh auto 0; }
.signin-mark { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.signin-mark .mark-name { font-size: 1.7rem; letter-spacing: .2em; color: var(--brand); }
/* The strip is drawn as its own line so the bloom stays around the line. A
   box-shadow on the block glows along all four edges and reads as a stray
   rectangle around the text — which is what it did on the first pass. */
.signin-note {
  color: var(--ink-quiet); font-size: .85rem; margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  position: relative;
}
.signin-note::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brand);
  opacity: .6;
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--signal) 55%, transparent);
}
.signin button { width: 100%; }
.google-button { display: block; width: 100%; padding: .7rem 1rem; }
.signin-hint { margin-top: .6rem; }
.signin-or {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--ink-quiet);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 1.4rem 0;
}
.signin-or::before, .signin-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.signin-locked { font-size: .87rem; color: var(--ink-quiet); line-height: 1.7; }
.signin-locked code { color: var(--signal); font-family: var(--mono); font-size: .85em; }

/* --- the availability grid -------------------------------------------------- */

/* Overlap is a spatial fact: two bands crossing. Reading it off a list means
   holding four times in your head at once, which is the thing UX.md §4 says not
   to ask for. The bands are grid columns computed on the server — still no
   JavaScript (D12). */
.cal-scroll { overflow-x: auto; padding-bottom: .4rem; }
.cal { min-width: 34rem; display: grid; gap: .25rem; }

.cal-hours, .cal-row {
  display: grid;
  grid-template-columns: 4.5rem repeat(var(--slots), minmax(.55rem, 1fr));
  align-items: center;
}

.cal-hours { height: 1.4rem; }
.cal-hour {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-quiet);
  grid-row: 1;
  justify-self: start;
  padding-left: 1px;
  border-left: 1px solid var(--line-soft);
  line-height: 1.2;
}

.cal-row {
  height: 1.9rem;
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
}
.cal-daylabel {
  font-size: .78rem;
  color: var(--ink-quiet);
  padding-left: .55rem;
  white-space: nowrap;
  grid-column: 1;
  grid-row: 1;
}

/* Every band shares row 1 so they stack, which is what makes the overlap
   legible: the shared band is drawn last and sits over both. */
.cal-band {
  grid-row: 1;
  height: .5rem;
  /* 8px tall: the small radius would round it into a capsule and lose the
     band's ends, which are what you read an overlap from. */
  border-radius: 2px;
  align-self: center;
  text-decoration: none;
  font-family: var(--mono);
  font-size: .62rem;
  line-height: 1;
  overflow: hidden;
}
/* Four bands, four hues, none shared. `mine` was cyan and so was `shared`,
   which made the one thing you can act on look like the one thing you
   already said. */
.cal-band-mine   { background: var(--alert); align-self: start; margin-top: .18rem; }
.cal-band-theirs { background: var(--violet); align-self: end; margin-bottom: .18rem; }

.cal-band-booked {
  background: var(--go-dim);
  color: var(--go);
  height: 1.1rem;
  display: flex;
  align-items: center;
  padding: 0 .3rem;
  border: 1px solid var(--go-dim);
}

/* The answer, so it is the one thing that looks clickable. */
.cal-band-shared {
  height: 1.25rem;
  background: var(--brand);
  color: #04121b;
  display: flex;
  align-items: center;
  padding: 0 .35rem;
  font-weight: 700;
  box-shadow: 0 0 14px -4px var(--brand);
}
.cal-band-shared:hover { background: #7dd3fc; }

.cal-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.1rem;
  margin: .9rem 0 0; font-size: .78rem; color: var(--ink-quiet);
}
.cal-swatch { width: 1.1rem; height: .5rem; border-radius: 2px; display: inline-block; }

/* --- control blocks stay small --------------------------------------------- */

/* `.card` is a grid, so a button in one stretches edge to edge and becomes a
   bright bar. On the set the saturated blocks are small; a full-width cyan slab
   is the opposite of the reference. */
.card > button, .card > .button { justify-self: start; }
.signin .card > button { justify-self: stretch; }

/* --- votes ------------------------------------------------------------------ */

/* Both hosts, side by side. Never a count: "1 of 2" says less than "John has
   not said", and the whole point of the panel is who is waiting on whom. */
.votes { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; max-width: 30rem; }
.votes li {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .45rem .7rem;
  background: var(--bg-sunken);
  border-left: 2px solid var(--line);
  border-radius: var(--radius-sm);
}
.votes .vote-who { font-weight: 500; min-width: 6rem; }
.votes .vote-said { font-family: var(--mono); font-size: .78rem; color: var(--ink-quiet); }
.votes li.vote-accept  { border-left-color: var(--go); }
.votes li.vote-accept .vote-said { color: var(--go); }
.votes li.vote-decline { border-left-color: var(--stop); }
.votes li.vote-decline .vote-said { color: var(--stop); }
.votes li.vote-none    { border-left-color: var(--alert); }
.votes li.vote-none .vote-said { color: var(--alert); }
.votes.historical li { border-left-color: var(--line); }
.votes.historical .vote-said { color: var(--ink-quiet); }

/* `button.current` in the keys section lights these; the old outline said the
   same thing a second time, in a voice the console does not have. */

/* --- a folded-in section ---------------------------------------------------- */

.panel-aside {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
}
.panel-aside h3 {
  margin: 0 0 .5rem;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-weight: 600;
}
.panel-aside p { margin: 0; }

/* --- status at a glance ------------------------------------------------------ */

/* An episode list should be scannable, not readable. The left edge carries the
   stage, so five episodes in five stages are five colours down the margin —
   the same colours the pills and the production track use, so the mapping is
   learned once. */
.episode-row, .production-list li { border-left: 3px solid var(--line); padding-left: .7rem; }
.episode-row.is-proposed,  .production-list li.is-proposed  { border-left-color: #4a5768; }
.episode-row.is-scheduled, .production-list li.is-scheduled { border-left-color: var(--brand); }
.episode-row.is-recorded,  .production-list li.is-recorded  { border-left-color: var(--violet); }
.episode-row.is-editing,   .production-list li.is-editing   { border-left-color: var(--alert); }
.episode-row.is-ready,     .production-list li.is-ready     { border-left-color: var(--go); }

/* Hover no longer needs to recolour the edge — that edge is saying something
   now — so it just lifts the surface. */
.episode-row:hover { background: rgba(255, 255, 255, .035); border-left-color: inherit; }
.episode-row.is-proposed:hover  { border-left-color: #4a5768; }
.episode-row.is-scheduled:hover { border-left-color: var(--brand); }
.episode-row.is-recorded:hover  { border-left-color: var(--violet); }
.episode-row.is-editing:hover   { border-left-color: var(--alert); }
.episode-row.is-ready:hover     { border-left-color: var(--go); }

.production-list li { padding: .35rem 0 .35rem .7rem; }

/* --- 2. quieter kind tags ---------------------------------------------------- */

/* Coloured text, not a coloured box. The colour was already doing the work; the
   border and background were repeating it in a heavier voice.

   Kept out of the lamp set above, and this is the exception rather than an
   oversight: a lamp rings the legend, and this legend is a 7.5rem column label,
   so the ring would be drawn around mostly empty space. It takes the keypad's
   voice without the keypad's frame. */
.asset-kind {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: var(--legend-track);
  border: none;
  padding: 0;
  background: none;
  box-shadow: none;
  font-size: .68rem;
  min-width: 7.5rem;
}

/* Two filter rows, one per axis. The label says which question the row answers,
   so "Scheduled" under Making and "Scheduled" under Public cannot be mistaken
   for the same thing — they are the collision D2 exists to prevent. */
.tabs-secondary { margin-top: -.6rem; border-bottom: none; }
.tab-axis {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  align-self: center;
  padding-right: .4rem;
  opacity: .65;
}
.pill-listed { color: var(--go); border-color: var(--go-dim); box-shadow: inset 0 0 12px -6px var(--go); }


/* --- the scratch pad -------------------------------------------------------- */
/* A list you add to without ceremony. The form is at the top and always open,
   because a scratch pad behind a button is a scratch pad nobody writes on. */
.idea-form { display: grid; gap: .8rem; }
.idea-form-top { display: flex; gap: .8rem; align-items: stretch; flex-wrap: wrap; }
.idea-form-top .idea-title-label { flex: 1 1 18rem; }
.idea-form-top .idea-title-label input { width: 100%; }
.idea-form label { margin: 0; }

.idea-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.idea {
  padding: .95rem 1.05rem;
  background: var(--bg-raised);
  border-radius: var(--radius);
  border-left: 3px solid var(--line);
}
.idea-head { display: flex; gap: 1rem; align-items: flex-start; }
.idea-body { flex: 1; min-width: 0; }
.idea-title { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--ink-loud);
              display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.idea-why { margin: .4rem 0 0; color: var(--ink); max-width: var(--measure); white-space: pre-wrap; }
.idea-meta { margin: .45rem 0 0; font-size: .85rem; color: var(--ink-quiet); }
.idea-meta strong { color: var(--readout); font-weight: 600; }

/* The +1 is the whole interaction, so it is the biggest thing on the row — and
   it changes appearance when it is yours, because "+1" and "you already have"
   are different states and one button has to say which (UX.md §2). */
.plus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: .45rem .4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  color: var(--ink-quiet);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.1;
}
.plus:hover { border-color: var(--metal); color: var(--ink-loud); }
.plus.mine { border-color: var(--go-dim); background: var(--leaf-wash); color: var(--go); }
.plus-mark { font-size: .95rem; font-weight: 700; }
.plus-count { font-family: var(--mono); font-size: 1.05rem; color: inherit; }

.idea-foot { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.idea-foot > .button { font-size: .9rem; }
.thread, .idea-edit { flex: 0 1 auto; }
.thread > summary, .idea-edit > summary {
  cursor: pointer;
  color: var(--ink-quiet);
  font-size: .9rem;
  list-style: none;
  padding: .3rem 0;
  border-bottom: 1px dotted var(--line);
}
.thread > summary::-webkit-details-marker,
.idea-edit > summary::-webkit-details-marker { display: none; }
.thread > summary:hover, .idea-edit > summary:hover { color: var(--ink-loud); border-bottom-color: var(--metal); }
.thread[open], .idea-edit[open] { flex-basis: 100%; }
.thread .comment {
  margin: .7rem 0 0;
  padding-left: .8rem;
  border-left: 2px solid var(--line);
  color: var(--ink);
  font-size: .92rem;
  max-width: var(--measure);
}
.thread .comment strong { color: var(--ink-loud); }
.thread form, .idea-edit form { display: grid; gap: .6rem; margin-top: .8rem; max-width: var(--measure); }
.idea-edit form + form { margin-top: .5rem; }

/* --- the scratch pad, seen from the briefing -------------------------------- */
.ideas-panel .idea-peek { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.idea-peek li { display: flex; align-items: baseline; gap: .7rem; }
.idea-peek a { color: var(--ink); text-decoration: none; }
.idea-peek a:hover { color: var(--signal); }
.peek-likes {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--ink-quiet);
  min-width: 1.9rem;
}
.peek-likes.liked { color: var(--go); }
.ideas-act { margin: .9rem 0 0; font-size: .9rem; }
.ideas-act a { color: var(--ink-quiet); text-decoration: none; }
.ideas-act a:hover { color: var(--signal); }

/* --- what a recording is for, and the way into it --------------------------- */
.schedule-subject { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--ink); }
.session-subject { margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 600; }
.session-subject a { color: var(--ink-loud); text-decoration: none; }
.session-subject a:hover { color: var(--signal); }
/* Loud only when the recording is about to happen. A join key that looks urgent
   all week stops looking like anything (UX.md §2). */
.join-now { box-shadow: 0 0 0 1px var(--go-dim), 0 0 18px color-mix(in srgb, var(--go) 22%, transparent); }

/* --- switches --------------------------------------------------------------- */
.switch { display: flex; align-items: center; gap: .6rem; margin: 0; font-weight: 500; }
.switch input { width: auto; margin: 0; }

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