/* ==========================================================================
   MMPF 1.0 RC1 — mmpf.evemisslab.com

   Direction: the choice. MMR, MMLC and MLF all record what happened. MMPF is
   the first of the set that has to decide what to do next, before it knows
   what that will cost, and then justify the decision afterwards. So the page
   is built around a selector rather than a ledger.

   Four accents, each with one job, taken from what the runtime actually
   distinguishes:

     --fast    the performance mode's pick: lowest predicted cost
     --sure    the assurance mode's pick: lowest certifiable upper bound
     --oracle  best in hindsight, which neither mode can see at decision time
     --breach  the measured cost exceeded the bound that was declared

   --breach exists because the coverage figure is 93.333%, not 100%. A palette
   with no colour for "the guarantee did not hold" would be quietly claiming
   one that did.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --paper:        #f3efe9;
  --paper-raised: #fbf8f4;
  --paper-sunk:   #e6e1d8;
  --ink:          #1b1714;
  --ink-2:        #55504a;
  --ink-3:        #625c55;
  --rule:         #cbc4b8;
  --hair:         #e0d9cd;

  --fast:   #0b5f7a;
  --sure:   #6d4a12;
  --oracle: #2b6238;
  --breach: #9c3018;

  --fast-wash:   #dbe9ef;
  --sure-wash:   #efe5cf;
  --oracle-wash: #dceadf;
  --breach-wash: #f2ded7;

  --display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --prose: "Petrona", Georgia, serif;
  --mono: "Sometype Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  --measure: 36rem;
  --shell: 72rem;
  --gap: clamp(2.75rem, 6vw, 4.5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #16130f;
    --paper-raised: #1e1a15;
    --paper-sunk:   #100d0a;
    --ink:          #ece7df;
    --ink-2:        #aaa49a;
    --ink-3:        #99938a;
    --rule:         #3a342c;
    --hair:         #272219;

    --fast:   #5cbcd8;
    --sure:   #d6ac52;
    --oracle: #63bd7c;
    --breach: #e5836a;

    --fast-wash:   #10262e;
    --sure-wash:   #2b2311;
    --oracle-wash: #132a1a;
    --breach-wash: #2e1913;
  }
}

:root[data-theme="dark"] {
  --paper:        #16130f;
  --paper-raised: #1e1a15;
  --paper-sunk:   #100d0a;
  --ink:          #ece7df;
  --ink-2:        #aaa49a;
  --ink-3:        #99938a;
  --rule:         #3a342c;
  --hair:         #272219;

  --fast:   #5cbcd8;
  --sure:   #d6ac52;
  --oracle: #63bd7c;
  --breach: #e5836a;

  --fast-wash:   #10262e;
  --sure-wash:   #2b2311;
  --oracle-wash: #132a1a;
  --breach-wash: #2e1913;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--prose);
  font-size: 1.0625rem;
  line-height: 1.64;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

html[lang="zh-Hant"] body {
  font-family: "Petrona", "Noto Serif TC", Georgia, serif;
  line-height: 1.85;
}

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

code, var { font-family: var(--mono); font-size: 0.84em; font-style: normal; }
em { font-style: italic; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 0.75rem 1rem; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 0.75rem;
}
.skip:focus { left: 0; }

/* --- nameplate ----------------------------------------------------------- */

.plate {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 91%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.plate-in {
  max-width: var(--shell); margin: 0 auto; padding: 0.62rem 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem;
}
.plate-mark {
  font-family: var(--display); font-weight: 700; font-size: 0.9375rem;
  letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 0.4rem;
}
.plate-ver { font-family: var(--mono); font-size: 0.625rem; font-weight: 400; color: var(--ink-3); }

.plate-nav { display: flex; gap: 0.9rem; order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
.plate-nav::-webkit-scrollbar { display: none; }
@media (min-width: 64rem) { .plate-nav { order: 0; flex: 0 1 auto; margin-left: auto; } }

.plate-link {
  font-family: var(--mono); font-size: 0.6875rem; text-decoration: none;
  color: var(--ink-2); white-space: nowrap; padding-bottom: 0.12rem;
  border-bottom: 1.5px solid transparent;
}
.plate-link:hover { color: var(--ink); }
.plate-link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--fast); }

.plate-tools { display: flex; gap: 0.45rem; align-items: center; flex-shrink: 0; margin-left: auto; }
@media (min-width: 64rem) { .plate-tools { margin-left: 0; } }

.plate-btn {
  font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-2);
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.25rem 0.5rem; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.plate-btn:hover { color: var(--ink); border-color: var(--ink-2); }

/* --- shell and masthead --------------------------------------------------- */

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: 1.5rem; }

.mast { padding-block: clamp(2.5rem, 7vw, 4.25rem) 0; }

.mast-eyebrow {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 1.2rem;
}
.mast-display {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.95rem, 5.2vw, 3.5rem);
  line-height: 1.05; letter-spacing: -0.028em; margin: 0;
  max-width: 20ch; text-wrap: balance;
}
html[lang="zh-Hant"] .mast-display {
  font-family: "Noto Sans TC", var(--display); letter-spacing: -0.005em; line-height: 1.2;
}
.mast-stand { max-width: var(--measure); margin: 1.5rem 0 0; font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); }
html[lang="zh-Hant"] .mast-stand { line-height: 1.85; }

/* --- the chooser ---------------------------------------------------------- */

.chooser {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  border: 1px solid var(--rule);
  background: var(--paper-raised);
}

.ch-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem;
  padding: 0.8rem 1.15rem; border-bottom: 1px solid var(--rule); background: var(--paper-sunk);
}
.ch-case { display: flex; align-items: baseline; gap: 0.5rem; }
.ch-key {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.ch-val { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; }

.ch-modes { display: flex; gap: 0; margin-left: auto; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.ch-mode {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em;
  background: none; border: 0; color: var(--ink-2); cursor: pointer;
  padding: 0.32rem 0.75rem; line-height: 1.2;
}
.ch-mode + .ch-mode { border-left: 1px solid var(--rule); }
.ch-mode[aria-pressed="true"] { color: var(--paper); background: var(--tone, var(--ink)); }
.ch-mode[data-mode="performance"][aria-pressed="true"] { background: var(--fast); }
.ch-mode[data-mode="assurance"][aria-pressed="true"] { background: var(--sure); }

.ch-body { padding: 1.15rem 1.15rem 1.25rem; }

.ch-pick { display: grid; gap: 0.35rem; }
.ch-picklabel {
  font-family: var(--mono); font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
}
.ch-route {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.25rem, 3.6vw, 2rem); letter-spacing: -0.02em;
  line-height: 1.12; overflow-wrap: anywhere;
  transition: color 160ms ease;
}
.chooser[data-mode="performance"] .ch-route { color: var(--fast); }
.chooser[data-mode="assurance"] .ch-route { color: var(--sure); }

.ch-why { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); max-width: 42rem; }

.ch-nums { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin-top: 1.1rem; background: var(--hair); border: 1px solid var(--hair); }
@media (min-width: 40rem) { .ch-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ch-num { background: var(--paper-raised); padding: 0.7rem 0.85rem; display: grid; gap: 0.25rem; }
.ch-numk {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3);
}
.ch-numv { font-family: var(--mono); font-size: 1rem; font-weight: 500; }
.ch-num[data-tone="oracle"] .ch-numv { color: var(--oracle); }
.ch-num[data-tone="breach"] .ch-numv { color: var(--breach); }

.ch-verdict {
  margin-top: 1.05rem; padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--oracle); background: var(--oracle-wash);
  font-size: 0.9375rem; display: flex; gap: 0.75rem; align-items: baseline;
}
.ch-verdict[data-covered="false"] { border-left-color: var(--breach); background: var(--breach-wash); }
.ch-vmark {
  font-family: var(--mono); font-weight: 600; font-size: 0.5625rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--oracle); flex-shrink: 0;
}
.ch-verdict[data-covered="false"] .ch-vmark { color: var(--breach); }
.ch-vtext { margin: 0; }

.ch-foot {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 1.15rem; border-top: 1px solid var(--rule); background: var(--paper-sunk);
}
.ch-ticks { display: flex; gap: 0.3rem; margin-right: auto; }
.ch-tick {
  width: 1.5rem; height: 0.45rem; padding: 0; border: 1px solid var(--rule);
  border-radius: 1px; background: none; cursor: pointer;
}
.ch-tick[aria-selected="true"] { background: var(--ink-2); border-color: var(--ink-2); }
.ch-tick:hover { border-color: var(--ink-2); }
.ch-step {
  font-family: var(--mono); font-size: 0.6875rem; background: none;
  border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-2);
  padding: 0.2rem 0.55rem; cursor: pointer;
}
.ch-step:hover { color: var(--ink); border-color: var(--ink-2); }

.ch-caption { margin: 0.85rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-2); max-width: 46rem; }

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

.body { padding-block: var(--gap) clamp(2.75rem, 6vw, 4.25rem); }
.body-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
@media (min-width: 64rem) { .body-grid { grid-template-columns: 11rem minmax(0, 1fr); gap: 3.5rem; } }

.toc { display: none; }
@media (min-width: 64rem) {
  .toc { display: block; position: sticky; top: 5rem; align-self: start; border-top: 2px solid var(--ink); padding-top: 0.7rem; }
}
.toc-title {
  font-family: var(--mono); font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.8rem;
}
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.toc-link {
  font-family: var(--mono); font-size: 0.6875rem; line-height: 1.4;
  color: var(--ink-2); text-decoration: none; display: block;
  border-left: 2px solid transparent; padding-left: 0.6rem; margin-left: -0.62rem;
}
.toc-link:hover { color: var(--ink); }
.toc-link.is-here { color: var(--ink); border-left-color: var(--fast); }

.flow > * + * { margin-top: 1.05rem; }
.flow > .h2 { margin-top: var(--gap); }
.flow > .h2:first-child { margin-top: 0; }

.h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.1875rem, 2.6vw, 1.5rem);
  letter-spacing: -0.022em; line-height: 1.22;
  margin-bottom: 1.15rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--ink);
  scroll-margin-top: 5rem;
}
html[lang="zh-Hant"] .h2 { font-family: "Noto Sans TC", var(--display); letter-spacing: 0; }

.p { margin: 0; max-width: var(--measure); }

.list { margin: 0; padding: 0; list-style: none; max-width: var(--measure); }
.list > li { position: relative; padding-left: 1.35rem; margin-top: 0.5rem; font-size: 0.9875rem; }
.list > li:first-child { margin-top: 0; }
.list > li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 0.55rem; height: 1.5px; background: var(--ink-3);
}

/* --- isnt ----------------------------------------------------------------- */

.isnt-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); max-width: 50rem; }
.isnt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem 0.8rem; align-items: baseline;
        padding-block: 0.68rem; border-bottom: 1px solid var(--hair); }
@media (min-width: 46rem) { .isnt { grid-template-columns: minmax(0, 1fr) 1.7rem minmax(0, 1fr); } }
.isnt-a { font-size: 0.9375rem; line-height: 1.5; }
.isnt-op { font-family: var(--mono); font-size: 0.875rem; color: var(--breach); text-align: center; user-select: none; }
@media (max-width: 45.99rem) {
  .isnt-op { text-align: left; font-size: 0.75rem; }
  .isnt-op::after { content: " is not"; font-family: var(--prose); color: var(--ink-3); }
  html[lang="zh-Hant"] .isnt-op::after { content: " 不是"; }
}
.isnt-b { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }

/* --- register ------------------------------------------------------------- */

.reg-wrap { overflow-x: auto; border: 1px solid var(--rule); }
.reg { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; }
.reg th {
  text-align: left; font-weight: 600; font-size: 0.5625rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-3); padding: 0.62rem 0.9rem;
  background: var(--paper-sunk); border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.reg td { padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.reg tbody tr:last-child td { border-bottom: 0; }
.reg b { font-weight: 600; }
.reg-sure td { border-top: 2px solid var(--rule); background: var(--oracle-wash) !important; color: var(--oracle); font-weight: 600; }

/* --- stamp ---------------------------------------------------------------- */

.stamp {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem;
  border-left: 3px solid var(--rule); padding: 0.78rem 0 0.82rem 0.95rem;
  max-width: 46rem; font-size: 0.9375rem;
}
@media (min-width: 42rem) { .stamp { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.9rem; align-items: baseline; } }
.stamp-mark { font-family: var(--mono); font-weight: 600; font-size: 0.5625rem; letter-spacing: 0.15em; text-transform: uppercase; }
.stamp-text { margin: 0; }
.stamp[data-state="sure"]   { border-left-color: var(--oracle); background: var(--oracle-wash); }
.stamp[data-state="sure"] .stamp-mark { color: var(--oracle); }
.stamp[data-state="fast"]   { border-left-color: var(--fast); background: var(--fast-wash); }
.stamp[data-state="fast"] .stamp-mark { color: var(--fast); }
.stamp[data-state="breach"] { border-left-color: var(--breach); background: var(--breach-wash); }
.stamp[data-state="breach"] .stamp-mark { color: var(--breach); }

/* --- defs, code ----------------------------------------------------------- */

.defs { margin: 0; border-top: 1px solid var(--rule); max-width: 50rem; }
.defs-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.18rem 1.3rem;
            padding-block: 0.68rem; border-bottom: 1px solid var(--hair); }
@media (min-width: 42rem) { .defs-row { grid-template-columns: 12rem minmax(0, 1fr); } }
.defs-term { font-family: var(--mono); font-weight: 500; font-size: 0.75rem; line-height: 1.5; padding-top: 0.1rem; }
.defs-desc { margin: 0; font-size: 0.9375rem; line-height: 1.55; }

.code { margin-top: 1.3rem; border: 1px solid var(--rule); background: var(--paper-sunk); overflow-x: auto; }
.code-tag {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3); padding: 0.42rem 0.9rem; border-bottom: 1px solid var(--hair);
  background: var(--paper-raised); position: sticky; left: 0;
}
.code pre { margin: 0; padding: 0.9rem; font-family: var(--mono); font-size: 0.75rem; line-height: 1.7; white-space: pre; }

/* --- drift states --------------------------------------------------------- */

.states { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; max-width: 46rem; }
.states > li {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em;
  border: 1px solid var(--rule); border-radius: 2px; padding: 0.3rem 0.6rem;
  background: var(--paper-raised);
}
.states > li:not(:last-child)::after { content: " \2192"; color: var(--ink-3); margin-left: 0.5rem; }

/* --- rc reasons ----------------------------------------------------------- */

.rc { counter-reset: rc; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); max-width: 48rem; }
.rc > li {
  counter-increment: rc;
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.9rem;
  padding-block: 0.75rem; border-bottom: 1px solid var(--hair); font-size: 0.9375rem; align-items: baseline;
}
.rc > li::before {
  content: counter(rc); font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3);
}
.rc-closed { display: block; margin-top: 0.3rem; font-family: var(--mono); font-size: 0.625rem;
             letter-spacing: 0.06em; color: var(--oracle); }
.rc > li[data-closed="true"] { color: var(--ink-2); }
.rc > li[data-closed="true"]::before { color: var(--oracle); }

/* --- arc ------------------------------------------------------------------ */

.arc { margin: 0; border-top: 2px solid var(--ink); max-width: 48rem; }
.arc-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem;
           padding-block: 0.72rem; border-bottom: 1px solid var(--hair); align-items: baseline; }
.arc-v { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--ink-2); }
.arc-row:last-child { border-bottom: 2px solid var(--ink); }
.arc-row:last-child .arc-v { color: var(--fast); }
.arc-text { margin: 0; font-size: 0.9375rem; line-height: 1.55; }

/* --- footer --------------------------------------------------------------- */

.foot { border-top: 1px solid var(--rule); background: var(--paper-sunk); padding-block: 2.25rem 2.75rem; }
.foot-grid { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: minmax(0, 1fr) 15rem; gap: 3rem; } }
.foot-note { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-2);
             max-width: 42rem; border-left: 3px solid var(--sure); padding-left: 1rem; }
.foot-meta { display: grid; gap: 0.45rem; align-content: start; }
.foot-line { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); }
.foot-line a { color: var(--ink-2); }

.gone { padding-block: clamp(4rem, 13vw, 8rem); }