/* /security/ — page-security.php. Tokens from site.css only; layout glue around existing components (.sec-). */

/* Hero product window: access map (account · level · MFA) + controls list */
.sec-mock{max-width:1000px}
.sec-dash{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.sec-map ul{list-style:none}
.sec-map li{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}
.sec-map li:last-child{border-bottom:0}
.sec-ic{width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--lime);display:grid;place-items:center}
.sec-acct{min-width:0;display:flex;flex-direction:column;gap:2px}
.sec-acct b{font:600 14px var(--head);letter-spacing:-.01em;color:var(--ink)}
.sec-acct em{font:500 12.5px var(--text);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.sec-lvl{font:600 12.5px var(--text);color:var(--olive);background:var(--lime-soft);border-radius:6px;padding:4px 8px;text-align:center;max-width:170px}
.sec-mfa{font:500 13px var(--text);color:var(--muted);white-space:nowrap}
.sec-mfa .ok{color:var(--pos)}
.sec-ctl h3,.recon.sec-ctl p.rc-t{font:600 15px var(--head);letter-spacing:-.01em;margin-bottom:6px}
.sec-ctl li{align-items:center}
.sec-ctl li>span:first-child{min-width:0}
.sec-ctl .ok{color:var(--pos)}
.sec-mock .float-b{bottom:18px}

/* Access levels + records: icon cards with a mono level chip */
.sec-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px;text-align:left}
.sec-keep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:44px auto 0;max-width:860px;text-align:left}
.sec-levels .fx,.sec-keep .fx{display:flex;flex-direction:column;align-items:flex-start}
.sec-tile{width:40px;height:40px;border-radius:12px;background:var(--ink);color:var(--lime);display:grid;place-items:center;flex:none;margin-bottom:16px}
.sec-chip{font:600 12.5px var(--text);color:var(--olive);background:var(--lime-soft);border-radius:6px;padding:4px 8px;margin-top:10px}
.sec-keep .fill{white-space:normal}
.sec-funds{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font:500 13px var(--text);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-variant-numeric:tabular-nums}
.sec-funds svg{color:var(--olive);flex:none}

/* Removal slab: single-column list on the ink slab */
.sec-slab ul{grid-template-columns:minmax(0,1fr)}

/* Reporting a concern */
.sec-report{display:flex;gap:18px;align-items:flex-start;max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.sec-report .sec-tile{margin-bottom:0}
.sec-report h2{font-size:clamp(22px,2.4vw,28px)}
.sec-report p{margin-top:8px}
.sec-report .fill{white-space:normal}

@media (max-width:1060px){
  .sec-levels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:880px){
  .sec-dash{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .sec-levels,.sec-keep{grid-template-columns:minmax(0,1fr)}
  .sec-map li{grid-template-columns:30px minmax(0,1fr) auto;gap:6px 10px}
  .sec-lvl{grid-column:2/4;justify-self:start;max-width:none;text-align:left}
  .sec-mfa{grid-column:3;grid-row:1}
  .sec-report{flex-direction:column;padding:22px}
  .sec-funds{display:flex;text-align:left}
}

/* Three protection levels (/security/?r=uk|pk|nr): no short last row (technical QA 14 Oct 2026, item 8). */
@media (min-width:1061px){
  .sec-levels:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:561px) and (max-width:1060px){
  .sec-levels > :last-child:nth-child(odd){grid-column:1/-1}
}

/* Security pack (23 Oct 2026): hosting cards, provider note, incident heading, overview CTA slab */
.sec-hosts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px;text-align:left}
.sec-hosts .fx{display:flex;flex-direction:column;align-items:flex-start}
.sec-hosts .sec-chip{margin:8px 0 4px}
.sec-note{margin-top:22px;font:500 13px var(--text);color:var(--muted)}
.sec-report .sec-report-2{margin-top:22px}
.sec-ov{align-items:center}
.sec-ov-cta{position:relative;z-index:1;display:flex;justify-content:flex-end}
@media (max-width:880px){
  .sec-hosts{grid-template-columns:minmax(0,1fr)}
  .sec-ov{grid-template-columns:minmax(0,1fr)}
  .sec-ov-cta{justify-content:flex-start}
}
@media (max-width:560px){
  .sec-ov{padding:28px 22px}
}
@media (min-width:561px){
  .sec-keep > :last-child:nth-child(odd){grid-column:1/-1}
}