/* Régie · La Grande Ourse. Product surface: Google Sans Flex, the monotone
   scale, one accent (#FF0657) for the armed cue, matched words and GO. Dark. */
:root {
  --font: 'Google Sans Flex', 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono-font: ui-monospace, 'SF Mono', Menlo, monospace;
  --bg: #17171A; --surface: #242429; --surface-2: #303036; --surface-3: #3a3a42;
  --ink: #FFFFFF; --ink-2: #E0E0E0; --ink-3: #808080; --ink-4: #58585A;
  --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16);
  --accent: #FF0657; --accent-soft: rgba(255,6,87,0.16);
  --positive: #14F0A7; --cautionary: #F8CA00; --negative: #E3274E; --informative: #3561DC;
  --pill: 999px; --t: 180ms ease-out;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
/* The header's height is not a constant: its controls wrap at 1440px now that
   the screen toggle sits among them, and the Édition banner adds a row. The
   layout takes whatever is left rather than 100vh minus a number that was
   only ever true for one row. */
body { display: flex; flex-direction: column; }
::selection { background: var(--accent); color: #fff; }
button { font: inherit; color: inherit; }
kbd { font: 500 10px/1 var(--mono-font); color: var(--ink-3); border: 1px solid var(--border-strong); border-radius: 4px; padding: 2px 4px; margin-left: 6px; }
[hidden] { display: none !important; }
.eyebrow { font: 400 11px/1.15 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

/* chrome: the brand, then what matters (the conduite and the screen), then the
   small status dots and the gear. Everything else is behind the gear. */
.chrome { flex: none; position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 10px 20px; background: var(--bg); border-bottom: 1px solid var(--border); }
.chrome__brand { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--font); white-space: nowrap; }
.chrome__brand img { border-radius: 5px; }
.chrome__brand span { color: var(--ink-3); }
.chrome__brand span::before { content: '·'; margin-right: 8px; }
.chrome__main { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; min-width: 0; }
.chrome__version { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12px; }
.chrome select, .settings select, .settings input[type='range'] { background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 8px; font: 400 13px var(--font); }
.chrome__status { display: flex; gap: 12px; align-items: center; }
/* the dots: a state each, small on purpose, the word only for the eye that looks */
.dot { display: inline-flex; align-items: center; gap: 5px; font: 500 10px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); cursor: default; }
.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); transition: background var(--t); }
.dot[data-state='on'] { color: var(--ink-3); }
.dot[data-state='on']::before { background: var(--positive); box-shadow: 0 0 8px rgba(20,240,167,0.6); }
.dot[data-state='warn']::before { background: var(--cautionary); }
.dot[data-state='err'] { color: var(--negative); }
.dot[data-state='err']::before { background: var(--negative); }
.dot--rec[data-state='on'] { color: var(--negative); }
.dot--rec[data-state='on']::before { background: var(--negative); box-shadow: none; animation: rec-pulse 1.2s ease-in-out infinite alternate; }
.dot--auto[data-state='on'] { color: #d78bff; }
.dot--auto[data-state='on']::before { background: #d78bff; box-shadow: none; }
.icon-btn--gear { width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--t), color var(--t), transform var(--t); }
.icon-btn--gear:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn--gear[aria-expanded='true'] { background: var(--surface-2); color: var(--ink); transform: rotate(30deg); }
/* the gear's menu, under the gear, a card of sections */
.settings { position: absolute; right: 16px; top: calc(100% + 6px); width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 80px); overflow: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 16px 50px rgba(0,0,0,0.55); padding: 4px 16px 10px; z-index: 120; }
.settings__section { padding: 12px 0; border-top: 1px solid var(--border); }
.settings__section:first-child { border-top: 0; }
.settings__section .eyebrow { margin-bottom: 8px; }
.settings label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-3); margin: 6px 0; }
.settings select { min-width: 176px; }
.settings input[type='range'] { width: 176px; accent-color: var(--accent); padding: 0; border: 0; background: transparent; }
.settings__help { font-size: 12px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.45; }
.settings__meta { display: flex; gap: 14px; font: 400 11px/1 var(--font); color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 10px; }
.settings__meta span { cursor: default; }
.settings .btn { margin-top: 6px; }
.settings__check { justify-content: flex-start; }
.settings__check input { accent-color: var(--accent); }
.settings__section--narrow { display: none; }
/* the tooltip: one element, filled from data-tip on hover or focus */
.tip { position: fixed; z-index: 400; max-width: 300px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); box-shadow: 0 10px 30px rgba(0,0,0,0.5); pointer-events: none; }
.tip b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 2px; }

.btn { padding: 8px 14px; border-radius: var(--pill); border: 1px solid var(--border-strong); background: transparent; color: var(--ink-2); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t); font-size: 13px; }
.btn:hover { background: var(--surface-2); color: var(--ink); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: #ff2a6f; }
.btn--sm { padding: 4px 10px; font-size: 12px; }
.btn--ghost { color: var(--ink-3); }
.btn--go { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 18px; font-weight: 600; padding: 14px 28px; }
.btn--go:hover { background: #ff2a6f; }
.btn--go.is-proposed { animation: pulse 0.5s ease-in-out infinite alternate; }
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(255,6,87,0.5); } to { box-shadow: 0 0 0 14px rgba(255,6,87,0); } }

/* layout: three columns the operator sizes themselves, with the widths kept in
   localStorage (see src/panels.ts). The grid template is set from there; these
   values are only what the page shows before the script runs. */
.layout {
  display: grid; grid-template-columns: 420px 8px minmax(360px, 1fr) 8px 300px;
  gap: 8px; padding: 16px 20px 40px; flex: 1 1 auto; min-height: 0;
}

/* the drag handles between the columns */
.gutter { position: relative; cursor: col-resize; touch-action: none; align-self: stretch; }
.gutter::after {
  content: ''; position: absolute; inset: 10px 3px; border-radius: 3px;
  background: var(--border); transition: background var(--t);
}
.gutter:hover::after, .gutter.is-dragging::after, .gutter:focus-visible::after { background: var(--accent); }
.gutter:focus-visible { outline: none; }
/* the horizontal one, under the reading block */
.gutter--h { cursor: row-resize; height: 10px; margin: -4px 0; }
.gutter--h::after { inset: 4px 40%; }

/* the journal, folded away to its right edge */
.log-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; padding: 16px 7px; cursor: pointer;
  background: var(--surface); color: var(--ink-3);
  border: 1px solid var(--border); border-right: 0; border-radius: 10px 0 0 10px;
  font: 400 11px/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase;
  transition: color var(--t), background var(--t);
}
.log-tab:hover { color: var(--ink); background: var(--surface-2); }
.layout.is-log-collapsed .log { display: none; }
/* the folded layout before the script has had a chance to size the columns:
   without it the grid keeps a 300px empty track and the middle column jumps */
.layout.is-log-collapsed { grid-template-columns: 420px 8px minmax(360px, 1fr) 0 0; }
.script, .log { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: auto; padding: 16px 20px; }
.script { scroll-behavior: smooth; }
.script:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stage { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* script column */
.blk { padding: 6px 10px; border-radius: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.55; border-left: 3px solid transparent; }
.blk--direction { color: var(--ink-3); font-style: italic; font-size: 14px; }
.blk--voice { color: var(--ink-3); }
.blk--voice .spk { color: #d78bff; }
.blk .spk { font-weight: 500; color: var(--ink); margin-right: 4px; }
.blk .marker { background: rgba(248,202,0,0.18); border-radius: 3px; padding: 0 2px; }
/* the words the engine is listening for */
.blk .trig { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* Le jeu, pas le texte. Written inside a réplique in italics, it is what the
   comedian does, never what they say: dimmer and set apart so the eye reads
   past it at speed, and never underlined, because the engine does not listen
   for it. A dotted underline marks the ones the document left in plain type,
   which the tool inferred and a person should confirm. */
/* the same grey as a didascalie standing on its own line: it is the same
   thing, written inside the réplique, and it should read as the same thing */
.dida { font-style: italic; color: var(--ink-3); font-size: 0.92em; }
.dida::before { content: '('; opacity: 0.55; }
.dida::after { content: ')'; opacity: 0.55; }
.dida--inferred { text-decoration: underline dotted var(--cautionary); text-underline-offset: 3px; cursor: help; }
/* Inside the listened-for span the underline belongs to the words only. A
   descendant cannot cancel an ancestor's text-decoration, it can only stop
   inheriting it by not being a plain inline box, hence inline-block. */
.trig .dida { display: inline-block; text-decoration: none; }
.trig .dida--inferred { text-decoration: underline dotted var(--cautionary); }

/* every line is a place to restart from */
.blk.is-jump { cursor: pointer; transition: background var(--t); }
.blk.is-jump:hover { background: var(--surface-2); }

/* the line happening right now: the actors' cue line, or what the track says */
.blk.is-now { background: var(--surface-2); color: var(--ink); }
.blk.is-now-actor { border-left-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,6,87,0.18); }
.blk.is-now-voice { border-left-color: #d78bff; box-shadow: inset 0 0 0 1px rgba(215,139,255,0.18); }
.blk.is-now::after { font: 500 10px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; margin-left: 8px; vertical-align: 2px; }
.blk.is-now-actor::after { content: 'à vous'; color: var(--accent); }
.blk.is-now-voice::after { content: 'la voix'; color: #d78bff; }
/* the chip and its trigger text; the text wraps to its own line rather than
   being squeezed into a column when the reading panel is narrowed */
.blk--cue { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0; cursor: pointer; }

/* A track, drawn as one thing: the chip and whatever the track says, inside a
   frame with the offstage voice's colour down its edge. Before this the chip
   and the recorded text were separate blocks in the flow, and the machine's
   words read as another character's réplique. A bed says nothing, so its tile
   is just the chip and a word for what it is. */
.trk { display: block; margin: 10px 0; padding: 8px 12px 8px 13px; border-radius: 10px; border: 1px solid var(--border); border-left: 3px solid var(--surface-3); background: rgba(255,255,255,0.022); }
.trk__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.trk__head small { flex: 1 1 140px; color: var(--ink-3); }
.trk__line { color: var(--ink-3); font-size: 14.5px; line-height: 1.5; margin-top: 7px; }
.trk__line + .trk__line { margin-top: 4px; }
/* la voix and the neighbours, the same purple the speaker label already used */
.trk--voice { border-left-color: #8f5fb8; }
.trk--voice .trk__line { color: #c9b3d8; }
/* a bed or an effect: no text, so nothing to colour */
.trk--music, .trk--effect { border-left-color: var(--surface-3); }
.trk:hover { border-color: var(--border-strong); }
.trk.is-armed { border-left-color: var(--accent); background: var(--accent-soft); }
/* the didascalie a cue waits on: the counterpart of the underline under a
   spoken trigger, so the tile does not have to print the words again */
.blk.is-top-action { border-left-color: var(--cautionary); background: rgba(248,202,0,0.05); }
.blk--cue small { flex: 1 1 170px; color: var(--ink-3); }
.blk--cue .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--pill); border: 1px solid var(--border-strong); font-size: 12px; color: var(--ink-2); background: var(--surface-2); white-space: nowrap; transition: border-color var(--t), background var(--t); }
.blk--cue:hover .chip { border-color: var(--ink-3); }
.blk--cue.is-armed .chip { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.blk--cue.is-done .chip { color: var(--ink-4); }
.blk--cue.is-playing .chip { border-color: var(--positive); }
.blk--cue .chip small { color: var(--ink-3); font-weight: 400; }

/* armed card */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 22px; }
/* a column so the text can take the room when the block is dragged taller */
.armed { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255,6,87,0.25), 0 12px 40px rgba(0,0,0,0.35); display: flex; flex-direction: column; min-height: 0; }
.armed__turn { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.armed__who { font-size: 13px; color: var(--ink-3); }
.turn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--pill); font: 500 12px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--border-strong); color: var(--ink-2); }
.turn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.turn--actor { color: var(--accent); border-color: var(--accent); background: rgba(255,6,87,0.12); }
.turn--voice { color: #d78bff; border-color: #d78bff; background: rgba(215,139,255,0.12); }
.turn--action { color: var(--cautionary); border-color: var(--cautionary); background: rgba(248,202,0,0.10); }
.turn--paused { color: var(--ink-3); }
/* The big readable area: the whole réplique, or what the track is saying.
   The cue number is secondary and sits under it. */
.armed__text {
  font: 400 25px/1.4 var(--font); color: var(--ink); margin: 12px 0 12px;
  flex: 1 1 auto; min-height: 0; max-height: 46vh; overflow: auto; padding-right: 4px;
}
.armed[style*='height'] .armed__text { max-height: none; }
.armed__text .w { transition: color var(--t); }
.armed__text .trig {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
}
.armed__text .w.is-hit { color: var(--accent); font-weight: 600; }
.armed__text .action { color: var(--cautionary); font-style: italic; }
.armed__text .muted { font-size: 20px; }
.armed__cue { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.cuechip {
  display: inline-flex; align-items: center; padding: 5px 14px; border-radius: var(--pill);
  border: 1px solid var(--border-strong); background: var(--surface-2);
  font: 500 15px/1.2 var(--font); color: var(--ink);
}
.cuenote { font-size: 13px; color: var(--ink-3); }
.armed__state { margin-top: 12px; font-size: 13px; color: var(--ink-3); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.armed__state .pill { border: 1px solid var(--border-strong); border-radius: var(--pill); padding: 3px 10px; color: var(--ink-2); }
.armed__state .pill.is-live { border-color: var(--positive); color: var(--positive); }
.armed__state .pill.is-wait { border-color: var(--cautionary); color: var(--cautionary); }
/* the engine cannot protect this top by itself: a person should be ready */
.armed__state .pill.is-warn { border-color: var(--negative); color: var(--negative); cursor: help; }
.next { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.next .card { padding: 12px 16px; }
.next .card .lbl { font: 500 15px/1.3 var(--font); }
.next .card .ph { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
/* the transport: GO in the middle, the previous and next tops on either side,
   the toggles under it; no shortcut labels, the keys still work */
.actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.actions__row { display: flex; align-items: center; gap: 18px; }
.btn--nav { width: 52px; height: 52px; padding: 0; border-radius: 50%; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }
.btn--go { min-width: 210px; justify-content: center; font-size: 20px; padding: 16px 34px; }
/* the hold state of the primary button: still the accent, calmer */
.btn--go.btn--hold { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); }
.btn--go.btn--hold:hover { background: var(--surface-3); }

/* the toggles: bare icons, because they are states and not actions, and a
   box around each would weigh as much as the GO above them */
.actions__toggles { display: inline-flex; gap: 18px; align-items: center; }
/* parked until it has run with a real microphone: greyed, and it explains itself on hover */
.icon-btn--bare.is-soon { color: var(--ink-4); cursor: help; }
.icon-btn--bare.is-soon:hover { color: var(--ink-3); }
.icon-btn--bare {
  width: 38px; height: 38px; border: 0; background: transparent; color: var(--ink-4);
  transition: color var(--t);
}
.icon-btn--bare:hover { background: transparent; color: var(--ink-2); }
.icon-btn .ico-off { display: none; }
/* the microphone is on: green, the way a live input reads everywhere */
#btn-mic.is-on { color: var(--positive); }
#btn-mic:not(.is-on) .ico-off { display: inline; }
/* the sound is cut: the crossed speaker, in the warning colour */
#btn-mute.is-on { color: var(--cautionary); }
#btn-mute.is-on .ico-on { display: none; }
#btn-mute.is-on .ico-off { display: inline; }
/* autopilote: one chip per comedian, purple like the voices the tool plays */
.ap-chips { display: inline-flex; align-items: center; gap: 6px; }
.ap-chips__label { font-size: 12px; color: var(--ink-3); cursor: help; }
.ap-chip { padding: 4px 11px; border-radius: var(--pill); border: 1px solid var(--border-strong); background: transparent; color: var(--ink-2); font-size: 12px; cursor: pointer; transition: background var(--t), border-color var(--t); }
.ap-chip:hover { background: var(--surface-2); }
.ap-chip[aria-pressed='true'] { background: rgba(215,139,255,0.16); border-color: #d78bff; color: var(--ink); }
.ap-chip[aria-disabled='true'] { opacity: 0.45; cursor: help; }
.ap-chips { flex-wrap: wrap; }
.ap-chip small { color: var(--ink-3); margin-left: 4px; }
.ap-chip[aria-pressed='true'] small { color: #d78bff; }
body.is-edition .ap-chips, body.is-commentaires .ap-chips { display: none !important; }
/* the card while a comedian's take plays: the same purple as a voice */
.turn--auto { color: #d78bff; border-color: #d78bff; background: rgba(215,139,255,0.12); }
/* the recording of the filage: the dot is hollow off, red and pulsing on */
#btn-rec .ico-dot { display: none; }
#btn-rec.is-on { color: var(--negative); }
#btn-rec.is-on .ico-dot { display: inline; animation: rec-pulse 1.2s ease-in-out infinite alternate; }
@keyframes rec-pulse { from { opacity: 1; } to { opacity: 0.35; } }
.rec-clock { align-self: center; color: var(--negative); font: 500 12px/1 var(--mono-font); letter-spacing: 0.04em; margin-right: 4px; }
/* a window over the page: the recordings and their cut */
.window { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.window__box { width: min(960px, 100%); max-height: calc(100vh - 48px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.6); }
.rec-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: var(--bg); }
.rec-item__title { font: 500 15px/1.3 var(--font); }
.rec-item__meta { color: var(--ink-3); font-size: 12px; margin-top: 3px; }
.rec-item__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rec-item.is-live .rec-item__title::before { content: '● '; color: var(--negative); }
/* the cut: one row per line of the comedians, checked when it goes to the bank */
.split-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px; align-items: start; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.split-row.is-off { opacity: 0.55; }
.split-row__check input { accent-color: var(--accent); width: 16px; height: 16px; margin-top: 3px; }
.split-row__text { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.split-row__text .spk { color: var(--ink-3); font-weight: 500; margin-right: 6px; }
.split-row__heard { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.split-row__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.split-row__meta .pill { border: 1px solid var(--border-strong); border-radius: var(--pill); padding: 2px 9px; color: var(--ink-2); }
.split-row__meta .pill.is-good { border-color: var(--positive); color: var(--positive); }
.split-row__meta .pill.is-warn { border-color: var(--cautionary); color: var(--cautionary); }
.split-row__meta .pill.is-bad { border-color: var(--negative); color: var(--negative); }
.split-row__old { color: var(--cautionary); }
.split-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 14px; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--ink-2); }
.btn--go:disabled, .btn--go:disabled:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink-3); }
.sim { display: flex; gap: 10px; align-items: center; }
.sim input { flex: 1; background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 14px; font: 400 15px var(--font); }
.sim input:focus { outline: none; border-color: var(--accent); }

/* ribbon */
.ribbon { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; min-height: 64px; font: 400 17px/1.5 var(--font); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 0 7px; align-content: flex-start; }
.ribbon .w { transition: color var(--t); }
.ribbon .w.is-interim { color: var(--ink-4); }
.ribbon .w.is-hit { color: var(--accent); font-weight: 600; }
.ribbon .w.is-cmd { color: var(--informative); font-weight: 500; }
.ribbon .w.is-echo { text-decoration: line-through; color: var(--ink-4); }
.ribbon .w.is-wake { color: var(--cautionary); font-weight: 600; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--ink); padding: 10px 18px; border-radius: var(--pill); box-shadow: 0 8px 28px rgba(0,0,0,0.45); z-index: 200; font-size: 14px; }
.toast.is-error { border-color: var(--negative); }

/* log */
.log__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.log__head-actions { display: inline-flex; align-items: center; gap: 6px; }
.icon-btn--sm { width: 26px; height: 26px; }
.log ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 4px; }
.log li { font: 400 12px/1.4 var(--font); color: var(--ink-2); padding: 6px 8px; border-radius: 8px; background: var(--surface-2); display: grid; grid-template-columns: 52px 1fr; gap: 8px; }
.log li time { color: var(--ink-3); font-family: var(--mono-font); font-size: 11px; }
.log li.k-fire { border-left: 3px solid var(--accent); }
.log li.k-skip { border-left: 3px solid var(--cautionary); }
.log li.k-command, .log li.k-wake { border-left: 3px solid var(--informative); }
.log li.k-error { border-left: 3px solid var(--negative); }
.log li.k-manual { border-left: 3px solid var(--ink-3); }
.log li .d { color: var(--ink-3); }

/* ── Filage | Édition ─────────────────────────────────────────────────────── */

/* the two screens, as one control next to the conduite it applies to */
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--pill); overflow: hidden; }
.seg button { border: 0; background: transparent; color: var(--ink-3); padding: 5px 13px; font-size: 12px; cursor: pointer; transition: background var(--t), color var(--t); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed='true'] { background: var(--surface-2); color: var(--ink); }
.seg button + button { border-left: 1px solid var(--border-strong); }

/* Édition is announced across the whole width: an accent line, the version
   being edited, and the two things that end a draft */
.edition-banner {
  /* a full-width row of the sticky header: the negative margins reach the
     header's edges, and the bottom one sits it on the header's own border */
  grid-column: 1 / -1; margin: 8px -20px -10px; height: 40px;
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: var(--accent-soft); border-top: 1px solid var(--border); border-bottom: 2px solid var(--accent); font-size: 13px; color: var(--ink-2);
}
.edition-banner strong { color: var(--accent); font: 500 11px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
/* the one line of help this screen gets; it yields to the buttons on a narrow window */
.edition-banner__hint { flex: 1; min-width: 0; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Two columns: the script on the left, as in Filage, and the editor in the
   middle column where the armed card sits in Filage. The journal, the transport
   and the reading block have no business on a screen where nothing is armed
   (Remi, after seeing the first two cuts: the script beside the editor is what
   made a window over the page unnecessary). panels.ts folds the journal. */
body.is-edition #gutter-right, body.is-edition .log, body.is-edition .log-tab,
body.is-edition #armed, body.is-edition #gutter-armed, body.is-edition .next, body.is-edition .actions, body.is-edition .sim, body.is-edition .ribbon { display: none !important; }

/* a click on a line or a tile opens it in the panel, the way a click arms in Filage */
body.is-edition .blk.is-editable { cursor: pointer; transition: background var(--t); }
body.is-edition .blk.is-editable:hover { background: var(--surface-2); }
/* a track being previewed: the note under the chip carries the clock */
body.is-edition .blk--cue.is-playing .trk__note { color: var(--positive); }
.blk.is-selected { background: var(--accent-soft) !important; border-left-color: var(--accent) !important; }
.blk--cue.is-selected .chip { border-color: var(--accent); }

/* The editor panel. Blue, the palette's informative colour, and nothing else
   on the page is blue: the outline alone says "you are modifying". */
.panel {
  flex: 1 1 auto; min-height: 0;
  background: var(--surface); border: 2px solid var(--informative); border-radius: 16px;
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(53,97,220,0.35), 0 0 40px rgba(53,97,220,0.14);
}
/* nothing selected yet: a quiet frame where the editor will appear */
.panel--empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; border: 1px dashed var(--border-strong); box-shadow: none; color: var(--ink-3); font-size: 15px; }
.panel__head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.panel__title { flex: 1; font: 500 16px/1.3 var(--font); min-width: 0; }
.panel__body { overflow: auto; padding: 20px 24px; min-height: 0; }
.panel__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border); }
/* the preview control beside the title, and the small ones next to a line's tops */
#btn-editor-play { white-space: nowrap; }
.play-top { margin-left: 8px; vertical-align: 1px; }
.field { margin-bottom: 16px; }
.field .eyebrow { margin-bottom: 5px; }
.field .val { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.field .val .blk { padding-left: 0; }
.field .val .pill { display: inline-block; border: 1px solid var(--border-strong); border-radius: var(--pill); padding: 2px 9px; font-size: 12px; margin: 0 4px 4px 0; }
.muted-note { color: var(--ink-3); font-size: 13px; margin-top: 22px; }

/* ── the line editor, inside the window ──────────────────────────────────── */
.ed-select, .ed-text {
  width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 10px 12px; font: 400 15px/1.5 var(--font);
}
.ed-select { width: auto; min-width: 260px; padding: 7px 10px; font-size: 14px; }
.ed-text { resize: vertical; min-height: 96px; }
.ed-text:focus, .ed-select:focus { outline: none; border-color: var(--informative); }
.ed-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ed-help { color: var(--ink-3); font-size: 12px; margin-left: 4px; }
/* what will not go through: red, and the save button stays off */
.ed-error { margin-top: 8px; color: var(--negative); font-size: 13px; }
.ed-error .btn { margin-left: 10px; }
/* the line as the reading column will draw it, trigger underline included */
.ed-preview { padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.ed-preview .blk { padding: 0; }
.ed-warnings { color: var(--cautionary); font-size: 13px; }
.ed-warnings li { margin: 4px 0; }
/* what the save changes, shown before it is confirmed */
.ed-check { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--informative); border-radius: 12px; background: rgba(53,97,220,0.08); }
.ed-rep { margin: 6px 0 14px; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
.ed-rep li { margin: 4px 0; }
.ed-rep s { color: var(--ink-3); }
.ed-sim { font-size: 14px; color: var(--positive); margin: 4px 0 14px; }
.ed-sim.is-bad { color: var(--negative); }
.ed-check__actions { display: flex; gap: 10px; justify-content: flex-end; }
.ed-rep--warn { color: var(--cautionary); }

/* ── the voice editor ─────────────────────────────────────────────────────── */
.vx-confirm { margin-top: 6px; color: var(--cautionary); font-size: 13px; }
/* the treatment: switches pre-set by the registry, never by the model */
.vx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: var(--pill); font-size: 13px; color: var(--ink-2); cursor: pointer; }
.vx-chip small { color: var(--ink-3); }
.vx-chip input { accent-color: var(--informative); margin: 0; }
.vx-chip.is-off { color: var(--ink-3); cursor: default; }
.vx-chip.is-fixed { cursor: default; border-style: dashed; }
/* the takes: one row each, listen and keep */
.vx-takes { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.vx-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font-size: 14px; }
.vx-row__label { flex: 1; color: var(--ink-2); }
.vx-row .is-warn { color: var(--cautionary); }
/* the two ways to change a voice track */
.vx-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.vx-tabs .btn.is-active { background: var(--surface-2); color: var(--ink); border-color: var(--informative); }

/* ── the audio editor ─────────────────────────────────────────────────────── */
.wave { position: relative; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; background: var(--bg); }
.wave canvas { display: block; width: 100%; height: 130px; cursor: col-resize; touch-action: none; }
.wave__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 13px; background: rgba(23,23,26,0.6); }
.ae-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.ae-row label { display: inline-flex; align-items: center; gap: 6px; }
.ae-num { width: 76px; background: var(--bg); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 8px; padding: 4px 8px; font: 400 13px var(--font); }
.ae-row input[type='range'] { width: 140px; accent-color: var(--informative); }
#ae-gain-v { min-width: 60px; color: var(--ink-2); }

/* ── a take from a recording ─────────────────────────────────────────────── */
.btn.is-live { background: var(--accent); border-color: var(--accent); color: #fff; }
.vx-diff { margin-top: 6px; line-height: 1.7; }
.vx-diff mark { background: rgba(53, 97, 220, 0.35); color: var(--ink); padding: 0 3px; border-radius: 3px; }
.vx-diff s { color: var(--ink-3); text-decoration-color: var(--accent); }
.vx-chip input[type='radio'] { accent-color: var(--informative); }

/* ── publish, abandon, history: the diff in front of the decision ─────────── */
.btn--danger { background: var(--negative); border-color: var(--negative); color: #fff; }
.is-danger { color: var(--negative); }
.diff-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 10px 0 2px; }
.diff-sims { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.diff-sims .ed-sim { margin-top: 2px; }
.diff-journal { list-style: none; padding-left: 0; }
.diff-time { display: inline-block; min-width: 92px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pub-label { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 10px; font: 400 14px var(--font); }
.pub-label:focus { outline: none; border-color: var(--informative); }

/* ── Commentaires ─────────────────────────────────────────────────────────── */
/* the same two columns as Édition: the transport, the journal and the armed
   card have no business on a screen where nothing is armed */
body.is-commentaires #gutter-right, body.is-commentaires .log, body.is-commentaires .log-tab,
body.is-commentaires #armed, body.is-commentaires #gutter-armed, body.is-commentaires .next, body.is-commentaires .actions, body.is-commentaires .sim, body.is-commentaires .ribbon { display: none !important; }
body.is-commentaires .blk.is-editable { cursor: pointer; transition: background var(--t); }
body.is-commentaires .blk.is-editable:hover { background: var(--surface-2); }
body.is-commentaires .blk--cue.is-playing .trk__note { color: var(--positive); }
/* Amber, the palette's cautionary colour: the armed top is pink, the editor is
   blue, a note is amber, so a glance says which screen the page is on. */
.edition-banner.is-comments { background: rgba(248,202,0,0.08); border-bottom-color: var(--cautionary); }
.edition-banner.is-comments strong { color: var(--cautionary); }
body.is-commentaires .panel { border-color: var(--cautionary); box-shadow: 0 0 0 1px rgba(248,202,0,0.30), 0 0 40px rgba(248,202,0,0.10); }
/* the composer has its own button; the editor's foot would only repeat Fermer */
body.is-commentaires .panel__foot { display: none; }
body.is-commentaires .blk.is-selected { background: rgba(248,202,0,0.10) !important; border-left-color: var(--cautionary) !important; }
body.is-commentaires .blk--cue.is-selected .chip { border-color: var(--cautionary); }
.cm-nav { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cm-nav .btn { padding: 2px 9px; font-size: 15px; line-height: 1; }
#cm-count { min-width: 52px; text-align: center; font-size: 12px; }
.seg--sm button { padding: 3px 10px; font-size: 11px; }

/* The marker on a commented line or tile: a count in amber, small enough not
   to pull the eye of an actor reading this column from across the room. */
.cm-mark { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 1px 8px 1px 7px; border-radius: var(--pill); font: 500 11px/1.4 var(--font); color: var(--cautionary); border: 1px solid rgba(248,202,0,0.45); background: rgba(248,202,0,0.10); vertical-align: 2px; cursor: help; white-space: nowrap; }
.cm-mark::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cautionary); }
.trk__head .cm-mark { margin-left: auto; }
.cm-pop { position: fixed; z-index: 300; background: var(--surface-2); border: 1px solid var(--cautionary); border-radius: 12px; padding: 8px 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.45); font-size: 13px; color: var(--ink-2); pointer-events: none; }
.cm-pop .cm-item { border: 0; padding: 5px 0; margin: 0; background: transparent; }
.cm-pop .cm-item + .cm-item { border-top: 1px solid var(--border); border-radius: 0; }

/* the thread under a line, and the list when nothing is open */
.cm-section { margin-top: 6px; }
.cm-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: var(--bg); }
.cm-item.is-done { opacity: 0.62; }
.cm-meta { font-size: 12px; color: var(--ink-3); }
.cm-meta b { color: var(--ink-2); font-weight: 500; }
.cm-excerpt { color: var(--cautionary); }
.cm-done { color: var(--positive); }
.cm-text { margin: 5px 0; font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-reply { margin: 6px 0 0 14px; padding-left: 10px; border-left: 2px solid var(--border-strong); }
.cm-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.cm-anchor { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.cm-anchor button { border: 0; background: transparent; color: var(--cautionary); font: 500 13px var(--font); cursor: pointer; padding: 0; }
.cm-anchor button:hover { text-decoration: underline; }
.cm-where { color: var(--ink-3); font-size: 12px; }
.cm-compose { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cm-compose__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; color: var(--ink-3); }
.cm-compose__row input { width: 160px; background: var(--bg); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 8px; font: 400 13px var(--font); margin-left: 6px; }
.cm-compose__row input:focus { outline: none; border-color: var(--cautionary); }
.cm-textarea { min-height: 72px; }
.cm-textarea:focus { border-color: var(--cautionary); }
.cm-compose__actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; }
.cm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--pill); border: 1px solid rgba(248,202,0,0.45); color: var(--ink-2); font-size: 12px; }
.cm-chip button { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.cm-form { margin-top: 8px; }
.cm-form .cm-textarea { min-height: 52px; }
/* the words a comment points at, underlined in place without touching the line's markup */
::highlight(cm-excerpt) { text-decoration: underline dotted var(--cautionary); text-underline-offset: 3px; }

/* A narrow screen, a phone: in Filage the script and the journal go, and the
   card, the next tops and the GO get the whole height, since the card already
   says the réplique the tool waits for (Remi, 2026-09-06). The text comes
   back from the gear's menu. Édition and Commentaires need the script to click
   in, so there it stacks over the panel. */
@media (max-width: 1100px) {
  .chrome { grid-template-columns: auto 1fr; gap: 8px 12px; padding: 8px 12px; }
  .chrome__brand { grid-row: 1; grid-column: 1; }
  .chrome__brand strong, .chrome__brand span::before { display: none; }
  .chrome__status { grid-row: 1; grid-column: 2; justify-self: end; }
  .chrome__main { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .settings { left: 8px; right: 8px; width: auto; }
  .settings__section--narrow { display: block; }
  .layout { grid-template-columns: 1fr !important; padding: 10px 12px 24px; gap: 10px; }
  .gutter, .log-tab, .log { display: none !important; }
  body:not(.is-edition):not(.is-commentaires) .script { display: none; }
  body.show-script:not(.is-edition):not(.is-commentaires) .script { display: block; max-height: 36vh; }
  body.is-edition .script, body.is-commentaires .script { max-height: 40vh; }
  .armed__text { font-size: 21px; max-height: none; }
  .ribbon:empty { display: none; }
  .edition-banner { margin: 6px -12px -8px; padding: 0 12px; height: auto; min-height: 40px; flex-wrap: wrap; row-gap: 4px; }
}
@media (max-width: 640px) {
  .next { grid-template-columns: 1fr; }
  .btn--go { min-width: 160px; padding: 14px 26px; }
  .actions__row { gap: 12px; }
}

/* The page's own CSP is `style-src 'self'`, so a style="…" attribute in a
   generated string is dropped without applying. These three carry what four
   of them used to say inline. */
.ed-toolbar--tight,
.vx-chips--tight { margin-top: 8px; }
.ed-select--auto { min-width: auto; }

/* Pièces: the first screen, one card per play. The chrome keeps the brand and
   nothing that belongs to a piece (the conduite, the screens, the dots, the
   gear); the brand itself is the way back here. */
a.chrome__brand { color: inherit; text-decoration: none; }
a.chrome__brand:hover strong { color: var(--accent); }
body.is-pieces .chrome__main, body.is-pieces .chrome__status, body.is-pieces .edition-banner, body.is-pieces .layout, body.is-pieces .log-tab { display: none !important; }
.pieces { width: 100%; max-width: 1040px; margin: 0 auto; padding: 36px 24px 60px; }
.pieces__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
/* the count takes the slack, so the eyebrow stays left and the room's link right */
.pieces__count { color: var(--ink-3); font-size: 12px; flex: 1; }
.pieces__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.piece-card { display: flex; flex-direction: column; gap: 4px; }
/* With an affiche the card turns on its side: the poster whole on the left,
   the words on the right. A theatre poster is portrait and says its title at
   the top and the company's name at the bottom, so it is never cropped. */
.piece-card--affiche { flex-direction: row; align-items: stretch; gap: 16px; padding: 16px; }
.piece-card--affiche .piece-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.piece-card__affiche { flex: none; width: 104px; border-radius: 10px; overflow: hidden; background: var(--surface-2); align-self: flex-start; }
.piece-card__affiche img { display: block; width: 100%; height: auto; }
.piece-card__title { font: 500 18px/1.25 var(--font); }
.piece-card__author { color: var(--ink-3); font-size: 13px; }
.piece-card__meta { color: var(--ink-2); font-size: 13px; margin-top: 8px; }
.piece-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 16px; flex-wrap: wrap; }
/* a link that looks like a button keeps none of a link's underline */
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.pieces__empty { color: var(--ink-3); padding: 40px 0; text-align: center; }
.pieces__empty code { font: 12px var(--mono-font); color: var(--ink-2); }

/* Connexion: the front door, the only thing on the page until the session is
   in and its password stands. Same tokens as the rest; the accent on the one
   button that matters. */
body.is-gate .chrome__main, body.is-gate .chrome__status, body.is-gate .edition-banner, body.is-gate .layout, body.is-gate .log-tab, body.is-gate .pieces { display: none !important; }
.gate { width: 100%; max-width: 440px; margin: 0 auto; padding: 48px 20px 60px; }
.gate__box { display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 22px; }
.gate__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font: 500 15px/1.2 var(--font); }
.gate__brand img { border-radius: 6px; }
.gate__brand span { color: var(--ink-3); display: block; font-weight: 400; font-size: 12px; }
.gate__title { font: 500 20px/1.25 var(--font); margin: 0; }
.gate__muted { color: var(--ink-3); font-size: 13px; margin: 0; line-height: 1.5; }
.gate__note { color: var(--cautionary); font-size: 13px; margin: 0; line-height: 1.5; }
.gate__error { color: var(--negative); font-size: 13px; margin: 0; line-height: 1.5; }
.gate__ok { color: var(--positive); font-size: 13px; margin: 0; }
.gate__form { display: flex; flex-direction: column; gap: 10px; }
.gate__input { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 12px; font: 400 15px var(--font); }
.gate__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.gate__code { font: 500 22px/1 var(--mono-font); letter-spacing: 0.2em; text-align: center; }
.gate__show { color: var(--ink-3); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.gate__google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border-color: #fff; }
.gate__google:hover { background: #f1f1f1; color: #1f1f1f; }
.gate__divider { display: flex; align-items: center; gap: 10px; color: var(--ink-4); font-size: 12px; }
.gate__divider::before, .gate__divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.gate__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.gate__hint { color: var(--ink-4); font-size: 12px; margin: 4px 0 0; }
.gate__rules { color: var(--ink-3); font-size: 12px; margin: 0; line-height: 1.6; }
.gate__rules .is-ok { color: var(--positive); }
.btn-link { background: none; border: 0; padding: 0; color: var(--ink-2); font: 400 13px var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-link:hover { color: var(--accent); }
.btn-link[disabled] { color: var(--ink-4); cursor: default; text-decoration: none; }
.account__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* La salle des commandes (/admin): the admin's page, plain, numbers first. */
body.is-admin .chrome__main { justify-content: flex-start; }
.admin__title { font: 500 14px/1 var(--font); color: var(--ink-2); }
.admin__total { color: var(--ink-3); font-size: 12px; }
.admin { width: 100%; max-width: 1080px; margin: 0 auto; padding: 24px 24px 60px; display: flex; flex-direction: column; gap: 16px; }
.admin__card { display: flex; flex-direction: column; gap: 10px; }
.admin__help { color: var(--ink-3); font-size: 13px; margin: 0; line-height: 1.5; }
.admin__meta { color: var(--ink-4); font-size: 12px; margin: 0; }
.admin__muted { color: var(--ink-4); }
.admin__warn { color: var(--cautionary); font-size: 13px; margin: 0; padding: 10px 14px; border: 1px solid rgba(248,202,0,0.35); border-radius: 12px; }
.admin__empty { color: var(--ink-3); text-align: center; padding: 60px 0; line-height: 2; }
.admin__kills { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.admin__kill { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink); cursor: pointer; transition: border-color var(--t), background var(--t); }
.admin__kill small { color: var(--positive); font: 500 11px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; }
.admin__kill.is-off { border-color: var(--negative); background: rgba(227,39,78,0.10); }
.admin__kill.is-off small { color: var(--negative); }
.admin__kill:hover { border-color: var(--ink-3); }
.admin__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin__table th { text-align: left; font: 400 11px/1.15 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.admin__table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin__table tr.is-disabled td { color: var(--ink-4); }
.admin__table small { color: var(--ink-3); }
.admin__cost { color: var(--ink-3); font-size: 12px; }
.admin__input { width: 110px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 8px; font: 400 13px var(--font); }
.admin__input--wide { width: min(320px, 100%); }
.admin__select { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 8px; font: 400 13px var(--font); }
.admin__actions { display: flex; justify-content: flex-end; }
.admin__invite { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin__row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.admin__feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.admin__feed li { display: grid; grid-template-columns: 120px 110px 1fr; gap: 10px; align-items: baseline; }
.admin__feed time { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.admin__feed-kind { font: 500 10px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.admin__feed small { color: var(--ink-4); }