/* site-v2 · /security: the page's own compositions. Shared system: site.css. */

/* hero, ink: the threat map */
.sec-hero .phero__text { padding-top: 2vh; }
.tmap { margin: 0; }
.tmap__stage { position: relative; height: 560px; }
.tmap__cv, .tmap__svg { position: absolute; left: 0; top: 0; }
.tmap__svg { overflow: visible; }
.tmap__svg .line { stroke: var(--paper); stroke-width: 1; shape-rendering: crispEdges; }
.tmap__svg .wall { fill: none; stroke: rgba(236, 232, 224, .5); stroke-width: 1; stroke-dasharray: 1 4; shape-rendering: crispEdges; }
.tmap__svg .edge { fill: none; stroke: rgba(236, 232, 224, .75); stroke-width: 1; shape-rendering: crispEdges; }
.tmap__svg .fr { fill: none; stroke: rgba(236, 232, 224, .22); stroke-width: 1; shape-rendering: crispEdges; }
.tmap__svg .pth { fill: none; stroke: rgba(236, 232, 224, .34); stroke-width: 1; }
.tmap__svg .pth--stop { stroke: rgba(236, 232, 224, .72); }
.tmap__svg .orb .o { fill: none; stroke: rgba(236, 232, 224, .22); stroke-width: 1; }
.tmap__svg .orb .o--dots { stroke: rgba(236, 232, 224, .6); stroke-width: 1.3; stroke-dasharray: 0 4.5; stroke-linecap: round; }
.tmap__svg .orb .nd { fill: var(--paper); }
.tmap__labels span { position: absolute; font-family: var(--mono); font-size: 10px; line-height: 12px; letter-spacing: .06em; color: rgba(236, 232, 224, .72); white-space: nowrap; pointer-events: none; }
.tmap__labels span.st { color: var(--sig-night); }
.tmap__labels span.tag { letter-spacing: .2em; text-transform: uppercase; color: rgba(236, 232, 224, .62); }
.tmap__cap { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: var(--s4); }
.tmap__cap span { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 7px; height: 7px; }
.sw--stop { background: var(--signal); }
.sw--edge { width: 9px; height: 9px; border: 1px solid rgba(236, 232, 224, .75); border-left: 0; }

/* 01 · the threat model, split down the middle */
.tm__head { max-width: 560px; margin-bottom: var(--s7); }
.tm__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tm__col--stop { padding-right: 56px; }
.tm__col--edge { padding-left: 56px; color: var(--paper); }
.tm__h { padding-bottom: 14px; font-family: var(--display); font-weight: 400; font-stretch: 104%; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -0.03em; line-height: 1; border-bottom: 1px solid var(--ink); }
.tm__col--edge .tm__h { border-bottom-color: var(--paper); }
.tm__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .2); font-size: 15px; line-height: 1.55; color: var(--ink-2); transition: background .2s; }
.tm__list li b { font-family: var(--pixel); font-weight: 800; font-size: 13px; line-height: 23px; color: var(--stone); }
.tm__col--edge .tm__list li { border-bottom-color: rgba(236, 232, 224, .16); color: rgba(236, 232, 224, .78); }
.tm__col--edge .tm__list li b { color: rgba(236, 232, 224, .62); }
.tm__col--edge code { color: var(--paper); }
.tm__list a { margin-left: 4px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* 02 · the seven lanes */
.lanes { border-top: 1px solid var(--ink); }
.lanes__head, .lane { display: grid; grid-template-columns: 200px minmax(220px, 1.3fr) minmax(0, 1.1fr) minmax(0, .95fr) minmax(0, .7fr); column-gap: var(--s4); align-items: start; }
.lanes__head { padding: 12px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .3); font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
.lanes__axis { display: flex; justify-content: space-between; }
.lanes__axis i { font-style: normal; }
.lane { padding: 16px 0 14px; border-bottom: 1px solid rgb(var(--ink-rgb) / .2); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lane code { font-size: 12.5px; color: var(--ink); }
.lane__d { font-family: var(--display); font-weight: 430; font-stretch: 104%; font-size: 16.5px; line-height: 1.25; color: var(--ink); }
.lane__cv { position: relative; height: 26px; }
.lane__cv canvas { position: absolute; left: 0; top: 0; }
.lane__why { grid-column: 3 / -1; margin-top: 6px; font-size: 13.5px; color: var(--stone); }
.more-t { margin-top: var(--s6); border-top: 1px solid rgb(var(--ink-rgb) / .3); }
.more-t summary { padding: 14px 0; cursor: pointer; list-style: none; }
.more-t summary::-webkit-details-marker { display: none; }
.more-t summary .mono-l { color: var(--ink); }
.more-t summary .mono-l::before { content: '+'; display: inline-block; width: 18px; font-size: 13px; }
.more-t[open] summary .mono-l::before { content: '−'; }
.more-t__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); padding: var(--s3) 0 var(--s4); }
.spec caption { text-align: left; margin-bottom: 10px; }

/* 03 · human gates */
.gch > *, .vfy > *, .gnd > * { min-width: 0; }
.nlist code, .tm__list code, .lane code { overflow-wrap: anywhere; }
.gch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); }
.gch__h { display: flex; gap: 14px; align-items: baseline; margin-bottom: var(--s3); font-family: var(--display); font-weight: 420; font-stretch: 104%; font-size: 24px; letter-spacing: -0.015em; color: var(--paper); }
.gch__h b { font-family: var(--pixel); font-weight: 800; font-size: 16px; color: rgba(236, 232, 224, .62); }
.gch .code { margin: var(--s3) 0 var(--s3); }
.vfy { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s7); margin-top: calc(var(--s8) + 2vh); }
.vfy h3, .gnd h3 { margin-bottom: var(--s3); color: var(--paper); }
.dec { border: 1px solid rgba(236, 232, 224, .35); }
.dec__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 9px 14px 8px; border-bottom: 1px solid rgba(236, 232, 224, .18); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 232, 224, .62); }
.dec__rows li { display: grid; grid-template-columns: minmax(0, 1.25fr) 156px 46px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(236, 232, 224, .12); font-size: 13.5px; line-height: 1.45; color: rgba(236, 232, 224, .78); }
.dec__rows li:last-child { border-bottom: 0; }
.dec__what { color: var(--paper); }
.dec__msg { font-family: var(--mono); font-size: 10.5px; color: rgba(236, 232, 224, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dec__msg em { font-style: normal; background: var(--paper); color: var(--ink); padding: 0 2px; }
.dec__sig { display: block; }
.dec__res { font-family: var(--mono); font-size: 11.5px; color: rgba(236, 232, 224, .78); }
.dec__res.ok { color: var(--paper); }
.dec__static { margin-top: var(--s3); }
.gnd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); margin-top: calc(var(--s8) + 2vh); }

/* 04 · audit log */
.bytes { margin-top: var(--s6); }
.bytes__cv { display: block; }
.bytes__cap { display: flex; justify-content: space-between; margin-top: 10px; }
.bytes__hit { color: var(--ink); }
.code--term { margin-top: 0; }
.proves { display: grid; margin-top: var(--s6); border-top: 1px solid var(--ink); }
.proves > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s4); padding: 14px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .2); }
.proves dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; line-height: 23px; color: var(--stone); }
.proves dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* 05–07 · end matter */
.endm { padding-top: 14vh; }
.endm__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; padding: var(--s6) 0 var(--s7); border-top: 1px solid var(--ink); }
.endm__row .body { max-width: 560px; margin-top: var(--s3); }
.endm__row .h3 { font-size: clamp(24px, 2.2vw, 32px); }
.resp { max-width: 520px; margin-top: var(--s5); }

@media (max-width: 1180px) and (min-width: 760px) {
  .phero.sec-hero { grid-template-columns: minmax(0, 1fr); }
  .tmap { margin-top: var(--s6); }
  .lanes__head, .lane { grid-template-columns: 170px minmax(160px, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .lanes__head > :nth-child(5), .lane > :nth-child(5) { display: none; }
  .vfy, .gch, .gnd { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  .tmap { margin-top: var(--s6); }
  .tmap__stage { height: 420px; }
  .tm__cols { display: block; }
  .tm__col--stop { padding: 0 0 var(--s6); }
  .tm__col--edge { margin: 0 -16px; padding: var(--s6) 16px var(--s4); background: var(--ink); }
  .lanes__head { display: none; }
  .lane { display: grid; grid-template-columns: 1fr; row-gap: 4px; }
  .lane__cv { order: -1; height: 24px; margin-bottom: 6px; }
  .lane__why { grid-column: 1; }
  .more-t__body { grid-template-columns: 1fr; }
  .gch, .vfy, .gnd { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .dec__rows li { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); row-gap: 6px; }
  .dec__res { text-align: right; }
  .dec__chk { display: none; }
  .dec__msg { grid-column: 1 / -1; }
  .dec__sig { display: none; }
  .proves > div { grid-template-columns: 1fr; gap: 4px; }
  .endm__row { grid-template-columns: 1fr; row-gap: var(--s3); }
}

/* phones (site-v5-live): /security (and the parts the landing pages borrow). Labels at 11px. */
@media (max-width: 759px) {
  .tag, .st { font-size: 11px; }
  .tmap__labels > span { font-size: 11px; }
  .dec__cap span, .dec__msg, .bytes__hit { font-size: 11px; }
  .proves dt { font-size: 11px; }
  /* the end matter (and the landing pages' questions): rows at the phone's rhythm, no stacked gaps */
  .endm { padding-top: 64px; }
  .endm__row { padding: var(--s5) 0 var(--s6); }
  .endm__row:last-child { padding-bottom: 0; }
}

/* ==========================================================================
   phone-design, Round 2: /security on a phone (≤ 759px). Every rule is inside the phone query.
   ========================================================================== */
@media (max-width: 759px) {
  /* hero: the headline, the threat map as a band under it, the lede, then the contents */
  .phero.sec-hero { display: flex; flex-direction: column; }
  .sec-hero .phero__text { display: contents; }
  .sec-hero .kicker { order: 1; }
  .sec-hero .h1p { order: 2; }
  .sec-hero .tmap { order: 3; margin-top: 28px; }
  .sec-hero .lede { order: 4; margin-top: 32px; }
  .sec-hero .toc { order: 5; }

  /* 01 · the threat model, one side at a time: what it stops on paper, what it doesn't on ink (js/phone.js) */
  #threats .tm__head { margin-bottom: var(--s5); }
  #threats .tm__cols { --tab: var(--ink); --tab-rgb: var(--ink-rgb); display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 26px; }   /* the tabs' colours, taken here: the ink column's own remap (dark theme) doesn't reach them */
  #threats .tm__cols::before { content: ''; grid-row: 1; grid-column: 1 / -1; align-self: end; border-bottom: 1px solid var(--ink); }
  #threats .tm__col { display: contents; }
  #threats .tm__h { grid-row: 1; display: flex; align-items: flex-end; min-height: 44px; padding-bottom: 12px; border-bottom: 0; font-size: 30px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #threats .tm__col--stop .tm__h { grid-column: 1; }
  #threats .tm__col--edge .tm__h { grid-column: 2; color: var(--tab); }
  #threats .tm__cols[data-sel] .tm__h { color: rgb(var(--tab-rgb) / .38); }
  #threats .tm__cols[data-sel] .tm__h[aria-pressed="true"] { color: var(--tab); box-shadow: inset 0 -2px 0 var(--tab); }
  #threats .tm__list { grid-column: 1 / -1; }
  #threats .tm__cols[data-sel="stop"] .tm__col--edge .tm__list, #threats .tm__cols[data-sel="edge"] .tm__col--stop .tm__list { display: none; }
  #threats .tm__col--edge .tm__list { margin: 0 -20px; padding: 6px 20px 20px; background: var(--raised); }
  #threats .tm__list li { grid-template-columns: 46px minmax(0, 1fr); font-size: 15.5px; }

  /* 02 · the seven destinations, one to a screen, each with its lane drawn large (js/phone.js) */
  #network .lanes { border-top: 0; margin-top: var(--s4); }
  #network .lane { padding: 22px 0 6px; border-bottom: 0; row-gap: 6px; }
  #network .lane__cv { height: 76px; margin-bottom: 16px; }
  #network .lane__d { margin-bottom: 6px; font-size: 22px; }
  #network .lane code { font-size: 13px; }

  /* 03 · the two ways to say yes, one at a time (js/phone.js) */
  #gates .gch { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 18px; row-gap: 0; }
  #gates .gch::before { content: ''; grid-row: 1; grid-column: 1 / -1; align-self: end; border-bottom: 1px solid rgba(236, 232, 224, .35); }
  #gates .gch__c { display: contents; }
  #gates .gch__h { grid-row: 1; align-items: flex-end; min-height: 44px; margin-bottom: 0; padding-bottom: 12px; font-size: 17px; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #gates .gch__c:first-child .gch__h { grid-column: 1; }
  #gates .gch__c:last-child .gch__h { grid-column: 2; }
  #gates .gch__c > :not(.gch__h) { grid-column: 1 / -1; }
  #gates .gch__c > .nlist, #gates .gch__c > .code { margin-top: var(--s4); }
  #gates .gch__c > .code + .nlist { margin-top: var(--s4); }
  #gates .gch[data-sel] .gch__h { color: rgba(236, 232, 224, .45); }
  #gates .gch[data-sel] .gch__h[aria-pressed="true"] { color: var(--paper); box-shadow: inset 0 -2px 0 var(--paper); }
  #gates .gch[data-sel="t"] .gch__c:last-child > :not(.gch__h), #gates .gch[data-sel="w"] .gch__c:first-child > :not(.gch__h) { display: none; }
}