/* Learning Hub deep-dive pages (zero_trust.html, threat_intel_mitre.html). Uses theme.css tokens. */
.dd { --ok: 16 185 129; --bad: 239 68 68; --warn: 245 158 11; --info: 56 189 248; --orange: 249 115 22; }
html.light .dd { --ok: 4 120 87; --bad: 220 38 38; --warn: 180 83 9; --info: 2 132 199; --orange: 194 65 12; }

/* The site-wide button hover (cyan border, scale, glow) fights these controls */
.dd button, .dd .dd-chip, .dd .dd-btn { transform:none !important; box-shadow:none !important; }
.dd :focus-visible { outline:2px solid rgb(var(--c-primary)); outline-offset:2px; }
details > summary::-webkit-details-marker { display:none; }
.dd summary { list-style:none; cursor:pointer; }

.dd-crumb { font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--c-osv) / var(--a-osv)); }
.dd-crumb a { color:rgb(var(--c-primary)); }
.dd-crumb a:hover { text-decoration:underline; }
.dd-kicker { font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--c-primary)); }
.dd-h1 { font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.05; color:rgb(var(--c-ink)); }
.dd-h2 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.45rem; line-height:1.2; color:rgb(var(--c-ink)); }
.dd-h3 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; color:rgb(var(--c-ink)); }
.dd-text { color:rgb(var(--c-ink) / var(--ta-ink)); line-height:1.65; }
.dd-muted { color:rgb(var(--c-osv) / var(--a-osv)); }
.dd-mono { font-family:'JetBrains Mono',monospace; }
.dd-section { padding:1.25rem; border-radius:1.5rem; scroll-margin-top:7rem; }
@media (min-width:768px) { .dd-section { padding:2rem; } }
.dd-num { display:inline-flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem; border-radius:.55rem; font-family:'JetBrains Mono',monospace; font-size:.8rem; font-weight:700; color:rgb(var(--c-primary)); background:rgb(var(--c-primary) / .1); border:1px solid rgb(var(--c-primary) / .3); flex-shrink:0; }

/* in-page table of contents */
.dd-toc a { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .7rem; border-radius:9999px; font-size:.72rem; color:rgb(var(--c-osv) / var(--a-osv)); border:1px solid rgb(var(--c-outline-v) / var(--a-outline-v)); }
.dd-toc a:hover { color:rgb(var(--c-primary)); border-color:rgb(var(--c-primary) / .5); }

/* controls */
.dd-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .75rem; border-radius:9999px; font-size:.75rem; font-family:'JetBrains Mono',monospace; color:rgb(var(--c-osv) / var(--a-osv)); border:1px solid rgb(var(--c-outline-v) / var(--a-outline-v)) !important; background:transparent; transition:color .15s, background .15s, border-color .15s; }
.dd-chip:hover { color:rgb(var(--c-primary)); border-color:rgb(var(--c-primary) / .5) !important; background:rgb(var(--c-primary) / .05) !important; }
.dd-chip[aria-pressed="true"], .dd-chip.is-on { color:rgb(var(--c-primary)); border-color:rgb(var(--c-primary) / .6) !important; background:rgb(var(--c-primary) / .12) !important; }
.dd-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1.3rem; border-radius:.55rem; font-family:'Space Grotesk',sans-serif; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--c-primary)); background:rgb(var(--c-primary) / .1); border:1px solid rgb(var(--c-primary) / .4) !important; }
.dd-btn:hover { background:rgb(var(--c-primary) / .18) !important; }
.dd-btn:disabled { opacity:.5; cursor:not-allowed; }
.dd-btn.ghost { background:transparent; color:rgb(var(--c-osv) / var(--a-osv)); border-color:rgb(var(--c-outline-v) / var(--a-outline-v)) !important; }
.dd-label { font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:rgb(var(--c-osv) / var(--a-osv)); }

/* cards, notes, badges */
.dd-card { border-radius:1rem; padding:1rem; border:1px solid rgb(var(--c-outline-v) / var(--a-outline-v)); background:rgb(var(--c-surface) / .35); }
html.light .dd-card { background:rgb(var(--c-surface) / .8); }
.dd-pick { text-align:left; width:100%; transition:border-color .15s, background .15s; }
.dd-pick:hover { border-color:rgb(var(--c-primary) / .5) !important; }
.dd-pick[aria-pressed="true"], .dd-pick[aria-selected="true"] { border-color:rgb(var(--c-primary)) !important; background:rgb(var(--c-primary) / .08) !important; }
.dd-info { border-left:3px solid rgb(var(--tone, var(--c-primary))); background:rgb(var(--tone, var(--c-primary)) / .06); border-radius:0 .6rem .6rem 0; padding:.8rem 1rem; color:rgb(var(--c-ink) / var(--ta-ink)); line-height:1.6; }
.dd-badge { --tone: var(--c-primary); display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .55rem; border-radius:9999px; font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:rgb(var(--tone)); background:rgb(var(--tone) / .1); border:1px solid rgb(var(--tone) / .35); white-space:nowrap; }
.t-ok { --tone: var(--ok); } .t-bad { --tone: var(--bad); } .t-warn { --tone: var(--warn); } .t-info { --tone: var(--info); } .t-orange { --tone: var(--orange); } .t-violet { --tone: var(--c-accent-2); }
.dd-teach { display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .55rem; border-radius:.35rem; font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--warn)); border:1px dashed rgb(var(--warn) / .6); }
.dd-log { font-family:'JetBrains Mono',monospace; font-size:.74rem; line-height:1.55; max-height:16rem; overflow-y:auto; overscroll-behavior:contain; border-radius:.75rem; padding:.75rem .9rem; background:rgb(var(--c-bg) / .6); border:1px solid rgb(var(--c-outline-v) / var(--a-outline-v)); }
.dd-log p { margin:.1rem 0; color:rgb(var(--c-ink) / var(--ta-ink)); }
.dd-log .ok { color:rgb(var(--ok)); } .dd-log .bad { color:rgb(var(--bad)); } .dd-log .warn { color:rgb(var(--warn)); } .dd-log .dim { color:rgb(var(--c-osv) / var(--a-osv)); }
.dd-code { font-family:'JetBrains Mono',monospace; font-size:.74rem; line-height:1.6; white-space:pre; overflow-x:auto; border-radius:.75rem; padding:.9rem 1rem; background:rgb(var(--c-bg) / .6); border:1px solid rgb(var(--c-outline-v) / var(--a-outline-v)); color:rgb(var(--c-ink) / var(--ta-ink)); }

/* expandable cards */
.dd-fold { border-radius:1rem; border:1px solid rgb(var(--c-outline-v) / var(--a-outline-v)); background:rgb(var(--c-surface) / .35); }
html.light .dd-fold { background:rgb(var(--c-surface) / .8); }
.dd-fold[open] { border-color:rgb(var(--c-primary) / .45); }
.dd-fold summary { display:flex; gap:.75rem; align-items:flex-start; padding:1rem; }
.dd-fold .dd-chev { margin-left:auto; transition:transform .2s; color:rgb(var(--c-osv) / var(--a-osv)); }
.dd-fold[open] .dd-chev { transform:rotate(180deg); }

/* SVG diagrams */
.dd-svg { width:100%; height:auto; display:block; }
.dd-svg text { font-family:'JetBrains Mono',monospace; fill:rgb(var(--c-ink) / var(--ta-ink)); }
.dd-svg .ico { font-family:'Material Symbols Outlined'; font-size:24px; fill:rgb(var(--c-primary)); }
.dd-svg .node-bg { fill:rgb(var(--c-surface)); stroke:rgb(var(--c-primary) / .55); stroke-width:1.5; transition:fill .3s, stroke .3s; }
.dd-svg .edge { stroke:rgb(var(--c-outline-v) / .55); stroke-width:2; fill:none; transition:stroke .3s; }
.dd-svg [data-state="bad"] .node-bg { fill:rgb(var(--bad) / .18); stroke:rgb(var(--bad)); }
.dd-svg [data-state="bad"] .ico { fill:rgb(var(--bad)); }
.dd-svg [data-state="ok"] .node-bg { fill:rgb(var(--ok) / .14); stroke:rgb(var(--ok)); }
.dd-svg [data-state="ok"] .ico { fill:rgb(var(--ok)); }
.dd-svg .edge[data-state="bad"] { stroke:rgb(var(--bad)); stroke-dasharray:6 4; animation:dd-flow .6s linear infinite; }
.dd-svg .edge[data-state="ok"] { stroke:rgb(var(--ok)); }
.dd-svg .edge[data-state="blocked"] { stroke:rgb(var(--bad) / .6); stroke-dasharray:2 5; }
.dd-svg .edge[data-state="hi"] { stroke:rgb(var(--c-primary)); stroke-width:3; stroke-dasharray:6 4; animation:dd-flow .6s linear infinite; }
@keyframes dd-flow { to { stroke-dashoffset:-20; } }

/* bars */
.dd-bar { height:.7rem; border-radius:9999px; background:rgb(var(--c-outline-v) / var(--a-outline-v)); overflow:hidden; }
.dd-bar > span { display:block; height:100%; border-radius:9999px; background:rgb(var(--tone, var(--c-primary))); transition:width .4s ease; }

@media (prefers-reduced-motion: reduce) {
    .dd *, .dd *::before, .dd *::after { transition:none !important; animation:none !important; }
}
@media print {
    nav, aside, footer, #scroll-progress, #custom-cursor, .md\:hidden.fixed { display:none !important; }
    main { margin:0 !important; padding-top:0 !important; }
}

/* ATT&CK matrix (threat_intel_mitre.html) */
.ti-matrix { display:grid; grid-template-columns:repeat(15, minmax(8.6rem, 1fr)); gap:.4rem; min-width:132rem; }
.ti-colh { padding:.55rem .6rem; border-radius:.55rem; background:rgb(var(--c-primary) / .1); border:1px solid rgb(var(--c-primary) / .3); }
.ti-colh a { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.78rem; color:rgb(var(--c-ink)); line-height:1.2; display:block; }
.ti-colh a:hover { color:rgb(var(--c-primary)); }
.ti-colh .ti-new { font-size:.55rem; letter-spacing:.1em; padding:.02rem .3rem; border-radius:.2rem; color:rgb(var(--c-on-accent)); background:rgb(var(--c-accent-2)); margin-left:.25rem; vertical-align:middle; }
.ti-tech { display:block; width:100%; text-align:left; padding:.45rem .55rem; border-radius:.45rem; font-size:.72rem; line-height:1.3; color:rgb(var(--c-ink) / var(--ta-ink)); border:1px solid rgb(var(--c-outline-v) / var(--a-outline-v)) !important; background:rgb(var(--c-surface) / .35); margin-top:.4rem; transition:background .15s, border-color .15s; }
html.light .ti-tech { background:rgb(var(--c-surface) / .85); }
.ti-tech:hover { border-color:rgb(var(--c-primary) / .5) !important; }
.ti-tech .tid { display:block; font-family:'JetBrains Mono',monospace; font-size:.6rem; color:rgb(var(--c-osv) / var(--a-osv)); }
.ti-tech[aria-pressed="true"] { border-color:rgb(var(--c-primary)) !important; background:rgb(var(--c-primary) / .12) !important; }
.ti-matrix[data-layer="path"] .ti-tech[data-hit] { background:rgb(var(--orange) / .2) !important; border-color:rgb(var(--orange)) !important; }
.ti-matrix[data-layer="cov"] .ti-tech[data-cov="ok"] { background:rgb(var(--ok) / .18) !important; border-color:rgb(var(--ok)) !important; }
.ti-matrix[data-layer="cov"] .ti-tech[data-hit]:not([data-cov="ok"]) { background:rgb(var(--bad) / .16) !important; border-color:rgb(var(--bad)) !important; }
.ti-matrix[data-layer="path"] .ti-tech:not([data-hit]), .ti-matrix[data-layer="cov"] .ti-tech:not([data-hit]):not([data-cov]) { opacity:.45; }
.ti-key { cursor:help; border-radius:.2rem; color:rgb(var(--c-primary)); background:rgb(var(--c-primary) / .1); padding:0 .15rem; }
.ti-key:hover, .ti-key:focus, .ti-key.is-on { background:rgb(var(--c-primary) / .25); outline:none; }
.tlp { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.75rem; letter-spacing:.06em; padding:.35rem .7rem; border-radius:.35rem; background:#000 !important; border:2px solid transparent !important; }
.tlp[aria-pressed="true"] { border-color:currentColor !important; }
/* SVG hotspots: draw focus on the shape, not a box around the group */
.dd-svg g[role="button"]:focus, .dd-svg g[role="button"]:focus-visible { outline:none; }
.dd-svg g[role="button"]:focus-visible > polygon, .dd-svg g[role="button"]:focus-visible > circle { stroke:rgb(var(--c-primary)); stroke-width:3; stroke-dasharray:5 3; }
/* Cryptography Basics: hash bit-diff grid */
.cr-bits { display:grid; grid-template-columns:repeat(64, minmax(0, 1fr)); gap:2px; }
.cr-bits i { aspect-ratio:1; border-radius:2px; background:rgb(var(--c-outline-v) / .3); }
.cr-bits i[data-d] { background:rgb(var(--c-primary)); }
.cr-flip { color:rgb(var(--bad)); background:rgb(var(--bad) / .18); border-radius:.15rem; }

/* appsec_career.html: clickable code lines + DFD labels */
.ap-code { font:500 .78rem/1.55 'JetBrains Mono', monospace; background:rgb(var(--c-shade) / .35); border:1px solid rgb(var(--c-outline-v) / .3); border-radius:.75rem; padding:.5rem 0; overflow-x:auto; }
.ap-code button { font:inherit; background:none; border:0; border-radius:0; display:flex; width:100%; min-width:max-content; text-align:left; padding:.1rem .9rem .1rem 0; color:rgb(var(--c-ink)); white-space:pre; border-left:3px solid transparent; cursor:pointer; }
.ap-code button:hover, .ap-code button:focus-visible { background:rgb(var(--c-primary) / .1); outline:none; border-left-color:rgb(var(--c-primary)); }
.ap-code button span { font-family:inherit !important; }
.ap-code .ln { width:2.6rem; flex:none; text-align:right; padding-right:.9rem; color:rgb(var(--c-osv) / .55); user-select:none; }
.ap-code button[data-st="hit"] { background:rgb(var(--ok) / .14); border-left-color:rgb(var(--ok)); }
.ap-code button[data-st="bad"] { background:rgb(var(--bad) / .12); border-left-color:rgb(var(--bad)); }
html.light .ap-code { background:rgb(var(--c-shade) / .06); }
.dd-svg .ap-fl { fill:rgb(var(--c-osv) / var(--a-osv)); }
.dd-svg .ap-fl, .dd-svg g[data-el^="f-"] text { paint-order:stroke; stroke:rgb(var(--c-surface)); stroke-width:4px; stroke-linejoin:round; }
.dd-svg .ap-ds { stroke:rgb(var(--c-primary)); stroke-width:2; }
.dd-svg g[data-el][aria-pressed="true"] .node-bg { stroke:rgb(var(--c-primary)); stroke-width:2.5; }
.dd-svg g[data-el][aria-pressed="true"] .edge { stroke:rgb(var(--c-primary)); stroke-width:2.5; }