/* pilot corporate design – dark-ground token set (matches pilot_authz / Coder howto page).
   Yellow is a SIGNAL colour: it marks the current word and the primary action,
   always with off-black ink on it, never as text colour on a light ground. */
@font-face { font-family: "Centra No1"; src: url("../fonts/CentraNo1-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Centra No1"; src: url("../fonts/CentraNo1-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Centra No2"; src: url("../fonts/CentraNo2-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Centra No2"; src: url("../fonts/CentraNo2-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --ground: #1a1a1a;
  --panel: #262626;
  --raised: #2c2c2c;
  --line: #383838;
  --ink: #ececec;
  --off-white: #FCFCFC;
  --off-black: #262626;
  --muted: #9a9a9a;
  --dim: #777777;
  --yellow: #FFE05E;
  --yellow-hover: #e6ca55;
  --teal: #11b1c3;
  --red: #e0645a;
  --font-ui: "Centra No1", "DM Sans", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Centra No2", "Centra No1", "DM Sans", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fs: 48px;
  --marker: 35%;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-ui); font-size: 15px; }
body { display: flex; flex-direction: column; overflow: hidden; }

/* ---- header / toolbar ---- */
.bar { display: flex; flex-wrap: nowrap; gap: .5rem .9rem; overflow: hidden; align-items: center; padding: .55rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.group { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: nowrap; flex-shrink: 0; }
.actions button { padding-inline: .8rem; }
@media (max-width: 1500px) { .actions .label { display: none; } .actions button { padding-inline: .7rem; min-width: 2.4rem; } .pace .k { display: none; } }
@media (max-width: 1200px) { .brand span { display: none; } .conf { display: none; } .bar button.speech { max-width: 14rem; } }
@media (max-width: 980px) { .pace { display: none; } }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--off-white); text-decoration: none; }
.brand svg { height: 22px; width: auto; display: block; }
.brand span { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: .01em; color: var(--ink); border-left: 1px solid var(--line); padding-left: .7rem; }
.bar button { font: inherit; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 3rem; padding: .38rem .95rem; cursor: pointer; line-height: 1.2; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.bar button:hover { border-color: var(--muted); background: var(--raised); }
.bar button.primary { background: var(--yellow); border-color: var(--yellow); color: var(--off-black); font-weight: 700; padding-inline: 1.2rem; }
.bar button.primary:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); }
.bar button.primary.live { background: var(--red); border-color: var(--red); color: var(--off-white); }
.bar button.speech { border-color: transparent; background: var(--raised); max-width: 20rem; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 6rem; }
.bar button.speech .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-right: .3rem; }
.bar button.speech .chev { color: var(--yellow); margin-left: .3rem; }
.spacer { flex: 1; }

.status { display: inline-flex; align-items: center; gap: .5rem; }
.pill { padding: .18rem .7rem; border-radius: 3rem; background: var(--raised); border: 1px solid var(--line); color: var(--muted); font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.pill.listening { border-color: var(--teal); color: var(--teal); }
.pill.lost { border-color: var(--yellow); color: var(--yellow); }
.pill.error { border-color: var(--red); color: var(--red); }
.conf { width: 5rem; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.conf > i { display: block; height: 100%; width: 0; background: var(--teal); transition: width .2s, background .2s; }
.heard { color: var(--dim); font-size: 12px; max-width: 40rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* slides */
.slides { display: inline-flex; align-items: center; gap: .3rem; font-size: 13px; color: var(--muted); padding: .1rem .35rem .1rem .35rem; border: 1px solid var(--line); border-radius: 3rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.slides[hidden] { display: none; }
.slides b { color: var(--ink); font-weight: 500; }
.slides .k { color: var(--dim); }
.bar .slides button { border: 0; padding: 0 .45rem; font-size: 16px; line-height: 1; color: var(--ink); background: transparent; }
.bar .slides button:hover { color: var(--yellow); background: transparent; }
.slides .auto { display: inline-flex; align-items: center; gap: .25rem; margin-left: .3rem; color: var(--muted); }
.slides .auto input { accent-color: var(--yellow); }
.slides .sync { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); margin: 0 .3rem 0 .2rem; }
.slides .sync.ok { background: var(--teal); }
.slides .sync.bad { background: var(--red); }
.slide-mark { display: block; margin: 1.2em 0 .3em; font-family: var(--font-ui); font-size: .32em; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: .6em; }
.slide-mark::before { content: '▣ '; color: var(--yellow); }

/* mac agent */
.bar button.maclink { border-color: var(--line); color: var(--yellow); margin-right: .5rem; }
.bar button.maclink:hover { border-color: var(--yellow); background: transparent; }
.bar button.maclink[hidden] { display: none; }
.steps { margin: 0; padding-left: 1.4rem; line-height: 1.6; max-width: 60rem; }
.steps li { margin-bottom: .6rem; }
.cmd { display: flex; gap: .6rem; align-items: center; background: var(--ground); border: 1px solid var(--line); padding: .6rem .8rem; margin: .4rem 0; }
.cmd code { flex: 1; font: 13px/1.5 ui-monospace, Menlo, monospace; color: var(--ink); word-break: break-all; user-select: all; }
.cmd button { font: inherit; font-size: 13px; background: var(--yellow); color: var(--off-black); border: 0; border-radius: 3rem; padding: .35rem .9rem; cursor: pointer; white-space: nowrap; }
.overlay h3 { margin: 1rem 0 .4rem; font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }
.agents { list-style: none; margin: 0; padding: 0; max-width: 60rem; }
.agents li { display: flex; gap: .8rem; align-items: center; padding: .5rem .2rem; border-bottom: 1px solid var(--line); }
.agents .name { flex: 1; }
.agents .meta { color: var(--muted); font-size: 13px; }
.agents .live { color: var(--teal); }
.agents button { font: inherit; font-size: 13px; background: transparent; color: var(--ink); border: 1px solid var(--muted); border-radius: 3rem; padding: .3rem .7rem; cursor: pointer; }
.agents button:hover { border-color: var(--red); color: var(--red); }
.agents .empty { color: var(--dim); }

/* timing */
.pace { display: inline-flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); padding: .18rem .8rem; border: 1px solid var(--line); border-radius: 3rem; white-space: nowrap; }
.pace b { font-weight: 500; color: var(--ink); }
.pace .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.pace .sep { color: var(--line); }
.pace .delta { font-weight: 700; margin-left: .2rem; }
.pace .delta:empty { display: none; }
.pace.on { border-color: var(--teal); } .pace.on .delta { color: var(--teal); }
.pace.under { border-color: var(--yellow); } .pace.under .delta { color: var(--yellow); }
.pace.over { border-color: var(--red); } .pace.over .delta { color: var(--red); }
.overlay label.inline { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); }
.overlay label.inline input[type=number] { width: 4.5rem; }

/* settings panel */
.settings { background: var(--raised); border-bottom: 1px solid var(--line); padding: .9rem 1rem; display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.settings-grid { flex: 1 1 40rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 1.5rem; max-width: none; }
.sgroup { border: 0; border-left: 2px solid var(--line); margin: 0; padding: .1rem 0 .1rem 1rem; display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.sgroup legend { float: left; width: 100%; margin: 0 0 .2rem; padding: 0; font-family: var(--font-display); font-weight: 500; font-size: .95rem; color: var(--ink); }
.sgroup .field { text-transform: none; letter-spacing: 0; }
.sgroup .field > span { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.settings-aside { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; border-left: 1px solid var(--line); max-width: 28rem; }
.settings-aside .aside-text { display: flex; flex-direction: column; gap: .15rem; }
.settings-aside b { font-weight: 500; color: var(--ink); }
.settings-aside .pill-btn { white-space: nowrap; align-self: center; }
.settings[hidden] { display: none; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem 1.5rem; max-width: 80rem; }
.field[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: .3rem; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.field select, .field input[type=range] { font: inherit; text-transform: none; letter-spacing: 0; }
.field select { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 3rem; padding: .4rem .9rem; font-size: 14px; }
.field input[type=range] { accent-color: var(--yellow); width: 100%; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; align-items: center; cursor: pointer; }
.check input { accent-color: var(--yellow); grid-row: span 2; width: 1.05rem; height: 1.05rem; }
.check b { font-weight: 500; color: var(--ink); }
.check small { color: var(--muted); font-size: 12px; }

.pill-btn { font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; align-self: flex-start; background: transparent; color: var(--ink); border: 1px solid var(--muted); border-radius: 3rem; padding: .35rem .9rem; cursor: pointer; }
.pill-btn:hover { border-color: var(--yellow); color: var(--yellow); }

/* bottom status strip */
.strip, .missed .panel-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; box-sizing: border-box; display: flex; gap: 1rem; align-items: center; padding: 0 1rem; background: rgba(38, 38, 38, .94); border-top: 1px solid var(--line); font-size: 12px; line-height: 1; color: var(--dim); white-space: nowrap; overflow: hidden; }
.strip { z-index: 4; }
.strip .heard { max-width: 45%; }

/* auth */
.user { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: 13px; padding-left: .5rem; border-left: 1px solid var(--line); }
.user[hidden] { display: none; }
.overlay.auth { align-items: center; justify-content: center; }
.auth-card { width: min(26rem, 100%); background: var(--panel); border: 1px solid var(--line); padding: 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .9rem; }
.auth-card h2 { margin: 0; }
.auth-card .field { text-transform: none; letter-spacing: 0; font-size: 13px; }
.auth-card .field span { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.auth-card input { font: inherit; font-size: 15px; background: var(--ground); color: var(--ink); border: 1px solid var(--line); padding: .5rem .7rem; }
.auth-card input:focus { outline: 2px solid var(--yellow); outline-offset: 0; }
.auth-card .error { margin: 0; color: var(--red); font-size: 13px; min-height: 1.2em; }
.auth-card .notice { margin: 0; padding: .6rem .8rem; border-left: 3px solid var(--teal); background: var(--raised); color: var(--ink); font-size: 13px; }
.auth-card .notice[hidden] { display: none; }
.auth-card .row { flex-wrap: wrap; }

/* ---- prompter stage ---- */
.stage { position: relative; flex: 1; min-height: 0; background: radial-gradient(60vw 40vh at 50% 0, rgba(255, 224, 94, .06), transparent 70%), var(--ground); }
.marker { position: absolute; left: 0; right: 0; top: var(--marker); height: 0; border-top: 2px solid rgba(255, 224, 94, .5); pointer-events: none; z-index: 2; }
.marker::before { content: ''; position: absolute; left: 1rem; top: -7px; width: 12px; height: 12px; background: var(--yellow); transform: rotate(45deg); }
.prompter { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
.prompter::-webkit-scrollbar { display: none; }
.prompter.mirror .text { transform: scaleX(-1); }
.text { padding: 45vh 8vw 70vh; font-family: var(--font-display); font-size: var(--fs); line-height: 1.4; white-space: pre-wrap; font-weight: 500; letter-spacing: .005em; color: var(--ink); }
.w { transition: color .15s; color: var(--ink); border-radius: .12em; }
.w.past { color: var(--dim); }
.w.cur { color: var(--off-black); background: var(--yellow); box-shadow: 0 0 0 .12em var(--yellow); }

/* coverage (stage 2/3) */
.u-said .w:not(.cur) { color: #555; }
.u-partial .w:not(.cur) { color: var(--muted); }
.u-missed .w:not(.cur) { color: var(--yellow); text-decoration: underline dotted; text-underline-offset: .2em; }

/* ---- side panel: not yet said ---- */
.missed { position: absolute; right: 0; top: 0; bottom: 0; width: min(34vw, 26rem); background: rgba(38, 38, 38, .96); border-left: 1px solid var(--line); padding: 1rem 1.1rem 40px; overflow-y: auto; z-index: 3; }
.missed .panel-foot { text-overflow: ellipsis; display: block; line-height: 29px; }
.missed .panel-foot:empty::before { content: '\00a0'; }
.missed[hidden] { display: none; }
.missed h3 { margin: 0 0 .6rem; font-family: var(--font-display); font-weight: 500; font-size: .95rem; color: var(--yellow); letter-spacing: .02em; }
.missed h3 span { color: var(--muted); font-weight: 400; }
.missed ol { margin: 0; padding-left: 1.2rem; }
.missed li { margin: .4rem 0; font-size: 1rem; line-height: 1.35; color: var(--ink); cursor: pointer; }
.missed li:hover { color: var(--yellow); }
.missed li.partial { color: var(--muted); }
.missed .empty { color: var(--dim); font-size: .9rem; list-style: none; margin-left: -1.2rem; }
.stage.with-panel .prompter, .stage.with-panel .marker, .stage.with-panel .strip { right: min(34vw, 26rem); }

/* ---- overlays: editor, library, replay ---- */
.overlay { position: absolute; inset: 0; background: rgba(26, 26, 26, .97); z-index: 5; display: flex; flex-direction: column; padding: 1.25rem 1.5rem; gap: .8rem; }
.overlay[hidden] { display: none; }
.overlay h2 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.overlay textarea { flex: 1; width: 100%; resize: none; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: .9rem 1rem; font: 16px/1.55 var(--font-ui); }
.overlay textarea:focus, .overlay input:focus { outline: 2px solid var(--yellow); outline-offset: 0; }
.overlay .row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.overlay .row button { font: inherit; font-weight: 700; background: var(--yellow); color: var(--off-black); border: 1px solid var(--yellow); border-radius: 3rem; padding: .5rem 1.1rem; cursor: pointer; }
.overlay .row button:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); }
.overlay .row button.secondary { background: transparent; color: var(--ink); border-color: var(--muted); font-weight: 400; }
.overlay .row button.secondary:hover { background: var(--raised); border-color: var(--ink); }
.overlay .hint { color: var(--muted); font-size: 13px; }
.overlay input[type=number] { width: 4.5rem; font: inherit; background: var(--panel); color: var(--ink); border: 1px solid var(--line); padding: .35rem; }
.overlay input[type=text] { flex: 1; font: inherit; background: var(--panel); color: var(--ink); border: 1px solid var(--line); padding: .45rem .7rem; }
kbd { background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3em; font-size: .85em; }

/* speech library: the row is the link, buttons are secondary actions */
.speeches { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; border-top: 1px solid var(--line); }
.speeches li { display: flex; align-items: center; gap: .8rem; padding: .8rem .6rem; border-bottom: 1px solid var(--line); cursor: pointer; border-left: 3px solid transparent; }
.speeches li:hover { background: var(--panel); }
.speeches li.active { border-left-color: var(--yellow); background: var(--panel); }
.speeches .title { flex: 1; min-width: 0; }
.speeches .title b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speeches .title small { color: var(--muted); }
.speeches .state { font-size: 12px; padding: .18rem .6rem; border-radius: 3rem; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.speeches .state.ok { border-color: var(--teal); color: var(--teal); }
.speeches .state.busy { border-color: var(--yellow); color: var(--yellow); }
.speeches .actions { display: flex; gap: .4rem; }
.speeches button { font: inherit; font-size: 13px; background: transparent; color: var(--ink); border: 1px solid var(--muted); border-radius: 3rem; padding: .3rem .7rem; cursor: pointer; }
.speeches button:hover { border-color: var(--ink); background: var(--raised); }
.speeches button.danger:hover { border-color: var(--red); color: var(--red); }
.speeches li .open { color: var(--yellow); font-size: 13px; white-space: nowrap; }
.speeches .empty { padding: 2rem 1rem; color: var(--muted); cursor: default; }
.progress { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; width: 8rem; }
.progress > i { display: block; height: 100%; background: var(--yellow); width: 0; }