/* security.css — threat-model figures, page index and section rail for the
   security page. Extracted from an inline <style> block: the site CSP is 'self',
   so page CSS ships as a file. Everything is wrapped in @layer page so the
   site's @layer utilities type floor still wins over it. */

@layer page {
  /* Section rail, copied verbatim from home.css: this page does not load
     that sheet, and the rail should not look like a second thing. */
  .section-rail { display: none; }
  @media (min-width: 1280px) {
    .section-rail {
      display: grid; gap: var(--space-4);
      position: fixed; top: 50%; transform: translateY(-50%);
      left: var(--space-6); width: 8px; justify-items: start; z-index: 50;
    }
    .section-rail a {
      position: relative; display: block; width: 8px; height: 8px;
      border-radius: var(--radius-pill); background: var(--border);
      text-decoration: none;
      transition: background var(--transition-fast), transform var(--transition-fast);
    }
    .section-rail a:hover,
    .section-rail a:focus-visible { background: var(--accent); transform: scale(1.35); }
    .section-rail a[aria-current="true"] { background: var(--accent); }
    .section-rail a > span {
      position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
      white-space: nowrap; font-family: var(--font-mono); font-size: 11px;
      letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
      opacity: 0; pointer-events: none; transition: opacity var(--transition-fast);
    }
    .section-rail a:hover > span,
    .section-rail a:focus-visible > span { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .section-rail a { transition: none; }
    .section-rail a:hover { transform: none; }
  }

  /* On-this-page index. Hairline rules rather than a filled card: the page
     already spends its panels on the figures. */
  .page-index {
    margin: 0 0 var(--space-12);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .page-index-label {
    margin: 0 0 var(--space-4);
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
  }
  .page-index > ol {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-2);
  }
  .page-index li { margin: 0; }
  .page-index ul {
    list-style: none; margin: var(--space-2) 0 var(--space-3); padding: 0 0 0 var(--space-4);
    display: grid; gap: var(--space-1);
    border-left: 1px solid var(--border);
  }
  .page-index ul a { color: var(--text-muted); }
  .page-index ul a:hover,
  .page-index ul a:focus-visible { color: var(--accent); }
}
/* Reading column aligned to the figures. Same expression, so the two right
   edges track each other at every width. */
.page-security .prose { max-width: min(1152px, calc(100vw - 64px)); }

.tm-fig {
  width: min(1152px, calc(100vw - 64px));
  max-width: none;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  margin: var(--space-8) 0 var(--space-6);
}
.tm-fig p, .tm-fig li { max-width: none; text-align: left; hyphens: manual; }
.tm-fig code, .tm-table code { font-size: 1em; }
.tm-lab {
  font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-3);
}
.tm-cap {
  font-size: 13px; line-height: 1.6; color: var(--text-muted);
  margin: var(--space-6) 0 0; max-width: 78ch;
}
.tm-mono { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; color: var(--accent-link); margin: 0 0 var(--space-2); }
.tm-num  { font-family: var(--font-mono); font-size: 17px; color: var(--accent-link); margin: 0; }
.tm-tag  { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: 0.04em; line-height: 1.45; color: var(--text-muted); margin: 0; }
.tm-fig h3 { font-family: var(--font-display); font-weight: 500; font-size: 19px; margin: 0 0 var(--space-2); }
.tm-fig h4 { font-family: var(--font-display); font-weight: 500; font-size: 20px; margin: 0 0 var(--space-3); }

/* V1 — five boundaries on a timeline */
.tm-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.tm-slot { border-top: 2px solid var(--accent); padding-top: var(--space-3); }
.tm-slot p:not([class]) { font-size: 13px; line-height: 1.55; margin: 0 0 var(--space-2); }
.tm-slot .tm-not { color: var(--text-muted); font-size: var(--text-meta); line-height: 1.5; margin: 0; }
/* The substrate the boundaries rest on: not a sixth boundary, the property
   that makes the five above checkable at all. */
.tm-base {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--space-6);
  align-items: baseline; margin-top: var(--space-4);
  background: var(--surface-offset); border-top: 2px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
}
.tm-base p { margin: 0; }
.tm-base .tm-lab { margin: 0; color: var(--accent-link); }
.tm-base .tm-base-copy { font-size: 14px; line-height: 1.55; color: var(--text); }
@media (max-width: 900px) { .tm-base { grid-template-columns: 1fr; gap: var(--space-2); } }

.tm-foot { display: flex; gap: var(--space-3); align-items: baseline; margin-top: var(--space-6);
           padding-top: var(--space-4); border-top: 1px solid var(--border); }
.tm-foot span { font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* V2 — four plates */
.tm-table { display: block; width: min(1152px, calc(100vw - 64px)); border-collapse: collapse; }
.tm-table tbody { display: flex; flex-direction: column; gap: var(--space-2); }
.tm-table th, .tm-table td:not(.tm-right) { padding: 0; text-align: left; vertical-align: top;
                             font-weight: 400; border: 0; background: none; }
.tm-table td.tm-right { padding: 0; vertical-align: top; font-weight: 400;
                        border: 0; background: none; }
.tm-plate { display: grid; grid-template-columns: 118px 1fr 205px; gap: var(--space-4);
            align-items: center; background: var(--surface-offset);
            border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.tm-plate > .tm-layer { grid-column: 1; grid-row: 1 / 3; }
.tm-plate > .tm-mech  { grid-column: 2; grid-row: 1; }
.tm-plate > .tm-stops { grid-column: 2; grid-row: 2; }
.tm-plate > .tm-right { grid-column: 3; grid-row: 1 / 3; }
.tm-plate p:not([class]) { font-size: 13.5px; line-height: 1.5; margin: 0; }
.tm-plate-authoritative { border-left: 3px solid var(--accent); }
.tm-plate-soft { border-left: 3px solid var(--border); }
    .tm-plate-name { font-family: var(--font-display); font-size: 20px; line-height: 1.2; margin: 0; display: block; }
.tm-layer .tm-lab { display: block; margin-bottom: var(--space-1); }
.tm-mech .tm-mono { display: block; margin: 0; }
.tm-stops { font-size: 14px; line-height: 1.5; }
.tm-right .tm-chip { display: inline-block; }
.tm-right .tm-tag { display: block; margin-top: var(--space-2); }
.tm-chip { font-family: var(--font-mono); font-size: var(--text-meta); border-radius: var(--radius-pill);
           padding: 4px 10px; white-space: nowrap; }
.tm-chip-ok   { color: var(--status-pass); border: 1px solid var(--status-pass); }
.tm-chip-warn { color: var(--text-muted); border: 1px solid var(--border); }
.tm-chip-key  { color: #141311; background: var(--accent); }
.tm-right { text-align: right; }
.tm-right .tm-tag { margin-top: var(--space-2); }
.tm-arrow { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: 0.05em;
            color: var(--text-muted); text-align: center; margin: var(--space-6) 0 0; }

/* V3 — checks. A hairline list, not nine boxes: one short line each, so a
   card apiece was mostly padding and forced the text down to card size. */
.tm-checks { display: block; }
.tm-check {
  display: grid; grid-template-columns: 34px 1fr 210px; gap: var(--space-4);
  align-items: baseline; padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border); border-left: 2px solid transparent;
}
.tm-check:last-child { border-bottom: 0; }
.tm-check p:not([class]) { font-size: 16px; line-height: 1.45; margin: 0; }
.tm-check .tm-num { margin: 0; }
.tm-check .tm-tag { text-align: right; }
.tm-check-key { border-left-color: var(--accent); }
.tm-check-key .tm-tag { color: var(--accent-link); }
.tm-assert .tm-num { color: var(--text-muted); }

/* V4 — where secrets live */
.tm-zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.tm-zone { background: var(--surface-offset); border: 1px solid var(--border);
           border-radius: var(--radius-md); padding: var(--space-6); }
.tm-zone ul { margin: 0 0 var(--space-4); padding-left: 18px; }
.tm-zone li { font-size: 13.5px; line-height: 1.7; margin: 0; }
.tm-zone p:not([class]) { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin: 0 0 var(--space-3); }
.tm-zone .tm-verdict { font-family: var(--font-mono); font-size: var(--text-meta); margin: 0; }
.tm-zone-ram { box-shadow: 0 0 40px var(--glow); }
.tm-zone-plain { border-color: var(--status-fail); }
.tm-zone-plain .tm-lab, .tm-zone-plain .tm-verdict { color: var(--status-fail); }
.tm-zone .tm-lab { color: var(--accent-link); }
.tm-verdict-ok { color: var(--status-pass); }

/* V5 — supply chain */
.tm-chain { display: grid; grid-template-columns: 1fr 230px 1fr; gap: var(--space-6); align-items: stretch; }
.tm-machine { background: var(--surface-offset); border-radius: var(--radius-md); padding: var(--space-6); }
.tm-machine p:not([class]) { font-size: 13.5px; line-height: 1.6; margin: 0 0 var(--space-3); }
.tm-machine .tm-mono { display: block; margin: 0; }
.tm-paths { display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); }
.tm-path { border: 1px solid var(--border); border-radius: var(--radius-md);
           padding: var(--space-3) var(--space-4); background: var(--bg); }
.tm-path p:not([class]) { font-size: var(--text-meta); line-height: 1.5; margin: 0; }
.tm-path .tm-lab { margin-bottom: var(--space-2); }
.tm-path-paper { border-color: var(--accent); }
.tm-path-paper .tm-lab { color: var(--accent-link); }

/* V6 — what the station reads out of a transaction */
.tm-readout { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); align-items: start; }
.tm-card { background: var(--surface-offset); border-radius: var(--radius-md); padding: var(--space-6); }
.tm-card h5 { font-family: var(--font-display); font-weight: 500; font-size: 20px;
              line-height: 1.2; margin: 0 0 var(--space-3); }
.tm-card p:not([class]) { font-size: 15px; line-height: 1.5; margin: 0 0 var(--space-4); }
.tm-card p:last-child { margin-bottom: 0; }
.tm-entry { margin: 0 0 var(--space-4); }
.tm-entry:last-child { margin-bottom: 0; }
.tm-entry .tm-key { font-family: var(--font-mono); font-size: var(--text-meta);
                    color: var(--accent-link); display: block; margin: 0 0 var(--space-1); }
.tm-entry .tm-key-none { color: var(--text-muted); }
.tm-entry .tm-key-word { color: var(--text-muted); }
.tm-entry p { font-size: 15px; line-height: 1.5; margin: 0; }

/* V7 — sealed chip vs inspectable station, same threat down the left */
.se-row {
  display: grid; grid-template-columns: 230px 1fr 1fr; gap: var(--space-6);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
}
.se-row:last-of-type { border-bottom: 0; }
.se-head { padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.se-head p { font-family: var(--font-mono); font-size: var(--text-meta);
             letter-spacing: 0.07em; text-transform: uppercase;
             color: var(--text-muted); margin: 0; }
.se-vec { font-family: var(--font-mono); font-size: var(--text-meta);
          letter-spacing: 0.07em; text-transform: uppercase; color: var(--text);
          margin: 0 0 var(--space-2); }
.se-vec span { color: var(--text-muted); margin-right: var(--space-2); }
.se-gloss { font-size: 14px; line-height: 1.45; color: var(--text-muted); margin: 0; }
.se-cell p { font-size: 15px; line-height: 1.5; margin: 0; }
.se-v { font-family: var(--font-mono); font-size: var(--text-meta);
        letter-spacing: 0.04em; display: block; margin: 0 0 var(--space-1); }
.se-yes { color: var(--accent-link); }
.se-no  { color: var(--text-muted); }
.se-both { grid-column: 2 / span 2; }
.tm-out { font-family: var(--font-mono); font-size: var(--text-meta); line-height: 1.6;
          color: var(--accent-link); margin: 0; white-space: pre-line; }
.tm-std { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.tm-std span { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--text);
               background: var(--code-bg); border: 1px solid var(--border);
               border-radius: var(--radius-pill); padding: 4px 10px; }
@media (max-width: 900px) { .tm-readout { grid-template-columns: 1fr; } }

/* V6 — PSBT ladder */
.tm-row { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-4);
          align-items: center; margin-bottom: var(--space-3); }
.tm-row > .tm-lab { margin: 0; text-align: right; }
.tm-steps { display: grid; gap: 4px; }
.tm-steps-in  { grid-template-columns: repeat(4, 1fr); }
.tm-steps-out { grid-template-columns: 1fr 3fr; }
.tm-step { background: var(--surface-offset); padding: var(--space-3) var(--space-4); }
.tm-step:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.tm-step:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tm-step p:not([class]) { font-size: 13px; margin: 0; }
.tm-step .tm-tag { margin-bottom: var(--space-2); }
.tm-step-refuse { outline: 1px solid var(--status-fail); }
.tm-pass { color: var(--status-pass); }
.tm-warn { color: var(--accent-link); }
.tm-refuse { color: var(--status-fail); }
.tm-gate { display: flex; gap: var(--space-6); align-items: baseline; margin-top: var(--space-6);
           padding-top: var(--space-4); border-top: 1px solid var(--border); }
.tm-gate p { margin: 0; }
.tm-gate .tm-mono { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 900px) {
  .tm-timeline, .tm-checks, .tm-zones { grid-template-columns: 1fr; }
  .tm-plate, .tm-chain, .tm-row { grid-template-columns: 1fr; }
  .tm-right { text-align: left; }
}

/* Claims-audit pass 2026-09-09 (C12): the privacy heuristics went from four
   flags to all eight, which made one card twice the height of its partner.
   The eight now sit as two cards of four on row 1 and the nonce card spans
   row 2, so the readout stays balanced. Below 900px .tm-readout is already a
   single column and 1 / -1 is a no-op there. */
.tm-readout .tm-card-wide { grid-column: 1 / -1; }

/* 2026-09-09: the two four-flag privacy cards sit on one row and read as a pair,
   so they should share a height. .tm-readout is align-items:start by default,
   which lets each card size to its own content; this modifier restores stretch
   for the readout that carries the split. The other .tm-readout on the page is
   untouched. Below 900px the grid is one column and stretch is a no-op. */
.tm-readout-even { align-items: stretch; }