/* Shared classroom identity: warm paper, forest ink, and clear wayfinding. */
:root {
  --paper:#f5f3ec; --panel:#fffefb; --panel-2:#eaece3; --ink:#203b32;
  --ink-soft:#5e6b62; --rule:#d8ddd2; --signal:#bbda79; --stop:#a44332; --go:#316c4e;
  --bg:var(--paper); --surface:var(--panel); --surface2:#eef0e7; --tint:#e8eee3; --line:var(--rule);
  --fg:var(--ink); --fg2:var(--ink-soft); --fg3:#637165; --navy:var(--ink); --navy-d:#193b30;
  --navy2:#315e49; --blue:#316c4e; --blue2:#578369; --blue3:#a4bd98;
  --gold:#c8dc8f; --gold2:#dfedb6; --amber:#8b5432;
  --onDark:#fffef4; --onDark2:#d5dfd1; --onDark3:#c0d0bf;
  --r:18px; --rs:10px; --rp:999px; --shadow:0 4px 20px #203b3206;
  --sp:clamp(1.15rem,3.5vw,3.5rem);
}
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
h1,h2,h3,.role b { font-family:inherit; }
h1,.h1,.big,.hero__phase { letter-spacing:-.045em; font-weight:650; }
.h1 { font-size:clamp(2.5rem,5vw,4.7rem); }
.kicker,.eyebrow { font-size:.68rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow { display:block; margin-bottom:1rem; color:var(--ink-soft); }
.site-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem var(--sp); background:var(--paper); border-bottom:1px solid var(--rule); }
.brand { display:flex; align-items:center; gap:.7rem; color:var(--ink); text-decoration:none; font-size:.95rem; font-weight:750; letter-spacing:-.025em; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; background:var(--ink); color:var(--gold2); border-radius:9px; font-size:1rem; }
.site-links { display:flex; gap:.35rem; flex-wrap:wrap; }
.site-links a { color:var(--ink-soft); text-decoration:none; padding:.4rem .75rem; border-radius:7px; font-size:.8rem; font-weight:600; }
.site-links a:hover,.site-links a[aria-current=page] { background:var(--tint); color:var(--ink); }
.band { background:var(--navy-d); color:var(--onDark); padding:3rem var(--sp); }
.band .rule { width:34px; height:4px; background:var(--gold); border-radius:2px; }
.band .kicker { color:var(--gold2); margin-bottom:.6rem; }
.band--slim { min-height:70px; padding:1rem var(--sp); }
.band--slim .rule { display:none; }
.band--slim .bandwrap::before { content:'YOUR SESSION STARTS HERE'; letter-spacing:.15em; font-size:.65rem; font-weight:700; }
.stats-row { gap:2rem; padding-top:1rem; }
.stat { border-left:1px solid #ffffff28; padding-left:1.3rem; }
.stat b { font-weight:500; letter-spacing:-.045em; }
.stat span { font-weight:450; }
.wrap { padding-top:2rem; }
.card,.tile,.role,.slab, .sealed,#map > .t { border:1px solid var(--rule); border-radius:var(--r); background:var(--panel); box-shadow:var(--shadow); }
.card { padding:1.5rem 1.5rem 3rem; border-top:4px solid var(--blue); }
.card .hero { letter-spacing:-.025em; }
.card.isnew { border-top-color:var(--gold); }
.tile,.role { padding:1.25rem; transition:background .15s,border-color .15s,transform .15s; }
.tile:hover:not(:disabled),.role:hover:not(:disabled) { background:#f1f5e9; border-color:#819b77; transform:translateY(-2px); }
.role.is-on,.tile.sel { background:#e8f0d9; border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.btn { display:inline-block; background:var(--ink); color:#fffef7; border:1px solid var(--ink); border-radius:9px; padding:.8rem 1.3rem; font:inherit; font-size:.9rem; font-weight:650; cursor:pointer; text-decoration:none; transition:background .15s; }
.btn:hover { background:var(--navy2); }
.btn--q,.btn--quiet { background:transparent; color:var(--ink); border-color:var(--rule); }
.btn--q:hover,.btn--quiet:hover { background:var(--tint); }
.btn--g { background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn--s { padding:.5rem .9rem; font-size:.8rem; }
.in,input[type=text],input[type=password],textarea,select { font:inherit; color:var(--ink); background:var(--panel); border:1px solid #aab6a5; border-radius:9px; padding:.8rem 1rem; }
textarea { min-height:110px; resize:vertical; }
:focus-visible { outline:3px solid #659745; outline-offset:4px; }
.in:focus { outline:3px solid #659745; outline-offset:3px; }
button:disabled { opacity:.45; cursor:not-allowed; }
.err { color:var(--stop); }
.pill,.tag { border:1px solid var(--rule); background:var(--tint); color:var(--ink); border-radius:999px; padding:.25rem .65rem; }
.pill--gold,.tag--a { background:var(--gold2); border-color:var(--gold); color:var(--ink); }
.pill--a { background:var(--blue); color:white; border-color:var(--blue); }
.pill--blue { background:#e0ece8; color:var(--blue); }
.ic,.tn,.tno { border-radius:10px; }
.ic--a { background:var(--tint); }
.ic--g { background:#f6eadc; }
.av,.mini span { border-radius:50%; }
.av--empty { border:1px dashed var(--rule); }
#map > .t { padding:1.2rem; border-top:3px solid var(--rule); }
#map > .t.ready,#map > .t.done { border-top-color:var(--blue); }
#map > .t.sub { border-top-color:#b1c46c; }
.empty { padding:5rem 1.5rem; border:1px dashed #aebba5; border-radius:18px; background:#fffef980; font-size:1rem; font-weight:500; }
.empty::before { content:'↗'; display:grid; place-items:center; width:50px; height:50px; background:var(--tint); color:var(--blue); border-radius:50%; margin:0 auto 1rem; font-size:1.6rem; }
.wbar { border-radius:5px; }
.wbar i + i { border-left:2px solid var(--panel); }
.bar { position:relative; background:var(--paper); color:var(--ink); padding:1rem var(--sp); border-bottom:1px solid var(--rule); flex-wrap:wrap; }
.bar__name { font-family:inherit; display:flex; align-items:center; gap:.5rem; }
.bar__name::before { content:'R'; display:grid; place-items:center; width:32px; height:32px; background:var(--ink); color:var(--gold2); border-radius:9px; margin-right:.25rem; }
.bar__name span { color:#829374; }
.bar__clock,.bar__clock.is-idle { color:var(--ink); font-family:inherit; font-size:1.35rem; }
.bar button { border:1px solid var(--rule); border-radius:7px; color:var(--ink); padding:.45rem .75rem; background:var(--panel); }
.bar button:hover { background:var(--tint); }
.bar button.is-on { background:var(--gold2); border-color:#a5bc78; }
section.hero { max-width:74rem; padding-top:3rem; padding-bottom:2rem; position:relative; }
.hero__phase { font-size:clamp(2.7rem,6vw,4.8rem); }
.hero__do { max-width:57ch; font-size:1.1rem; line-height:1.65; }
.track { height:30px; gap:4px; margin-top:2rem; }
.track div { border:0; border-radius:4px; background:#e4e8dc; }
.track div.is-now { background:var(--ink); border:0; }
.track div.is-now span { color:#f2f6e9; }
.track div.is-done { background:#c9d8af; border:0; }
.track div span { font-size:.6rem; }
.nav { top:0; background:var(--paper); border-color:var(--rule); }
.nav__in { gap:.4rem; }
.nav button,.nav button:first-child { padding:.9rem 1rem; font-size:.85rem; }
.nav button.is-on { border-color:var(--blue); color:var(--blue); }
.nav button .pad { border-radius:50%; width:6px; height:6px; }
.nav button .pad.is-live { background:var(--go); }
main { padding-top:2rem; }
h2.sec { border-bottom:1px solid var(--rule); padding-bottom:.8rem; letter-spacing:-.03em; font-size:1.5rem; }
.slab { padding:1.4rem 1.6rem; }
.slab--flag { border-left:4px solid #99b966; background:#edf2e3; }
.slab--stop { border-left:4px solid #be7961; background:#fbf0e7; }
th { background:#e7ecdf; border-bottom:1px solid #b8c4ae; font-size:.75rem; letter-spacing:.04em; }
th,td { padding:.8rem 1rem; }
td { background:#fffefb; }
.spec { border-top:1px solid var(--rule); }
.spec div { padding:.85rem 0; }
.fields { gap:1.2rem; }
.two { gap:1.2rem; }
.field label { margin-bottom:.45rem; }
.tape { background:repeating-linear-gradient(135deg,#dce6c9 0 12px,#edf1e3 12px 24px); height:12px; border-radius:16px 16px 0 0; }
.dots i { border-radius:3px; background:#ffffff30; }
.dots i.on { background:var(--gold); }
.join-page .wrap { max-width:70rem; padding-top:3rem; }
.join-page #st1 { max-width:42rem; padding:clamp(1.5rem,4vw,3rem); background:var(--panel); border:1px solid var(--rule); border-radius:22px; margin:0 auto; }
.join-page #st1 .h1 { font-size:clamp(2.3rem,4vw,3.6rem); }
.join-page #st1 .in { width:100%; }
.join-page #st1 .btn { width:100%; margin-top:.5rem; }
.join-page .done { background:var(--panel); padding:2rem; border:1px solid var(--rule); border-radius:22px; margin:auto; }
.fac-controls { position:sticky; bottom:0; z-index:90; background:var(--ink); color:var(--onDark); display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; padding:.8rem var(--sp); font-size:.75rem; box-shadow:0 -4px 20px #203b3212; }
.fac-controls .btn { font-size:.75rem; background:#ffffff12; border-color:#ffffff30; padding:.55rem .8rem; }
.fac-controls .btn:hover { background:#ffffff25; }
body.sealed .fade { filter:blur(9px); user-select:none; }
/* the brief lays itself out with .brief-grid (setup left, company right); no CSS columns here */
@media(max-width:600px) {
  .site-head { align-items:flex-start; flex-direction:column; gap:.6rem; }
  .site-links { width:100%; justify-content:space-between; }
  .site-links a { padding:.35rem .45rem; }
  .band { padding:2rem var(--sp); } .band--slim { padding:1rem var(--sp); }
  .stats-row { gap:1.2rem; } .stat { padding-left:.8rem; }
  .stat b { font-size:1.8rem; } .stat span { font-size:.7rem; }
  .g-card,.g-tbl,.roles { grid-template-columns:1fr; }
  .bar { gap:.7rem; } .bar__btns { order:3; width:100%; }
  .track { height:12px; } .track div span { display:none; }
  section.hero { padding-top:2rem; } .hero__phase { font-size:2.7rem; }
  .nav__in { padding:0 .3rem; gap:0; } .nav button { padding:.8rem .7rem; }
  .slab { padding:1.1rem; } th,td { padding:.6rem; overflow-wrap:anywhere; }
  .fac-controls { position:relative; } .join-page #st1 { padding:1.5rem; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }