/* Deliberately small and hand-written: no build step, no framework.
   The colour work is load-bearing rather than decorative -- the three
   verification states must be distinguishable at a glance, because that
   distinction is what a centre is paying for. */
:root {
  --ink: #1c1917; --muted: #6b6560; --line: #e0dcd7; --bg: #faf9f7;
  --proved: #1b7f4b; --proved-bg: #e8f5ee;
  --disproved: #b3261e; --disproved-bg: #fdeceb;
  --uncheckable: #9a6700; --uncheckable-bg: #fdf6e3;
  --judgement: #4a5568; --judgement-bg: #f1f3f5;
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       color:var(--ink); background:var(--bg); }
main { max-width: 1024px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
main.narrow { max-width: 26rem; }
h1 { font-size:1.6rem; margin:.2rem 0; } h2 { font-size:1.1rem; margin:2rem 0 .5rem; }
a { color:#1a5fb4; } .muted { color:var(--muted); font-size:.9rem; }

.topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem;
          padding:.75rem 1rem; border-bottom:1px solid var(--line); background:#fff; }
.brand { font-weight:600; text-decoration:none; color:var(--ink); }
.topbar nav { display:flex; gap:1rem; align-items:center; }
.inline { display:inline; }
.linklike { background:none; border:0; color:#1a5fb4; cursor:pointer; font-size:1rem; padding:0; }

label { display:block; margin:1rem 0; font-weight:500; }
input, select, textarea { display:block; width:100%; margin-top:.35rem; padding:.55rem;
  border:1px solid var(--line); border-radius:6px; font:inherit; background:#fff; }
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9rem; }
small { display:block; font-weight:400; color:var(--muted); margin-top:.25rem; }
button { padding:.6rem 1.1rem; border:0; border-radius:6px; background:var(--ink); color:#fff;
         font:inherit; cursor:pointer; }
.notice { padding:.6rem .8rem; border-radius:6px; background:var(--disproved-bg);
          color:var(--disproved); }
.notice.ok { background:var(--proved-bg); color:var(--proved); }

.result-head { display:flex; justify-content:space-between; align-items:flex-start; }
.result-head h1 { font-size:2.2rem; }
.status { font-weight:600; letter-spacing:.02em; font-size:.85rem; }
.status-VERIFIED, .pill.status-VERIFIED { color:var(--proved); }
.status-PARTIALLY_VERIFIED, .pill.status-PARTIALLY_VERIFIED { color:var(--uncheckable); }
.status-CONTRADICTED, .pill.status-CONTRADICTED { color:var(--disproved); }
.status-UNVERIFIED, .pill.status-UNVERIFIED { color:var(--judgement); }
.retention { font-size:.85rem; color:var(--muted); border-left:3px solid var(--line);
             padding-left:.75rem; }

table { width:100%; border-collapse:collapse; margin-top:.5rem; }
th { text-align:left; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em;
     color:var(--muted); border-bottom:1px solid var(--line); padding:.4rem .5rem; }
td { padding:.65rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
.steps .code { font-weight:600; }
.steps .work, .steps .scheme { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                               font-size:.88rem; }
.steps .basis small { margin-top:.2rem; }
.steps .basis .reason { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                        font-size:.78rem; color:var(--ink); }
.pill { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.75rem;
        font-weight:600; }

/* Loading state for the grading form.
   HTMX puts .htmx-request on the indicator for the duration of the request. */
.htmx-indicator { display:none; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { display:flex; }
.progress { align-items:center; gap:.6rem; margin-top:.8rem; color:var(--muted); }
.spinner { width:1rem; height:1rem; flex:0 0 auto; border-radius:50%;
           border:2px solid var(--line); border-top-color:var(--ink);
           animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
/* A spinner is decoration; motion sensitivity is not. The message still says
   what is happening, so nothing is lost by holding it still. */
@media (prefers-reduced-motion: reduce) { .spinner { animation:none; } }
button:disabled { opacity:.55; cursor:progress; }

/* The four states, on screen. Colour plus an inset bar; the bar helps with
   colour-vision differences.

   This does NOT carry to paper -- an inset box-shadow is a background graphic,
   and browsers drop those when printing. The print block below rebuilds the
   distinction with a real border. Do not rely on these rules for the printout. */
.basis-verified     { background:var(--proved-bg);      box-shadow: inset 4px 0 0 var(--proved); }
.basis-verified .pill     { background:var(--proved);      color:#fff; }
.basis-contradicted { background:var(--disproved-bg);   box-shadow: inset 4px 0 0 var(--disproved); }
.basis-contradicted .pill { background:var(--disproved);   color:#fff; }
.basis-uncheckable  { background:var(--uncheckable-bg); box-shadow: inset 4px 0 0 var(--uncheckable); }
.basis-uncheckable .pill  { background:var(--uncheckable); color:#fff; }
.basis-judgement    { background:var(--judgement-bg);   box-shadow: inset 4px 0 0 var(--judgement); }
.basis-judgement .pill    { background:var(--judgement);   color:#fff; }

.transcript { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9rem; }
.illegible { color:var(--uncheckable); }

/* Export is print. The durable copy lives with the centre, who is the data
   controller -- which is what lets us delete ours on a schedule. */
@media print {
  .no-print { display:none !important; }
  body { background:#fff; font-size:11pt; }
  main { max-width:none; padding:0; }
  td, th { padding:.3rem .4rem; }

  /* Baseline for every pill, including the overall verification status above the
     table. The per-state rules below are more specific and override it. */
  .pill { border:1px solid #000; background:#fff !important; color:#000 !important; }

  /* Two tiers on paper, not four.
     -----------------------------------------------------------------------
     A teacher with forty scripts acts on one split: is this mark disproved, or
     is it not. Giving all four states equal weight spends the page's attention
     on a distinction nobody acts on, and the disproved row -- the only thing
     here worth a conversation with a parent -- ends up reading like the other
     six. The finer state stays available as the pill's word.

     Everything below uses BORDERS, never box-shadow, and never a background
     colour it cannot survive losing. Backgrounds and box-shadows are background
     graphics: browsers suppress them when printing unless the user opts in, so
     a state distinguished by either one flattens to nothing on paper. That is
     precisely the bug this replaced -- all four states printed identically
     while looking correct on screen. If a fifth state is ever added, give it a
     border, and check it on a greyscale printout rather than on a monitor. */
  .basis-verified, .basis-contradicted, .basis-uncheckable, .basis-judgement {
    background:#fff !important; box-shadow:none !important; }

  /* Tier 2: the quiet three. A hairline keeps the column aligned with the
     disproved row so the heavy border has something to be heavy against. */
  .basis-verified, .basis-uncheckable, .basis-judgement { border-left:1px solid #ccc; }
  .basis-verified .pill, .basis-uncheckable .pill, .basis-judgement .pill {
    border:1px solid #666; background:#fff !important; color:#000 !important;
    font-weight:400; }

  /* Tier 1: disproved. This is the product. */
  .basis-contradicted { border-left:6px solid #000; }
  .basis-contradicted .pill {
    border:2px solid #000; background:#000 !important; color:#fff !important;
    font-weight:700; text-transform:uppercase; letter-spacing:.02em;
    /* Ask for the fill to print. If the browser refuses -- backgrounds are
       opt-in -- the 2px border and bold caps still carry it, so the pill
       degrades to a heavy outline rather than to nothing. */
    -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* The sentence that settles an argument with a parent: full contrast, and
     matched in specificity to the .steps .basis .reason rule it overrides. */
  .steps .basis-contradicted .reason { color:#000; font-weight:600; }

  /* A row and its verification reason must not split across a page. The
     disproved row ending one page and "6*46 evaluates to 276, not 266" starting
     the next separates the evidence from the claim it supports, which is the
     one thing on this page that has to be read together.
     Both spellings, and on the cells as well as the row: engines disagree about
     whether break-inside applies to a table row. */
  tr, td { break-inside: avoid; page-break-inside: avoid; }
  /* A second page of marks with no column headings is the same problem. */
  thead { display: table-header-group; }
}