/* Shared article visualisation components — David Greenwood OAM
   Linked after site.css by long-form explainer articles. */

.viz,.article-body figure.viz{margin:var(--s-7) 0;border:1px solid var(--hairline);background:var(--paper-deep);padding:var(--s-6)}
.viz--ink,.article-body figure.viz--ink{background:var(--ink);border-color:var(--hairline-ink);color:var(--paper)}
.viz--plain,.article-body figure.viz--plain{border:0;background:none;padding:0}
.viz-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.viz--ink .viz-kicker{color:var(--lilac)}
.viz-title{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.4vw,26px);line-height:1.2;margin:0 0 var(--s-5);letter-spacing:-.01em;color:var(--ink);max-width:34ch}
.viz--ink .viz-title{color:var(--paper)}
.viz-note{font-family:var(--font-mono);font-size:12px;color:var(--mid);margin:var(--s-5) 0 0;line-height:1.6;letter-spacing:.01em}
.viz--ink .viz-note{color:var(--lilac)}

/* stacked tier blocks */
.tiers{display:grid;gap:8px}
.tier{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start;background:var(--paper);border-left:4px solid var(--accent);padding:var(--s-4) var(--s-5)}
.tier .badge{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:6px 9px;white-space:nowrap}
.tier h4{font-family:var(--font-sans);font-size:17px;font-weight:700;margin:0 0 4px;color:var(--ink)}
.tier p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mid)}
@media(max-width:600px){.tier{grid-template-columns:1fr;gap:10px}}

/* vertical flow */
.flowv{display:grid;gap:0;justify-items:stretch}
.flowv .step{background:var(--paper);border:1px solid var(--hairline);padding:var(--s-4) var(--s-5)}
.flowv .step .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:6px}
.flowv .step strong{font-family:var(--font-sans);font-size:16px;display:block;margin-bottom:3px;color:var(--ink)}
.flowv .step span.d{font-size:14px;color:var(--mid);line-height:1.5}
.flowv .arr{justify-self:center;color:var(--accent);font-size:22px;line-height:1;padding:10px 0}

/* two-column contrast */
.myth{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.myth>div{padding:var(--s-5);background:var(--paper);border-top:3px solid var(--mid-soft)}
.myth .yes{border-top-color:#6F8A6F}
.myth .no{border-top-color:#B8686E}
.myth .lab{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin:0 0 10px}
.myth .no .lab{color:#B8686E}.myth .yes .lab{color:#6F8A6F}
.myth p.big{font-family:var(--font-display);font-size:19px;line-height:1.35;margin:0;color:var(--ink)}
@media(max-width:640px){.myth{grid-template-columns:1fr}}

/* card duo */
.duo-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.duo-cards .card{background:var(--paper);border:1px solid var(--hairline);padding:var(--s-5);display:flex;flex-direction:column;gap:10px}
.duo-cards .card .hd{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:7px 10px;margin:calc(var(--s-5)*-1) calc(var(--s-5)*-1) 6px}
.duo-cards .card h4{font-family:var(--font-display);font-size:21px;font-weight:600;margin:0;line-height:1.2;color:var(--ink)}
.duo-cards .card ul{margin:0;padding-left:17px;display:grid;gap:7px}
.duo-cards .card li{font-size:14.5px;line-height:1.5;color:var(--mid)}
.duo-cards .card li b{color:var(--ink)}
@media(max-width:700px){.duo-cards{grid-template-columns:1fr}}

/* big numbers */
.bignums{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:var(--s-5)}
.bignum .n{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,5vw,56px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.viz--ink .bignum .n{color:var(--paper)}
.bignum .n small{font-size:.42em;letter-spacing:0;color:var(--accent);margin-left:3px}
.viz--ink .bignum .n small{color:var(--lilac)}
.bignum .l{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-top:10px;line-height:1.5}
.viz--ink .bignum .l{color:var(--lilac)}

/* table */
.vtable{width:100%;border-collapse:collapse;font-family:var(--font-sans)}
.vtable th{text-align:left;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mid);padding:0 0 11px;border-bottom:1px solid var(--ink);font-weight:600}
.vtable td{padding:14px 0;border-bottom:1px solid var(--hairline);vertical-align:top;line-height:1.55;font-size:15px;color:var(--mid)}
.vtable td:first-child{font-weight:700;color:var(--ink);padding-right:var(--s-5)}
.vtable td.num{font-family:var(--font-mono);font-weight:600;color:var(--ink);white-space:nowrap}
.viz--ink .vtable th{color:var(--lilac);border-bottom-color:var(--lilac)}
.viz--ink .vtable td{color:var(--lilac);border-bottom-color:var(--hairline-ink)}
.viz--ink .vtable td:first-child{color:var(--paper)}
@media(max-width:600px){.vtable,.vtable tbody,.vtable tr,.vtable td{display:block;width:100%}.vtable thead{display:none}.vtable td{border:0;padding:3px 0}.vtable td:first-child{padding-top:16px;border-top:1px solid var(--hairline)}.vtable tr:first-child td:first-child{border-top:0}}

/* callout */
.callout-time{border:1px solid var(--accent);background:var(--paper);padding:var(--s-5) var(--s-6);margin:var(--s-6) 0;display:grid;gap:10px}
.callout-time .hd{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.callout-time p{margin:0;font-size:16px;line-height:1.6;color:var(--ink)}
.callout-time p.sm{font-size:14px;color:var(--mid)}

/* question cards */
.owners{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-4)}
.owners .o{background:var(--paper);border:1px solid var(--hairline);padding:var(--s-5)}
.owners .o .q{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink);margin:0 0 8px}
.owners .o p{margin:0;font-size:14px;line-height:1.55;color:var(--mid)}

/* icon rules grid */
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s-4)}
.rule{background:var(--paper);border:1px solid var(--hairline);padding:var(--s-5);display:grid;gap:9px;align-content:start}
.rule .ic{width:34px;height:34px;color:var(--accent)}
.rule h4{font-family:var(--font-sans);font-size:15.5px;font-weight:700;margin:0;color:var(--ink);line-height:1.3}
.rule p{margin:0;font-size:14px;line-height:1.55;color:var(--mid)}

/* checklist */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.checklist ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:15px;line-height:1.5;color:var(--mid);align-items:start}
.checklist li b{color:var(--ink)}
.checklist li .bx{width:16px;height:16px;border:1.5px solid var(--accent);margin-top:3px;flex:0 0 16px}
.checklist h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin:0 0 var(--s-4);padding-bottom:9px;border-bottom:1px solid var(--hairline)}
@media(max-width:640px){.checklist{grid-template-columns:1fr;gap:var(--s-6)}}

/* pill tags */
.pill-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.pill-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;padding:5px 9px;background:var(--paper-deep);color:var(--mid);border:1px solid var(--hairline)}
.pill-tag.easy{background:#eaf0ea;color:#4d6b4d;border-color:#c3d4c3}
.pill-tag.mod{background:#f5efe3;color:#8a6d33;border-color:#ddcaa6}
.pill-tag.hard{background:#f4e8e9;color:#8d4a50;border-color:#dcb9bd}
.pill-tag.sealed{background:#e9eaf3;color:#4b4f78;border-color:#c3c6dd}

/* horizontal bar chart (rates, funding) */
.barchart{display:grid;gap:9px}
.barrow{display:grid;grid-template-columns:88px 1fr 62px;gap:var(--s-4);align-items:center}
.barrow .yr{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--mid);white-space:nowrap}
.viz--ink .barrow .yr{color:var(--lilac)}
.barrow .track{height:22px;background:rgba(31,11,59,.07);position:relative}
.viz--ink .barrow .track{background:rgba(244,241,234,.1)}
.barrow .fill{position:absolute;inset:0 auto 0 0;background:var(--accent);min-width:2px}
.barrow .fill.pre{background:#B8862B}
.barrow .fill.hi{background:#8d4a50}
.barrow .val{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink);text-align:right}
.viz--ink .barrow .val{color:var(--paper)}
.barrow.sep{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--hairline)}
.viz--ink .barrow.sep{border-top-color:var(--hairline-ink)}
.chartkey{display:flex;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-4);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--mid)}
.viz--ink .chartkey{color:var(--lilac)}
.chartkey span{display:flex;align-items:center;gap:8px}
.chartkey i{width:14px;height:14px;flex:0 0 14px;display:inline-block}
@media(max-width:520px){.barrow{grid-template-columns:70px 1fr 52px;gap:10px}.barrow .yr{font-size:10.5px}}

/* ward directory */
.wards{display:grid;gap:var(--s-3)}
.ward{background:var(--paper);border:1px solid var(--hairline);border-left:4px solid var(--accent);padding:var(--s-5)}
.ward .top{display:flex;flex-wrap:wrap;gap:10px var(--s-4);align-items:baseline;justify-content:space-between;margin-bottom:9px}
.ward h4{font-family:var(--font-display);font-size:20px;font-weight:600;margin:0;color:var(--ink);line-height:1.2}
.ward .cr{font-family:var(--font-sans);font-size:14.5px;font-weight:700;color:var(--accent)}
.ward .covers{font-size:14px;line-height:1.55;color:var(--mid);margin:0 0 11px}
.ward .issues{margin:0 0 12px;padding-left:17px;display:grid;gap:5px}
.ward .issues li{font-size:14px;line-height:1.5;color:var(--mid)}
.ward .issues li b{color:var(--ink)}
.ward .contact{display:flex;flex-wrap:wrap;gap:8px 16px;padding-top:11px;border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:12px;letter-spacing:.02em}
.ward .contact a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px;word-break:break-all}
.ward .contact a:hover{color:var(--accent)}
.ward .contact .lbl{color:var(--mid);text-transform:uppercase;letter-spacing:.12em;font-size:10px;align-self:center}
.ward.is-mine{border-left-color:var(--ink);background:var(--paper-deep)}
.ward .role{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:4px 8px}

/* timeline */
.tline{display:grid;gap:0;position:relative}
.tline .ev{display:grid;grid-template-columns:118px 1fr;gap:var(--s-5);padding:var(--s-4) 0;border-bottom:1px solid var(--hairline)}
.tline .ev:first-child{border-top:1px solid var(--ink)}
.tline .ev .when{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--accent);font-weight:600}
.tline .ev h4{font-family:var(--font-sans);font-size:16px;font-weight:700;margin:0 0 4px;color:var(--ink);line-height:1.3}
.tline .ev p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mid)}
.viz--ink .tline .ev{border-bottom-color:var(--hairline-ink)}
.viz--ink .tline .ev:first-child{border-top-color:var(--lilac)}
.viz--ink .tline .ev h4{color:var(--paper)}
.viz--ink .tline .ev p{color:var(--lilac)}
.viz--ink .tline .ev .when{color:var(--lilac)}
@media(max-width:600px){.tline .ev{grid-template-columns:1fr;gap:6px}}

/* funding matrix */
.fmatrix{display:grid;gap:var(--s-3)}
.frow{background:var(--paper);border:1px solid var(--hairline);padding:var(--s-5);display:grid;grid-template-columns:1fr auto;gap:var(--s-4) var(--s-5);align-items:start}
.frow h4{font-family:var(--font-sans);font-size:16px;font-weight:700;margin:0 0 5px;color:var(--ink)}
.frow p{margin:0;font-size:14px;line-height:1.55;color:var(--mid)}
.frow .verdict{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;white-space:nowrap;align-self:center}
.frow .verdict.can{background:#eaf0ea;color:#3f5a3f;border:1px solid #c3d4c3}
.frow .verdict.maybe{background:#f5efe3;color:#7d6229;border:1px solid #ddcaa6}
.frow .verdict.cant{background:#f4e8e9;color:#8d4a50;border:1px solid #dcb9bd}
@media(max-width:640px){.frow{grid-template-columns:1fr}}


/* ─── Contrast pass ───────────────────────────────────────────
   The .viz figure sits on cream (--paper-deep #ECE7DB). Inner
   surfaces were --paper (#F4F1EA) — only ~3% apart, so cards
   never separated from the block and body text read washed out.
   Inner surfaces are now white; secondary text is darkened. */

:root{--viz-ink-2:#4A4843}

/* inner surfaces → white so cards lift off the cream figure */
.viz .tier,
.viz .flowv .step,
.viz .myth>div,
.viz .duo-cards .card,
.viz .owners .o,
.viz .rules .rule,
.viz .rules .r,
.viz .ward,
.viz .frow,
.viz .trail,
.viz .dbl .bar,
.viz .states .s,
.viz .contrast .c,
.viz .asks .a,
.viz .swap,
.viz .fan .bucket,
.viz .fan .out span,
.viz .tl .ev,
.article-body figure.viz .tier,
.article-body figure.viz .flowv .step,
.article-body figure.viz .myth>div,
.article-body figure.viz .duo-cards .card,
.article-body figure.viz .owners .o,
.article-body figure.viz .rules .rule,
.article-body figure.viz .rules .r,
.article-body figure.viz .ward,
.article-body figure.viz .frow,
.article-body figure.viz .trail,
.article-body figure.viz .contrast .c,
.article-body figure.viz .asks .a,
.article-body figure.viz .swap{background:var(--bone);border-color:#CFCAC0}

/* the standalone myth/checklist blocks that sit directly in the body */
.article-body>.myth>div{background:var(--bone);border-color:#CFCAC0}

/* secondary text: #6B6B68 on cream is too light — darken it */
.viz .tier p,
.viz .flowv .step span.d,
.viz .owners .o p,
.viz .rules .rule p,
.viz .duo-cards .card li,
.viz .vtable td,
.viz .trail .tl-main p,
.viz .frow p,
.viz .ward .covers,
.viz .ward .issues li,
.viz .contrast .c p,
.viz .asks .a p,
.viz .checklist li,
.viz .tl .ev p,
.viz .tline .ev p{color:var(--viz-ink-2)}

/* figure notes and captions */
.viz-note,.article-body figure.viz .viz-note{color:var(--viz-ink-2)}
.viz .barrow .yr,.viz .chartkey,.viz .seatkey,.viz .bignum .l{color:var(--viz-ink-2)}
.viz .vtable th{color:var(--viz-ink-2)}

/* ink-backed figures keep their own light-on-dark scheme */
.viz--ink .tier,.article-body figure.viz--ink .tier,
.viz--ink .flowv .step,.article-body figure.viz--ink .flowv .step,
.viz--ink .myth>div,.article-body figure.viz--ink .myth>div,
.viz--ink .duo-cards .card,.article-body figure.viz--ink .duo-cards .card,
.viz--ink .owners .o,.article-body figure.viz--ink .owners .o,
.viz--ink .rules .rule,.article-body figure.viz--ink .rules .rule,
.viz--ink .frow,.article-body figure.viz--ink .frow,
.viz--ink .trail,.article-body figure.viz--ink .trail,
.viz--ink .contrast .c,.article-body figure.viz--ink .contrast .c,
.viz--ink .asks .a,.article-body figure.viz--ink .asks .a,
.viz--ink .swap,.article-body figure.viz--ink .swap{background:rgba(244,241,234,.07);border-color:rgba(199,184,219,.28)}

.viz--ink .viz-note,.article-body figure.viz--ink .viz-note,
.viz--ink .vtable td,.viz--ink .vtable th,
.viz--ink .barrow .yr,.viz--ink .chartkey,.viz--ink .bignum .l,
.viz--ink .tline .ev p,.viz--ink .tline .ev .when,
.viz--ink .tier p,.viz--ink .flowv .step span.d,
.viz--ink .owners .o p,.viz--ink .rules .rule p,
.viz--ink .duo-cards .card li,.viz--ink .frow p,
.viz--ink .contrast .c p,.viz--ink .asks .a p,
.viz--ink .checklist li,.viz--ink .tl .ev p{color:var(--lilac)}
.viz--ink .vtable td:first-child,
.viz--ink .tier h4,.viz--ink .flowv .step strong,
.viz--ink .owners .o .q,.viz--ink .rules .rule h4,
.viz--ink .duo-cards .card h4,.viz--ink .frow h4,
.viz--ink .tl .ev h4,.viz--ink .checklist h4,
.viz--ink .myth p.big{color:var(--paper)}
.viz--ink .checklist li b,.viz--ink .duo-cards .card li b{color:var(--paper)}
.viz--ink .checklist li .bx{border-color:var(--lilac);background:transparent}
.viz--ink .checklist h4{border-bottom-color:var(--hairline-ink)}

/* callouts and pullboxes on cream */
.callout-time{background:var(--bone)}
.callout-time p.sm{color:var(--viz-ink-2)}

/* checklist tick boxes need a visible edge on white */
.viz .checklist li .bx{border-color:var(--accent);background:var(--bone)}