/* ═══════════════════════════════════════════════════════════════════════════
   RISE LOS — Learning & Operations System
   Same brand family as riseknowyourcareer.com (navy · teal · gold · cream,
   DM Serif/Sans/Mono) so a student does not think they are on a third-party
   tool. Different JOB, so different chrome: KYCR is a marketing-and-report
   site read once; this is a control desk read all day by someone standing up
   at the front of a room. Hence the dark operator rail, the mono state
   labels, and the countdown sized to be legible from the back of the venue.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Sampled from the RISE mark (see the KYCR design system for provenance). */
  --navy:#021E4E;--navy-6:#1B3A6B;--ink:#00142F;--slate:#33496F;
  --teal:#008C96;--teal-lt:#3FBFC4;--teal-ink:#046B76;
  --gold:#D29A0E;--gold-lt:#EFC04A;--gold-ink:#7C5A08;
  --cream:#FBFAF6;--mist:#F1F4F8;--beige:#CBD6E2;--lgray:#5E6E89;--white:#fff;
  --green:#2D6A4F;--green-lt:#52B788;--berry:#B4531F;--berry-lt:#F6E7DF;

  /* State colours for the run-of-show ladder. One hue per state, used for the
     rail dot, the row border and the pill — so the ladder is readable at a
     glance without reading a single word. */
  --st-locked:#9AA8BF;--st-open:#046B76;--st-live:#B4531F;--st-closed:#2D6A4F;

  --ff-d:'DM Serif Display',Georgia,serif;
  --ff-b:'DM Sans',system-ui,sans-serif;
  --ff-m:'DM Mono',ui-monospace,monospace;
  --r:.5rem;--r2:.875rem;--r3:1.25rem;--r4:1.75rem;
  --sh:0 2px 20px rgba(2,30,78,.07);--sh2:0 8px 40px rgba(2,30,78,.16);
  --rail:248px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ff-b);background:var(--cream);color:var(--navy);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer;border:none;background:none;color:inherit}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--beige);border-radius:3px}
.hidden{display:none!important}
.boot{min-height:70vh;display:flex;align-items:center;justify-content:center;color:var(--lgray);font-size:.9rem}
.muted{color:var(--slate);font-size:.9rem}
.mono{font-family:var(--ff-m)}

/* ── type ─────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--ff-d);font-weight:400;line-height:1.15}
.eyebrow{font-family:var(--ff-m);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.eyebrow-d{color:var(--gold-lt)}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.6rem 1.25rem;border-radius:var(--r);font-size:.9rem;font-weight:500;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn-p{background:var(--navy);color:#fff}.btn-p:not(:disabled):hover{background:var(--navy-6)}
.btn-g{background:var(--gold);color:var(--ink);font-weight:600}.btn-g:not(:disabled):hover{background:var(--gold-lt)}
.btn-o{background:transparent;color:var(--navy);border:1.5px solid var(--beige)}.btn-o:not(:disabled):hover{border-color:var(--navy)}
.btn-d{background:var(--berry);color:#fff}.btn-d:not(:disabled):hover{background:#933f14}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost:not(:disabled):hover{background:rgba(255,255,255,.2)}
.btn-sm{padding:.34rem .75rem;font-size:.8rem;border-radius:var(--r)}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── shell: dark operator rail + content ──────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
.rail{background:var(--ink);color:#fff;padding:1.4rem 1.1rem;display:flex;flex-direction:column;gap:1.4rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.rail-logo{display:flex;align-items:center;gap:.6rem}
.rail-logo img{height:26px;width:auto}
.rail-logo span{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.2em;color:var(--gold-lt);text-transform:uppercase}
.rail-nav{display:flex;flex-direction:column;gap:.15rem}
.rail-nav a{padding:.55rem .7rem;border-radius:var(--r);font-size:.9rem;color:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.rail-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.rail-nav a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:500}
.rail-foot{margin-top:auto;font-size:.8rem;color:rgba(255,255,255,.5);display:flex;flex-direction:column;gap:.5rem}
.rail-who{color:#fff;font-size:.9rem}
.rail-role{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt)}
.main{padding:2rem 2.25rem 4rem;max-width:1180px}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.page-h h1{font-size:clamp(1.6rem,3vw,2.2rem)}

/* ── cards & panels ───────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--beige);border-radius:var(--r3);padding:1.4rem 1.5rem;box-shadow:var(--sh)}
.cards{display:grid;gap:1rem}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-bottom:1.5rem}
.stat{background:#fff;border:1px solid var(--beige);border-radius:var(--r2);padding:.85rem 1rem}
.stat .k{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lgray)}
.stat .v{font-family:var(--ff-d);font-size:1.5rem;line-height:1.2;margin-top:.15rem}

/* ── state pills ──────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--ff-m);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .5rem;border-radius:var(--r);border:1px solid currentColor}
.pill.locked{color:var(--st-locked)}
.pill.open{color:var(--st-open)}
.pill.live{color:var(--st-live);background:var(--berry-lt);border-color:var(--st-live)}
.pill.closed{color:var(--st-closed)}
.pill.ai{color:var(--gold-ink);border-color:var(--gold)}

/* ── the run-of-show ladder ───────────────────────────────────────────────
   The trainer's console IS the run-of-show sheet, in order, with a rail down
   the left. This is the one deliberate design decision in the tool: the thing
   it replaces is a printed timetable, so it looks like one — but the current
   row expands, the clock is enormous, and a refused action highlights the row
   that is blocking instead of printing a sentence somewhere else.            */
.ladder{position:relative;padding-left:1.9rem}
.ladder::before{content:"";position:absolute;left:.48rem;top:.9rem;bottom:.9rem;width:2px;background:var(--beige)}
.rung{position:relative;background:#fff;border:1px solid var(--beige);border-left:3px solid var(--st-locked);border-radius:var(--r2);padding:.7rem .95rem;margin-bottom:.55rem;transition:box-shadow .15s,border-color .15s}
.rung::before{content:"";position:absolute;left:-1.66rem;top:1rem;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--st-locked)}
.rung[data-state="open"]{border-left-color:var(--st-open)}
.rung[data-state="open"]::before{border-color:var(--st-open);background:var(--st-open)}
.rung[data-state="live"]{border-left-color:var(--st-live);box-shadow:var(--sh2)}
.rung[data-state="live"]::before{border-color:var(--st-live);background:var(--st-live)}
.rung[data-state="closed"]{border-left-color:var(--st-closed);opacity:.72}
.rung[data-state="closed"]::before{border-color:var(--st-closed);background:var(--st-closed)}
.rung.blocking{border-color:var(--berry);box-shadow:0 0 0 3px var(--berry-lt)}
.rung-top{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.rung-seq{font-family:var(--ff-m);font-size:.75rem;color:var(--lgray);min-width:1.6rem}
.rung-t{font-weight:500;flex:1;min-width:11rem}
.rung-time{font-family:var(--ff-m);font-size:.78rem;color:var(--slate)}
.rung-mode{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.12em;color:var(--lgray)}
.rung-body{margin-top:.7rem;padding-top:.7rem;border-top:1px dashed var(--beige);display:grid;gap:.7rem}
.rung-note{font-size:.85rem;color:var(--slate)}
.rung-note b{color:var(--navy);font-weight:500}
.day-sep{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lgray);margin:1.4rem 0 .7rem;padding-left:.1rem}

/* ── the clock ────────────────────────────────────────────────────────── */
.clock{font-family:var(--ff-m);font-size:clamp(2.6rem,7vw,4.2rem);line-height:1;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.clock.warn{color:var(--berry)}
.clock-wrap{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.clock-lbl{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lgray)}

/* ── student screen ───────────────────────────────────────────────────── */
.stage-hero{background:var(--ink);color:#fff;border-radius:var(--r4);padding:2rem 2.2rem;margin-bottom:1.5rem}
.stage-hero h1{font-size:clamp(1.7rem,3.4vw,2.6rem);margin:.4rem 0 .5rem}
.stage-hero .sub{color:rgba(255,255,255,.72);font-size:.95rem}
.stage-hero .clock{color:var(--gold-lt);margin-top:1rem}
.stage-hero .clock.warn{color:#FFB4A0}
.quiet{background:#fff;border:1px dashed var(--beige);border-radius:var(--r3);padding:3rem 2rem;text-align:center;color:var(--slate)}
.quiet h2{font-size:1.35rem;color:var(--navy);margin-bottom:.4rem}

.cap{background:#fff;border:1px solid var(--beige);border-radius:var(--r2);padding:1.1rem 1.25rem;margin-bottom:.7rem;display:flex;gap:1rem;align-items:flex-start}
.cap-n{font-family:var(--ff-m);font-size:.8rem;color:var(--teal-ink);padding-top:.15rem;min-width:1.5rem}
.cap-b{flex:1}
.cap-b h3{font-family:var(--ff-b);font-weight:600;font-size:1.02rem;line-height:1.35;margin-bottom:.35rem}
.cap-line{font-size:.9rem;color:var(--slate);margin-top:.3rem}
.cap-line b{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--lgray);font-weight:400;display:block;margin-bottom:.05rem}
.cap-tick{border:1.5px solid var(--beige);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:transparent;flex-shrink:0;transition:all .15s}
.cap-tick:hover{border-color:var(--teal)}
.cap.done .cap-tick{background:var(--teal);border-color:var(--teal);color:#fff}
.cap.done{border-color:#BFE0E2}
/* DEV_11: trainer notes are visually separated so a facilitator cannot read one out
   thinking it is student copy. Same reason they are a different colour, not a footnote. */
.cap-trainer{margin-top:.6rem;padding:.55rem .7rem;background:#FFF8E6;border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;font-size:.85rem;color:var(--gold-ink)}
.cap-trainer b{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:.1rem}

/* ── tables ───────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-family:var(--ff-m);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lgray);font-weight:400;padding:.5rem .6rem;border-bottom:1px solid var(--beige)}
td{padding:.55rem .6rem;border-bottom:1px solid var(--mist);vertical-align:top}
tr:hover td{background:var(--mist)}
.t-wrap{overflow-x:auto}
code.det{font-family:var(--ff-m);font-size:.76rem;color:var(--slate);word-break:break-word}

/* ── forms ────────────────────────────────────────────────────────────── */
label{display:block;font-size:.84rem;color:var(--slate);margin-bottom:.25rem}
input,select,textarea{width:100%;padding:.6rem .75rem;border:1.5px solid var(--beige);border-radius:var(--r);background:#fff;color:var(--navy)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)}
.field{margin-bottom:.85rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}

/* ── sign-in ──────────────────────────────────────────────────────────── */
.signin{min-height:100vh;display:grid;place-items:center;padding:2rem;background:var(--ink)}
.signin-card{background:#fff;border-radius:var(--r4);padding:2.4rem;width:100%;max-width:400px;box-shadow:var(--sh2)}
.signin-card img{height:34px;margin-bottom:1.4rem}
.signin-card h1{font-size:1.5rem;margin-bottom:.3rem}
.signin-card .muted{margin-bottom:1.5rem}

/* ── toast ────────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.75rem 1.1rem;border-radius:var(--r2);font-size:.9rem;box-shadow:var(--sh2);z-index:900;max-width:min(560px,92vw)}
.toast.bad{background:var(--berry)}
.err{background:var(--berry-lt);border:1px solid var(--berry);color:#7d3512;padding:.6rem .8rem;border-radius:var(--r);font-size:.86rem;margin-bottom:.85rem}

/* ── responsive ───────────────────────────────────────────────────────────
   A trainer runs the console on a laptop; a student is on a phone in a venue
   chair. So the rail collapses to a top bar rather than a drawer — a control
   you have to open is a control you forget during a live clock.             */
@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:.8rem;padding:.9rem 1.1rem}
  .rail-nav{flex-direction:row;flex-wrap:wrap;gap:.3rem;flex:1}
  .rail-nav a{padding:.4rem .7rem;font-size:.85rem}
  .rail-foot{margin-top:0;flex-direction:row;align-items:center;gap:.8rem;width:100%;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);padding-top:.7rem}
  .main{padding:1.25rem 1.1rem 3rem}
  .grid2{grid-template-columns:1fr}
  .stage-hero{padding:1.5rem 1.35rem;border-radius:var(--r3)}
  .ladder{padding-left:1.5rem}
  .rung::before{left:-1.32rem}
}