/* /verify/ — the reference scorer. Bench components only.

   The material system — palette, the six ratified bands, both faces, the base
   rules, masthead, nav, footer, motion — lives in /tokens.css, which every page
   links first. There is exactly ONE copy of it: two stylesheets each carrying
   their own token block is the drift shape this project has been bitten by more
   than once.

   What remains here is the bench, which is the thing only this page has. */

/* every numeric surface, without exception — metric honesty */
input[type=number], .pts, .row-pts, .rt-pts, .grade-big, .points-line, .side-line,
.region-row, .rail-version, .rt-table { font-variant-numeric:tabular-nums; }

.wrap { max-width:1160px; margin:0 auto; padding:40px 24px 96px; }
.page-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:1.4rem; }
/* The generated pages get this from .page-head; this one is hand-authored and
   was landing the nav directly on top of the kicker. */
.page-head > nav { margin-bottom:1.8rem; }
.kicker {
  font-family:var(--mono); color:var(--muted); text-transform:uppercase;
  letter-spacing:.14em; font-size:var(--type-00); margin:0 0 .6rem;
}
h1 { font-size:var(--type-4); line-height:1.15; margin:0 0 .4rem; font-weight:600; letter-spacing:-.005em; }
.lede { color:var(--muted); font-size:var(--type-1); margin:.4rem 0 0; max-width:68ch; }
.note { color:var(--muted); font-size:var(--type-0); }

/* ---------- bench grid ---------- */
.bench { display:grid; grid-template-columns:1fr 1fr .9fr; gap:20px; align-items:start; margin-top:2.2rem; }
.panel { border:1px solid var(--line); border-radius:2px; padding:20px; background:var(--bg-up); }
.panel-title {
  margin:0 0 1rem; font-family:var(--mono); font-size:var(--type-00);
  text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
}
.group-title { margin:0 0 .7rem; font-size:var(--type-0); font-weight:600; }

/* centering inputs — a measurement you type is machine territory */
.centering-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:var(--type-0); }
.field-label { color:var(--muted); font-size:var(--type-0); }
/* The pair reads as one measurement — "47 / 53" — because that is what it is.
   The separator is decorative and hidden from assistive tech; each box carries
   its own label naming the border it measures. */
.pair { display:flex; align-items:center; gap:6px; }
.pair input { text-align:center; }
.pair-sep { color:var(--muted); font-family:var(--mono); }
input[type=number], input[type=text] {
  padding:.7em; border-radius:2px; border:1px solid var(--line); background:var(--bg);
  color:var(--fg); font-size:var(--type-0); font-family:var(--mono); width:100%;
}
input[type=number]:focus, input[type=text]:focus { outline:none; border-color:var(--fg); }
.group .note { margin:.7rem 0 0; }

/* ---------- print quality: collapsed per-face row ---------- */
.print-group { margin-top:1.2rem; }
.print-summary {
  display:block; width:100%; text-align:left; font-family:var(--mono); font-size:var(--type-0);
  color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:2px;
  padding:.6em .8em; cursor:pointer;
}
.print-summary:hover { border-color:var(--fg); }
.print-summary .hint { color:var(--muted); font-size:.9em; }
.print-ladders { margin-top:.7rem; display:flex; flex-direction:column; gap:.55rem; }
.seg-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:var(--type-0); font-family:var(--mono); }

/* The six ratified band values and the coexistence law that makes them safe are
   defined once, in /tokens.css. What follows is this page applying that law:
   band colour as a keylined FILL, never as text; the numeral computed per band;
   the chip at 3.2rem to clear large-text AA because bronze lands at 3.98; and
   the same number repeated in body ink beside it, because colour may speak first
   but must never speak alone. */

/* ---------- score rail — the reading ---------- */
.grade-line { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.grade-big {
  font-family:var(--mono); font-size:3.2rem; font-weight:600; line-height:1;
  display:inline-block; padding:.08em .28em; border-radius:2px;
  border:1px solid var(--fg);   /* the keyline: Ink on paper, Chalk on stone */
  color:var(--fg);              /* until a band is known — never a bare colour */
}
.grade-big[data-band="gold"]   { background:var(--band-gold);   color:var(--ink); }
.grade-big[data-band="blue"]   { background:var(--band-blue);   color:var(--chalk); }
.grade-big[data-band="green"]  { background:var(--band-green);  color:var(--ink); }
.grade-big[data-band="violet"] { background:var(--band-violet); color:var(--chalk); }
.grade-big[data-band="bronze"] { background:var(--band-bronze); color:var(--chalk); }
.grade-big[data-band="wine"]   { background:var(--band-wine);   color:var(--chalk); }
/* rule 4, in the markup: the numeral repeated in the ground's own ink */
.grade-say { margin:.5rem 0 0; font-family:var(--mono); font-size:var(--type-0); color:var(--fg); }
/* Keylined rectangle, never a pill. The numeral is repeated in body text beside
   it, so the chip never carries the reading alone. */
.band-chip {
  font-family:var(--mono); border:1px solid var(--line); color:var(--muted); border-radius:2px;
  padding:.2em .7em; font-size:var(--type-00); letter-spacing:.14em; text-transform:uppercase;
}
.face-block { border:1px solid var(--line); border-radius:2px; padding:12px 14px; margin-top:14px; }
/* the binding face: weight and a wash of the ground's own ink, not a colour */
.face-block.binding { border-color:var(--fg); background:var(--bg); }
.face-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.face-name {
  margin:0; font-family:var(--mono); font-size:var(--type-00); text-transform:uppercase;
  letter-spacing:.14em; font-weight:400; color:var(--muted);
}
.binding-tag {
  background:var(--accent); color:var(--on-accent); border-radius:2px; padding:.2em .55em;
  font-family:var(--mono); font-size:var(--type-00); font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
}
.region-row, .side-line, .points-line { display:flex; justify-content:space-between; align-items:baseline; }
.region-row { padding:2px 6px; color:var(--muted); font-size:var(--type-0); border-radius:2px; font-family:var(--mono); }
.region-row .pts { color:var(--fg); }
.region-row.binding { outline:1px solid var(--line); color:var(--fg); font-weight:600; }
.side-line { margin-top:.5rem; padding:6px 6px 0; border-top:1px solid var(--line); color:var(--muted); font-size:var(--type-0); font-family:var(--mono); }
.side-line .pts { color:var(--fg); }
.points-line { margin-top:16px; padding:0 6px; color:var(--muted); font-family:var(--mono); }
.points-line .pts { color:var(--fg); font-size:var(--type-2); }
.rail-version { color:var(--muted); font-family:var(--mono); font-size:var(--type-00); margin-top:10px; padding:0 6px; }
/* the one functional colour pair, form validation only — never a reading */
.rail-error { color:var(--error); font-size:var(--type-0); margin-bottom:.8rem; }
#rail-body.stale { opacity:.35; }

/* ---------- card diagrams: a hairline engineering drawing, on stone ----------
   Stone in BOTH themes. The card is the object under assay, and the assay
   surface is where machine work happens. No artwork, no photograph, no texture:
   the stone is a value, not a picture of a stone. */
.diagram-group { margin-top:1.6rem; }
.diagram-box {
  display:flex; justify-content:center; background:var(--basanite);
  border:1px solid var(--stone-line); border-radius:2px; padding:14px 0;
}
/* touch-action:none — the line-drag gesture owns touch pointers here; without
   it, mobile page scroll claims the drag and fires pointercancel mid-gesture,
   so drawing a line on touch would silently fail */
.card-diagram { width:min(200px, 78%); height:auto; display:block; cursor:crosshair; touch-action:none; }
.card-outline { fill:none; stroke:var(--stone-line); stroke-width:1.5; }
.card-diagram:hover .card-outline { stroke:var(--stone-muted); }
/* Defect markers stay Chalk always — colour belongs to grades, never to defects. */
.defect-dot { fill:var(--chalk); stroke:var(--basanite); stroke-width:1.5; pointer-events:none; }
.defect-line { stroke:var(--chalk); stroke-width:3; stroke-linecap:round; pointer-events:none; }
.defect-line-preview { opacity:.55; stroke-dasharray:6 4; } /* live drag feedback, pre-commit */
.defect-line-end { stroke-width:1.2; } /* endpoint circles reuse .defect-dot (smaller r set in JS) */
.center-frame-ref { fill:none; stroke:#EDEBE31F; stroke-width:1; stroke-dasharray:3 4; pointer-events:none; }
.center-frame { fill:none; stroke:var(--chalk); stroke-width:1.4; stroke-dasharray:5 4; opacity:.75; pointer-events:none; transition:x .15s ease, y .15s ease; }
.region-row.quiet { opacity:.45; }

/* ---------- defect popover — machine territory, so: stone, both themes ---------- */
.popover {
  position:absolute; z-index:40; width:300px; background:var(--basanite); color:var(--stone-fg);
  border:1px solid var(--stone-line); border-radius:2px; padding:16px;
}
.popover:focus { outline:none; }
.pop-title {
  margin:0 0 .8rem; font-family:var(--mono); font-size:var(--type-00);
  text-transform:uppercase; letter-spacing:.14em; color:var(--stone-muted);
}
.pop-field { display:none; margin-bottom:.7rem; }
.pop-field.pop-always { display:block; }
/* the line hint toggles via the hidden ATTRIBUTE — .pop-field.pop-always's
   display:block would beat a bare .hidden class, so this rule must win outright */
.pop-field[hidden] { display:none !important; }
.popover[data-region="corner"] .pop-when-corner,
.popover[data-region="edge"] .pop-when-edge,
.popover[data-region="surface"] .pop-when-surface,
.popover[data-region="crease"] .pop-when-crease,
.popover[data-region="stain"] .pop-when-stain,
.popover[data-region="print_defect"] .pop-when-print_defect { display:block; }
.pop-label { display:block; font-family:var(--mono); color:var(--stone-muted); font-size:var(--type-00); margin-bottom:.35rem; text-transform:uppercase; letter-spacing:.1em; }
.hint { color:var(--muted); font-size:.9em; }
.popover .hint { color:var(--stone-muted); }
.pop-note-field { margin-top:.9rem; }
.popover input[type=text] { background:var(--stone-up); border-color:var(--stone-line); color:var(--stone-fg); }
.popover input[type=text]:focus { border-color:var(--chalk); }
#pop-note { font-size:var(--type-0); padding:.5em .6em; }

.seg { display:flex; flex-wrap:wrap; gap:6px; }
.seg button {
  font-family:var(--mono); font-size:var(--type-00); color:var(--fg); background:var(--bg);
  border:1px solid var(--line); border-radius:2px; padding:.45em .7em; cursor:pointer;
}
.seg button:hover { border-color:var(--fg); }
.seg button.sel { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.popover .seg button { color:var(--stone-fg); background:var(--stone-up); border-color:var(--stone-line); }
.popover .seg button:hover { border-color:var(--chalk); }
.popover .seg button.sel { background:var(--chalk); border-color:var(--chalk); color:var(--basanite); }
.pop-actions { display:flex; gap:10px; margin-top:1rem; }

/* `.btn-gold` is NOT a leftover to clean up: it arrives from score-wizard.js,
   a byte-identical mirror that must not be forked, so the class name is fixed
   from outside this file. Both names resolve to one rule so the two can never
   drift into meaning different things. The button is achromatic — filled with
   the ground's own ink. */
.btn-accent, .btn-gold {
  background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); border-radius:2px;
  padding:.5em 1.3em; font-family:var(--mono); font-weight:600; font-size:var(--type-0); cursor:pointer;
}
.btn-accent:disabled, .btn-gold:disabled { opacity:.4; cursor:not-allowed; }
.popover .btn-accent, .popover .btn-gold { background:var(--chalk); color:var(--basanite); border-color:var(--chalk); }
.btn-ghost {
  background:none; color:var(--fg); border:1px solid var(--line); border-radius:2px;
  padding:.5em 1.1em; font-family:var(--mono); font-size:var(--type-0); cursor:pointer;
}
.btn-ghost:hover { border-color:var(--fg); }
.btn-ghost:disabled { opacity:.4; cursor:not-allowed; }
.btn-ghost:disabled:hover { border-color:var(--line); }
.popover .btn-ghost { color:var(--stone-fg); border-color:var(--stone-line); }
.popover .btn-ghost:hover { border-color:var(--chalk); }

/* ---------- defect rows ---------- */
#defect-rows { margin-top:2.2rem; }
.rows-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.rows-title {
  margin:0; font-family:var(--mono); font-size:var(--type-00); text-transform:uppercase;
  letter-spacing:.14em; color:var(--muted);
}
.rows-scroll { overflow-x:auto; margin-top:.6rem; }
.rows-table { width:100%; border-collapse:collapse; font-size:var(--type-0); min-width:520px; }
.rows-table th {
  text-align:left; font-family:var(--mono); color:var(--muted); font-weight:400; font-size:var(--type-00);
  text-transform:uppercase; letter-spacing:.1em; padding:6px 10px; border-bottom:1px solid var(--line);
}
.rows-table td { padding:9px 10px; border-bottom:1px solid var(--line); }
.rows-table th:nth-child(4) { text-align:right; }
.defect-row { cursor:pointer; }
.defect-row:hover td { background:var(--bg-up); }
.row-pts { font-family:var(--mono); color:var(--fg); text-align:right; white-space:nowrap; }
.row-x { width:1%; text-align:right; }
.row-remove {
  background:none; border:none; color:var(--muted); font-size:1rem;
  cursor:pointer; padding:2px 8px; border-radius:2px; line-height:1;
}
.row-remove:hover { color:var(--error); }
.rows-empty { margin:.8rem 0 0; }
/* phone/narrow: the 520px min-width forced a horizontal scroll and pushed the
   remove control off-screen. Sticky cell stays OPAQUE on row hover and carries
   a left edge so scrolling content doesn't blur into it. */
@media (max-width:600px) {
  .rows-table { min-width:0; font-size:var(--type-00); }
  .rows-table th, .rows-table td { padding:6px 6px; }
  .row-x { position:sticky; right:0; background:var(--bg); border-left:1px solid var(--line); }
  .defect-row:hover .row-x { background:var(--bg-up); }
}

/* transient defect-added confirmation — a keylined rectangle, not a pill;
   fixed bottom-center so it's visible at any scroll position and covers no
   controls; pointer-events:none so even a mid-fade element never eats a tap. */
.added-chip {
  /* env(safe-area-inset-bottom) keeps it clear of the iOS home-indicator zone;
     resolves to 0 where there's no inset */
  position:fixed; bottom:calc(24px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:50;
  background:var(--basanite); border:1px solid var(--stone-line); color:var(--chalk);
  padding:.45em 1.1em; border-radius:2px; font-family:var(--mono); font-size:var(--type-00);
  letter-spacing:.04em; pointer-events:none; white-space:nowrap;
}
.added-chip.fade { animation:chip-fade 1.8s ease forwards; }
@keyframes chip-fade { 0%, 60% { opacity:1; } 100% { opacity:0; } }

/* ---------- published rubric tables ---------- */
.rubric-details { margin-top:2.2rem; border:1px solid var(--line); border-radius:2px; padding:14px 20px; background:var(--bg-up); }
.rubric-details summary { cursor:pointer; letter-spacing:.02em; }
.rubric-details summary:hover { text-decoration:underline; }
.rt-grid { display:flex; gap:32px; flex-wrap:wrap; margin-top:1.2rem; }
.rt-block { min-width:170px; }
.rt-title {
  margin:0 0 .5rem; font-family:var(--mono); font-size:var(--type-00); text-transform:uppercase;
  letter-spacing:.12em; color:var(--muted); font-weight:400;
}
.rt-table { border-collapse:collapse; font-size:var(--type-0); font-family:var(--mono); }
.rt-table th, .rt-table td { padding:4px 14px 4px 0; text-align:left; border-bottom:1px solid var(--line); }
.rt-table thead th { color:var(--muted); font-weight:400; font-size:var(--type-00); text-transform:uppercase; letter-spacing:.08em; }
.rt-table tbody th { color:var(--fg); font-weight:400; }
.rt-pts { color:var(--fg); text-align:right; }
.rt-line { color:var(--muted); font-size:var(--type-0); max-width:68ch; font-family:var(--serif); }

/* ---------- guided wizard ---------- */
.head-actions { display:flex; align-items:center; gap:14px; margin-top:1.2rem; flex-wrap:wrap; }
/* wizard mode: interview replaces the bench, rows and rubric */
body.wizard-active .bench,
body.wizard-active #defect-rows,
body.wizard-active #rubric-details,
body.wizard-active .head-actions { display:none; }

.wizard-panel { margin-top:2.2rem; border:1px solid var(--line); border-radius:2px; padding:20px; background:var(--bg-up); }
.wiz-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.wiz-progress { margin:0; font-family:var(--mono); color:var(--muted); font-size:var(--type-00); text-transform:uppercase; letter-spacing:.12em; }
.wiz-exit { padding:.35em .9em; font-size:var(--type-00); }
.wiz-bar { display:block; height:2px; margin-top:10px; background:var(--line); overflow:hidden; }
.wiz-bar-fill { display:block; height:100%; background:var(--fg); transition:width .15s ease; }
.wiz-body { max-width:68ch; margin:0 auto; padding:1.4rem 0 .4rem; }
.wiz-anim .wiz-body { animation:wiz-in .15s ease; }
@keyframes wiz-in { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }
.wiz-title { margin:0; font-size:var(--type-3); font-weight:600; letter-spacing:-.005em; }
.wiz-intro { margin:.4rem 0 0; color:var(--muted); }
.wiz-item { margin-top:1.6rem; }
.wiz-q { margin:0 0 .55rem; font-weight:600; }
/* big tappable options — this mode is inherently phone-friendly */
.wiz-options { display:flex; flex-direction:column; gap:8px; }
.wiz-options-row { flex-direction:row; }
.wiz-options-row .wiz-opt { flex:1; text-align:center; }
.wiz-opt {
  min-height:48px; text-align:left; font-family:var(--serif); font-size:var(--type-1);
  color:var(--fg); background:var(--bg); border:1px solid var(--line);
  border-radius:2px; padding:.8em 1em; cursor:pointer;
}
.wiz-opt:hover { border-color:var(--fg); }
.wiz-opt.sel { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.wiz-sub { margin-top:1.2rem; }
.wiz-place { display:flex; justify-content:center; margin-top:.4rem; background:var(--basanite); border:1px solid var(--stone-line); border-radius:2px; padding:12px 0; }
.wiz-diagram { width:min(180px, 62%); }
.wiz-pending { fill:#EDEBE366; stroke:var(--chalk); }
.wiz-marks { margin-top:.8rem; display:flex; flex-direction:column; gap:6px; }
.wiz-mark-row {
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--line); border-radius:2px; padding:.45em .8em; font-size:var(--type-0);
}
.wiz-mark-x {
  background:none; border:none; color:var(--muted); font-size:1rem;
  cursor:pointer; padding:2px 8px; border-radius:2px; line-height:1;
}
.wiz-mark-x:hover { color:var(--error); }
/* 44px minimum tap targets on wizard chrome (options already ≥48px) */
.wiz-nav button, .wiz-exit, .wiz-mark-x { min-height:44px; }
.wiz-mark-actions { display:flex; gap:10px; margin-top:1.2rem; }
.wiz-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:2rem; }
.wiz-nav-right { display:flex; gap:10px; }
@media (max-width:560px) {
  .wizard-panel { padding:16px; }
  .wiz-nav .btn-gold, .wiz-nav .btn-accent, .wiz-nav .btn-ghost { padding:.6em 1.2em; }
}

/* ---------- adaptive: ≤900px — rail first full-width, face panels side-by-side
   with thumbnail diagrams above their centering inputs ---------- */
@media (max-width:900px) {
  .bench { grid-template-columns:1fr 1fr; gap:14px; }
  #score-rail { order:-1; grid-column:1 / -1; }
  #card-front, #card-back { display:flex; flex-direction:column; padding:16px; }
  #card-front .panel-title, #card-back .panel-title { order:-2; }
  .diagram-group { order:-1; margin-top:0; margin-bottom:1.1rem; }
  .card-diagram { width:min(132px, 100%); }
  .diagram-group .note { display:none; } /* thumbnail speaks for itself */
  /* popover becomes a bottom sheet (JS clears inline coords; !important guards resize-while-open) */
  .popover {
    position:fixed; left:0 !important; right:0; top:auto !important; bottom:0;
    width:100%; border-radius:2px 2px 0 0; border-bottom:none;
    padding:18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height:80vh; overflow-y:auto;
  }
}
@media (max-width:560px) {
  .centering-grid { grid-template-columns:1fr; }
}

/* ---------- print: the spec must read printed, so paper is forced and stone
   blocks print white with a hairline border ---------- */
@media print {
  :root { --bg:#fff; --bg-up:#fff; --fg:#000; --muted:#444; --line:#00000033; --accent:#000; --on-accent:#fff; }
  body { background:#fff; color:#000; }
  .diagram-box, .popover, .wiz-place { background:#fff !important; border:1px solid #00000033 !important; }
  .card-outline, .center-frame { stroke:#000 !important; }
  .defect-dot, .defect-line { fill:#000 !important; stroke:#000 !important; }
  .head-actions, .row-remove, .added-chip, .popover, .wizard-panel { display:none !important; }
  .rubric-details { border:none; padding:0; }
}