/* ============================================================
   THE SPECIMEN LAB — register F (field) + register L (lab)
   Governed by Reference/design/styles/specimen-lab.md
   Palette is LOCAL to this surface per spine rule 2.
   ============================================================ */

:root {
  /* ---- Register F: the field desk ---- */
  --canvas: #F2EBDC;          /* aged linen — the page */
  --ink: #2A2119;             /* primary text */
  --ink-soft: rgba(42,33,25,.72);
  --ink-faint: rgba(42,33,25,.48);
  --rule: rgba(42,33,25,.18);
  --brass: #9A6B2F;           /* THE one dominant accent */
  --parchment: #E8DCC0;       /* sketch mount */
  --leather: #5C4632;         /* desk edge, frame */

  /* ---- Register L: the laboratory (dark, earned) ---- */
  --lab-canvas: #151A1C;
  --lab-ink: #E6EDF3;
  --lab-muted: #8B949E;
  --lab-rule: rgba(230,237,243,.14);

  /* ---- Semantic states: reserved, never decorative ---- */
  --ok: #2E6B4F;              /* matched */
  --near: #8A6A2F;            /* partial */
  --bad: #8C3A2B;             /* missed */
  --locked: rgba(42,33,25,.48);
  --lab-ok: #3FB950;
  --lab-near: #D29922;
  --lab-bad: #F85149;

  /* ---- Semantic ink: resolves per register ----
     These three are the ONLY text colours any component may use. They flip with
     the register in one place, so a new element cannot inherit an ink that was
     never flipped. Hand-overriding each component's colour is how register L
     ended up with dark-brown prose on a dark canvas. */
  --text-1: var(--ink);        /* primary */
  --text-2: var(--ink-soft);   /* secondary voice */
  --text-3: var(--ink-faint);  /* quietest: labels, counts */
  --accent-bad: #8C3A2B;      /* SYNTHETIC marker */

  /* ---- Type ---- */
  --serif: 'Source Serif 4', Georgia, serif;
  --ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --measure: 66ch;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Body switches to the lab when the specimen is solved — the register
   transition. Not a theme toggle: the lab is a different room. */
body[data-register="lab"] {
  background: var(--lab-canvas);
  color: var(--lab-ink);
  --text-1: var(--lab-ink);
  --text-2: rgba(230,237,243,.78);
  --text-3: var(--lab-muted);
  --accent-bad: var(--lab-bad);
  --brass: #C79A47;   /* brass under a lamp, not on linen — same hue, lit */
}

::selection { background: rgba(154,107,47,.22); }

/* ============================================================
   MASTHEAD — the honest frame
   ============================================================ */

.masthead {
  border-bottom: 1px solid var(--rule);
  padding: 28px 40px 22px;
  max-width: 1180px;
  margin: 0 auto;
}
body[data-register="lab"] .masthead { border-bottom-color: var(--lab-rule); }

.masthead__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}

/* The brass register-marker: one of exactly three accent moments. */
.masthead__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass);
  display: inline-block;
}
.masthead__dot--lab { background: var(--lab-muted); }

.masthead__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.05;
  margin: 0 0 10px;
  letter-spacing: -.015em;
}

/* The premise states the synthetic nature BEFORE any specimen. Spine rule 1. */
.masthead__premise {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 58ch;
  margin: 0 0 16px;
}
.masthead__synthetic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--accent-bad);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 4px 10px;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.desk {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 40px 80px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ---- Specimen list (navigation, not a gallery) ---- */
.specimens { position: sticky; top: 24px; }

.specimens__label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
body[data-register="lab"] .specimens__label { border-bottom-color: var(--lab-rule); }

.specimen-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 12px 4px;
  cursor: pointer;
  font-family: var(--ui);
  color: var(--text-2);
  transition: color .12s;
}
body[data-register="lab"] .specimen-btn { border-bottom-color: var(--lab-rule); }
.specimen-btn:hover { color: var(--text-1); }
.specimen-btn[aria-current="true"] { color: var(--text-1); }

.specimen-btn__desig {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  display: block;
}
.specimen-btn__name { font-size: 14px; display: block; line-height: 1.3; }
.specimen-btn__synthetic {
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--accent-bad);
  font-weight: 600;
}

/* Solved gets exactly ONE brass hairline. The entire progress affordance. */
.specimen-btn[data-solved="true"] {
  box-shadow: inset 2px 0 0 0 var(--brass);
  padding-left: 10px;
}
.specimen-btn__lock { color: var(--locked); font-size: 11px; }

/* ============================================================
   THE SKETCH — the loudest thing on the page
   ============================================================ */

.stage { min-width: 0; }

.plate {
  position: relative;
  background: var(--parchment);
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 8px;
}
body[data-register="lab"] .plate {
  background: var(--lab-canvas);
  border-color: var(--lab-rule);
}
.plate img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Placeholder: legible, not broken. Never a spinner (style: avoid). */
.plate__empty {
  text-align: center;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  padding: 20px;
}
body[data-register="lab"] .plate__empty { color: var(--lab-muted); }

.plate__tag {
  position: absolute;
  top: 10px; left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--leather);
  background: rgba(242,235,220,.85);
  padding: 3px 8px;
  border-radius: 2px;
}
body[data-register="lab"] .plate__tag { color: var(--lab-muted); background: rgba(0,0,0,.4); }

.plate__crossfade { animation: crossfade .5s ease both; }
@keyframes crossfade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Field note ---- */
.fieldnote {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: var(--measure);
  margin: 16px 0 4px;
}
.fieldnote__who {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  margin-bottom: 6px;
}

/* ============================================================
   PROMPT RECONSTRUCTION PANEL
   ============================================================ */

.recon {
  margin-top: 28px;
  border: 1px solid var(--rule);
  padding: 22px 24px;
  max-width: var(--measure);
}
body[data-register="lab"] .recon { border-color: var(--lab-rule); }

.recon__label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 4px;
}
body[data-register="lab"] .recon__label { color: var(--lab-muted); }
.recon__hint {
  font-size: 12px;
  color: var(--text-2);
  margin: 0 0 18px;
}

.trait { margin-bottom: 16px; }
.trait__name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 5px;
}
.trait select {
  width: 100%;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--rule);
  padding: 9px 10px;
  border-radius: 3px;
  cursor: pointer;
}
body[data-register="lab"] .trait select {
  background: var(--lab-canvas);
  color: var(--lab-ink);
  border-color: var(--lab-rule);
}
.trait__chosen {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--brass);   /* active trait value: accent moment #2 */
  margin-top: 4px;
}
.trait__chosen::after { content: " ?"; color: var(--text-3); }  /* hypothesis, not fact */

.recon__submit {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--canvas);      /* accent moment #3 */
  background: var(--brass);
  border: 0;
  padding: 11px 20px;
  border-radius: 3px;
  cursor: pointer;
}
.recon__submit:disabled {
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  cursor: not-allowed;
}
.recon__why {
  font-size: 12px;
  color: var(--text-3);
  margin-left: 12px;
}

/* ============================================================
   VERDICT + LAB (register L content)
   ============================================================ */

.verdict { margin-top: 20px; max-width: var(--measure); }
.verdict__head {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 12px;
}
.verdict__head--ok { color: var(--lab-ok); }
.verdict__head--no { color: var(--lab-near); }
.verdict__feedback {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--lab-ink);
  margin: 0 0 16px;
}

.breakdown { border-top: 1px solid var(--lab-rule); }
.bd-row {
  display: grid;
  grid-template-columns: 150px 1fr 1fr 96px;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--lab-rule);
  font-family: var(--mono);
  font-size: 12px;
  align-items: baseline;
}
.bd-row__trait { color: var(--lab-muted); }
.bd-row__sub { color: var(--lab-muted); text-decoration: line-through; }
.bd-row__cor { color: var(--lab-ink); }
.bd-row__status { font-weight: 700; text-align: right; }
.bd-row--ok .bd-row__status { color: var(--lab-ok); }
.bd-row--close .bd-row__status { color: var(--lab-near); }
.bd-row--wrong .bd-row__status { color: var(--lab-bad); }

/* Colour PLUS a word. Never colour alone. */
.bd-row--ok .bd-row__status::after { content: " ✓ MATCH"; }
.bd-row--close .bd-row__status::after { content: " ~ PARTIAL"; }
.bd-row--wrong .bd-row__status::after { content: " ✗ MISS"; }

/* ---- Hotspots: quietest ink, hover/focus only ---- */
.hotspots { position: relative; }
.hotspot {
  position: absolute;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 1.5px solid var(--brass);
  /* Numeral in --text-1, not brass: brass-on-brass measured 1.8:1 at 10px, which
     is unreadable. The BRASS is the ring; the digit is ink. */
  background: rgba(21,26,28,.55);
  color: var(--text-1);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .12s, background .12s, color .12s;
}
.hotspot:hover, .hotspot:focus-visible { background: var(--brass); color: #151A1C; transform: scale(1.12); outline: none; }

.hotspot__callout {
  position: absolute;
  left: 34px; top: -6px;
  width: 260px;
  background: var(--lab-canvas);
  border: 1px solid var(--lab-rule);
  padding: 12px 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 5;
}
.hotspot:hover + .hotspot__callout,
.hotspot:focus-visible + .hotspot__callout { opacity: 1; }
.hotspot__callout h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 6px;
}
.hotspot__callout p {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--lab-ink);
  margin: 0;
}

.lab-back {
  margin-top: 24px;
  background: none;
  border: 1px solid var(--lab-rule);
  color: var(--lab-muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  padding: 9px 16px;
  border-radius: 3px;
  cursor: pointer;
}
.lab-back:hover { color: var(--lab-ink); border-color: var(--lab-muted); }

.lab-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--lab-muted);
  margin-top: 20px;
  letter-spacing: .04em;
}

/* ============================================================
   COLOPHON
   ============================================================ */

.colophon {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 40px 40px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-3);
}
body[data-register="lab"] .colophon { border-top-color: var(--lab-rule); color: var(--lab-muted); }

/* ============================================================
   RESPONSIVE — the phone is the target size
   ============================================================ */

@media (max-width: 720px) {
  .masthead, .desk, .colophon { padding-left: 20px; padding-right: 20px; }
  .desk { grid-template-columns: 1fr; gap: 24px; }
  .specimens { position: static; }
  .bd-row { grid-template-columns: 1fr 1fr; }
  .bd-row__trait { grid-column: 1 / -1; }
  .hotspot__callout { left: 20px; top: 26px; width: 220px; }
  .recon { padding: 16px; }
}

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