/* Group D (trust): /security, /legal/*, /status, /proof, /404.
   Builds on style.css tokens and components; only adds what those pages need. */

/* Draft note on legal pages */
.draft-note { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 12.5px/1.4 var(--mono); color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 999px; padding: 5px 12px; margin: 0 0 22px; flex-wrap: nowrap; max-width: 100%; }
.draft-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Legal article details */
.legal .lede { margin-bottom: 8px; }
.legal .summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; margin: 28px 0 8px; }
.legal .summary h2 { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.legal .summary ul { margin: 0; }
.legal .prose h2 { scroll-margin-top: calc(var(--header-h) + 16px); }
.legal .prose h2 .n { font: 500 13px var(--mono); color: var(--faint); margin-right: 10px; vertical-align: 4px; letter-spacing: 0; }
.legal .table-wrap { margin: 1.4em 0; }
.legal .table td, .legal .table th { font-size: 14.5px; }
.legal address { font-style: normal; }
.legal-foot { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* Security page */
.trust-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-facts > div { padding: 26px 22px 24px 0; }
.trust-facts > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.trust-facts b { display: block; font: 600 clamp(22px, 2.2vw, 28px)/1.1 var(--mono); letter-spacing: -.02em; color: var(--ink); margin-bottom: 10px; }
.trust-facts span { font-size: 14.5px; color: var(--muted); display: block; }
@media (max-width: 900px) {
  .trust-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .trust-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) { .trust-facts > div { padding-right: 10px; } .trust-facts > div + div { padding-left: 14px; } .trust-facts > div:nth-child(3) { padding-left: 0; } }

.access-col h3 { display: flex; align-items: center; gap: 10px; }
.access-col .tag { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 5px; }
.access-col .tag.read { color: var(--ink); background: var(--bg-2); border: 1px solid var(--line-2); }
.access-col .tag.never { color: var(--red); background: var(--red-bg); border: 1px solid var(--red-line); }
.access-col .ticks li { color: var(--text); }
.access-col .ticks li small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }

.lifecycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: lc; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.lifecycle li { counter-increment: lc; padding: 24px 22px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.lifecycle li:nth-child(4n) { border-right: 0; }
.lifecycle li:nth-last-child(-n+4) { border-bottom: 0; }
.lifecycle li::before { content: counter(lc, decimal-leading-zero); display: block; font: 500 12px var(--mono); color: var(--faint); margin-bottom: 12px; }
.lifecycle .lab { margin-bottom: 10px; font-size: 11.5px; }
.lifecycle h3 { font-size: 17px; margin: 0 0 6px; }
.lifecycle p { font-size: 14.5px; color: var(--muted); margin: 0; }
.lifecycle li.end { background: var(--green-bg); }
.lifecycle li.end .lab { color: var(--green); }
@media (max-width: 1040px) {
  .lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lifecycle li:nth-child(4n) { border-right: 1px solid var(--line); }
  .lifecycle li:nth-child(2n) { border-right: 0; }
  .lifecycle li:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .lifecycle li:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .lifecycle { grid-template-columns: minmax(0, 1fr); }
  .lifecycle li, .lifecycle li:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--line); }
  .lifecycle li:last-child { border-bottom: 0; }
}

.ret-table td:first-child, .ret-table th[scope="row"] { width: 30%; }
.ret-table .when { font: 500 13.5px var(--mono); color: var(--ink); white-space: nowrap; }
@media (max-width: 760px) { .ret-table .when { white-space: normal; } }

.sub-table td:nth-child(3) { font: 500 13.5px var(--mono); color: var(--muted); }

.sec-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; padding: 0; list-style: none; }
.sec-toc a { display: inline-block; font: 500 13px var(--mono); color: var(--text); text-decoration: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; background: var(--card); }
.sec-toc a:hover { border-color: var(--ink); color: var(--ink); }

.limit-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.limit-list li { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--r); padding: 16px 18px; font-size: 15px; color: var(--text); }
.limit-list li b { color: var(--ink); display: block; margin-bottom: 4px; }
@media (max-width: 760px) { .limit-list { grid-template-columns: minmax(0, 1fr); } }

/* Status page */
.status-hero { padding: 56px 0 40px; }
.overall { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.overall .big-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--faint); flex-shrink: 0; box-shadow: 0 0 0 6px color-mix(in srgb, var(--faint) 18%, transparent); }
.overall[data-state="ok"] { border-color: var(--green-line); background: var(--green-bg); }
.overall[data-state="ok"] .big-dot { background: var(--green); box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 20%, transparent); }
.overall[data-state="slow"] { border-color: var(--amber-line); background: var(--amber-bg); }
.overall[data-state="slow"] .big-dot { background: var(--amber); box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 20%, transparent); }
.overall[data-state="down"] { border-color: var(--amber); background: var(--amber-bg); }
.overall[data-state="down"] .big-dot { background: var(--amber); box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 20%, transparent); }
.overall h2 { font-size: 22px; letter-spacing: -.02em; margin: 0; }
.overall p { margin: 2px 0 0; font-size: 14.5px; color: var(--muted); }
.overall .when { margin-left: auto; font: 500 12.5px var(--mono); color: var(--muted); text-align: right; }
@media (max-width: 560px) { .overall { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 14px; } .overall .big-dot { margin-top: 6px; } .overall .when { grid-column: 2; margin-left: 0; text-align: left; } }

.components { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.components > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.components > li:last-child { border-bottom: 0; }
.components h3 { font-size: 16px; margin: 0; }
.components .what { font-size: 14px; color: var(--muted); margin: 2px 0 0; }
.components .val { font: 500 13px var(--mono); color: var(--muted); text-align: right; }
.components .val b { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .components > li { grid-template-columns: minmax(0, 1fr); } .components .val { text-align: left; } }

.probe-log { font: 400 12.5px/1.7 var(--mono); }

/* Proof page */
.proof-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.proof-card .pc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 28px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.proof-card .pc-head .lab { margin: 0; }
.proof-card .pc-body { padding: 28px; }
.proof-card .repo { font: 600 clamp(20px, 2.6vw, 28px)/1.25 var(--mono); color: var(--ink); letter-spacing: -.02em; word-break: break-word; margin: 0 0 6px; }
.proof-card .verdict { font-size: clamp(18px, 2vw, 21px); color: var(--ink); margin: 0 0 24px; }
.proof-card .kv { font-size: 15px; }
.proof-card .pc-foot { padding: 16px 28px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: center; }
.proof-card .pc-foot img { display: block; height: 20px; width: auto; }
@media (max-width: 560px) { .proof-card .pc-head, .proof-card .pc-body, .proof-card .pc-foot { padding-left: 20px; padding-right: 20px; } }
.badge-demo { display: inline-flex; font: 600 11px/20px var(--sans); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.badge-demo span { padding: 0 7px; color: #fff; white-space: nowrap; }
.badge-demo span:first-child { background: #555; }
.badge-demo .g { background: #2a8545; } .badge-demo .a { background: #a77a00; } .badge-demo .n { background: #6b6b6b; }
.verify-out { margin-top: 18px; }
.verify-out .transcript { border-radius: var(--r); }
.verify-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
@media (max-width: 560px) { .verify-form { grid-template-columns: minmax(0, 1fr); } }

/* 404 */
.nf { padding: 88px 0 112px; }
.nf .code-num { font: 600 clamp(64px, 12vw, 140px)/1 var(--mono); letter-spacing: -.06em; color: var(--ink); margin: 0 0 8px; }
.nf .window { max-width: 560px; }

/* Long URLs and identifiers inside key-value lists and prose must wrap on phones */
.kv dd code, .legal .prose code, .proof-card code, .components code, .overall code { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 560px) { .probe-log { font-size: 11.5px; padding: 16px 14px; } }

/* .stack-sm tables become one card per row on phones */
@media (max-width: 640px) {
  .table.stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table.stack-sm tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .table.stack-sm tbody tr:last-child { border-bottom: 0; }
  .table.stack-sm th, .table.stack-sm td { display: block; width: auto !important; padding: 2px 0; border: 0; }
  .table.stack-sm td { color: var(--muted); font-size: 14.5px; }
  .table.stack-sm td:nth-child(2) { color: var(--ink); }
  .ret-table .when { white-space: normal; }
}

/* Legal sidebar: the <details> toggle only matters on phones */
.legal .docs-nav > details > summary { display: none; }
@media (max-width: 820px) {
  .legal .docs-nav > details > summary { display: list-item; cursor: pointer; font: 500 13px var(--mono); color: var(--ink); padding: 10px 0; }
}
.legal .table-wrap .table { margin: 0; }
.legal .table thead th { font-size: 11.5px; }
@media (max-width: 560px) { .draft-note { border-radius: 10px; align-items: baseline; } }
.legal .table th code { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.notcov li.x::before { color: var(--muted); }