/* Roji Classroom Rotation Timer.
   Layout: Roji brand header, setup on the left, the timer stage and rotation board on the right (stacked on phones).
   While a run is going, setup steps aside and the stage takes the whole width so it reads from the back of the room.
   The printed rotation chart is its own sheet and always prints as dark ink on white paper. */
:root{
  --navy:#1D5B8D; --sky:#0B7CC9; --green:#3CC47C; --green-ink:#1E8A52;
  --bg:#EEF5FB; --surface:#FFFFFF; --ink:#16324A; --muted:#557089; --line:#CFE0EE; --field:#F7FBFE; --tint:#E3EFF9;
  --on-navy:#FFFFFF; --warn-bg:#FFF1CC; --warn-ink:#7A5400; --ok-bg:#DDF5E8; --ok-ink:#15693F;
  --title-fill:#0B7CC9; --title-stroke:#12344F;
  --shadow:0 1px 0 #d7e6f2, 0 10px 30px -18px rgba(29,91,141,.45);
  /* Stage colors say what the class should be doing. They stay the same in light and dark. */
  --work-bg:#1D5B8D; --work-ink:#FFFFFF; --work-soft:rgba(255,255,255,.18);
  --move-bg:#FFC53D; --move-ink:#3A2A00; --move-soft:rgba(58,42,0,.16);
  --tidy-bg:#3CC47C; --tidy-ink:#06301B; --tidy-soft:rgba(6,48,27,.16);
  --chip-bg:#FFFFFF; --chip-ink:#16324A;
  --g0:#0B7CC9; --g1:#2FA866; --g2:#E5B400; --g3:#F08A24; --g4:#8A5BD6; --g5:#E04848; --g6:#EC6FA9; --g7:#12A3A3;
  --f-display:"Luckiest Guy","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1B27; --surface:#15283A; --ink:#E6F0F8; --muted:#9BB3C8; --line:#27425A; --field:#10202F; --tint:#1B3247;
  --navy:#5CADE2; --sky:#5CADE2; --green-ink:#5FD897; --on-navy:#06121C;
  --warn-bg:#3B3013; --warn-ink:#F4CF6E; --ok-bg:#153B2A; --ok-ink:#7FE3AE;
  --title-fill:#5CADE2; --title-stroke:#06121C; --shadow:0 12px 30px -20px rgba(0,0,0,.8); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1B27; --surface:#15283A; --ink:#E6F0F8; --muted:#9BB3C8; --line:#27425A; --field:#10202F; --tint:#1B3247;
  --navy:#5CADE2; --sky:#5CADE2; --green-ink:#5FD897; --on-navy:#06121C;
  --warn-bg:#3B3013; --warn-ink:#F4CF6E; --ok-bg:#153B2A; --ok-ink:#7FE3AE;
  --title-fill:#5CADE2; --title-stroke:#06121C; --shadow:0 12px 30px -20px rgba(0,0,0,.8); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,3vw,32px);padding-block:12px 40px}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
p{margin:0}

/* ---------- brand header (same on every Roji tool) ---------- */
.brandbar{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:800;color:var(--navy);font-size:.9rem}
.brandbar a{color:inherit;text-decoration:none}
.brandbar .kit{letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:var(--muted)}
.hero{display:flex;align-items:center;margin-block:4px 10px}
.hero-text{flex:1;min-width:0;padding-bottom:clamp(8px,2vw,20px)}
.eyebrow{font-weight:800;color:var(--green-ink);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.1rem,6vw,3.8rem);line-height:.95;margin:4px 0 10px;
  color:var(--title-fill);-webkit-text-stroke:2px var(--title-stroke);paint-order:stroke fill;letter-spacing:.01em;text-wrap:balance;text-shadow:0 3px 0 var(--title-stroke)}
.tagline{color:var(--muted);font-weight:700;max-width:52ch}
.roji{flex:0 0 auto;width:clamp(110px,20vw,200px);display:block}
.roji img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 12px rgba(18,52,79,.18))}

.example{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;background:var(--warn-bg);color:var(--warn-ink);
  border-radius:14px;padding:10px 14px;font-weight:700;margin-bottom:16px}
.example .btn.ghost{color:var(--warn-ink);border-color:currentColor}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.app{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:6px 20px 20px;min-width:0}
.grp{padding-top:14px;display:grid;gap:10px}
.grp+.grp{border-top:2px dashed var(--line);margin-top:16px}
.grp h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--green-ink);margin:0;font-weight:800}
label{display:grid;gap:4px;font-size:.85rem;font-weight:800;color:var(--muted)}
.hint{font-weight:600;font-size:.8rem;color:var(--muted)}
.hint:empty{display:none}
.lbl{font-size:.85rem;font-weight:800;color:var(--muted);margin-bottom:6px}
input,select,textarea{font-size:1rem;font-weight:700;color:var(--ink);background:var(--field);border:2px solid var(--line);border-radius:10px;padding:9px 10px;width:100%;min-width:0;min-height:44px}
input:focus,select:focus{border-color:var(--sky)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;align-items:end}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font-size:.9rem;font-weight:800;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 13px;min-height:44px;min-width:44px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
.check{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:.95rem}
.check input{width:22px;height:22px;min-height:0;flex:none;accent-color:var(--green)}

.stations{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.stations-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 44px;gap:6px;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.station{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 44px;gap:6px;align-items:center}
.station .grp-in{position:relative}
.station .grp-in input{padding-left:28px}
.station .grp-in i{position:absolute;left:10px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--dot)}
.station .rm{height:44px;border:2px solid var(--line);background:var(--surface);color:var(--muted);border-radius:10px;font-size:1.2rem;font-weight:800;cursor:pointer}
.station .rm:disabled{opacity:.35;cursor:default}
.fit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}

.btn{display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:800;border:2px solid var(--navy);background:var(--navy);color:var(--on-navy);
  border-radius:12px;padding:9px 16px;min-height:44px;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.small{font-size:.88rem;padding:6px 12px;justify-self:start}

/* ---------- timer side ---------- */
.side{min-width:0;display:grid;gap:14px}

/* The stage: one color per thing the class should be doing. */
.stage{--s-bg:var(--work-bg);--s-ink:var(--work-ink);--s-soft:var(--work-soft);
  background:var(--s-bg);color:var(--s-ink);border-radius:22px;box-shadow:var(--shadow);padding:clamp(16px,3vw,28px);display:grid;gap:clamp(10px,2vw,18px);min-width:0}
.stage[data-phase="transition"]{--s-bg:var(--move-bg);--s-ink:var(--move-ink);--s-soft:var(--move-soft)}
.stage[data-phase="cleanup"],.stage[data-phase="done"]{--s-bg:var(--tidy-bg);--s-ink:var(--tidy-ink);--s-soft:var(--tidy-soft)}
.stage-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px}
.phase{font-family:var(--f-display);font-size:clamp(1.5rem,4.6vw,2.6rem);line-height:1.05;letter-spacing:.01em;text-wrap:balance;margin:0;font-weight:400;padding-top:.1em}
.roundtag{font-weight:800;font-size:clamp(.95rem,2vw,1.2rem);letter-spacing:.06em;text-transform:uppercase;opacity:.92}
.clock{font-family:var(--f-display);font-size:clamp(4.6rem,23vw,11rem);line-height:.86;text-align:center;padding-top:.14em;white-space:nowrap}
.clock .d{display:inline-block;width:.6em;text-align:center}
.clock .c{display:inline-block;width:.3em;text-align:center}
.stage[data-state="paused"] .clock{opacity:.55}
.sub{text-align:center;font-weight:800;font-size:clamp(1rem,2.4vw,1.35rem);min-height:1.5em}

/* The whole run as one track: wide pieces are rounds, thin ones are moving time. */
.track{display:flex;gap:4px;height:18px}
.track .seg-p{flex-grow:var(--w);flex-basis:0;min-width:5px;background:var(--s-soft);border-radius:6px;overflow:hidden;position:relative}
.track .seg-p i{position:absolute;inset:0;width:var(--f,0%);background:var(--s-ink);border-radius:inherit}
.track .seg-p.now{outline:2px solid var(--s-ink);outline-offset:1px}
.track-key{display:flex;justify-content:space-between;gap:12px;font-weight:800;font-size:.85rem;opacity:.92;flex-wrap:wrap}

.board{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px}
.place{background:var(--s-soft);border-radius:14px;padding:10px 12px;display:grid;gap:6px;min-width:0;align-content:start}
.place .st{font-weight:800;font-size:clamp(.95rem,1.7vw,1.15rem);line-height:1.2;overflow-wrap:anywhere}
.chip{display:inline-flex;align-items:center;gap:8px;justify-self:start;max-width:100%;background:var(--chip-bg);color:var(--chip-ink);border-radius:999px;padding:4px 12px 4px 8px;font-weight:800;font-size:clamp(1rem,2vw,1.3rem);line-height:1.2}
.chip i{width:16px;height:16px;border-radius:50%;background:var(--dot);flex:none;border:2px solid var(--chip-ink)}
.chip span{min-width:0;overflow-wrap:anywhere}
.board-cap{font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.92}

.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.controls .btn{border-color:var(--s-ink);background:transparent;color:var(--s-ink)}
.controls .btn.main{background:var(--s-ink);color:var(--s-bg);font-size:1.15rem;padding:10px 26px;min-height:52px}
.controls .spacer{flex:1 1 0}
.controls .btn.armed{background:var(--s-ink);color:var(--s-bg)}

.tools{display:grid;gap:8px}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.toast:empty{display:none}
.toast{background:var(--ok-bg);color:var(--ok-ink);border-radius:10px;padding:8px 12px;font-weight:700;font-size:.9rem}
.copybox{min-height:120px;font-size:.85rem;font-weight:600}

.chart{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;display:grid;gap:10px;min-width:0}
.chart h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--green-ink);margin:0;font-weight:800}
.chart-scroll{overflow-x:auto}
.chart table{border-collapse:collapse;width:100%;font-size:.92rem}
.chart th,.chart td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.chart thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.chart tbody th{white-space:nowrap;color:var(--muted);font-weight:800}
.chart td{font-weight:700;white-space:nowrap}
.chart td i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--dot);margin-right:6px}
.chart tr.now td,.chart tr.now th{background:var(--tint)}

.how{background:var(--surface);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow)}
.how summary{cursor:pointer;font-weight:800;color:var(--navy)}
.how ul{margin:8px 0 0;padding-left:1.2em;display:grid;gap:4px;max-width:65ch}

footer.site{margin-top:28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.85rem;font-weight:700}
footer.site a{color:var(--navy)}

/* ---------- while a run is going: the stage takes over ---------- */
body.running .hero,body.running .example,body.running #setup,body.running .tools,body.running .how{display:none}
body.running .app{grid-template-columns:minmax(0,1fr)}
body.running .clock{font-size:clamp(5rem,27vw,17rem)}
.stage:fullscreen{border-radius:0;align-content:center;overflow:auto;padding:clamp(16px,4vw,56px)}
.stage:-webkit-full-screen{border-radius:0;align-content:center;overflow:auto;padding:clamp(16px,4vw,56px)}
.stage:fullscreen .clock{font-size:clamp(5rem,min(30vw,44vh),24rem)}

@media (max-width:420px){.controls .btn{padding-inline:12px}.controls .spacer{display:none}}
@media (prefers-reduced-motion:no-preference){.track .seg-p i{transition:width .25s linear}}

/* ---------- printed rotation chart (US Letter, sideways). Fixed paper colors: this is what prints. ---------- */
.sheet{display:none}
@page{size:letter landscape;margin:.5in}
@media print{
  body{background:#fff;color:#16324A}
  .wrap{display:none!important}
  .sheet{display:block;font-family:var(--f-body);color:#16324A;font-size:12pt;line-height:1.35}
  .sh-head{border-bottom:2px solid #1D5B8D;padding-bottom:8px}
  .sh-eyebrow{font-size:8.5pt;text-transform:uppercase;letter-spacing:.09em;font-weight:800;color:#4F6A82}
  .sh-title{font-family:var(--f-display);font-weight:400;font-size:24pt;line-height:1;color:#1D5B8D;margin:2px 0 4px}
  .sh-meta{font-weight:700;color:#4F6A82;font-size:10.5pt}
  .sh-table{width:100%;border-collapse:collapse;margin-top:12px;table-layout:fixed}
  .sh-table th{font-size:10pt;text-align:left;color:#1D5B8D;padding:8px;border:1.5px solid #C5D6E5;background:#EEF5FB;overflow-wrap:anywhere}
  .sh-table td{padding:10px 8px;border:1.5px solid #C5D6E5;font-weight:800;font-size:13pt;overflow-wrap:anywhere}
  .sh-table tbody th{width:1.1in;white-space:nowrap}
  .sh-table tr{break-inside:avoid}
  .sh-foot{margin-top:12px;display:flex;align-items:center;gap:8px;font-weight:800;color:#1D5B8D;font-size:9pt}
  .sh-foot img{width:22pt;height:22pt;border-radius:50%}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}