/* Teacher Daily Tools — projector-first design system.

   This is not a website that happens to work on a projector. Every decision
   below starts from the display: a classroom projector is commonly 1024x768 or
   1280x800, its contrast is destroyed by daylight, and the furthest child is
   eight to ten metres away. Normal web typography is unreadable in that room.

   Measured against the category (Classroomscreen, Wheel of Names, Flippity,
   Toy Theater, Online-Stopwatch), three conventions are real and worth keeping:
   a rounded geometric sans, a near-white ground, and a saturated multi-hue
   accent set. That candy palette is usually dismissed as "for children" — it
   survives a dim projector, which is why it persists. Tints and mid-greys do
   not survive, so there are almost none here.

   THE DIFFERENTIATOR IS UNCAPPED TYPE. Competitors size display elements with
   clamp(), which caps the top end — one tops out at 48px, which is fine at a
   desk and illegible from row six. Display type here scales with the viewport
   and keeps scaling. That is what --display and --display-lg are for, and they
   must never be given a max().

   Contrast targets 7:1 rather than the WCAG 4.5:1 floor, because ambient light
   plus projector black-level pushes real-world contrast far below the value a
   contrast checker reports.
*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap');

:root{
  color-scheme: light dark;

  --paper:#FBFBF8;
  --card:#FFFFFF;
  --edge:#1A1D23;          /* borders are near-black, not grey — grey vanishes */
  --ink:#12151A;           /* 16.8:1 on paper */
  --ink-2:#3D434E;         /* 8.9:1  — the lightest text allowed anywhere */

  /* Tool accents. Saturated and dark enough to hold white at 4.5:1+, because a
     pastel disappears the moment the blinds are open. */
  --pick:#C2185B;
  --group:#00695C;
  --seat:#4527A0;
  --grade:#0277BD;
  --rubric:#AD1457;
  --timer:#BF360C;        /* was #D84315 — 4.44:1 as link text, just under the floor */
  --count:#1B5E20;
  --dice:#4E342E;
  --present:#00838F;
  --sheet:#37474F;
  --accent:var(--pick);
  --on-accent:#FFFFFF;

  /* Uncapped on purpose. 1vw at 1024px is 10.24px; the display sizes below
     therefore land around 10-15% of viewport height, which is the arc-minute
     figure signage guidance gives for a ten-metre room. */
  --display:11vw;
  --display-lg:15vw;
  --big:4.4vw;
  --mid:2.2vw;

  --gap:clamp(12px,1.6vw,28px);
  --round:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0D0F13; --card:#161A20; --edge:#E8EAEE;
    --ink:#F4F6F8; --ink-2:#B6BDC8;
    --pick:#FF80AB; --group:#5DDBC8; --seat:#B39DFF; --grade:#6EC6FF;
    --rubric:#FF8FB1; --timer:#FFAB7A; --count:#8BE68B; --dice:#D7BBAF;
    --present:#6FD9E3; --sheet:#B0BEC5;
    --on-accent:#0D0F13;   /* dark ink on the light dark-mode accents */
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:600 18px/1.45 Quicksand,"Trebuchet MS",system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0;line-height:1.1;font-weight:700}
p{margin:0}
button{font-family:inherit}

/* ---------- the tool strip: switch tools mid-lesson in one click ---------- */
.strip{
  display:flex;gap:6px;overflow-x:auto;padding:8px 10px;
  background:var(--card);border-bottom:3px solid var(--edge);
  scrollbar-width:thin;
}
.strip a{
  flex:none;text-decoration:none;color:var(--ink);
  font-size:15px;font-weight:700;padding:9px 14px;border-radius:10px;
  border:2px solid transparent;white-space:nowrap;
}
.strip a:hover{background:var(--paper);border-color:var(--edge)}
.strip a[aria-current="page"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.strip .home{font-weight:700;letter-spacing:-.02em;padding-right:16px;
  border-right:2px solid var(--edge);border-radius:0;margin-right:6px}

/* ---------- the stage: the tool IS the page ---------- */
.stage{
  min-height:calc(100dvh - 62px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--gap);gap:var(--gap);text-align:center;position:relative;
}
.stage.wide{justify-content:flex-start}

/* the one enormous thing a room reads */
.display{
  font-size:var(--display);line-height:.98;font-weight:700;
  letter-spacing:-.02em;word-break:break-word;max-width:100%;
}
.display.lg{font-size:var(--display-lg)}
.display.tone{color:var(--accent)}
.sub{font-size:var(--mid);color:var(--ink-2);font-weight:600}

/* controls are teacher-facing, so they may be small — but only these */
.controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  font-size:16px}
.btn{
  font-size:17px;font-weight:700;padding:13px 22px;border-radius:12px;
  border:3px solid var(--edge);background:var(--card);color:var(--ink);cursor:pointer;
  min-height:52px;                    /* fat targets — this gets used in a hurry */
}
.btn:hover{background:var(--paper)}
.btn.go{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-size:20px;padding:15px 32px}
.btn.go:hover{filter:brightness(1.08)}
.btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.sm{font-size:15px;padding:9px 14px;min-height:0;border-width:2px}

input[type=text],input[type=number],select,textarea{
  font:600 17px/1.3 Quicksand,system-ui,sans-serif;
  padding:11px 13px;border:3px solid var(--edge);border-radius:10px;
  background:var(--card);color:var(--ink);
}
textarea{min-height:180px;width:100%;resize:vertical;line-height:1.6}
label{font-size:15px;font-weight:700;color:var(--ink-2)}

/* ---------- presentation mode: strip everything but the tool ---------- */
body.present .strip,
body.present .belowfold,
body.present .hide-in-present{display:none!important}
body.present .stage{min-height:100dvh}
.presentbtn{position:fixed;right:12px;bottom:12px;z-index:40}
body.present .presentbtn{opacity:.25}
body.present .presentbtn:hover{opacity:1}

/* ---------- the roster, shared by every tool that needs names ---------- */
.roster{display:flex;flex-direction:column;gap:10px;width:min(560px,100%);text-align:left}
.roster .count{font-size:15px;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.chip{
  font-size:15px;font-weight:700;padding:7px 12px;border-radius:20px;
  border:2px solid var(--edge);background:var(--card);color:var(--ink);cursor:pointer;
}
.chip[data-out="1"]{opacity:.35;text-decoration:line-through}
.chip[data-done="1"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* ---------- prose, deliberately below the fold ---------- */
.belowfold{border-top:3px solid var(--edge);background:var(--card);padding:40px 0 70px}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}
.belowfold h2{font-size:26px;margin:30px 0 12px}
.belowfold h2:first-child{margin-top:0}
.belowfold p{font-size:17px;line-height:1.7;color:var(--ink-2);margin-bottom:14px;font-weight:500}
.belowfold ul{margin:0 0 14px;padding-left:1.2em;color:var(--ink-2);font-weight:500}
.belowfold li{margin-bottom:8px;line-height:1.65}
.belowfold a{color:var(--accent)}
.note{border-left:5px solid var(--accent);padding:12px 16px;background:var(--paper);
  border-radius:0 10px 10px 0;margin-bottom:16px}

/* ---------- home ---------- */
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;
  padding:var(--gap) 0}
.tool{
  display:block;text-decoration:none;color:var(--ink);background:var(--card);
  border:3px solid var(--edge);border-radius:var(--round);padding:18px 20px;
}
.tool:hover{transform:translateY(-3px)}
.tool b{display:block;font-size:21px;margin-bottom:5px}
.tool span{display:block;font-size:15px;color:var(--ink-2);line-height:1.5;font-weight:500}
.tool i{display:block;height:8px;border-radius:4px;background:var(--tc,var(--accent));
  margin:-4px 0 12px;width:52px;font-style:normal}

footer{border-top:3px solid var(--edge);padding:22px 0 60px;background:var(--paper)}
footer p{font-size:15px;color:var(--ink-2);font-weight:500}
footer a{color:var(--ink)}

:focus-visible{outline:4px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.strip,.controls,.presentbtn{display:none}}