/* ============================================================
   lesson.css — styles for the lesson reader & its components.
   Loaded only on lesson pages, on top of styles.css.
   ============================================================ */

.lesson { max-width: var(--maxw-read); margin: 0 auto; padding: var(--sp-7) var(--sp-5) var(--sp-8); }

/* ---- header ---- */
.lesson-head { margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.lesson-eyebrow { font-size: var(--t-xs); letter-spacing: 0.16em; color: var(--signal); margin: 0 0 var(--sp-3); }
.lesson-head h1 { font-size: var(--t-2xl); margin: 0 0 var(--sp-3); }
.lesson-obj { color: var(--ink-dim); font-size: var(--t-md); margin: 0 0 var(--sp-3); }
.lesson-meta { font-size: var(--t-xs); color: var(--ink-faint); margin: 0; }

/* ---- prose ---- */
.lesson h2 { font-size: var(--t-lg); margin: var(--sp-7) 0 var(--sp-3); }
.lesson p { color: var(--ink-dim); margin: 0 0 var(--sp-4); }
.lesson strong { color: var(--ink); font-weight: 600; }
.lesson em { color: var(--ink); font-style: normal; border-bottom: 1px dotted var(--ink-faint); }

/* ---- OSI diagram (signature visual) ---- */
.osi-fig { margin: var(--sp-6) 0; }
.osi-cap { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-faint); text-align: center; margin-bottom: var(--sp-4); }
.osi-stack { display: flex; flex-direction: column; gap: 4px; }
.osi-layer {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lh, var(--signal));
  border-radius: var(--radius);
  animation: layerIn .4s ease both;
  transition: transform .15s, background .15s;
}
.osi-layer:hover { transform: translateX(4px); background: var(--surface-2); }
@keyframes layerIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.osi-n {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-md);
  color: var(--lh, var(--signal));
  text-align: center;
  background: color-mix(in srgb, var(--lh, var(--signal)) 14%, transparent);
  border-radius: var(--radius-sm); padding: 2px 0;
}
.osi-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.osi-pdu { font-size: var(--t-xs); color: var(--ink-faint); }
.osi-flow { display: flex; justify-content: space-between; margin-top: var(--sp-4); font-size: var(--t-xs); color: var(--ink-faint); }

/* ---- tables ---- */
.table-scroll { overflow-x: auto; margin: var(--sp-5) 0; }
.lesson-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.lesson-table th {
  text-align: left; font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  padding: var(--sp-3); border-bottom: 1px solid var(--line-bright);
}
.lesson-table td { padding: var(--sp-3); border-bottom: 1px solid var(--line); color: var(--ink-dim); vertical-align: top; }
.lesson-table tr:hover td { background: var(--surface); }
.lesson-table .cell-num { color: var(--signal); font-weight: 700; }

/* ---- callouts ---- */
.callout { margin: var(--sp-5) 0; padding: var(--sp-5); border-radius: var(--radius); border: 1px solid var(--line); border-left-width: 3px; background: var(--surface); }
.callout-head { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-2); }
.callout-body { color: var(--ink-dim); font-size: var(--t-sm); }
.callout-exam { border-left-color: var(--signal); }
.callout-exam .callout-head::before { content: "▸ "; color: var(--signal); }
.callout-trap { border-left-color: var(--status-weak); }
.callout-trap .callout-head::before { content: "⚠ "; color: var(--status-weak); }
.callout-note { border-left-color: var(--line-bright); }

/* ---- mnemonics ---- */
.mnemonic { background: var(--surface-2); border: 1px dashed var(--line-bright); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin: var(--sp-3) 0; display: flex; flex-direction: column; gap: 4px; }
.mnem-dir { font-size: var(--t-xs); color: var(--signal); letter-spacing: 0.06em; }
.mnem-phrase { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); color: var(--ink); }
.mnem-exp { font-size: var(--t-sm); color: var(--ink-faint); }

/* ---- key points ---- */
.keypoints { margin: var(--sp-7) 0 0; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.keypoints h2 { margin-top: 0; }
.keypoints ul { margin: 0; padding-left: 0; list-style: none; }
.keypoints li { color: var(--ink-dim); font-size: var(--t-sm); padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); position: relative; }
.keypoints li::before { content: "✓"; position: absolute; left: 0; color: var(--signal); font-family: var(--font-mono); }

/* ---- completion ---- */
.lesson-complete { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--line); text-align: center; }
.lesson-complete-note { font-size: var(--t-xs); color: var(--ink-faint); margin-bottom: var(--sp-4); font-family: var(--font-mono); }
.btn.is-done { background: var(--status-strong); color: #06231f; }

/* ---- lesson nav (prev/back/next) ---- */
.lesson-nav { max-width: var(--maxw-read); margin: 0 auto; padding: 0 var(--sp-5) var(--sp-7); display: flex; justify-content: space-between; gap: var(--sp-4); }

@media (max-width: 600px) {
  .osi-layer { grid-template-columns: 36px 1fr; }
  .osi-pdu { display: none; }
}

/* ---- lessons hub ---- */
.lessons-domain { margin-bottom: var(--sp-7); }
.lessons-domain-head { display: flex; align-items: baseline; gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); border-bottom-color: color-mix(in srgb, var(--dh, var(--line)) 40%, var(--line)); }
.ld-num { font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: 0.08em; }
.lessons-domain-head h2 { margin: 0; font-size: var(--t-lg); }
.ld-weight { margin-left: auto; font-size: var(--t-sm); color: var(--dh, var(--signal)); }
.obj-list { display: flex; flex-direction: column; gap: 6px; }
.obj-row { display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
a.obj-row.is-built { transition: border-color .15s, background .15s, transform .15s; }
a.obj-row.is-built:hover { text-decoration: none; border-color: var(--dh, var(--signal)); background: var(--surface-2); transform: translateX(3px); }
.obj-code { color: var(--dh, var(--signal)); font-weight: 700; font-size: var(--t-sm); }
.obj-title { color: var(--ink-dim); font-size: var(--t-sm); }
a.obj-row.is-built .obj-title { color: var(--ink); }
.obj-go { font-size: var(--t-xs); color: var(--ink-faint); }
a.obj-row.is-built .obj-go { color: var(--dh, var(--signal)); }
.obj-row .pill { white-space: nowrap; }
@media (max-width: 640px) {
  .obj-row { grid-template-columns: 40px 1fr; }
  .obj-row .pill, .obj-go { grid-column: 2; justify-self: start; }
}

/* ============================================================
   VISUAL COMPONENTS (subnetting & addressing)
   ============================================================ */
.viz { margin: var(--sp-6) 0; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.viz-cap { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-faint); margin-bottom: var(--sp-4); line-height: 1.5; }

/* ---- bit grid (shared by cidr-explorer & octet-mask) ---- */
.bitgrid { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.bit-octet { display: flex; gap: 3px; padding: 4px; border-radius: var(--radius-sm); background: var(--bg); }
.bit {
  width: 30px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 700;
  border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink-faint);
  transition: background .25s, color .25s, box-shadow .25s;
}
.bit-net  { background: var(--signal); color: #06231f; }
.bit-host { background: var(--surface-3); color: var(--ink-faint); }
.bit-boundary { box-shadow: 3px 0 0 0 var(--status-learn); position: relative; z-index: 1; }
.octet-labels { display: flex; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-2); font-size: var(--t-xs); color: var(--ink-faint); }
.octet-labels span { flex: 1; max-width: 132px; text-align: center; }

/* ---- cidr explorer ---- */
.cidr-slider-wrap { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-5) 0; }
.cidr-slider-wrap label { font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: 0.1em; }
.cidr-range { flex: 1; accent-color: var(--signal); height: 4px; cursor: pointer; }
.cidr-badge { font-size: var(--t-lg); font-weight: 700; color: var(--signal); min-width: 56px; text-align: right; }
.cidr-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.ro-item { background: var(--surface); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
.ro-label { font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: 0.04em; }
.ro-val { font-size: var(--t-md); color: var(--signal); font-weight: 700; }

/* ---- octet mask ---- */
.mask-decimal { text-align: center; margin-top: var(--sp-4); font-size: var(--t-md); color: var(--ink); font-weight: 700; }

/* ---- range map ---- */
.range-map .range-band { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); margin-bottom: 6px; background: var(--bg); border-left: 3px solid var(--rh, var(--signal)); border-radius: var(--radius-sm); }
.range-cidr { color: var(--rh, var(--signal)); font-weight: 700; font-size: var(--t-sm); }
.range-name { color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); }
.range-note { color: var(--ink-faint); font-size: var(--t-xs); text-align: right; }

/* ---- cidr chart ---- */
.cidr-chart .cc-row { display: grid; grid-template-columns: 48px 130px 1fr 110px; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.cc-prefix { color: var(--signal); font-weight: 700; }
.cc-mask { color: var(--ink-dim); font-size: var(--t-xs); }
.cc-bar { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.cc-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--signal-dim), var(--signal)); border-radius: 99px; }
.cc-hosts { color: var(--ink-dim); font-size: var(--t-xs); text-align: right; }

/* ---- magic number flow ---- */
.magic-flow .magic-step { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.magic-flow .magic-step:last-child { border-bottom: none; }
.magic-n { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--signal) 16%, transparent); color: var(--signal); border-radius: 50%; font-weight: 700; font-size: var(--t-sm); }
.magic-body { display: flex; flex-direction: column; gap: 4px; }
.magic-do { color: var(--ink-dim); font-size: var(--t-sm); }
.magic-eq { color: var(--ink); font-weight: 700; font-size: var(--t-sm); background: var(--bg); padding: 4px var(--sp-3); border-radius: var(--radius-sm); display: inline-block; }

@media (max-width: 600px) {
  .bit { width: 24px; height: 28px; font-size: var(--t-xs); }
  .range-map .range-band { grid-template-columns: 1fr; gap: 2px; }
  .range-note { text-align: left; }
  .cidr-chart .cc-row { grid-template-columns: 40px 1fr; }
  .cc-mask, .cc-bar { display: none; }
}

/* ---- topology SVG ---- */
.topo-fig { text-align: center; }
.topo-svg { width: 100%; max-width: 360px; height: auto; }
.topo-link { stroke: var(--line-bright); stroke-width: 1.5; }
.topo-node { fill: var(--surface-3); stroke: var(--signal); stroke-width: 2; }
.topo-hub { fill: var(--signal); stroke: var(--signal); }

/* ---- device flow ---- */
.df-track { display: flex; align-items: stretch; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.df-item { flex: 1; min-width: 110px; background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--dfh, var(--signal)); border-radius: var(--radius); padding: var(--sp-3); display: flex; flex-direction: column; gap: 4px; text-align: center; }
.df-layer { font-size: var(--t-xs); color: var(--dfh, var(--signal)); font-weight: 700; }
.df-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: var(--t-sm); }
.df-role { font-size: var(--t-xs); color: var(--ink-faint); }
.df-arrow { display: flex; align-items: center; color: var(--ink-faint); font-size: var(--t-md); }

/* ---- port map ---- */
.pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); }
.pm-col { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); }
.pm-head { font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--pmh, var(--signal)); margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.pm-port { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--sp-2); align-items: center; padding: 3px 0; }
.pm-num { color: var(--pmh, var(--signal)); font-weight: 700; font-size: var(--t-sm); }
.pm-proto { color: var(--ink-dim); font-size: var(--t-xs); }
.pm-tcp { color: var(--ink-faint); font-size: 0.7rem; }

/* ---- media compare ---- */
.mc-card { background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--mch, var(--signal)); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); }
.mc-top { display: flex; justify-content: space-between; align-items: baseline; }
.mc-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: var(--t-sm); }
.mc-reach { color: var(--mch, var(--signal)); font-size: var(--t-xs); }
.mc-bar { height: 5px; background: var(--surface-3); border-radius: 99px; overflow: hidden; margin: var(--sp-2) 0; }
.mc-bar > span { display: block; height: 100%; background: var(--mch, var(--signal)); border-radius: 99px; }
.mc-use { font-size: var(--t-xs); color: var(--ink-faint); }

/* ---- VLAN switch ---- */
.vlan-switch { background: var(--bg); border: 1px solid var(--line-bright); border-radius: var(--radius); padding: var(--sp-4); }
.vlan-switch-label { font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: 0.12em; text-align: center; margin-bottom: var(--sp-3); }
.vlan-ports { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.vlan-port { flex: 0 0 auto; min-width: 64px; background: color-mix(in srgb, var(--vh, var(--signal)) 14%, var(--surface)); border: 1px solid var(--vh, var(--signal)); border-radius: var(--radius-sm); padding: var(--sp-2); text-align: center; display: flex; flex-direction: column; gap: 2px; }
.vp-num { color: var(--vh, var(--signal)); font-weight: 700; font-size: var(--t-sm); }
.vp-tag { font-size: 0.65rem; color: var(--ink-faint); }
.vlan-trunk { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0; }
.trunk-line { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--signal) 0 8px, transparent 8px 14px); }
.trunk-label { font-size: var(--t-xs); color: var(--signal); white-space: nowrap; }
.vlan-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.vlan-legend-item { font-size: var(--t-xs); color: var(--ink-dim); display: inline-flex; align-items: center; gap: 6px; }
.vli-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--vh, var(--signal)); }

/* ---- route table ---- */
.route-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.route-row { display: grid; grid-template-columns: 1.4fr 1.2fr 0.6fr 0.8fr; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); font-size: var(--t-sm); border-bottom: 1px solid var(--line); color: var(--ink-dim); }
.route-row:last-child { border-bottom: none; }
.route-head { background: var(--surface-2); color: var(--ink-faint); font-size: var(--t-xs); letter-spacing: 0.06em; }
.route-best { background: color-mix(in srgb, var(--signal) 12%, transparent); color: var(--ink); position: relative; }
.route-best::after { content: "★ best match"; position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%); font-size: 0.6rem; color: var(--signal); letter-spacing: 0.05em; }

/* ---- wireless bands ---- */
.band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.band-card { background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--bh, var(--signal)); border-radius: var(--radius); padding: var(--sp-4); }
.band-name { color: var(--bh, var(--signal)); font-weight: 700; font-size: var(--t-md); margin-bottom: var(--sp-3); }
.band-stat { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--t-xs); color: var(--ink-faint); }
.band-stat > span { width: 44px; }
.band-bar { flex: 1; height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.band-bar > span { display: block; height: 100%; background: var(--bh, var(--signal)); border-radius: 99px; }
.band-note { font-size: var(--t-xs); color: var(--ink-dim); margin-top: var(--sp-2); }

@media (max-width: 600px) {
  .route-row { grid-template-columns: 1.3fr 1fr; }
  .route-row span:nth-child(3), .route-row span:nth-child(4) { display: none; }
  .route-best::after { display: none; }
}

/* ---- DR timeline ---- */
.dr-timeline .drt-track { display: flex; align-items: stretch; gap: 0; }
.drt-seg { flex: 1; padding: var(--sp-4); text-align: center; border-radius: var(--radius); }
.drt-rpo { background: color-mix(in srgb, var(--status-learn) 14%, var(--surface)); border: 1px solid var(--status-learn); }
.drt-rto { background: color-mix(in srgb, var(--d2) 14%, var(--surface)); border: 1px solid var(--d2); }
.drt-label { display: block; font-size: var(--t-md); font-weight: 700; margin-bottom: var(--sp-2); }
.drt-rpo .drt-label { color: var(--status-learn); }
.drt-rto .drt-label { color: var(--d2); }
.drt-sub { font-size: var(--t-xs); color: var(--ink-dim); line-height: 1.5; }
.drt-event { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--sp-3); }
.drt-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--status-weak); box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-weak) 25%, transparent); }
.drt-event-label { font-size: 0.6rem; color: var(--status-weak); margin-top: var(--sp-2); }

/* ---- process steps ---- */
.process-steps .ps-track { display: flex; align-items: stretch; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.ps-node { flex: 1; min-width: 120px; background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--psh, var(--signal)); border-radius: var(--radius); padding: var(--sp-3); text-align: center; display: flex; flex-direction: column; gap: 4px; }
.ps-letter { width: 30px; height: 30px; align-self: center; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--psh, var(--signal)) 16%, transparent); color: var(--psh, var(--signal)); font-weight: 700; }
.ps-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: var(--t-sm); }
.ps-desc { font-size: var(--t-xs); color: var(--ink-faint); }
.ps-arrow { display: flex; align-items: center; color: var(--ink-faint); }

/* ---- tier compare ---- */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.tier-card { background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--th, var(--signal)); border-radius: var(--radius); padding: var(--sp-4); }
.tier-name { color: var(--th, var(--signal)); font-weight: 700; font-size: var(--t-md); margin-bottom: var(--sp-2); }
.tier-desc { font-size: var(--t-xs); color: var(--ink-dim); margin-bottom: var(--sp-3); }
.tier-bar-row { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.65rem; color: var(--ink-faint); margin-bottom: 4px; }
.tier-bar-row > span { width: 36px; }
.tier-bar { flex: 1; height: 5px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.tier-bar > span { display: block; height: 100%; background: var(--th, var(--signal)); border-radius: 99px; }

@media (max-width: 600px) {
  .dr-timeline .drt-track { flex-direction: column; gap: var(--sp-2); }
  .drt-event { flex-direction: row; gap: var(--sp-2); padding: var(--sp-2); }
}

/* ---- CIA triad ---- */
.cia-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.cia-pillar { background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--ch, var(--signal)); border-radius: var(--radius); padding: var(--sp-4); text-align: center; display: flex; flex-direction: column; gap: var(--sp-2); }
.cia-letter { width: 40px; height: 40px; align-self: center; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--ch, var(--signal)) 16%, transparent); color: var(--ch, var(--signal)); font-weight: 700; font-size: var(--t-lg); }
.cia-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.cia-desc { font-size: var(--t-sm); color: var(--ink-dim); }
.cia-how { font-size: var(--t-xs); color: var(--ink-faint); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }

/* ---- threat cards ---- */
.threat-card { background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--tch, var(--signal)); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.threat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); }
.threat-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: var(--t-md); }
.threat-cat { font-size: var(--t-xs); color: var(--tch, var(--signal)); background: color-mix(in srgb, var(--tch, var(--signal)) 14%, transparent); padding: 2px var(--sp-2); border-radius: 99px; }
.threat-how { font-size: var(--t-sm); color: var(--ink-dim); margin-bottom: var(--sp-2); }
.threat-fix { font-size: var(--t-sm); color: var(--ink); }
.threat-fix .mono { font-size: var(--t-xs); color: var(--status-strong); letter-spacing: 0.06em; margin-right: var(--sp-2); }

/* ---- methodology ladder ---- */
.method-ladder { display: flex; flex-direction: column; gap: 0; position: relative; }
.method-step { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-3) 0; position: relative; }
.method-step:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: -6px; width: 2px; background: var(--line-bright); }
.method-num { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--signal); color: #06231f; font-weight: 700; z-index: 1; }
.method-body { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.method-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: var(--t-md); }
.method-desc { font-size: var(--t-sm); color: var(--ink-dim); }

/* ---- command terminal ---- */
.cmd-term { background: #0a0f15; border: 1px solid var(--line-bright); border-radius: var(--radius); overflow: hidden; }
.cmd-bar { display: flex; align-items: center; gap: 6px; padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cmd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); opacity: 0.5; }
.cmd-dot:nth-child(1) { background: var(--status-weak); opacity: 0.7; }
.cmd-dot:nth-child(2) { background: var(--status-learn); opacity: 0.7; }
.cmd-dot:nth-child(3) { background: var(--status-strong); opacity: 0.7; }
.cmd-title { margin-left: var(--sp-2); font-size: var(--t-xs); color: var(--ink-faint); }
.cmd-row { display: grid; grid-template-columns: 16px auto 1fr; gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid rgba(255,255,255,0.03); }
.cmd-row:last-child { border-bottom: none; }
.cmd-prompt { color: var(--signal); }
.cmd-name { color: var(--ink); font-weight: 700; font-size: var(--t-sm); white-space: nowrap; }
.cmd-job { color: var(--ink-dim); font-size: var(--t-sm); }

@media (max-width: 600px) {
  .cmd-row { grid-template-columns: 12px auto; }
  .cmd-job { grid-column: 2; }
}

/* ---- embedded encapsulation animation ---- */
.encap-anim { text-align: center; }
.ea-packet { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; margin: var(--sp-4) 0; padding: var(--sp-3); background: var(--bg); border: 1px dashed var(--line-bright); border-radius: var(--radius); transition: transform .3s; }
.ea-down .pj-header, .ea-up .pj-header, .ea-wire .pj-header { animation: hdrIn .3s ease; }
.ea-caption { color: var(--ink-dim); font-size: var(--t-sm); min-height: 2.4em; margin-bottom: var(--sp-3); }
.ea-controls { display: flex; gap: var(--sp-2); justify-content: center; }
.ea-btn { padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); cursor: pointer; border: 1px solid var(--line-bright); background: var(--surface); color: var(--ink); transition: all .15s; }
.ea-btn:hover { border-color: var(--signal); color: var(--signal); }
.ea-btn.ea-primary { background: var(--signal); color: #06231f; border-color: var(--signal); }