/* ---- native solution explainers: PDF structure, neubrutalism skin ---- */
.sol {
  position: relative;
  background: var(--surface); border: var(--border); box-shadow: var(--shadow);
  margin: var(--s3) 0; color: var(--ink); font-family: var(--display);
}

/* header band */
.sol-head { background: var(--ink); color: var(--bg); padding: var(--s3); border-bottom: var(--border); }
.sol-head-top { display: flex; align-items: center; gap: var(--s2); }
.sol-badge {
  flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 24px; color: #fff; border: 2px solid var(--bg);
}
.sol-badge.ok { background: var(--good); } .sol-badge.no { background: var(--bad); }
.sol-head h3 { margin: 0; font-size: clamp(20px, 3.5vw, 30px); font-weight: 800; letter-spacing: -0.01em; }
.sol-head h3 .hl { color: var(--accent-2); } .sol-check { color: var(--accent-2); }
.sol-tag { margin: var(--s1) 0 0; font-size: 15px; font-weight: 600; color: var(--bg); }
.sol-sub { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--accent-2); }

/* body: responsive panel row + cards */
.sol-body { padding: var(--s3); }
.sol-panels { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sol-panels > .sol-panel { flex: 1 1 300px; }
.sol-panels > .sol-wide { flex-basis: 100%; }
.sol-panel { position: relative; border: 2px solid var(--ink); box-shadow: var(--shadow-sm); padding: var(--s2); background: var(--surface); }
.sol-panel.tint { background: color-mix(in srgb, var(--good) 9%, var(--surface)); }
.sol-panel h4 {
  margin: 0 0 var(--s2); font-family: var(--mono); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); text-align: center;
}
.sol-panel h4.left { text-align: left; display: flex; align-items: center; gap: 8px; color: var(--good); }

/* bullet lists (✓ / ✗) */
.sol-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sol-pts li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; font-size: 15px; line-height: 1.5; }
.sol-pts li::before { font-weight: 800; }
.sol-pts li.g::before { content: "✓"; color: var(--good); }
.sol-pts li.b::before { content: "✗"; color: var(--bad); }

/* note / verdict pills */
.sol-note { margin-top: var(--s2); padding: 9px 11px; border: 2px solid var(--ink); font-size: 13.5px; text-align: center; line-height: 1.4; font-weight: 600; }
.sol-note.g { background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
.sol-note.r { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.sol-note.n { background: var(--hair); }

/* captions + timeline */
.sol-cap { margin: 0 0 10px; font-family: var(--mono); font-size: 12px; font-weight: 700; text-align: center; }
.sol-cap.g { color: var(--good); } .sol-cap.r { color: var(--bad); }
.sol-tl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.sol-tl-col { display: grid; gap: 8px; align-content: start; }
.sol-tl-ch { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: center; }
.sol-tl-ch.g { color: var(--good); } .sol-tl-ch.r { color: var(--bad); }
.sol-tl-row { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; }
.sol-tl-t { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.sol-burst { border: 2px solid var(--ink); padding: 7px 9px; font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sol-burst.g { background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.sol-burst.r { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.sol-burst .v { font-family: var(--mono); font-weight: 700; white-space: nowrap; font-size: 11px; }
.sol-burst .v.g { color: var(--good); } .sol-burst .v.r { color: var(--bad); }
.sol-reset { grid-column: 1 / -1; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--bad); border-top: 2px dashed var(--bad); padding-top: 5px; }
.sol-reset.g { color: var(--good); border-top-color: var(--good); }

/* A–D cards */
.sol-cards-h { text-align: center; font-family: var(--mono); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); margin: var(--s4) 0 var(--s3); }
.sol-cards { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sol-card { flex: 1 1 200px; border: 2px solid var(--ink); box-shadow: var(--shadow-sm); padding: var(--s2); display: flex; flex-direction: column; background: var(--surface); }
.sol-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sol-card-badge { width: 30px; height: 30px; background: var(--ink); color: #fff; font-family: var(--mono); font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.sol-card-badge.win { background: var(--good); }
.sol-card-h b { font-family: var(--mono); font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.sol-card .sol-pts { flex: 1; }
.sol-card-fig { border: 2px solid var(--ink); background: var(--surface); padding: 8px; margin-bottom: 12px; }
.sol-card-fig svg { width: 100%; height: auto; display: block; }

/* rich text + intro */
.hlg { color: var(--good); font-weight: 700; }
.hly { color: var(--accent-2); font-weight: 700; }
.sol-p { font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
.sol-p:last-child { margin-bottom: 0; }

/* feature list */
.sol-list { display: grid; gap: 12px; }
.sol-list.row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sol-list.cols-2 { grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
.sol-list.cols-3 { grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
@media (max-width: 620px) { .sol-list.cols-2, .sol-list.cols-3 { grid-template-columns: 1fr; } }
.sol-lrow { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.sol-lico { font-size: 15px; line-height: 1.3; text-align: center; }
.sol-lrow b { display: block; font-size: 15px; }
.sol-lrow span { font-size: 14px; color: var(--ink-2); line-height: 1.45; }

/* code block */
.sol-code { font-family: var(--mono); font-size: 12px; line-height: 1.55; background: var(--ink); color: #e8e6df; padding: 12px; margin: 0; overflow-x: auto; border: 2px solid var(--ink); }

/* callout */
.sol-callout { display: flex; gap: 14px; align-items: flex-start; background: color-mix(in srgb, var(--accent-2) 30%, var(--surface)); }
.sol-callout.g { background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.sol-callout.r { background: color-mix(in srgb, var(--bad) 11%, var(--surface)); }
.sol-callout.r .sol-callout-ic { filter: none; }
.sol-callout-ic { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.sol-callout h4 { margin-bottom: 6px; }

/* card extras */
.sol-card-badge.warn { background: var(--accent); }
.sol-card-badge.bad { background: var(--bad); }
.sol-card.t-win { border-color: var(--good); }
.sol-card.t-bad { border-color: var(--bad); }
.sol-card.t-warn { border-color: var(--accent); }
.sol-card-desc { font-size: 13.5px; line-height: 1.5; margin: 0 0 10px; }
.sol-verdict { font-size: 13px; font-weight: 600; margin: auto 0 0; padding-top: 8px; display: flex; gap: 6px; }
.sol-verdict.win { color: var(--good); } .sol-verdict.warn { color: var(--accent); } .sol-verdict.bad { color: var(--bad); }

/* data table */
.sol-tablewrap { overflow-x: auto; }
.sol-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.sol-table th, .sol-table td { border: 1.5px solid var(--ink); padding: 6px 9px; text-align: left; }
.sol-table th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; background: var(--ink); color: var(--bg); }
.sol-table td { font-family: var(--mono); }

/* cell strip */
.sol-strip { display: flex; gap: 3px; }
.sol-cell { flex: 1; border: 2px solid var(--ink); padding: 8px 4px; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 600; }
.sol-cell.g { background: color-mix(in srgb, var(--good) 16%, var(--surface)); }
.sol-cell.idle { background: var(--hair); color: var(--ink-2); }
.sol-strip-axis { text-align: right; font-family: var(--mono); font-size: 10px; color: var(--ink-2); margin-top: 4px; }

/* data-block grid */
.sol-grid { max-height: 280px; }
.sol-gcell { fill: var(--hair); stroke: var(--ink-2); stroke-width: 0.5; }
.sol-gcell.on { fill: var(--good); stroke: var(--ink); }

/* funnel tokens */
.sol-tok { stroke: var(--ink); stroke-width: 1; }
.sol-tok.ok { fill: var(--good); }
.sol-tok.no { fill: var(--hair); }
.sol-funnelbody { fill: color-mix(in srgb, var(--good) 12%, var(--surface)); stroke: var(--ink); stroke-width: 2; }

/* multiplexed streams */
.sol-scell { stroke: var(--ink); stroke-width: 0.5; }
.sol-scell.on { fill: var(--good); }
.sol-scell.off { fill: var(--hair); }

/* hex k-ring */
.sol-hex { stroke: var(--ink); stroke-width: 2; }
.sol-hex.tgt { fill: var(--good); }
.sol-hex.n1 { fill: color-mix(in srgb, var(--good) 30%, var(--surface)); }
.sol-hex.out { fill: var(--hair); }
.sol-fig text { pointer-events: none; }
.sol-hexleg { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; font-family: var(--mono); font-size: 10px; }
.sol-hexleg span { display: inline-flex; align-items: center; gap: 5px; }
.sol-hexleg i { width: 12px; height: 12px; border: 1.5px solid var(--ink); display: inline-block; }
.sol-hexleg i.tgt { background: var(--good); }
.sol-hexleg i.n1 { background: color-mix(in srgb, var(--good) 30%, var(--surface)); }
.sol-hexleg i.out { background: var(--hair); }

/* SVG figure panels scale to the panel */
.sol-fig { width: 100%; height: auto; display: block; }
.sol-fig text { font-family: var(--mono); }
.sol-panel .dg { width: 100%; max-height: 700px; touch-action: none; }
.sol-panel svg.dg.is-zoomed { cursor: grab; }
.sol-panel svg.dg.is-zoomed:active { cursor: grabbing; }

@media (prefers-color-scheme: dark) { .sol { background: var(--surface); } }