/* ═══════════════════════════════════════════════════════════════
   G9 TABLETOP WORKSHEETS, SHARED
   Used by the Phase 2 worksheets: aiv-design-brief, cii-technical-skill,
   cii-cold-read, ciii-submission, diii-improvements and
   d-observation-sheet. Each side is 1123 x 794, A4 landscape at 96dpi,
   matching bi-specifications. A page sets --accent to its criterion
   colour on <body>. Worksheets hold no teaching text: that lives on the
   unit page and the task sheet.
   ═══════════════════════════════════════════════════════════════ */
@font-face { font-family:'Lexend'; src:url('../../../Fonts/Lexend%20Family/webfonts/Lexend-Regular.woff2') format('woff2');  font-weight:400; font-display:swap; }
@font-face { font-family:'Lexend'; src:url('../../../Fonts/Lexend%20Family/webfonts/Lexend-Medium.woff2') format('woff2');   font-weight:500; font-display:swap; }
@font-face { font-family:'Lexend'; src:url('../../../Fonts/Lexend%20Family/webfonts/Lexend-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Lexend'; src:url('../../../Fonts/Lexend%20Family/webfonts/Lexend-Bold.woff2') format('woff2');     font-weight:700; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../../../Fonts/Jetbrains/woff2/JetBrainsMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../../../Fonts/Jetbrains/woff2/JetBrainsMono-Bold.woff2') format('woff2');    font-weight:700; font-display:swap; }

:root {
  --ink:#14171c; --mid:#5b6472; --line:#c8cdd6; --hair:#e4e7ec;
  --accent:#7a3f5e; --page:#fff; --desk:#eceef2; --warn:#b3261e; --focus:#f6f7fa;
  --mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --body:'Lexend','Helvetica Neue',Helvetica,Arial,sans-serif;
}
body.crit-a { --accent:#2f4f7a; --focus:#f1f4f9; }
body.crit-c { --accent:#3f6b4a; --focus:#f1f6f2; }
body.crit-d { --accent:#8a5a1f; --focus:#faf5ee; }

* { box-sizing:border-box; }
body { margin:0; background:var(--desk); color:var(--ink); font-family:var(--body);
  display:flex; flex-direction:column; align-items:center; padding:20px 12px 60px; }

.bar { width:1123px; max-width:100%; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:12px; }
.bar h1 { font-size:1rem; font-weight:600; margin:0 auto 0 0; }
.bar h1 span { color:var(--mid); font-weight:400; }
.btn { font-family:var(--mono); font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.5rem 0.85rem; border-radius:7px; cursor:pointer; background:var(--page); color:var(--ink); border:1px solid var(--line); }
.btn:hover { border-color:var(--accent); color:var(--accent); }
.btn-go { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-go:hover { color:#fff; filter:brightness(1.12); }
/* Link back to the strand on the unit page, above the toolbar. */
.unit-back { width:1123px; max-width:100%; margin:0 0 8px; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.06em; }
.unit-back a { color:var(--mid); text-decoration:none; }
.unit-back a:hover, .unit-back a:focus-visible { color:var(--accent); }
@media print { .unit-back { display:none !important; } }
.hint { width:1123px; max-width:100%; margin:0 0 14px; font-size:0.78rem; color:var(--mid); }
.savestate { font-family:var(--mono); font-size:0.68rem; letter-spacing:0.04em; color:var(--mid); }
.check { width:1123px; max-width:100%; margin:-6px 0 14px; font-size:0.78rem; color:var(--warn); min-height:1em; }

/* ── THE SHEET ───────────────────────────────────────────────── */
.sheet { width:1123px; height:794px; background:var(--page); padding:30px 36px 24px;
  box-shadow:0 2px 6px rgba(0,0,0,0.10), 0 14px 40px rgba(0,0,0,0.13);
  display:flex; flex-direction:column; }
.sheet + .sheet { margin-top:24px; }

.sheet-head { display:flex; align-items:baseline; gap:22px;
  border-bottom:2px solid var(--ink); padding-bottom:7px; }
.sheet-title { font-size:19px; font-weight:700; margin:0; white-space:nowrap; }
.sheet-title .sheet-code { color:var(--accent); }

.ident { display:flex; align-items:baseline; gap:16px; flex:1; min-width:0; }
.f { display:flex; align-items:baseline; gap:6px; min-width:0; flex:1; }
.f.s { flex:0.5; }
.f.l { flex:1.35; }
.f > label { font-family:var(--mono); font-size:8.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--mid); white-space:nowrap; }

input[type=text] { font-family:var(--body); font-size:12px; color:var(--ink); border:none;
  border-bottom:1px solid var(--line); background:transparent; padding:1px 2px 2px; width:100%; min-width:0; }
input[type=text]:focus { outline:none; border-bottom-color:var(--accent); background:var(--focus); }
input[type=text].over, textarea.over { border-bottom-color:var(--warn); }
textarea.over { box-shadow:inset 0 -2px 0 var(--warn); }

select { font-family:var(--body); font-size:10.5px; color:var(--ink); width:100%; min-width:0;
  border:none; border-bottom:1px solid var(--line); background:transparent;
  padding:1px 16px 2px 2px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mid) 50%),linear-gradient(135deg,var(--mid) 50%,transparent 50%);
  background-position:calc(100% - 9px) 55%, calc(100% - 5px) 55%;
  background-size:4px 4px, 4px 4px; background-repeat:no-repeat; }
select:focus { outline:none; border-bottom-color:var(--accent); }
select.empty { color:var(--mid); }

textarea { flex:1; min-height:0; resize:none; width:100%;
  font-family:var(--body); font-size:10.5px; line-height:16px; color:var(--ink);
  border:none; background:transparent; padding:3px 2px 0;
  background-image:repeating-linear-gradient(transparent, transparent 15px, var(--hair) 15px, var(--hair) 16px);
  background-position:0 3px; }
textarea:focus { outline:none; background-color:var(--focus); }

/* A tick box drawn by hand, so the PNG painter and the printer see the
   same square the student does. */
input[type=checkbox] { appearance:none; -webkit-appearance:none; margin:0; flex:none;
  width:12px; height:12px; border:1.2px solid var(--mid); border-radius:2px; background:#fff;
  cursor:pointer; position:relative; }
input[type=checkbox]:checked { background:var(--accent); border-color:var(--accent); }
input[type=checkbox]:checked::after { content:''; position:absolute; left:3.2px; top:0.6px;
  width:3px; height:6.5px; border:solid #fff; border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }
input[type=checkbox]:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* ── building blocks ─────────────────────────────────────────── */
.body { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.fld { display:flex; flex-direction:column; gap:1px; min-width:0; min-height:0; }
.fld > span, .lab { font-family:var(--mono); font-size:7px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--mid); }
.fld.grow { flex:1; }
.blk { display:flex; flex-direction:column; gap:6px; min-height:0; min-width:0;
  border:1px solid var(--hair); border-left:3px solid var(--accent); border-radius:5px; padding:7px 10px 8px; }
.blk-h { font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--accent); margin:0; }
.blk-n { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:4px; background:var(--accent); color:#fff; font-size:9px; margin-right:6px; }
.row { display:grid; gap:10px; min-height:0; }
.ck { display:flex; align-items:center; gap:6px; font-size:10.5px; line-height:1.3; cursor:pointer; }
.cklist { display:flex; flex-direction:column; gap:5px; }

/* Tables of fields. Each cell holds one input or textarea; the first
   column carries the row's label. */
.tbl { width:100%; border-collapse:collapse; table-layout:fixed; }
.tbl th { font-family:var(--mono); font-size:7.5px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--mid); text-align:left; padding:0 6px 4px;
  border-bottom:1.5px solid var(--ink); vertical-align:bottom; }
.tbl td { border-bottom:1px solid var(--hair); padding:3px 6px; vertical-align:top; }
.tbl td.rowh { font-size:11px; font-weight:600; line-height:1.3; }
.tbl td.rowh small { display:block; font-weight:400; font-size:8.5px; color:var(--mid); margin-top:2px; }
.tbl td.c { text-align:center; vertical-align:middle; }
.tbl textarea { display:block; }
/* Textarea heights in writing lines, 16px each plus the top pad. */
textarea.r1 { height:19px; flex:none; } textarea.r2 { height:35px; flex:none; }
textarea.r3 { height:51px; flex:none; } textarea.r4 { height:67px; flex:none; }
textarea.r5 { height:83px; flex:none; } textarea.r6 { height:99px; flex:none; }
textarea.r7 { height:115px; flex:none; } textarea.r8 { height:131px; flex:none; }
.tbl td.rowh .opt { font-family:var(--mono); font-size:6.5px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--accent); margin-left:4px; }

.sheet-foot { margin-top:9px; padding-top:7px; border-top:1px solid var(--hair);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:7.5px; letter-spacing:0.08em; color:var(--mid); }

/* A window narrower than the sheet scales it down. --k is set by
   g9-sheet.js, because CSS cannot divide a length into a plain number. */
#sheets { width:100%; display:flex; flex-direction:column; align-items:center; }
.sheet { flex:none; transform:scale(var(--k, 1)); transform-origin:top center;
  margin-bottom:calc(794px * (var(--k, 1) - 1));
  margin-inline:calc(1123px * (var(--k, 1) - 1) / 2); }
@media (max-width:1180px) { body { padding:14px 8px 40px; } }
body.exporting .sheet { transform:none; margin-bottom:0; }

@page { size:A4 landscape; margin:0; }
@media print {
  body { background:#fff; padding:0; display:block; }
  #sheets { display:block; }
  .bar, .hint, .check { display:none !important; }
  .sheet { width:297mm; height:210mm; padding:9mm 11mm; box-shadow:none; transform:none; margin:0;
    break-after:page; }
  .sheet:last-child { break-after:auto; }
  .sheet + .sheet { margin-top:0; }
  input[type=text], select { border-color:#b9bfc9; }
  select { background-image:none; }
  textarea.over, input[type=text].over { box-shadow:none; border-bottom-color:#b9bfc9; }
  .sheet-title .sheet-code, .blk-h, .blk-n, .blk, input[type=checkbox] {
    -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}