/* security.css — page-specific layout for /security (the technical/trust page).
 *
 * Loaded AFTER site.css, which provides the tokens, base reset, shared nav,
 * footer, buttons, theme-toggle, and mobile nav. EVERY rule here is scoped under
 * `body.sp`, so it cannot affect index/enterprise/legal pages. It ports the
 * redesign's documentation layout (restrained header with meta chips, numbered
 * flow with code blocks, the cryptographic spec table, the protect/responsible
 * dual columns, the sub-processor grid, the compliance posture list, the ops
 * accordions, the contact box) in var(--token) only, so the theme drives it.
 *
 * Dark is the signed-off default. The deliberate light palette lives in one block
 * at the bottom (:root[data-theme="light"] .sp), the same first-class WCAG-AA
 * palette as the homepage. The code blocks are the one deliberate exception:
 * they stay DARK in both themes for code legibility (their syntax colours are
 * fixed light-on-dark, not theme tokens). Motion is intentionally restrained
 * (a single .reveal fade, no stagger), hidden only under html.js so JS-off is
 * fully visible, and gated behind prefers-reduced-motion.
 */

/* ---- neutralise site.css element selectors inside this page's scope ---- */
.sp section { padding: 0; }

/* --planned is security-only (compliance "Roadmap/Future/Under review" pills);
   site.css has no such token, so define the dark default here. Light overrides
   it (and --warning) to a readable amber in the light block at the bottom. */
.sp { --planned: #FFAA33; }

.sp .mono { font-family: var(--font-mono); }

/* ---- HEADER: documentation header, restrained ---- */
.sp .page-header { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.sp .page-header::before { content: ''; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(120% 80% at 85% -10%, color-mix(in srgb, var(--signal) 9%, transparent) 0%, transparent 55%); }
.sp .ph-inner { max-width: 1080px; margin: 0 auto; padding: 80px 36px 64px; }
.sp .page-header .eyebrow { margin-bottom: 24px; }
.sp .page-header h1 { font-size: clamp(38px, 4.6vw, 62px); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; color: var(--paper); margin: 0 0 24px; max-width: 760px; }
.sp .page-header .lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--paper-dim); margin: 0; max-width: 680px; }
.sp .meta-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.sp .chip { font-family: var(--font-mono); font-size: 12px; color: var(--paper-mute); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 13px; display: inline-flex; align-items: center; gap: 7px; }
.sp .chip i { color: var(--signal); font-size: 14px; }

/* eyebrow: mono lower-case label with optional tick (overrides site.css .eyebrow) */
.sp .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: none;
  color: var(--paper-mute); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 0; font-weight: 400; }
.sp .eyebrow .tick { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); display: inline-block; flex-shrink: 0; }

/* ---- shared section frame ---- */
.sp .sec { border-bottom: 1px solid var(--line); }
.sp .sec-inner { max-width: 1080px; margin: 0 auto; padding: 80px 36px; }
.sp .sec.alt { background: var(--surface); }
.sp .sec-top { max-width: 680px; margin-bottom: 44px; }
.sp .sec-top h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; color: var(--paper); margin: 14px 0 0; max-width: none; }
.sp .sec-top p, .sp .sec-lede { font-size: 16px; line-height: 1.7; color: var(--paper-dim); margin: 16px 0 0; max-width: 720px; }
.sp .sec-top p strong, .sp p strong { color: var(--paper); font-weight: 500; }
.sp .ic { font-family: var(--font-mono); font-size: 0.92em; color: var(--paper); background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
/* live inline <code> snippets in the prose (RFC reference, #k=, /d/..., [security]) */
.sp .flow-body code, .sp .contact-row code { font-family: var(--font-mono); font-size: 0.9em; color: var(--signal); background: var(--surface-2); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); }

/* ---- PILLARS ---- */
.sp .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sp .pillar { background: var(--ink); padding: 28px 24px; }
.sp .pillar i { color: var(--signal); font-size: 22px; }
.sp .pillar h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--paper); margin: 14px 0 8px; }
.sp .pillar p { font-size: 14px; color: var(--paper-mute); margin: 0; line-height: 1.6; }

/* ---- FLOW: numbered steps with code blocks ---- */
.sp .flow-step { display: grid; grid-template-columns: 48px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.sp .flow-step:first-of-type { border-top: none; }
.sp .flow-num { font-family: var(--font-mono); font-size: 14px; color: var(--signal); padding-top: 2px; }
/* min-width:0 lets this grid track shrink below the code block's intrinsic
   width, so the <pre>'s own overflow-x:auto scrolls WITHIN the block instead of
   the wide line dragging the whole page into horizontal scroll on mobile. */
.sp .flow-body { min-width: 0; }
.sp .flow-body h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--paper); margin: 0 0 10px; }
.sp .flow-body p { font-size: 15px; color: var(--paper-dim); margin: 0 0 16px; line-height: 1.65; max-width: 760px; }
.sp .flow-body p:last-child { margin-bottom: 0; }

/* code block: deliberately DARK in BOTH themes for legibility. Fixed
   light-on-dark syntax colours (not theme tokens). Supports the live markup's
   five span classes: c comment, k keyword, v variable, s string, n number. */
.sp .codeblock { background: #0C1118; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; overflow: hidden; margin: 4px 0 4px; max-width: 100%; }
.sp .code-cap { font-family: var(--font-mono); font-size: 11.5px; color: #8B95A7; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); background: #11161F; }
.sp .codeblock pre { margin: 0; padding: 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: #C5CDD9; }
.sp .codeblock pre .c { color: #8B95A7; }   /* comment  */
.sp .codeblock pre .k { color: #00E5FF; }   /* keyword  */
.sp .codeblock pre .v { color: #F5F7FA; }   /* variable */
.sp .codeblock pre .s { color: #10D9A0; }   /* string   */
.sp .codeblock pre .n { color: #FFAA33; }   /* number   */
.sp .urlblock { font-family: var(--font-mono); font-size: 13px; color: #C5CDD9; word-break: break-all; white-space: pre-wrap; }
.sp .urlblock .frag { color: #00E5FF; }

/* ---- CRYPTO TABLE ---- */
.sp .spectable { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 14.5px; }
.sp .spectable thead th { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-mute); background: var(--surface-2); padding: 14px 18px; font-weight: 500; border-bottom: 1px solid var(--line); }
.sp .spectable td { padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sp .spectable tbody tr:last-child td { border-bottom: none; }
.sp .spectable td:first-child { color: var(--paper); font-weight: 500; width: 26%; }
.sp .spectable td:nth-child(2) { font-family: var(--font-mono); color: var(--signal); font-size: 13.5px; width: 26%; }
.sp .spectable td:nth-child(3) { font-family: var(--font-mono); color: var(--paper-mute); font-size: 13px; }
.sp .spectable tbody tr { background: var(--ink); }

/* ---- DUAL: protect vs responsible ---- */
.sp .dual { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sp .dual-col { background: var(--ink); padding: 28px 26px; }
.sp .dual-col h3 { font-size: 16px; font-weight: 500; color: var(--paper); margin: 0 0 18px; display: flex; align-items: center; gap: 9px; }
.sp .dual-col h3 i { font-size: 18px; }
.sp .dual-col.protect h3 i { color: var(--success); }
.sp .dual-col.resp h3 i { color: var(--warning); }
.sp .dual-col ul { list-style: none; padding: 0; margin: 0; }
.sp .dual-col li { font-size: 14px; color: var(--paper-dim); padding: 9px 0; border-top: 1px solid var(--line); line-height: 1.55; display: flex; align-items: flex-start; gap: 10px; }
.sp .dual-col li:first-child { border-top: none; }
.sp .dual-col li i { flex-shrink: 0; font-size: 16px; margin-top: 2px; }
.sp .dual-col.protect li i { color: var(--success); }
.sp .dual-col.resp li i { color: var(--paper-mute); }
.sp .dual-col li code { font-family: var(--font-mono); font-size: 0.92em; color: var(--paper); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

/* ---- SUB-PROCESSORS ---- */
.sp .subgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sp .subcard { background: var(--ink); padding: 24px; }
.sp .subcard .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sp .subcard .name { font-size: 16px; font-weight: 500; color: var(--paper); }
.sp .subcard .region { font-family: var(--font-mono); font-size: 11px; color: var(--paper-mute); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.sp .subcard p { font-size: 13.5px; color: var(--paper-mute); margin: 0; line-height: 1.55; }
.sp .subnote { font-size: 13.5px; color: var(--paper-mute); margin: 20px 0 0; line-height: 1.6; }
.sp .subnote a { color: var(--signal); border-bottom: 1px solid var(--line-strong); }

/* ---- COMPLIANCE ---- */
.sp .complist { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sp .comprow { display: grid; grid-template-columns: 1fr auto 1.4fr; gap: 24px; align-items: center; padding: 18px 22px; border-top: 1px solid var(--line); background: var(--ink); }
.sp .comprow:first-child { border-top: none; }
.sp .comprow .fw { font-size: 15px; font-weight: 500; color: var(--paper); }
.sp .comprow .detail { font-size: 13.5px; color: var(--paper-mute); line-height: 1.5; }
.sp .status { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; padding: 5px 11px; border-radius: 999px; white-space: nowrap; justify-self: start; }
.sp .status.live { color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); background: color-mix(in srgb, var(--success) 8%, transparent); }
.sp .status.planned { color: var(--planned); border: 1px solid color-mix(in srgb, var(--planned) 30%, transparent); background: color-mix(in srgb, var(--planned) 8%, transparent); }

/* ---- OPS: accordions (restrained) ---- */
.sp .ops-item { border-top: 1px solid var(--line); }
.sp .ops-item:first-child { border-top: none; }
.sp .ops-item summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 17px; font-weight: 500; color: var(--paper); transition: color 140ms ease; }
.sp .ops-item summary::-webkit-details-marker { display: none; }
.sp .ops-item summary:hover { color: var(--signal); }
.sp .ops-item summary .chev { font-family: var(--font-mono); color: var(--paper-mute); transition: transform 200ms ease, color 200ms ease; flex-shrink: 0; }
.sp .ops-item[open] summary .chev { transform: rotate(90deg); color: var(--signal); }
.sp .ops-item .ops-body { padding: 0 0 22px; font-size: 14.5px; color: var(--paper-mute); line-height: 1.65; max-width: 760px; }

/* ---- CONTACT ---- */
.sp .contact-box { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sp .contact-row { padding: 24px 26px; border-top: 1px solid var(--line); }
.sp .contact-row:first-child { border-top: none; }
.sp .contact-row h3 { font-size: 16px; font-weight: 500; color: var(--paper); margin: 0 0 8px; display: flex; align-items: center; gap: 9px; }
.sp .contact-row h3 i { color: var(--signal); font-size: 17px; }
.sp .contact-row p { font-size: 14px; color: var(--paper-mute); margin: 0; line-height: 1.6; }
.sp .contact-row a { color: var(--signal); border-bottom: 1px solid var(--line-strong); }
.sp .contact-row .mono { color: var(--paper); }

/* ---- scroll reveal: restrained single fade, hidden only under html.js ---- */
html.js .sp .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1); }
html.js .sp .reveal.in { opacity: 1; transform: translateY(0); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .sp .pillars { grid-template-columns: 1fr; }
  .sp .comprow { grid-template-columns: 1fr; gap: 8px; }
  .sp .status { justify-self: start; }
}
@media (max-width: 720px) {
  .sp .dual { grid-template-columns: 1fr; }
  .sp .subgrid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .sp .spectable, .sp .spectable tbody, .sp .spectable tr, .sp .spectable td { display: block; width: 100% !important; }
  .sp .spectable thead { display: none; }
  .sp .spectable tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .sp .spectable td { border: none; padding: 6px 18px; }
  .sp .spectable td:first-child { padding-top: 14px; }
}
@media (max-width: 640px) {
  .sp .ph-inner, .sp .sec-inner { padding: 60px 22px; }
  .sp .flow-step { grid-template-columns: 1fr; gap: 12px; }
}

/* ---- reduced motion: static, fully readable ---- */
@media (prefers-reduced-motion: reduce) {
  .sp * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html.js .sp .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   LIGHT THEME: the same deliberate, first-class palette as the homepage, scoped
   to .sp, plus a readable amber for the compliance status pills. The code blocks
   above stay dark in both themes by design. Dark mode is unchanged; site.css is
   untouched.
   ============================================================================ */
:root[data-theme="light"] .sp {
  --ink: #E9EDF3;
  --surface: #FFFFFF;
  --surface-2: #DDE3EC;
  --paper: #0B0F16;
  --paper-dim: #2A323F;
  --paper-mute: #4B5563;
  --signal: #006C82;
  --signal-dim: #005A6E;
  --success: #08714C;
  --warning: #8A5A00;
  --planned: #8A5A00;
  --line: rgba(15, 23, 33, 0.14);
  --line-strong: rgba(15, 23, 33, 0.24);
  --nav-bg: rgba(233, 237, 243, 0.82);
  --overlay-bg: rgba(233, 237, 243, 0.97);
}
:root[data-theme="light"] .sp .btn-primary { color: var(--ink); }