/* Practice Book — a squared-paper exercise book on a school desk.
   One sheet, one screenful. Nothing scrolls; the question grid reflows to fit. */

:root{
  --paper:      #fcfbf6;
  --paper-edge: #efece0;
  --grid:       #cfdfe8;
  --rule-red:   #c9564a;
  --ink:        #1d3c60;
  --red:        #c4514a;
  --desk:       #20303a;
  --desk-hi:    #2c414d;
  --desk-line:  #3d5666;
  --chalk:      #dfe7e6;
  --brass:      #c9a24a;

  --box-fill:   rgba(255,255,255,.35);
  --grid-alpha: .72;

  /* the three pens, read back by the ink layer */
  --pen-ink:      #1d3c60;
  --pen-graphite: #3f4249;
  --pen-red:      #c4514a;

  --font-display: "Iowan Old Style", "Charter", Georgia, serif;
  --font-problem: "American Typewriter", "Courier New", ui-monospace, monospace;
  --font-ui: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", sans-serif;
  --font-hand: "Bradley Hand", "Noteworthy", "Marker Felt", "Segoe Script", cursive;

  --sq: 26px;                    /* one square of the ruled grid */
  --margin-w: calc(var(--sq) * 2.4);

  --cols: 2;                     /* set from JS to fit the screen */
  --rows: 13;
  --qsize: 20px;
}

/* Night: the same exercise book under a lamp — deep slate paper, chalk pens. */
:root[data-theme="dark"]{
  --paper:      #1a232c;
  --paper-edge: #0f161d;
  --grid:       #33475a;
  --rule-red:   #b0605a;
  --ink:        #dce6ee;
  --red:        #ef8f86;
  --desk:       #0d1216;
  --desk-hi:    #161f27;
  --desk-line:  #33454f;
  --chalk:      #dfe7e6;

  --box-fill:   rgba(255,255,255,.03);
  --grid-alpha: .5;

  --pen-ink:      #eaf1f7;
  --pen-graphite: #93a3b1;
  --pen-red:      #ef8f86;
}

*{ box-sizing:border-box; }

html{ height:100%; }

body{
  margin:0; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--desk-hi) 0%, var(--desk) 62%),
    var(--desk);
  color:var(--chalk);
  font-family:var(--font-ui);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

/* ── Desk bars ──────────────────────────────────────────────── */

.desk-bar, .tool-bar{
  flex:0 0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  padding:6px 12px;
  border-bottom:1px solid var(--desk-line);
}
.desk-bar{ padding-top:calc(6px + env(safe-area-inset-top)); background:rgba(24,37,45,.96); }
.tool-bar{ background:rgba(18,29,36,.96); }

.bar-group{ display:flex; align-items:center; gap:6px; }
.bar-group[hidden]{ display:none; }
@media (min-width: 1280px){ .bar-right{ margin-left:auto; } }

.bar-title{ gap:8px; padding-right:2px; }
.bar-mark{
  display:grid; place-items:center;
  width:24px; height:24px; border-radius:5px;
  background:var(--brass); color:#22313b;
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.04em;
}
.bar-name{ font-family:var(--font-display); font-size:14px; letter-spacing:.02em; }
.bar-label{ font-size:10px; text-transform:uppercase; letter-spacing:.13em; opacity:.6; }

.btn{
  font-family:var(--font-ui); font-size:12.5px; color:var(--chalk);
  background:rgba(255,255,255,.05);
  border:1px solid var(--desk-line);
  border-radius:7px; padding:5px 10px;
  cursor:pointer; touch-action:manipulation;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.btn:hover{ background:rgba(255,255,255,.11); }
.btn:active{ transform:translateY(1px); }
.btn.is-on{ background:var(--brass); border-color:var(--brass); color:#22313b; font-weight:600; }
.btn:focus-visible, .swatch:focus-visible, .chip:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}

.segmented{ gap:4px; }
.daylabel{
  font-family:var(--font-problem); font-size:13px;
  min-width:60px; text-align:center;
}

.swatches{ display:flex; gap:5px; margin:0 2px; }
.swatch[data-color="ink"]{ --s:var(--pen-ink); }
.swatch[data-color="graphite"]{ --s:var(--pen-graphite); }
.swatch[data-color="red"]{ --s:var(--pen-red); }
.swatch{
  width:21px; height:21px; border-radius:50%;
  background:var(--s); border:2px solid transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;
  cursor:pointer; padding:0;
}
.swatch.is-on{ border-color:var(--brass); }

.chips{ display:flex; flex-wrap:wrap; gap:4px; }
.chip{
  min-width:28px; height:24px; padding:0 5px;
  font-family:var(--font-problem); font-size:12.5px; color:var(--chalk);
  background:rgba(255,255,255,.05);
  border:1px solid var(--desk-line); border-radius:6px;
  cursor:pointer; touch-action:manipulation;
}
.chip:hover{ background:rgba(255,255,255,.12); }
.chip.is-on{ background:var(--brass); border-color:var(--brass); color:#22313b; font-weight:700; }

.stopwatch{
  font-family:var(--font-problem); font-size:15px; letter-spacing:.04em;
  padding:4px 11px; border-radius:7px;
  border:1px solid var(--desk-line); background:rgba(0,0,0,.22);
  cursor:pointer; min-width:72px; text-align:center;
}
.stopwatch.running{ color:var(--brass); border-color:rgba(201,162,74,.5); }

/* ── The sheet: fills whatever height is left ───────────────── */

.desk{
  flex:1 1 auto; min-height:0;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  display:flex; justify-content:center;
}

.sheet{
  position:relative;
  width:100%; max-width:1500px; height:100%;
  display:flex; flex-direction:column;
  background:var(--paper);
  border-radius:2px;
  box-shadow:0 1px 0 var(--paper-edge), 0 14px 34px rgba(0,0,0,.42);
  padding:14px 18px 10px var(--margin-w);
  overflow:hidden;
}

.sheet-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:var(--sq) var(--sq);
  opacity:var(--grid-alpha);
}
.sheet-margin{
  position:absolute; top:0; bottom:0; left:var(--margin-w); width:3px;
  pointer-events:none;
  background:linear-gradient(to right, var(--rule-red) 1px, transparent 1px, transparent 2px, var(--rule-red) 3px);
  opacity:.55;
}

.sheet-head{
  position:relative; z-index:2; flex:0 0 auto;
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding-bottom:8px; margin-bottom:6px;
  border-bottom:2px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.head-title{
  font-family:var(--font-display); font-weight:600;
  font-size:23px; line-height:1.05; margin:0 0 3px; color:var(--ink);
  letter-spacing:-.01em;
}
.head-sub{
  margin:0; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 60%, transparent);
}
.head-right{ display:flex; align-items:center; gap:14px; }
.head-field{ text-align:right; font-size:11px; color:color-mix(in srgb, var(--ink) 60%, transparent); }
.head-field span{ display:block; letter-spacing:.14em; text-transform:uppercase; font-size:9px; }
.head-field b{ font-family:var(--font-problem); font-size:13px; color:var(--ink); font-weight:400; }

.stamp{
  display:grid; place-items:center; gap:1px;
  width:66px; padding:4px 3px;
  border:2px solid var(--red); border-radius:6px;
  transform:rotate(3deg); color:var(--red);
  opacity:.9;
}
.stamp[data-empty="true"]{ opacity:.22; }
.stamp i{ font-family:var(--font-hand); font-style:normal; font-size:19px; line-height:1; }
.stamp small{ font-size:7.5px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }

/* ── Questions: a grid sized to the space it is given ───────── */

.questions{
  position:relative; z-index:2;
  flex:1 1 auto; min-height:0;
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-auto-flow:column;
  grid-template-columns:repeat(var(--cols), 1fr);
  grid-template-rows:repeat(var(--rows), 1fr);
  gap:0 22px;
}

.q{
  display:grid;
  grid-template-columns:minmax(4px, 0.3fr) auto minmax(90px, 3fr) 26px;
  align-items:stretch; gap:0 9px;
  min-height:0;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
.q-num{
  align-self:center; text-align:right; padding-right:6px;
  font-family:var(--font-problem); font-size:calc(var(--qsize) * .58);
  color:var(--rule-red); opacity:.85;
}
.q-prompt{
  align-self:center;
  font-family:var(--font-problem); font-size:var(--qsize); color:var(--ink);
  white-space:nowrap; letter-spacing:.01em;
}
.q-box{
  position:relative;
  align-self:stretch; margin:5px 0;
  border:1.5px dashed color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius:3px;
  background:var(--box-fill);
  cursor:pointer;
}
.q-box:hover{ border-color:color-mix(in srgb, var(--ink) 45%, transparent); }
/* Chalk-bright borders shout on dark paper; quieten them. */
:root[data-theme="dark"] .q-box{ border-color:color-mix(in srgb, var(--ink) 17%, transparent); }
:root[data-theme="dark"] .q{ border-bottom-color:color-mix(in srgb, var(--ink) 6%, transparent); }

/* the teacher's red pen: answer + marks live here */
.q-ans{
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  font-family:var(--font-hand); font-size:calc(var(--qsize) * 1.15); color:var(--red);
  transform:rotate(-2.5deg);
  pointer-events:none;
}
.q.revealed .q-ans{ display:flex; }
.q.revealed .q-box{ border-style:solid; border-color:color-mix(in srgb, var(--red) 40%, transparent); }

.q-marks{
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  visibility:hidden;
}
.q.revealed .q-marks{ visibility:visible; }
.mark{
  width:26px; height:19px; padding:0;
  border:1px solid color-mix(in srgb, var(--red) 35%, transparent); border-radius:4px;
  background:transparent; color:var(--red);
  font-size:11px; line-height:1; cursor:pointer;
  touch-action:manipulation;
}
.mark.is-on{ background:var(--red); color:var(--paper); border-color:var(--red); }

/* ── Ink layer ──────────────────────────────────────────────── */

.ink{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%;
  touch-action:none;
  cursor:crosshair;
}

/* ── Answer key, laid over the sheet ────────────────────────── */

.keysheet{
  position:fixed; z-index:60; inset:auto 0 0 0;
  max-height:70vh; overflow:auto;
  background:var(--paper); color:var(--ink);
  border-top:3px solid var(--brass);
  padding:16px 22px 22px;
  box-shadow:0 -14px 40px rgba(0,0,0,.45);
}
.keysheet[hidden]{ display:none; }
.key-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin:0 0 12px; padding-bottom:8px;
  border-bottom:2px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.keysheet h2{
  font-family:var(--font-display); font-weight:600; font-size:19px; margin:0;
}
.key-rows{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:4px 20px;
  font-family:var(--font-problem); font-size:13px;
}
.key-rows b{ color:var(--red); font-weight:400; }

/* ── Narrow screens ─────────────────────────────────────────── */

@media (max-width: 1000px){
  .bar-title .bar-name{ display:none; }
}
@media (max-width: 560px){
  .sheet{ padding-left:calc(var(--sq) * 1.6); }
  .head-field{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}

/* ── Print: one sheet, one page ─────────────────────────────── */

@media print{
  /* Belt and braces — the theme is also swapped in JS on beforeprint. */
  :root[data-theme="dark"]{
    --paper:#fcfbf6; --grid:#cfdfe8; --ink:#1d3c60; --red:#c4514a;
    --rule-red:#c9564a; --box-fill:rgba(255,255,255,.35); --grid-alpha:.72;
  }
  body{ height:auto; overflow:visible; background:#fff; }
  .desk-bar, .tool-bar, .keysheet{ display:none !important; }
  .desk{ padding:0; }
  .sheet{ box-shadow:none; height:auto; max-width:none; }
  .questions{ min-height:9in; }
  .q-marks{ display:none !important; }
}