/* /security/ only. Shared components live in /styles.css. */

/* ---------- page head: copy + the verify page catching a one-pixel edit ---------- */
.sec-head-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:center; gap:clamp(40px, 6vw, 112px); }
.sec-head .h1{ max-width:14ch; }
.sec-head-note{ margin-top:16px; }
.sec-head-device{ justify-self:center; max-width:290px; }
.sec-head-device figcaption{ margin-top:14px; }

/* ---------- tap Done: plain result first, the math behind a disclosure ---------- */
.sec-split{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:start; gap:clamp(40px, 6vw, 112px); }
.sec-main{ max-width:680px; }
.sec-main .head{ margin-bottom:48px; }
.sec-dial{ position:sticky; top:120px; justify-self:center; max-width:340px; }

.sec-steps > li > *{ grid-column:2; }
.sec-steps h3{ font-size:var(--t-h3); line-height:1.25; letter-spacing:-.02em; }
.sec-steps > li::before{ line-height:2.1; }
.sec-steps > li > p{ margin-top:4px; }

.sec-math{ margin-top:4px; }
.sec-math summary{ display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; list-style:none; font-size:var(--t-small); font-weight:500; color:var(--ink-3); transition:color .15s; }
.sec-math summary::-webkit-details-marker{ display:none; }
.sec-math summary::after{ content:""; width:7px; height:7px; margin-top:-3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .2s var(--ease-out), margin .2s var(--ease-out); }
.sec-math[open] summary::after{ margin-top:3px; transform:rotate(-135deg); }
@media (hover: hover) and (pointer: fine){ .sec-math summary:hover{ color:var(--ink); } }
/* The math settles in under the chevron as it opens (keyframes in styles.css). Closing is instant. */
@media (prefers-reduced-motion: no-preference){
  .sec-math[open] .sec-math-body{ animation:disclose-in .22s var(--ease-out); }
}
.sec-math-body{ display:grid; gap:10px; margin-top:0; padding:14px 16px; border-radius:12px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); font-size:var(--t-small); color:var(--ink-2); }
.sec-code{ display:grid; gap:2px; font:500 var(--t-micro)/1.6 var(--mono); color:var(--ink); letter-spacing:-.01em; overflow-wrap:anywhere; }

/* ---------- verify: what the browser checks, beside the sample values ---------- */
.sec-band{ background:var(--bg-2); border-block:1px solid var(--line); }
.sec-verify{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:end; gap:48px clamp(40px, 6vw, 112px); }
.sec-verify .head{ margin-bottom:48px; }
.sec-values .label{ margin-bottom:14px; }

/* ---------- the verify page's three banners, as the page draws them ---------- */
.sec-banners{ list-style:none; display:grid; gap:16px; }
.sec-banners > li{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:center; gap:16px clamp(32px, 5vw, 80px); }
.sec-banner{ display:flex; gap:16px; align-items:flex-start; padding:22px 24px; border-radius:var(--radius); }
.sec-banner .i{ width:32px; height:32px; margin-top:2px; }
.sec-banner-title{ font:800 clamp(1.25rem, 1.1rem + .5vw, 1.625rem)/1.2 var(--font-display); letter-spacing:-.02em; }
.sec-banner-title + p{ margin-top:6px; font-size:var(--t-small); line-height:1.5; }
.sec-banner.is-verified{ background:var(--sealed); color:#06150D; }
.sec-banner.is-devicetime{ background:var(--card-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.sec-banner.is-devicetime .sec-banner-title + p{ color:var(--ink-2); }
.sec-banner.is-mismatch{ background:var(--new); color:#1A0806; }
.sec-banner-meaning p{ color:var(--ink); }
.sec-banner-meaning .sec-state{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:var(--t-small); color:var(--ink-2); }

/* ---------- attacks ---------- */
.sec-attacks td:first-child{ width:40%; font-weight:600; }
table.data.sec-attacks thead th{ font:500 13px/1.35 var(--font); letter-spacing:0; text-transform:none; color:var(--ink-3); }

/* ---------- status: kv rows, a dot per item; limits beside ---------- */
.sec-status-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:56px clamp(40px, 6vw, 112px); align-items:start; }
.sec-status-grid .h2{ margin-bottom:clamp(32px, 1.5rem + 2vw, 56px); }
.sec-status-h{ margin:40px 0 4px; color:var(--ink-2); }
.sec-status-grid .h2 + .sec-status-h{ margin-top:0; }
.sec-status > div{ align-items:center; }
.sec-status-note{ margin-top:20px; }
.sec-status-note a{ color:var(--ink-2); }
.sec-status dt{ color:var(--ink); font-size:var(--t-body); max-width:52ch; }
.sec-status dt .sub{ display:block; margin-top:2px; color:var(--ink-3); font-size:var(--t-small); }
.sec-status dd{ display:inline-flex; align-items:center; gap:10px; flex:none; font-family:var(--font); font-weight:600; white-space:nowrap; }
.sec-status dd a{ color:var(--ink); }
/* 44px tap target around a short status link, without growing the row. */
.sec-status dd a{ display:inline-block; padding:12px 8px; margin:-12px -8px; /* 44px tap target, row size unchanged */ }
.sec-limits{ padding-top:clamp(8px, 1vw, 16px); }
.sec-limits ul{ list-style:none; margin-top:16px; border-top:1px solid var(--line-2); }
.sec-limits li{ padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink-2); font-size:var(--t-small); }
.sec-report{ margin-top:72px; color:var(--ink-3); font-size:var(--t-small); }
.sec-report a{ color:var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 1020px){
  .sec-banners > li{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .sec-banners{ gap:32px; }
  .sec-status-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 860px){
  .sec-head-grid, .sec-split, .sec-verify{ grid-template-columns:minmax(0,1fr); gap:56px; }
  .sec-head-device{ max-width:240px; }
  .sec-dial{ position:static; order:-1; max-width:200px; justify-self:start; }
}
@media (max-width: 560px){
  .sec-head-grid{ gap:40px; }
  .sec-head-device{ max-width:220px; }
  .sec-dial{ max-width:160px; }
  .sec-banner{ padding:18px; gap:12px; }
  .sec-banner .i{ width:26px; height:26px; }
  .sec-status > div{ flex-direction:column; align-items:flex-start; gap:6px; }
  .sec-report{ margin-top:32px; }
  .sec-attacks thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .sec-attacks tbody{ display:block; border-top:1px solid var(--line-2); }
  .sec-attacks tr{ display:block; padding:18px 0; border-bottom:1px solid var(--line); }
  table.data.sec-attacks td{ display:block; width:auto; padding:0; border:0; }
  table.data.sec-attacks td:first-child{ width:auto; margin-bottom:6px; }
}