/* The Exam Hub — results, charts and the printed report (v30, lane R).
 * Colours come from the variables in edge.css :root, so the light theme (body.light) and the paper of the report
 * both work: where a colour has to change, it is set as a variable here and changed once for each. */

/* ===================================================================== Results */
.res-head { display: flex; align-items: flex-end; gap: 12px 18px; flex-wrap: wrap; }
.res-head .rh-t { flex: 1; min-width: 240px; }
.res-head h1 { margin: 0 0 6px; }
.res-print svg { flex: none; }
.stat-acc em { display: block; margin-top: 5px; font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 500; }
.acc-note { max-width: 980px; line-height: 1.5; }

/* a test in a list is a real link now: it keeps the look of the old rows */
a.li { color: inherit; text-decoration: none; }
a.li:focus-visible { outline-offset: 3px; }
.res-row .rr-t { min-width: 0; }
/* a personal best: said once, quietly, in the brand's own gold (no confetti) */
.pb { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .15px; line-height: 1.35; white-space: nowrap;
  color: var(--gold3); border: 1px solid rgba(201,163,39,.45); background: rgba(201,163,39,.09); }
.pb svg { flex: none; }

/* ===================================================================== charts
 * The lines are an SVG that stretches (strokes that do not scale); every word and dot is HTML placed by
 * percentage, so text is always drawn at the size written here: never under 11px, on any screen or on paper. */
.lc { margin: 12px 0 0; --c-mean: var(--gold2); --c-v: #B7A2FF; --c-q: #5DD9C6; --c-t: #7FE0B0; --c-grid: rgba(255,255,255,.08); --c-lab: var(--muted); --c-dot: var(--bg2); --c-band: rgba(67,181,129,.07); --c-tbg: var(--panel); }
.lc-plot { position: relative; height: var(--lch, 200px); margin: 12px 8px 0 40px; }
.lc-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.lc-plot path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.lc-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--c-grid); }
.lc-grid span { position: absolute; right: calc(100% + 8px); top: 0; transform: translateY(-50%); font-size: 11.5px; line-height: 1; color: var(--c-lab); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.lc-band { position: absolute; left: 0; right: 0; background: var(--c-band); }
.lc-target { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--c-t); z-index: 0; }
.lc-target span { position: absolute; right: 0; bottom: 3px; padding: 0 4px; border-radius: 4px; font-size: 11.5px; line-height: 1.25; font-weight: 700; color: var(--c-t); background: var(--c-tbg); white-space: nowrap; }
.lc-target.start span { right: auto; left: 0; }
.lc-dot { position: absolute; z-index: 2; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--c); }
.lc-dot.major { width: 12px; height: 12px; background: var(--c-dot); border: 2.5px solid var(--c); }
.lc-val { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 9px)); font-size: 13px; line-height: 1; font-weight: 800; color: var(--c); white-space: nowrap; font-variant-numeric: lining-nums; }
.lc-val.below { transform: translate(-50%, 11px); }
.lc-val.end { transform: translate(-88%, calc(-100% - 9px)); }
.lc-val.end.below { transform: translate(-88%, 11px); }
.lc-val.start { transform: translate(-12%, calc(-100% - 9px)); }
.lc-val.start.below { transform: translate(-12%, 11px); }
.lc-x { position: relative; height: 16px; margin: 9px 8px 0 40px; }
.lc-x span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11.5px; line-height: 1.3; color: var(--c-lab); white-space: nowrap; }
.lc-x span.first { transform: translateX(-12%); }
.lc-x span.last { transform: translateX(-88%); }
.lc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-size: 12px; color: var(--text); }
.lc-legend span { display: inline-flex; align-items: center; white-space: nowrap; }
.lc-legend i { display: inline-block; width: 20px; height: 0; margin-right: 7px; border-top: 2.5px solid var(--c); }
.lc-sum { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
/* the series: colour AND line style, so they read apart without colour too */
.s-mean { --c: var(--c-mean); }
.s-v { --c: var(--c-v); }
.s-q { --c: var(--c-q); }
.s-t { --c: var(--c-t); }
path.s-mean { stroke: var(--c-mean); stroke-width: 3px; }
path.s-v { stroke: var(--c-v); stroke-width: 2px; stroke-dasharray: 7 5; }
path.s-q { stroke: var(--c-q); stroke-width: 2px; stroke-dasharray: 2 5; }
.lc-legend i.s-v { border-top-style: dashed; }
.lc-legend i.s-q { border-top-style: dotted; border-top-width: 3px; }
.lc-legend i.s-t { border-top-style: dashed; border-top-width: 1.5px; }
@media (max-width: 560px) { .lc-plot, .lc-x { margin-left: 34px; margin-right: 4px; } }

/* predicted grades over time (GCSE): one small chart per subject, in the subject's own colour */
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 14px; margin-top: 8px; }
/* each chart's header and plot share rows with its neighbours (subgrid), so a subject name that wraps ("Combined
   Science") never pushes its own plot out of line with the others */
.gp { border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px 8px; min-width: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.gp-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.gp-h > div { display: grid; gap: 2px; min-width: 0; align-content: start; }
.gp-h b { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--text); }
.gp-h small { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.3; color: var(--c-t, #7FE0B0); font-weight: 600; white-space: nowrap; }
.gp-h small i { display: inline-block; width: 14px; height: 0; border-top: 1.5px dashed currentColor; }
/* a grade such as 7-6 is one figure: it never breaks across two lines */
.gp-h span { flex: none; white-space: nowrap; font-family: var(--serif); font-size: 21px; line-height: 1; color: var(--c); font-variant-numeric: lining-nums; }
.gp .lc { margin-top: 2px; }
.lc-slim .lc-plot, .lc-slim .lc-x { margin-left: 22px; margin-right: 6px; }
.lc-slim .lc-plot { margin-top: 16px; }
.gp .lc-val { font-size: 12px; }
.sg-maths { --c: #F7C15F; } .sg-lang { --c: #F7A3B3; } .sg-lit { --c: #B7A2FF; } .sg-sci { --c: #5DD9C6; }
.sg-bio { --c: #5DD9C6; } .sg-chem { --c: #7FC3F7; } .sg-phys { --c: #A6E07F; }
path.sg { stroke: var(--c); stroke-width: 2.4px; }

/* the same charts on paper (the report) and in the light theme: darker inks */
.rep .lc, body.light .lc { --c-mean: #8A6F13; --c-v: #5B3FC4; --c-q: #0B7D70; --c-t: #1E7A4F; --c-grid: rgba(22,33,58,.12); --c-lab: #4A5570; --c-dot: #FFFFFF; --c-band: rgba(30,122,79,.07); --c-tbg: var(--paper); }
.rep .sg-maths, body.light .sg-maths { --c: #A36A12; } .rep .sg-lang, body.light .sg-lang { --c: #B8325A; } .rep .sg-lit, body.light .sg-lit { --c: #5B3FC4; }
.rep .sg-sci, body.light .sg-sci, .rep .sg-bio, body.light .sg-bio { --c: #0B7D70; } .rep .sg-chem, body.light .sg-chem { --c: #1F6FB2; } .rep .sg-phys, body.light .sg-phys { --c: #3F7F1F; }
.rep .lc-legend, .rep .gp-h b { color: var(--ink); }
.rep .gp-h small, body.light .gp-h small { color: #1E7A4F; }
.rep .lc-sum { color: var(--ink2); }
.rep .gp { border-color: var(--paperLine); background: #FFFFFF; }

/* ===================================================================== tables on phones (contract C5)
 * A VERBATIM copy of the .table.stack rules lane H writes into edge.css (v30, "tables that stack on a phone"), so the
 * tables drawn here stack in this lane's copy of the app exactly as they will in the merged app. Being identical, the
 * two blocks cannot fight once both load (this file loads after edge.css); at the merge this block can simply go.
 * (--surface is lane H's variable; where it is not defined the row has no fill, which is how it looked before.) */
@media (max-width: 560px) {
  .table.stack, .table.stack tbody, .table.stack tr, .table.stack td { display: block; width: 100%; }
  .table.stack thead, .table.stack th, .table.stack tr:has(> th) { display: none; }
  .table.stack tr { margin: 0 0 10px; padding: 4px 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--surface); }
  .table.stack tr:last-child { margin-bottom: 0; }
  .table.stack td { position: relative; min-height: 34px; padding: 8px 0 8px 40%; text-align: left; border-bottom: 1px solid var(--line2); overflow-wrap: anywhere; }
  .table.stack td.num { text-align: left; }
  .table.stack tr > td:last-child { border-bottom: 0; }
  .table.stack td::before { content: attr(data-label); position: absolute; left: 0; top: 10px; width: calc(40% - 12px); font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  .table.stack td[data-label=""], .table.stack td:not([data-label]) { padding-left: 0; }
  .table.stack td[data-label=""]::before, .table.stack td:not([data-label])::before { content: none; }
  .table.stack td:empty { display: none; }
  .table.stack td.act-cell { text-align: right; }
}
body.light .table.stack tr { background: #FFFFFF; }
/* lane R: a long table stacks COMPACTLY — its first cell (the name) across the card, then the figures two to a row with
   each column's name above its value — so fourteen activities are a scroll, not a marathon */
@media (max-width: 560px) {
  .table.stack.compact tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding: 2px 12px 6px; }
  .table.stack.compact td { min-height: 0; padding: 7px 0 6px; border-bottom: 0; }
  /* the column name sits in the flow above its value, so a name that wraps ("Top-school standard") pushes the value
     down instead of lying over it */
  .table.stack.compact td::before { position: static; display: block; width: auto; margin: 0 0 3px; }
  .table.stack.compact td:first-child { grid-column: 1 / -1; padding: 9px 0 8px; border-bottom: 1px solid var(--line2); font-weight: 600; }
  .table.stack.compact td:first-child::before { content: none; }
  .rep .table.stack.compact td:first-child { border-bottom-color: var(--paperLine); }
  /* a test in a list: the whole row is the link, so on a phone the arrow alone says so */
  .res-row .rr-word { display: none; }
  /* a personal best may wrap rather than run out of a narrow card */
  .pb { white-space: normal; max-width: 100%; border-radius: 12px; }
}
.res-row .rr-go { white-space: nowrap; }

/* ===================================================================== tap targets on phones (R11) */
@media (max-width: 760px) {
  #view a.rt, #view .rtb, #view .res-print { min-height: 44px; display: inline-flex; align-items: center; }
  #view a.pill.hchip { min-height: 44px; }                 /* the GCSE home's chip links (exam board, target grade) */
  #view a.tap.rt { padding: 0 2px; }
  #view .rtb { padding-left: 4px; padding-right: 12px; }
}

/* ===================================================================== the progress report (report.js)
 * A sheet of paper on screen, and the same sheet on A4. */
.rep {
  --rgd: #7A6010; --rgl: #C9A327;
  background: var(--paper); color: var(--ink);
  border-radius: 18px; box-shadow: 0 18px 44px rgba(0,0,0,.42);
  padding: 34px 40px 28px; max-width: 940px; margin: 0 auto;
  font-size: 14px; line-height: 1.55; text-align: left;
}
.rep h1, .rep h2, .rep h3 { color: var(--ink); }
.rep-head { display: flex; gap: 18px; align-items: center; padding-bottom: 18px; border-bottom: 2px solid var(--rgl); }
.rep-logo { width: 76px; height: 76px; flex: none; object-fit: cover; border-radius: 50%; background: none; box-shadow: none; filter: none; }
.rep-ht { min-width: 0; }
.rep-kicker { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; color: var(--rgd); }
.rep-name { font-family: var(--serif); font-size: 32px; line-height: 1.12; margin: 4px 0 3px; color: var(--ink); }
.rep-meta { font-size: 13px; color: var(--ink2); }
.rep-sec { margin-top: 22px; }
.rep .eyebrow { display: block; color: var(--rgd); font-size: 11px; letter-spacing: 2px; margin: 0 0 8px; }
.rep-sum p { margin: 0; font-size: 15.5px; line-height: 1.68; }
.rep-sum b, .rep-lines b { font-weight: 700; color: var(--ink); }
.rep-note { background: #FFF7E2; border-left: 4px solid var(--rgl); border-radius: 10px; padding: 14px 18px 14px 16px; }
.rep-note p { margin: 0; white-space: pre-line; font-size: 14.5px; line-height: 1.6; }
.rep-kf { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.rep-kf .kf { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border: 1px solid var(--paperLine); border-radius: 12px; background: #FFFFFF; }
.rep-kf b { font-family: var(--serif); font-size: 28px; line-height: 1.1; font-weight: 600; color: var(--ink); font-variant-numeric: lining-nums; }
.rep-kf .kl { font-size: 11px; line-height: 1.35; letter-spacing: 1px; text-transform: uppercase; font-weight: 800; color: var(--ink2); }
.rep-kf .ks { font-size: 12px; line-height: 1.35; color: var(--ink2); }
.nw { white-space: nowrap; }
.rep-lines p { margin: 8px 0 0; font-size: 13.5px; }
.rep-fine { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink2); }
.rep-acc { display: flex; gap: 18px; align-items: center; }
.rep-acc b { flex: none; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--rgd); font-variant-numeric: lining-nums; }
.rep-acc p { margin: 0; font-size: 14px; }
.rep-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
.rep .table { font-size: 13.5px; }
.rep .table th { color: var(--ink2); border-bottom: 1px solid var(--paperLine); padding: 8px 8px; }
.rep .table td { color: var(--ink); border-bottom: 1px solid var(--paperLine); padding: 8px 8px; }
.rep .table tr:last-child td { border-bottom: 0; }
.rep tr.rep-none td { color: var(--ink2); }
.rep-zones td.rz-bar { width: 32%; }
.rep .bar { display: block; min-width: 60px; background: rgba(22,33,58,.1); height: 7px; }
/* the app's own quiet greys are too faint on paper */
.rep .muted, .rep .tiny.muted, .rep .small.muted { color: var(--ink2); }
.rep .pb { color: #5F4A0E; border-color: rgba(138,111,19,.5); background: rgba(201,163,39,.12); }
.rep-plan, .rep-hw { list-style: none; margin: 0; padding: 0; }
.rep-plan li, .rep-hw li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--paperLine); }
.rep-plan li:last-child, .rep-hw li:last-child { border-bottom: 0; }
.rep-plan li > div, .rep-hw li > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rep-plan b, .rep-hw b { font-weight: 700; color: var(--ink); }
.rep-plan span, .rep-hw li > div > span { font-size: 12.5px; color: var(--ink2); }
.rep-hw em { font-style: normal; font-size: 12.5px; color: var(--ink); }
.rp-tick { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--paperLine); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #1E7A4F; }
.rep-plan li.done .rp-tick { border-color: #1E7A4F; background: rgba(30,122,79,.1); }
.hw-st { flex: none; max-width: 46%; text-align: right; font-size: 12px; font-weight: 700; color: var(--ink2); }
.hw-st.ok { color: #1E7A4F; }
.rep-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--paperLine); font-size: 11.5px; line-height: 1.5; color: var(--ink2); }
.rep-foot p { margin: 0 0 4px; }
.rep-foot b { color: var(--ink); }
/* two sections side by side need the room of a laptop: an iPad held upright reads them one under the other */
@media (max-width: 900px) { .rep-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .rep { padding: 22px 18px 20px; border-radius: 14px; }
  .rep-name { font-size: 26px; }
  .rep-logo { width: 62px; height: 62px; }
  .rep-sum p { font-size: 15px; }
}
@media (max-width: 560px) {
  .rep .table.stack tr { border-color: var(--paperLine); }
  /* the report's own cell padding (.rep .table td, above) must not undo the stacked layout: a value sits clear of its
     column name (beside it, or under it in a compact table) */
  .rep .table.stack td { border-bottom-color: var(--paperLine); padding: 8px 0 8px 40%; }
  .rep .table.stack td[data-label=""], .rep .table.stack td:not([data-label]) { padding-left: 0; }
  .rep .table.stack.compact td { padding: 7px 0 6px; }
  .rep .table.stack.compact td:first-child { padding: 9px 0 8px; }
  .rep .table.stack td::before { color: var(--ink2); }
  .rep-zones td.rz-bar { width: 100%; }
  .rep-acc { align-items: flex-start; }
}

/* ===================================================================== print (A4)
 * Only the report prints: no navigation, no buttons, no dark page. A card, a row or a chart never splits
 * across two pages; the long tables may break, but only between rows, and their headings repeat. */
@media print {
  @page { size: A4; margin: 12mm 12mm 13mm; }
  html, body { background: #FFFFFF !important; background-image: none !important; }
  /* the app around the report (#/report): its navigation, the bar with Back and Print (lane H's .no-print), toasts */
  .noprint, .no-print, .report-bar, .side, .bottom-nav, .topbar, .toast, .save-status, .resume-banner, .a2hs { display: none !important; }
  .main { margin: 0 !important; padding: 0 !important; }
  .report-host { margin: 0 !important; }
  .page-wrap { padding: 0 !important; max-width: none !important; margin: 0 !important; }
  #view { opacity: 1 !important; transform: none !important; }
  .rep { max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; background: #FFFFFF; font-size: 12.5px; }
  .rep, .rep * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rep-head { padding-bottom: 12px; }
  .rep-name { font-size: 27px; }
  .rep-sec { margin-top: 16px; }
  .rep-sum p { font-size: 13.5px; line-height: 1.6; }
  .rep-kf { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .rep-kf b { font-size: 23px; }
  .rep-kf .kf { padding: 8px 10px; }
  .rep .table td, .rep .table th { padding: 6px 7px; }
  /* the grade charts: four subjects on one row (a lone fourth chart would sit on the next page); five or six in two rows of three */
  .rep .gp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .rep .gp-grid:has(> .gp:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rep .gp { padding: 8px 10px 6px; }
  .rep-keep, .rep-note, .rep-kf .kf, .rep-acc, .lc, .gp, .rep .table tr, .rep-plan li, .rep-hw li, .rep-foot, .rep-tail { break-inside: avoid; page-break-inside: avoid; }
  .rep .eyebrow, .rep-head { break-after: avoid; page-break-after: avoid; }
  .rep thead { display: table-header-group; }
  .rep .pb { border-width: 1px; }
}