/* ============================================================
   SECURITY & TRUST — Asterwise
   Light, editorial. Reuses tokens.css + home.css (nav/footer/btn/codepanel).
   Every claim on this page is backed by code in asterwise-api.
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────── */
.sechero { padding-top: calc(var(--nav-h) + var(--sp-20)); padding-bottom: var(--sp-12); }
.sechero__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-12); align-items: end;
}
.sechero h1 {
  font-size: var(--t-4xl); line-height: var(--lh-tight); letter-spacing: var(--track-tighter);
  max-width: 16ch; margin-top: var(--sp-4);
}
.sechero p { margin-top: var(--sp-6); max-width: 52ch; }
.sechero__meta { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.sechero__updated { font-family: var(--mono); font-size: var(--t-sm); color: var(--text-3); }

/* honest "what this page is" note */
.sec-honest {
  margin-top: var(--sp-8);
  display: flex; gap: var(--sp-3); align-items: flex-start;
  border-left: 2px solid var(--brand-line); padding: 2px 0 2px var(--sp-4);
  max-width: 64ch;
}
.sec-honest svg { color: var(--brand); flex: 0 0 auto; margin-top: 2px; }
.sec-honest p { margin: 0; font-size: var(--t-sm); color: var(--text-2); line-height: 1.55; }

/* ── Posture jump rail (sticky in-page nav) ──────────── */
.sec-rail { border-block: 1px solid var(--line); background: color-mix(in oklab, var(--bg-2) 60%, transparent); position: sticky; top: var(--nav-h); z-index: 20; backdrop-filter: saturate(1.4) blur(8px); }
.sec-rail__in { display: flex; gap: var(--sp-6); padding-block: var(--sp-3); overflow-x: auto; scrollbar-width: none; }
.sec-rail__in::-webkit-scrollbar { display: none; }
.sec-rail a { font-family: var(--mono); font-size: var(--t-sm); color: var(--text-3); white-space: nowrap; transition: color var(--dur) var(--ease); }
.sec-rail a:hover, .sec-rail a.is-active { color: var(--brand); }

/* ── Section scaffolding ─────────────────────────────── */
.secsec { padding-block: var(--sp-20); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 56px); }
.secsec__head { max-width: 60ch; margin-bottom: var(--sp-10); }
.secsec__head .h2 { font-size: var(--h2-section); margin-top: 8px; }
.secsec__head p { margin-top: var(--sp-4); color: var(--text-2); font-size: var(--t-md); line-height: 1.55; }

/* ── At-a-glance posture cards (asymmetric: 1 wide + small) ── */
.sec-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.gcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--sh-xs);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.gcard:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--brand-line); }
.gcard__ic { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.gcard h3 { font-size: var(--h3-dense); }
.gcard p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.5; }
.gcard code { font-family: var(--mono); font-size: var(--t-code); color: var(--brand-600); background: var(--brand-soft); padding: 1px 5px; border-radius: 5px; }

/* ── Split: prose left + code/proof right ────────────── */
.sec-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-12); align-items: start; }
.sec-split--rev { grid-template-columns: 1.1fr 0.9fr; }
.sec-points { display: flex; flex-direction: column; gap: var(--sp-6); }
.spoint { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3); }
.spoint__ic { color: var(--ok); margin-top: 3px; }
.spoint h4 { font-size: var(--t-base); font-weight: var(--w-semi); }
.spoint p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.55; margin-top: 4px; }
.spoint code { font-family: var(--mono); font-size: var(--t-code); color: var(--text); background: var(--bg-3); padding: 1px 5px; border-radius: 5px; }

/* code panel tuned for a header dump */
.sec-headers .code { font-size: var(--t-code); line-height: 1.85; }
.sec-headers .hk { color: var(--c-key); }
.sec-headers .hv { color: var(--c-str); }
.codepanel__sub { font-family: var(--mono); font-size: var(--t-micro); color: var(--text-on-ink-3); padding: 10px 18px; border-top: 1px solid var(--line-ink); background: #0a0b10; }

/* ── Data lifecycle definition rows ──────────────────── */
.sec-life { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--sh-xs); }
.life-row { display: grid; grid-template-columns: 0.5fr 1fr 0.7fr; gap: var(--sp-6); padding: var(--sp-6); border-bottom: 1px solid var(--line); align-items: center; }
.life-row:last-child { border-bottom: 0; }
.life-row h4 { font-size: var(--t-base); }
.life-row p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.5; }
.life-row code { font-family: var(--mono); font-size: 12px; color: var(--brand-600); }
.life-row__when { font-family: var(--mono); font-size: var(--t-sm); color: var(--text-3); text-align: right; }

/* ── Sub-processors table ────────────────────────────── */
.sec-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.sec-table thead th { text-align: left; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-3); font-weight: var(--w-medium); padding: 0 var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--line-2); }
.sec-table tbody td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
.sec-table tbody tr:hover td { background: color-mix(in oklab, var(--bg-2) 55%, transparent); }
.sec-table td:first-child { color: var(--text); font-weight: var(--w-medium); white-space: nowrap; }
.sec-table .sub-loc { font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--text-3); }

/* ── Compliance posture (honest) ─────────────────────── */
.sec-posture { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.posture-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--sh-xs); }
.posture-col--soft { background: var(--bg-2); box-shadow: none; }
.posture-col h3 { font-size: var(--h3-card); display: flex; align-items: center; gap: var(--sp-2); }
.posture-list { list-style: none; margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.posture-list li { display: grid; grid-template-columns: 18px 1fr; gap: var(--sp-3); font-size: var(--t-sm); color: var(--text-2); line-height: 1.5; }
.posture-list li svg { margin-top: 2px; }
.tick-yes { color: var(--ok); }
.tick-no { color: var(--text-3); }
.posture-note { margin-top: var(--sp-6); font-size: var(--t-code); color: var(--text-3); line-height: 1.5; }

/* badge for honest status */
.status-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: var(--t-micro); padding: 3px 9px; border-radius: var(--r-full); border: 1px solid; }
.status-tag--yes { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 30%, var(--line)); background: var(--ok-soft); }
.status-tag--no  { color: var(--text-3); border-color: var(--line-2); background: var(--bg-2); }

/* ── Disclosure / CTA ────────────────────────────────── */
.sec-disclose { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-12); align-items: center; }
.disclose-card { background: var(--ink-bg); color: var(--text-on-ink); border-radius: var(--r-xl); padding: var(--sp-10); box-shadow: var(--sh-ink); position: relative; overflow: hidden; }
.disclose-card::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .5; pointer-events: none; mix-blend-mode: overlay; }
.disclose-card h3 { color: #fff; font-size: var(--h3-lead); position: relative; }
.disclose-card p { color: var(--text-on-ink-2); font-size: var(--t-sm); margin-top: var(--sp-3); line-height: 1.6; position: relative; }
.disclose-card .mono-addr { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-5); font-family: var(--mono); font-size: var(--t-sm); color: var(--brand-glow); position: relative; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .sechero__grid { grid-template-columns: 1fr; gap: var(--sp-8); align-items: start; }
  .sec-glance { grid-template-columns: repeat(2, 1fr); }
  .sec-split, .sec-split--rev { grid-template-columns: 1fr; gap: var(--sp-8); }
  .sec-posture { grid-template-columns: 1fr; }
  .sec-disclose { grid-template-columns: 1fr; gap: var(--sp-8); }
  .life-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .life-row__when { text-align: left; }
  .sec-split .codepanel,
  .sec-headers .code { min-width: 0; max-width: 100%; }
}
@media (max-width: 540px) {
  .sec-glance { grid-template-columns: 1fr; }
  .sec-table thead { display: none; }
  .sec-table tbody td { display: block; border: 0; padding: 2px var(--sp-5); }
  .sec-table tbody tr { display: block; padding-block: var(--sp-4); border-bottom: 1px solid var(--line); }
  .sec-table td:first-child { padding-top: var(--sp-4); white-space: normal; }
  .sec-headers .code { overflow-x: auto; }
}