/* /incident/:slug - exchange drain evidence page (services/seo/incidentPage.js).
   Library components (.card, .card-kpi, .badge, .btn, .hub-table, .tx-verify) are
   only PLACED here. The page-own pieces (hero clock, flow map, banner) are not
   controls. Built screenshot-first: the hero alone must read as the whole story. */

.incident-page .hub-shell { max-width: 1120px; }

.inc-hero { padding: 8px 0 18px; }
.inc-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--bear); font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.inc-hero h1 { margin: 12px 0 10px; font-size: 34px; line-height: 1.1; letter-spacing: -.025em; max-width: 30ch; }
.inc-hero .lede { max-width: 72ch; font-size: 14px; }
.inc-banner { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--sel-line); background: var(--sel-fill); color: var(--text-hi); font-size: 13px; line-height: 1.45; }

.inc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0 14px; }

.inc-clock { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); overflow-x: auto; }
.inc-clock li { display: grid; gap: 3px; padding: 10px 14px 4px 0; position: relative; }
.inc-clock li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--text-lo); }
.inc-clock li:nth-child(2)::before { background: var(--bear); }
.inc-clock small { color: var(--text-lo); font: 600 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.inc-clock b { color: var(--text-hi); font-size: 17px; }
.inc-clock span { color: var(--text-md); font-size: 11px; }

.inc-section { margin: 0 0 14px; }
.inc-scroll { overflow-x: auto; }
.inc-scroll .hub-table td, .inc-scroll .hub-table th { white-space: nowrap; }

/* Flow map: HTML labels left/right, ribbons-only SVG in the middle. */
.inc-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 1.4fr) minmax(0, 1fr); align-items: start; }
.inc-flow-col { margin: 0; padding: 0; list-style: none; }
.inc-flow-node { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 0 10px 0 0; border-right: 3px solid var(--text-lo); }
.inc-flow-col.is-dest .inc-flow-node { padding: 0 0 0 10px; border-right: 0; border-left: 3px solid var(--bear); }
.inc-flow-node a { color: var(--text-hi); text-decoration: none; overflow-wrap: anywhere; font-size: 13px; line-height: 1.25; }
.inc-flow-node a:hover { color: var(--accent-2); }
.inc-flow-node .mono { color: var(--text-md); font-size: 11px; }
.inc-flow-svg { width: 100%; display: block; }
.inc-flow-ribbon { fill: none; stroke: var(--bear); stroke-opacity: .32; vector-effect: non-scaling-stroke; }
.inc-flow-ribbon:hover { stroke-opacity: .6; }

.inc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.inc-list { margin: 0; padding-left: 34px; display: grid; gap: 8px; color: var(--text-md); font-size: 13px; line-height: 1.5; }
.inc-method { margin: 0; color: var(--text-md); font-size: 13px; line-height: 1.6; }
.inc-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 24px; }

@media (max-width: 860px) {
  .inc-hero h1 { font-size: 26px; }
  .inc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inc-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .inc-hero h1 { font-size: 23px; }
  .inc-flow { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); }
  .inc-flow-node a { font-size: 12px; }
  .inc-flow-node .mono { font-size: 10px; }
  .inc-cta .btn { flex: 1 1 100%; }
}