/* Mastery scoring — visual system
 *
 * Direction: a measuring instrument on a drafting table. Cool paper, technical
 * ink, and one engraved index line in brass. The signature is the mastery rule:
 * every estimate is drawn as a band on a [0,1] track rather than printed as a
 * number, because the paper's central caution is that the number alone
 * overstates what the data supports.
 *
 * Headings are set in spaced monospace capitals — instrument labelling, not
 * editorial display type.
 */

:root {
  --paper:  #edf0f3;   /* drafting paper, cool                        */
  --sheet:  #f7f9fa;   /* raised surface for panels                   */
  --ink:    #16202b;   /* technical pen                               */
  --ink-2:  #56646f;   /* secondary text                              */
  --rule:   #c2cbd4;   /* grid and hairlines                          */
  --band:   #a9bed0;   /* uncertainty band                            */
  --mark:   #b06a00;   /* engraved index line — the one accent        */
  --flag:   #8c2f26;   /* boundary solutions only                     */

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo,
          Consolas, monospace;
  --sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --gap: clamp(1.5rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 var(--gap) 4rem;
  background: var(--paper);
  /* faint drafting grid, 8px */
  background-image:
    linear-gradient(to right, rgba(22,32,43,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,32,43,.035) 1px, transparent 1px);
  background-size: 8px 8px;
  color: var(--ink);
  font: 16px/1.6 var(--sans);
}

main, .masthead, footer { max-width: 62rem; margin-inline: auto; }

a { color: var(--ink); text-decoration-color: var(--mark); text-underline-offset: 2px; }
a:hover { color: var(--mark); }

:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

/* ── masthead ─────────────────────────────────────────────────────── */

.masthead { padding: 3.5rem 0 2.5rem; }

.eyebrow {
  margin: 0 0 1.25rem;
  font: 600 .7rem/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.masthead h1 {
  margin: 0 0 2rem;
  max-width: 22ch;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.thesis {
  display: grid;
  gap: 1.25rem 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  padding: 1.75rem;
  background: var(--sheet);
  border: 1px solid var(--rule);
}
@media (min-width: 46rem) { .thesis { grid-template-columns: 1fr 1fr; align-items: center; } }

.thesis-text { margin: 0; font-size: .95rem; color: var(--ink-2); }
.thesis-text b { color: var(--ink); font-weight: 600; }

.provenance {
  margin: 1.25rem 0 0;
  font: .78rem/1.6 var(--mono);
  color: var(--ink-2);
}

/* ── the mastery rule (signature) ─────────────────────────────────── */

.rule-track {
  position: relative;
  height: 1.6rem;
  background: linear-gradient(var(--rule), var(--rule)) left center / 100% 1px no-repeat;
}
.rule-track::before, .rule-track::after {
  content: ""; position: absolute; top: 25%; bottom: 25%; width: 1px;
  background: var(--ink);
}
.rule-track::before { left: 0; } .rule-track::after { right: 0; }

.rule-band {
  position: absolute; top: 33%; bottom: 33%;
  background: var(--band);
}
.rule-mark {
  position: absolute; top: 8%; bottom: 8%; width: 2px;
  margin-left: -1px;
  background: var(--mark);
}

.rule-value {
  position: absolute; bottom: 100%; transform: translateX(-50%);
  margin-bottom: .15rem;
  font: 600 .72rem/1 var(--mono); color: var(--mark); white-space: nowrap;
}

.rule-ends {
  display: flex; justify-content: space-between;
  margin-top: .35rem;
  font: .68rem/1 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-2);
}

/* ── steps ────────────────────────────────────────────────────────── */

.step { padding: 2.5rem 0; border-top: 1px solid var(--rule); }

.step h2 {
  display: flex; align-items: baseline; gap: .75rem;
  margin: 0 0 .75rem;
  font: 600 .82rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.step-n {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border: 1px solid var(--mark);
  color: var(--mark);
  font-size: .78rem;
}

.lede { margin: 0 0 1.5rem; max-width: 68ch; color: var(--ink-2); font-size: .95rem; }

.row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-bottom: 1.25rem;
}

/* ── controls ─────────────────────────────────────────────────────── */

textarea#raw {
  width: 100%; min-height: 9rem; padding: .9rem 1rem;
  background: var(--sheet);
  border: 1px solid var(--rule);
  color: var(--ink);
  font: .84rem/1.5 var(--mono);
  resize: vertical;
}
textarea#raw::placeholder { color: #9aa6b1; }

button {
  padding: .55rem 1.1rem;
  background: var(--ink); border: 1px solid var(--ink);
  color: var(--paper);
  font: 600 .78rem/1.4 var(--mono);
  letter-spacing: .06em;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--mark); border-color: var(--mark); }
button:disabled { opacity: .35; cursor: not-allowed; }

button.ghost { background: transparent; color: var(--ink); }
button.ghost:hover:not(:disabled) { background: transparent; color: var(--mark); border-color: var(--mark); }

.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file span {
  display: inline-block; padding: .55rem 1.1rem;
  border: 1px solid var(--ink);
  font: 600 .78rem/1.4 var(--mono); letter-spacing: .06em;
  cursor: pointer;
}
.file span:hover { color: var(--mark); border-color: var(--mark); }
.file input:focus-visible + span { outline: 2px solid var(--mark); outline-offset: 2px; }

fieldset.choice { margin: 0; padding: .35rem .8rem .5rem; border: 1px solid var(--rule); }
fieldset.choice legend { padding: 0 .35rem; font: .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
fieldset.choice label { margin-right: .9rem; font-size: .85rem; white-space: nowrap; }

label.num { font: .68rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
label.num input {
  width: 3.5rem; margin-left: .5rem; padding: .4rem .5rem;
  background: var(--sheet); border: 1px solid var(--rule);
  color: var(--ink); font: .85rem var(--mono);
}

.status { font: .78rem/1.5 var(--mono); color: var(--ink-2); }
.status.err { color: var(--flag); }

/* ── tables ───────────────────────────────────────────────────────── */

table.data {
  width: 100%; border-collapse: collapse;
  font: .82rem/1.5 var(--mono);
  margin-bottom: 1.5rem;
}
table.data th, table.data td {
  padding: .45rem .6rem; text-align: right;
  border-bottom: 1px solid var(--rule);
}
table.data th {
  font-weight: 600; font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-2); white-space: nowrap;
}
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data tbody tr:hover { background: var(--sheet); }
table.data td.flag { color: var(--flag); }
table.data td.note { text-align: left; font-size: .72rem; color: var(--ink-2); }

.roster .rule-col { width: 42%; }
.roster td.rule-cell { padding-block: .3rem; }
.roster .rule-track { height: 1.1rem; }

/* one orchestrated moment: the bands grow in when results land */
.roster .rule-band { transform-origin: left center; animation: grow .45s ease-out both; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .roster .rule-band { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ── plots ────────────────────────────────────────────────────────── */

.plots { display: grid; gap: 1.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 46rem) { .plots { grid-template-columns: 1fr 1fr; } }
.plots figure { margin: 0; }
.plots figcaption {
  margin-bottom: .5rem;
  font: .68rem/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}
.plots svg { width: 100%; height: auto; background: var(--sheet); border: 1px solid var(--rule); }

/* ── warnings: annotations on a drawing ───────────────────────────── */

.notes:empty::after {
  content: "Nothing to flag yet — calibrate first.";
  display: block; font: .82rem var(--mono); color: var(--ink-2);
}
.note-item {
  padding: .9rem 1rem .9rem 1.4rem;
  margin-bottom: .75rem;
  background: var(--sheet);
  border-left: 3px solid var(--mark);
  font-size: .88rem;
}
.note-item.severe { border-left-color: var(--flag); }
.note-item b { display: block; margin-bottom: .2rem; font: 600 .7rem/1.4 var(--mono); letter-spacing: .1em; }
.note-item.ok { border-left-color: var(--rule); color: var(--ink-2); }

/* ── footer ───────────────────────────────────────────────────────── */

footer { padding-top: 2.5rem; border-top: 1px solid var(--rule); }
footer p { max-width: 68ch; color: var(--ink-2); font-size: .88rem; }
.colophon { font: .78rem var(--mono); }

.caption-note {
  margin: 1rem 0 0; max-width: 68ch;
  font-size: .82rem; color: var(--ink-2);
}

.refs {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.refs-head {
  margin: 0 0 .6rem;
  font: 600 .68rem/1 var(--mono);
  letter-spacing: .14em;
  color: var(--ink-2);
}
.ref {
  margin: 0 0 .5rem;
  padding-left: 1.6rem;
  text-indent: -1.6rem;          /* APA hanging indent */
  max-width: 72ch;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.ref a { word-break: break-all; }