/* methodology.css — /methodology page: freeform risk-formula node graph,
   detail panel, glossary. Extends peraspera/landing.css's Carbon-derived
   tokens; no new color values.

   The risk-formula diagram (.pa-method-diagram-freeform and friends) is a
   1:1 port of the canonical Claude Design mockup ("GRC Wizard Мокапы",
   Methodology.dc.html): absolutely-positioned nodes over an SVG of
   orthogonal connectors, a play/pulse animation, not a row/lane grid.
   Node x/y/width_pct come from mimir_crq.data.methodology_content — do
   not hand-tune positions here without going back to the mockup. */

@keyframes pa-dash-flow{to{stroke-dashoffset:-40}}
@keyframes pa-dash-flow-fast{to{stroke-dashoffset:-40}}
@keyframes pa-node-pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--interactive) 55%, transparent)}
  50%{box-shadow:0 0 0 8px transparent}
}

.pa-method-node{
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  text-align:left;line-height:1.3;
  padding:14px 16px;min-width:140px;flex:1 1 140px;
  background:var(--surface-layer-02);border:1px solid var(--border-subtle);
  color:var(--text-primary);cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.pa-method-node:hover{border-color:var(--border-interactive)}
.pa-method-node:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.pa-method-node--engine{border-color:var(--pa-gray-70);border-width:2px}
.pa-method-node--input{background:var(--surface-layer-02);border-color:var(--border-strong)}

/* 5-role color legend, adapted from the Cybersecurity Compass CRQ
   reference diagram (2026-08-02 restructure) — data input / assessment
   engine (above) / likelihood factor / impact factor / quantified risk. */
.pa-method-node--likelihood-factor{background:rgba(255,131,43,.28);border-color:var(--pa-orange-40)}
.pa-method-node--impact-factor{background:rgba(241,194,27,.32);border-color:var(--pa-yellow-30)}
.pa-method-node--risk{background:var(--pa-red-60);border-color:var(--pa-red-60);color:var(--text-on-color)}

/* Selection state: a colored ring on the selected node and its
   neighbors (`is-lit`), plus a pulse animation on the single current
   node (`is-current`, also used per-step during Play). Never inverts
   the node's base kind color — matches the mockup's style computation. */
.pa-method-node.is-lit{box-shadow:0 0 0 2px var(--interactive)}
.pa-method-node--risk.is-lit{box-shadow:0 0 0 2px var(--pa-red-60)}
.pa-method-node--likelihood-factor.is-lit{box-shadow:0 0 0 2px var(--pa-orange-40)}
.pa-method-node--impact-factor.is-lit{box-shadow:0 0 0 2px var(--pa-yellow-30)}
.pa-method-node--engine.is-lit{box-shadow:0 0 0 2px var(--text-primary)}
.pa-method-node--input.is-lit{box-shadow:0 0 0 2px var(--text-secondary)}
.pa-method-node.is-current{animation:pa-node-pulse 1s ease-out infinite}

.pa-method-legend-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.pa-method-legend{display:flex;flex-wrap:wrap;gap:20px}
.pa-method-legend__item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary)}
.pa-method-legend__swatch{display:inline-block;width:12px;height:12px;border-radius:2px;border:1px solid var(--border-subtle)}
.pa-method-legend__swatch--input{background:var(--surface-layer-02);border-color:var(--border-strong)}
.pa-method-legend__swatch--engine{background:var(--surface-layer-02);border-color:var(--border-strong);border-width:2px}
.pa-method-legend__swatch--likelihood-factor{background:var(--pa-orange-40);border-color:var(--pa-orange-40)}
.pa-method-legend__swatch--impact-factor{background:var(--pa-yellow-30);border-color:var(--pa-yellow-30)}
.pa-method-legend__swatch--risk{background:var(--pa-red-60);border-color:var(--pa-red-60)}

.pa-method-play-btn{
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:10px 20px;background:transparent;border:1px solid var(--interactive);color:var(--interactive);cursor:pointer;
}
.pa-method-play-btn.is-playing{background:var(--interactive);color:var(--text-on-color)}

/* Freeform diagram: an SVG of connectors under absolutely-positioned
   node buttons, both addressed by the same 1200×700 coordinate space
   (viewBox on the SVG, %-based left/top on the nodes). */
.pa-method-diagram-freeform{position:relative;width:100%;aspect-ratio:1200/700}
.pa-method-diagram-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.pa-method-edge{
  fill:none;stroke:var(--border-subtle);stroke-width:1.5;stroke-dasharray:6 6;
  animation:pa-dash-flow 2.4s linear infinite;
}
.pa-method-edge.is-active{stroke-width:2.5;stroke-dasharray:8 6;animation:pa-dash-flow-fast .8s linear infinite}
.pa-method-edge--risk.is-active{stroke:var(--pa-red-60)}
.pa-method-edge--likelihood-factor.is-active{stroke:var(--pa-orange-40)}
.pa-method-edge--impact-factor.is-active{stroke:var(--pa-yellow-30)}
.pa-method-edge--engine.is-active{stroke:var(--text-primary)}
.pa-method-edge--input.is-active{stroke:var(--text-secondary)}

.pa-method-diagram-freeform .pa-method-node{
  position:absolute;transform:translate(-50%,-50%);
  text-align:center;min-width:0;flex:none;
}
.pa-method-diagram-freeform .pa-method-node--nowrap{white-space:nowrap}

/* Detail panel: a persistent side card next to the diagram (2026-08-30
   redesign, matching the Cybersecurity Compass CRQ reference's layout —
   see methodology.html's comment above the diagram markup). Content
   swaps in place on node click; the panel itself is never hidden.
   Accent per node `kind` reuses the exact same tokens already assigned
   to that kind's edge highlight (`.pa-method-edge--{kind}.is-active`)
   and node swatch above — no new color mapping invented. */
.pa-method-detail{
  padding:22px 22px 20px;background:var(--surface-layer-01);
  border:1px solid var(--border-subtle);border-top:2px solid var(--interactive);
  align-self:start;
}
.pa-method-detail__badge{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--interactive);margin-bottom:10px;
}
.pa-method-detail__title{font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:10px;line-height:1.3}
.pa-method-detail__body{font-size:13.5px;line-height:1.55;color:var(--text-secondary)}
.pa-method-detail__hint{font-size:13px;color:var(--interactive);margin-top:16px;line-height:1.5}
.pa-method-detail__glossary-link{font-size:12px;font-family:var(--font-mono);margin-top:16px}
.pa-method-detail__glossary-anchor{color:var(--interactive)}
.pa-method-detail__tip{
  font-size:11.5px;color:var(--text-helper);line-height:1.5;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--border-subtle);
}
.pa-method-detail__tip b{color:var(--text-secondary)}

.pa-method-detail--risk{border-top-color:var(--pa-red-60)}
.pa-method-detail--risk .pa-method-detail__badge{color:var(--pa-red-60)}
.pa-method-detail--likelihood-factor{border-top-color:var(--pa-orange-40)}
.pa-method-detail--likelihood-factor .pa-method-detail__badge{color:var(--pa-orange-40)}
.pa-method-detail--impact-factor{border-top-color:var(--pa-yellow-30)}
.pa-method-detail--impact-factor .pa-method-detail__badge{color:var(--pa-yellow-30)}
.pa-method-detail--engine{border-top-color:var(--text-primary)}
.pa-method-detail--engine .pa-method-detail__badge{color:var(--text-primary)}
.pa-method-detail--input{border-top-color:var(--text-secondary)}
.pa-method-detail--input .pa-method-detail__badge{color:var(--text-secondary)}

@media (max-width:672px){
  .pa-method-node{min-width:120px}
}

/* ===== Glossary: category card board (2026-08-30 redesign) =====
   Multi-column layout, each category a self-contained flex column of
   definition cards (replaces the earlier flat label+list block).
   Accent cycles through 5 existing Carbon tokens (teal/blue/purple/
   cyan/green) — deliberately skips orange/yellow/red, which the
   risk-formula diagram above already uses for likelihood/impact/risk;
   reusing them here would read as a false cross-reference. No new
   color values, per this file's own convention (see file header). */

.pa-glossary__toolbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px;background:var(--surface-layer-02);border:1px solid var(--border-subtle);
}
.pa-glossary__search{flex:1 1 260px;position:relative}
.pa-glossary__search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5;pointer-events:none}
.pa-glossary__search input{
  width:100%;background:var(--surface-field);border:1px solid var(--border-subtle);
  border-radius:2px;color:var(--text-primary);font-family:var(--font-sans);font-size:14px;
  padding:9px 12px 9px 36px;outline:none;transition:border-color .15s ease;
}
.pa-glossary__search input:focus{border-color:var(--border-interactive)}
.pa-glossary__search input::placeholder{color:var(--text-helper)}
.pa-glossary__count{font-family:var(--font-mono);font-size:12px;color:var(--text-helper);white-space:nowrap;letter-spacing:.04em}
.pa-glossary__count b{color:var(--text-secondary)}

.pa-glossary__board{display:flex;flex-wrap:wrap;gap:36px 32px;align-items:flex-start}
.pa-glossary__category{flex:1 1 280px;min-width:260px;max-width:340px}
.pa-glossary__category--a0{--accent:var(--pa-teal-40)}
.pa-glossary__category--a1{--accent:var(--pa-blue-40)}
.pa-glossary__category--a2{--accent:var(--pa-purple-40)}
.pa-glossary__category--a3{--accent:var(--pa-cyan-40)}
.pa-glossary__category--a4{--accent:var(--pa-green-40)}

.pa-glossary__cat-head{display:flex;align-items:baseline;gap:8px;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--accent)}
.pa-glossary__cat-dot{width:7px;height:7px;background:var(--accent);flex-shrink:0;transform:translateY(-1px)}
.pa-glossary__cat-label{font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.pa-glossary__cat-source{font-size:11px;color:var(--text-helper);margin:-8px 0 14px;line-height:1.4}

.pa-glossary__terms{display:flex;flex-direction:column;gap:10px}
.pa-glossary__term{
  background:var(--surface-layer-02);border:1px solid var(--border-subtle);
  border-left:2px solid var(--accent);padding:12px 14px;
  transition:background .15s ease,border-color .15s ease;
}
.pa-glossary__term:hover{background:var(--surface-hover);border-color:var(--border-strong);border-left-color:var(--accent)}
.pa-glossary__term-name{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.pa-glossary__term-def{font-size:13px;line-height:1.55;color:var(--text-secondary)}
.pa-glossary__term mark{background:var(--interactive);color:var(--text-on-color);padding:0 1px}

.pa-glossary__category.is-hidden,.pa-glossary__term.is-hidden{display:none}
.pa-glossary__empty{display:none;text-align:center;padding:64px 20px;color:var(--text-helper);font-size:14px}
.pa-glossary__empty.is-shown{display:block}

@media (max-width:600px){
  .pa-glossary__category{max-width:none}
}