/* Copyright (c) 2026 kosa8. All rights reserved. Proprietary; see LICENSE. */

/* /security-teams/ and /security-teams/frameworks/ only, on top of site.css.
 *
 * The attack diagram (.atk) is CSS only: one injected instruction makes six
 * attempts, and a pixel crosses each lane in steps until it meets the layer
 * that stops it. Every row runs on the same 15 s loop with its own keyframes
 * (row n starts at 0.6 + 2n s, hits its wall one second later, and stays
 * stopped until 14.2 s), the way home.css runs the touchdown scene. The
 * words are plain HTML; only the lane is decoration. A checkbox pauses it
 * (WCAG 2.2.2), and under prefers-reduced-motion nothing moves: every wall
 * shows its stopped state. No style attributes and no inline script, so the
 * production CSP holds. */

.st-mk { --mk: var(--ink); --mk-ink: var(--paper); }

/* ---- hero additions -------------------------------------------------------- */
.st-hero .pxh__sub { max-width: 40em; }
.st-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; }
.st-strip li { font: 500 12.5px/1 var(--mono); padding: 8px 10px; border: 1px solid var(--rule); background: var(--white); }
.st-strip li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--ink); vertical-align: 0; }

/* ---- the threat ------------------------------------------------------------ */
.st-trio .feat h3 { font-size: 20px; }
.st-trio .feat .ex { display: block; margin-top: 12px; font: 12.5px/1.5 var(--mono); color: var(--text-3); }

/* ---- the attack diagram ---------------------------------------------------- */
.atk { position: relative; border: 1px solid var(--rule); background: var(--white); }
.atk__bar { padding: 12px 130px 12px 16px; min-height: 50px; display: flex; align-items: center; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.atk__bar p { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.atk__pause { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.atk__btn { position: absolute; top: 9px; right: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--white); font: 600 12.5px/1 var(--mono); user-select: none; }
.atk__btn i { width: 10px; height: 10px; flex: none;
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / 3px 10px no-repeat, linear-gradient(var(--ink), var(--ink)) 7px 0 / 3px 10px no-repeat; }
.atk__btn .off { display: none; }
@media (prefers-reduced-motion: reduce) { .atk__btn { display: none; } .atk__bar { padding-right: 16px; } }
.atk__pause:focus-visible + .atk__btn { outline: 2px solid var(--text); outline-offset: 3px; }
.atk__pause:checked + .atk__btn { background: var(--accent-2); }
.atk__pause:checked + .atk__btn .on { display: none; }
.atk__pause:checked + .atk__btn .off { display: inline; }
.atk__pause:checked + .atk__btn i { background: linear-gradient(var(--ink), var(--ink)) 0 0 / 3px 10px no-repeat,
  linear-gradient(var(--ink), var(--ink)) 3px 2px / 3px 6px no-repeat, linear-gradient(var(--ink), var(--ink)) 6px 4px / 3px 2px no-repeat; }
.atk__src { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: baseline;
  padding: 16px; border-bottom: 1px dashed var(--line-2); }
.atk__src b { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 7px; background: var(--warn); color: var(--white); }
.atk__src code { background: none; border: 0; padding: 0; font-size: 13.5px; color: var(--text); }
.atk__rows { list-style: none; margin: 0; padding: 0; }
.atk__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(90px, .9fr) minmax(0, 1.35fr); align-items: stretch; border-bottom: 1px solid var(--line); }
.atk__row:last-child { border-bottom: 0; }
.atk__try { display: flex; gap: 12px; align-items: center; padding: 14px 16px; min-width: 0; }
.atk__n { font: 600 11px/1 var(--mono); color: var(--text-3); flex: none; }
.atk__try code { background: none; border: 0; padding: 0; font-size: 13px; overflow-wrap: anywhere; }
.atk__lane { position: relative; margin: 0; align-self: center; height: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 22%, transparent) 0 4px, transparent 4px) 0 50% / 12px 2px repeat-x; }
.atk__px { position: absolute; top: 0; left: 0; width: 12px; height: 12px; background: var(--ink); opacity: 0; }
.atk__px::after { content: ""; position: absolute; left: 4px; top: 4px; width: 4px; height: 4px; background: var(--warn); }
.atk__wall { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 4px 14px; align-content: center; padding: 14px 16px 14px 0; }
.atk__brick { grid-row: span 3; align-self: stretch; min-height: 44px;
  background: linear-gradient(var(--white) 0 2px, transparent 2px) 0 0 / 14px 8px, var(--ink); }
.atk__wall b { font: 600 13px/1.3 var(--mono); }
.atk__wall .out { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.atk__stamp { justify-self: start; font: 700 10.5px/1 var(--mono); letter-spacing: .08em; padding: 4px 6px; border: 1px solid var(--rule); background: var(--paper-2); }
.atk__row--held .atk__stamp { background: var(--accent-2); }
.atk__row--stop .atk__stamp { background: var(--warn-2); }
.atk__row--rec .atk__stamp { background: var(--ok-2); }
.atk__foot { padding: 12px 16px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--text-3); }

/* Motion. Generated timeline: see the comment at the top. */
@media (prefers-reduced-motion: no-preference) {
  .atk__px { animation: 15s steps(1, end) infinite both; }
  .atk__brick { animation: 15s steps(1, end) infinite both; }
  .atk__stamp, .atk__try code { animation: 15s steps(1, end) infinite both; }
  .atk__row:nth-child(1) .atk__px { animation-name: atk-px1; } .atk__row:nth-child(1) .atk__brick { animation-name: atk-w1; } .atk__row:nth-child(1) .atk__stamp { animation-name: atk-s1; } .atk__row:nth-child(1) .atk__try code { animation-name: atk-t1; }
  .atk__row:nth-child(2) .atk__px { animation-name: atk-px2; } .atk__row:nth-child(2) .atk__brick { animation-name: atk-w2; } .atk__row:nth-child(2) .atk__stamp { animation-name: atk-s2; } .atk__row:nth-child(2) .atk__try code { animation-name: atk-t2; }
  .atk__row:nth-child(3) .atk__px { animation-name: atk-px3; } .atk__row:nth-child(3) .atk__brick { animation-name: atk-w3; } .atk__row:nth-child(3) .atk__stamp { animation-name: atk-s3; } .atk__row:nth-child(3) .atk__try code { animation-name: atk-t3; }
  .atk__row:nth-child(4) .atk__px { animation-name: atk-px4; } .atk__row:nth-child(4) .atk__brick { animation-name: atk-w4; } .atk__row:nth-child(4) .atk__stamp { animation-name: atk-s4; } .atk__row:nth-child(4) .atk__try code { animation-name: atk-t4; }
  .atk__row:nth-child(5) .atk__px { animation-name: atk-px5; } .atk__row:nth-child(5) .atk__brick { animation-name: atk-w5; } .atk__row:nth-child(5) .atk__stamp { animation-name: atk-s5; } .atk__row:nth-child(5) .atk__try code { animation-name: atk-t5; }
  .atk__row:nth-child(6) .atk__px { animation-name: atk-px6; } .atk__row:nth-child(6) .atk__brick { animation-name: atk-w6; } .atk__row:nth-child(6) .atk__stamp { animation-name: atk-s6; } .atk__row:nth-child(6) .atk__try code { animation-name: atk-t6; }
  .atk__pause:checked ~ .atk__body * { animation-play-state: paused; }
}
@keyframes atk-px1 { 0% { opacity: 0; left: 0; } 4.000% { opacity: 1; left: 0; animation-timing-function: steps(7, end); } 10.667% { opacity: 1; left: calc(100% - 12px); } 11.333% { opacity: 0; left: calc(100% - 12px); } 100% { opacity: 0; left: calc(100% - 12px); } }
@keyframes atk-w1 { 0%, 10.667% { background-color: var(--line-2); } 10.667% { background-color: var(--warn); } 13.333% { background-color: var(--ink); } 94.667%, 100% { background-color: var(--line-2); } }
@keyframes atk-s1 { 0%, 10.667% { opacity: 0; } 10.667% { opacity: 1; } 94.667%, 100% { opacity: 0; } }
@keyframes atk-t1 { 0%, 4.000% { opacity: .4; } 4.000% { opacity: 1; } 94.667%, 100% { opacity: .4; } }
@keyframes atk-px2 { 0% { opacity: 0; left: 0; } 17.333% { opacity: 1; left: 0; animation-timing-function: steps(7, end); } 24.000% { opacity: 1; left: calc(100% - 12px); } 24.667% { opacity: 0; left: calc(100% - 12px); } 100% { opacity: 0; left: calc(100% - 12px); } }
@keyframes atk-w2 { 0%, 24.000% { background-color: var(--line-2); } 24.000% { background-color: var(--warn); } 26.667% { background-color: var(--ink); } 94.667%, 100% { background-color: var(--line-2); } }
@keyframes atk-s2 { 0%, 24.000% { opacity: 0; } 24.000% { opacity: 1; } 94.667%, 100% { opacity: 0; } }
@keyframes atk-t2 { 0%, 17.333% { opacity: .4; } 17.333% { opacity: 1; } 94.667%, 100% { opacity: .4; } }
@keyframes atk-px3 { 0% { opacity: 0; left: 0; } 30.667% { opacity: 1; left: 0; animation-timing-function: steps(7, end); } 37.333% { opacity: 1; left: calc(100% - 12px); } 38.000% { opacity: 0; left: calc(100% - 12px); } 100% { opacity: 0; left: calc(100% - 12px); } }
@keyframes atk-w3 { 0%, 37.333% { background-color: var(--line-2); } 37.333% { background-color: var(--warn); } 40.000% { background-color: var(--ink); } 94.667%, 100% { background-color: var(--line-2); } }
@keyframes atk-s3 { 0%, 37.333% { opacity: 0; } 37.333% { opacity: 1; } 94.667%, 100% { opacity: 0; } }
@keyframes atk-t3 { 0%, 30.667% { opacity: .4; } 30.667% { opacity: 1; } 94.667%, 100% { opacity: .4; } }
@keyframes atk-px4 { 0% { opacity: 0; left: 0; } 44.000% { opacity: 1; left: 0; animation-timing-function: steps(7, end); } 50.667% { opacity: 1; left: calc(100% - 12px); } 51.333% { opacity: 0; left: calc(100% - 12px); } 100% { opacity: 0; left: calc(100% - 12px); } }
@keyframes atk-w4 { 0%, 50.667% { background-color: var(--line-2); } 50.667% { background-color: var(--accent); } 53.333% { background-color: var(--ink); } 94.667%, 100% { background-color: var(--line-2); } }
@keyframes atk-s4 { 0%, 50.667% { opacity: 0; } 50.667% { opacity: 1; } 94.667%, 100% { opacity: 0; } }
@keyframes atk-t4 { 0%, 44.000% { opacity: .4; } 44.000% { opacity: 1; } 94.667%, 100% { opacity: .4; } }
@keyframes atk-px5 { 0% { opacity: 0; left: 0; } 57.333% { opacity: 1; left: 0; animation-timing-function: steps(7, end); } 64.000% { opacity: 1; left: calc(100% - 12px); } 64.667% { opacity: 0; left: calc(100% - 12px); } 100% { opacity: 0; left: calc(100% - 12px); } }
@keyframes atk-w5 { 0%, 64.000% { background-color: var(--line-2); } 64.000% { background-color: var(--warn); } 66.667% { background-color: var(--ink); } 94.667%, 100% { background-color: var(--line-2); } }
@keyframes atk-s5 { 0%, 64.000% { opacity: 0; } 64.000% { opacity: 1; } 94.667%, 100% { opacity: 0; } }
@keyframes atk-t5 { 0%, 57.333% { opacity: .4; } 57.333% { opacity: 1; } 94.667%, 100% { opacity: .4; } }
@keyframes atk-px6 { 0% { opacity: 0; left: 0; } 70.667% { opacity: 1; left: 0; animation-timing-function: steps(7, end); } 77.333% { opacity: 1; left: calc(100% - 12px); } 78.000% { opacity: 0; left: calc(100% - 12px); } 100% { opacity: 0; left: calc(100% - 12px); } }
@keyframes atk-w6 { 0%, 77.333% { background-color: var(--line-2); } 77.333% { background-color: var(--ok); } 80.000% { background-color: var(--ink); } 94.667%, 100% { background-color: var(--line-2); } }
@keyframes atk-s6 { 0%, 77.333% { opacity: 0; } 77.333% { opacity: 1; } 94.667%, 100% { opacity: 0; } }
@keyframes atk-t6 { 0%, 70.667% { opacity: .4; } 70.667% { opacity: 1; } 94.667%, 100% { opacity: .4; } }

@media (max-width: 760px) {
  .atk__row { grid-template-columns: minmax(0, 1fr); }
  .atk__try { padding-bottom: 6px; }
  .atk__lane { margin: 4px 16px; }
  .atk__wall { padding: 10px 16px 14px; }
}

/* ---- numbers with a source ------------------------------------------------- */
.st-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
@media (max-width: 960px) { .st-nums { grid-template-columns: minmax(0, 1fr); } }

/* ---- auditor kit ----------------------------------------------------------- */
.kit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.kit > div { padding: 22px 22px 24px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--white); }
.kit h3 { font-size: 18px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.kit h3::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--ink); box-shadow: none; }
.kit p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.kit .cmd { margin-top: 14px; }
.status { margin-top: 22px; padding: 16px 18px; border: 2px dashed var(--rule); background: var(--white); max-width: 860px; font-size: 15px; color: var(--text-2); }
.status b { color: var(--text); }
@media (max-width: 760px) { .kit { grid-template-columns: minmax(0, 1fr); } }

/* ---- where it runs --------------------------------------------------------- */
.feats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feat .has { display: block; margin-top: 12px; font: 12px/1.5 var(--mono); color: var(--text-3); }
@media (max-width: 960px) { .feats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .feats--4 { grid-template-columns: minmax(0, 1fr); } }

/* ---- frameworks map -------------------------------------------------------- */
.selfnote { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; margin-top: 26px; padding: 16px 18px; max-width: 860px;
  background: var(--warn-2); border: 1px solid var(--rule); font-size: 15px; line-height: 1.5; }
.selfnote::before { content: ""; width: 14px; height: 14px; margin-top: 3px; background: var(--warn); }
.selfnote b { display: block; font: 700 12.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.fw-key { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; padding: 0; font-size: 13.5px; color: var(--text-2); }
.fw-key li { display: flex; align-items: center; gap: 8px; }
.fw-toc { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.fw-toc a { display: inline-block; font: 500 12.5px/1 var(--mono); padding: 8px 10px; border: 1px solid var(--rule); background: var(--white); color: var(--text); text-decoration: none; }
.fw-toc a:hover { background: var(--accent-2); }
.fw td:first-child { white-space: nowrap; font: 600 13px/1.5 var(--mono); }
.fw td:nth-child(2) { min-width: 12em; }
.fw td:nth-child(3) { min-width: 16em; }
.fw td .tag { white-space: nowrap; }
.fw td small { display: block; margin-top: 4px; color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.tag--part { background: var(--paper-2); }
.tag--gap { background: var(--white); color: var(--text-2); border-style: dashed; }
.fw-src { margin-top: 12px; font-size: 13px; color: var(--text-3); }
.ctlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.ctlist li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--text-2); }
.ctlist li b { font: 600 13px/1.6 var(--mono); color: var(--text); }
@media (max-width: 760px) { .ctlist { grid-template-columns: minmax(0, 1fr); } .fw td:first-child { white-space: normal; } }