/* A-Team site — direction B "mission file".
   Deliberately a different information architecture, not a recolour of direction A:
   one narrow column, monospace-dominant, typed-fact register, tables instead of cards.
   PALETTE: Face's kit, 2026-10-27. One paper stock and one ink across both directions —
   the difference between A and B is layout and type, never hue. Saturation means a
   graded claim: --verify passed, --open named-but-open, --fail failed or blocked.
   Re-run the contrast snippet in README.md after any change.
   NAMES MATCH DIRECTIONS A AND B: --ink-soft is the same #43505a in both sheets, on purpose,
   so nobody has to remember which page calls the second voice what. */

:root {
  --ink:    #0e1418;
  --ink-soft:  #43505a;
  --paper:  #f7f4ee;
  --rule:   #cfc7b6;
  --verify: #14574a;
  --open:   #7a4a00;
  --fail:   #8d2f16;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --serif: Iowan Old Style, "Palatino Linotype", Palatino, Georgia, serif;
  --col: 54rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 clamp(1rem, 4vw, 2.4rem);
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.62 var(--mono);
}

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px;
    text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 0.5rem; top: 0.5rem; background: var(--ink); color: var(--paper); padding: 0.5rem 0.8rem; z-index: 9; }

/* ------------------------------------------------------------------ head */

.file-head {
  max-width: var(--col); margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 0 0.9rem;
  border-bottom: 3px double var(--ink);
}
.stamp {
  font: 700 0.66rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  border: 2px solid var(--ink); color: var(--ink);
  padding: 0.32rem 0.45rem; transform: rotate(-2.5deg);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; }
.reticle {
  /* 2-unit stroke in a 48-unit box: 1.27 px when the box renders 30.4 px at the default root.
     Below a 20 px box the ring and the ticks blur into a smudge, so the size has a hard floor
     and the box stays square. It shrinks with the root until the floor catches it: a 22.8 px
     box / 0.95 px stroke at a 12 px root, pinned at 20 px only below a 10.53 px root, which
     is where 0.83 px lives. */
  width: max(20px, 1.9rem); height: auto; aspect-ratio: 1 / 1; display: block;
}
.wordmark { font: 700 0.95rem/1 var(--mono); letter-spacing: 0.14em; }
.wordmark-sub { font-weight: 400; color: var(--ink-soft); letter-spacing: 0.08em; }

/* ------------------------------------------------------------------ nav */

.file-nav {
  max-width: var(--col); margin: 0 auto; padding: 0.7rem 0 0.6rem;
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem;
  border-bottom: 1px solid var(--rule);
  font: 700 0.68rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.file-nav a { color: var(--ink-soft); text-decoration: none; padding: 0.3rem 0; }
.file-nav a:hover, .file-nav a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------ body */

main { max-width: var(--col); margin: 0 auto; }

.sheet { padding: 2rem 0; border-bottom: 1px solid var(--rule); }
.sheet:last-child { border-bottom: 0; }

h1 {
  font: 400 clamp(2rem, 1.2rem + 3.4vw, 3.4rem)/1.08 var(--serif);
  letter-spacing: -0.01em;
  margin: 0 0 1.4rem;
}
h2 {
  font: 700 0.78rem/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 1.2rem;
}
p { margin: 0 0 0.9rem; }

/* the typed-fact register: label in the margin, fact in the column */
.spec { margin: 0; display: grid; grid-template-columns: 11rem 1fr; gap: 0.7rem 1.2rem; }
.spec dt {
  font: 700 0.72rem/1.7 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 0.45rem;
}
.spec dd { margin: 0; border-top: 1px solid var(--rule); padding-top: 0.45rem; }

/* ------------------------------------------------------------------ tables */

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
caption {
  text-align: left; font: 700 0.7rem/1 var(--mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); padding-bottom: 0.55rem;
}
th, td { text-align: left; padding: 0.6rem 1rem 0.6rem 0; border-top: 1px solid var(--rule); vertical-align: top; }
thead th {
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
}
tbody th { font-weight: 700; white-space: nowrap; }
td { color: var(--ink-soft); }
td.ok, .ok { color: var(--verify); }
.grade-pass { color: var(--verify); }
.grade-open { color: var(--open); }
.grade-fail { color: var(--fail); }
td.ok::before { content: "✓ "; color: var(--verify); font-weight: 700; }
td.bad::before { content: "✗ "; color: var(--fail); font-weight: 700; }
td.bad { color: var(--fail); }

/* ------------------------------------------------------------------ sequence */

.sequence { list-style: none; margin: 0; padding: 0; }
.sequence li {
  display: grid;
  grid-template-columns: 2.6rem 12rem 1fr;
  grid-template-areas: "n name who" ". what what";
  gap: 0.15rem 1rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--rule);
}
.sequence .n { grid-area: n; font: 700 0.8rem/1.6 var(--mono); color: var(--ink-soft); }
.sequence strong { grid-area: name; font-size: 0.95rem; }
.sequence .who { grid-area: who; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding-top: 0.15rem; }
.sequence .what { grid-area: what; color: var(--ink-soft); font-size: 0.88rem; }

.verdict-note {
  margin: 1.3rem 0 0; padding: 0.9rem 1rem;
  background: var(--paper); border-left: 3px solid var(--ink);
  font-size: 0.88rem; color: var(--ink-soft);
}
.verdict-note strong { color: var(--ink); }

.foot-note { font-size: 0.82rem; color: var(--ink-soft); }
.note-list { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.9rem; }
.note-list a { font-weight: 700; }
.log a, .roster a { color: inherit; }

.site-foot {
  max-width: var(--col); margin: 0 auto; padding: 1.4rem 0 3rem;
  border-top: 2px solid var(--ink); font-size: 0.86rem; color: var(--ink-soft);
}
.site-foot p { margin: 0 0 0.5rem; }

@media (max-width: 40rem) {
  .spec { grid-template-columns: 1fr; gap: 0.15rem; }
  .spec dt { border-top: 0; padding-top: 0.7rem; }
  .spec dd { border-top: 1px solid var(--rule); }
  .sequence li { grid-template-columns: 2.2rem 1fr; grid-template-areas: "n name" "n who" ". what"; }
  table { font-size: 0.86rem; }
  th, td { padding-right: 0.7rem; }
  /* A four-column roster cannot survive a 375px viewport: it scrolls sideways and the
     right-hand column is unreadable. Stack the rows and carry the column name instead. */
  .roster thead, .log thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .roster tr, .log tr { display: block; padding: 0.55rem 0; border-top: 1px solid var(--rule); }
  .roster th, .roster td, .log th, .log td { display: block; border: 0; padding: 0 0 0.2rem; }
  .roster tbody th, .log tbody th { font-size: 0.95rem; }
  .roster td::before, .log td::before {
    content: attr(data-label); display: block;
    font: 700 0.64rem/1.7 var(--mono); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-soft);
  }
  .stamp { display: none; }
}

@media print {
  body { background: #fff; }
  .sheet { break-inside: avoid; }
}