/* ==========================================================================
   Tool pages (loaded after main.css by inc/layout.php): Altcoin Season Index (/altcoin-season-index/), Bitcoin Rainbow Chart (/bitcoin-rainbow-chart/, the .rb-* block) and Bitcoin DCA Calculator (/bitcoin-dca-calculator/, the .dca-* block at the end)
   Orange = Bitcoin Season, grey = Neutral, blue = Altcoin Season (colour-blind safe, never colour alone).
   ========================================================================== */
:root {
  --asi-btc: #cc6d00; --asi-btc-t: #9a4b00;   /* fills (graphics) and text-safe variants */
  --asi-neu: #7d8791; --asi-neu-t: #4b5560;
  --asi-alt: #2563eb; --asi-alt-t: #1d4ed8;
}
:root[data-theme="dark"] {
  --asi-btc: #ff9f2e; --asi-btc-t: #ffb366;
  --asi-neu: #8a949e; --asi-neu-t: #b4bdb8;
  --asi-alt: #6b9bff; --asi-alt-t: #8fb4ff;
}
.asi-z-btc { --zc: var(--asi-btc-t); } .asi-z-neu { --zc: var(--asi-neu-t); } .asi-z-alt { --zc: var(--asi-alt-t); }

/* the page you are on in the sidebar / pill navigation (the scroll-spy highlight is the green one) */
.side-link.is-page { background: var(--tile); color: var(--ink); font-weight: 600; }
.pillnav a.is-page { background: var(--tile-2); color: var(--ink); font-weight: 600; }

.crumbs { margin: 0 0 10px; font-size: 13px; color: var(--ink-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.asi-hero { animation: none; }

.asi-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 24px; align-items: start; }
@container (max-width: 640px) { .asi-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.asi-num { display: flex; align-items: baseline; gap: 8px; font-size: clamp(44px, 9vw, 72px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.asi-num small { font-size: 20px; letter-spacing: 0; }
.asi-n { color: var(--zc); }
.asi-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0; }
.asi-sub { color: var(--ink-2); font-weight: 600; font-size: 14.5px; }
.asi-answer { color: var(--ink-2); font-size: 14.5px; line-height: 1.65; max-width: 70ch; }
.asi-answer strong { color: var(--ink); }
.asi-earlier { display: grid; gap: 6px; }
.asi-earlier > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--tile); font-size: 13px; }
.asi-earlier dt { color: var(--ink-3); }
.asi-earlier dd { font-weight: 500; text-align: right; }
.asi-earlier dd b { color: var(--zc); margin-right: 4px; }
.asi-earlier abbr { text-decoration: none; border-bottom: 1px dotted currentColor; color: var(--ink-3); font-size: 11.5px; cursor: help; }
.asi-gauge-wrap { max-width: 560px; margin: 18px 0 18px; }
@media (max-width: 760px) { .asi-date { display: none; } }
.asi-gauge { width: 100%; height: auto; overflow: visible; font-variant-numeric: tabular-nums; }
.asi-gauge .gb-btc { fill: var(--asi-btc); } .asi-gauge .gb-neu { fill: var(--asi-neu); } .asi-gauge .gb-alt { fill: var(--asi-alt); }
.asi-gauge .gz { font-size: 11px; font-weight: 600; }
.asi-gauge .gz-btc { fill: var(--asi-btc-t); } .asi-gauge .gz-neu { fill: var(--asi-neu-t); } .asi-gauge .gz-alt { fill: var(--asi-alt-t); }
.asi-gauge .gn { font-size: 10.5px; fill: var(--ink-3); }
.asi-gauge .gt { stroke: var(--ink-3); stroke-width: 1; }
.asi-gauge .gm { fill: var(--ink); stroke: var(--card); stroke-width: 2; paint-order: stroke; }
.asi-gauge .gm-line { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
@container (max-width: 420px) { .asi-gauge .gz { font-size: 12.5px; } .asi-gauge .gn { font-size: 12px; } } /* the SVG scales with the card: keep the labels readable on phones */
.asi-estnote { margin-top: 8px; }
.asi-meta { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.asi-meta a { color: var(--ink-2); font-weight: 600; }
.asi-disc { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.asi-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--tile); color: var(--ink-2); font-size: 13.5px; }
.asi-foot { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 90ch; }

/* windows */
.asi-win { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; margin-top: 14px; }
.asi-win th, .asi-win td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.asi-win thead th { font-size: 12.5px; font-weight: 500; color: var(--ink-3); background: var(--tile); border-bottom: 0; white-space: nowrap; }
.asi-win thead th:first-child { border-radius: 12px 0 0 12px; } .asi-win thead th:last-child { border-radius: 0 12px 12px 0; }
.asi-win tbody th { font-weight: 600; }
.asi-win tbody th small { display: block; font-weight: 500; }
.asi-win tbody tr:last-child > * { border-bottom: 0; }
.asi-win .head-row > * { background: var(--tile); }
.asi-wc b { font-size: 17px; margin-right: 8px; color: var(--zc); }
.asi-wz { font-size: 11.5px; font-weight: 600; color: var(--zc); margin-right: 8px; }
.asi-wn { font-size: 11.5px; color: var(--ink-3); }
/* narrow cards: score above the zone name, the "c of a" count goes, no horizontal scrolling down to 320px screens */
@container (max-width: 600px) {
  .asi-win th, .asi-win td { padding: 10px 8px; }
  .asi-win thead th { white-space: normal; }
  .asi-wc b { display: block; margin: 0; font-size: 16px; }
  .asi-wz { display: block; margin: 0; }
  .asi-wn { display: none; }
}

/* history chart: lines and bands are an SVG without aspect ratio, text and cursor are HTML in percent */
.asi-chart { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; height: 260px; margin: 10px 0 36px; }
@media (max-width: 760px) { .asi-chart { height: 210px; } }
.asi-y { position: relative; font-size: 12px; color: var(--ink-3); }
.asi-y li { position: absolute; right: 0; transform: translateY(-50%); line-height: 1; }
.asi-plot { position: relative; touch-action: pan-y pinch-zoom; border-radius: 6px; }
.asi-plot:focus-visible { outline-offset: 4px; }
.asi-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; border-radius: 6px; }
.asi-plot .b-btc { fill: var(--asi-btc); opacity: .14; } .asi-plot .b-alt { fill: var(--asi-alt); opacity: .14; }
.asi-plot .g, .asi-plot .line, .asi-plot .est { fill: none; vector-effect: non-scaling-stroke; }
.asi-plot .g { stroke: var(--line); stroke-width: 1; }
.asi-plot .line, .asi-plot .est { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.asi-plot .est { stroke-dasharray: 5 4; opacity: .8; }
.asi-dot { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--zc); border: 2.5px solid var(--card); pointer-events: none; }
.asi-cur { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--ink-3); pointer-events: none; }
.asi-xl { position: absolute; top: calc(100% + 9px); transform: translateX(-50%); font-size: 12px; color: var(--ink-3); white-space: nowrap; pointer-events: none; }
.asi-cap { font-size: 13px; line-height: 1.5; color: var(--ink-2); min-height: 3em; }
.asi-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.asi-legend li { display: inline-flex; align-items: center; gap: 6px; }
.asi-legend .k { width: 10px; height: 10px; border-radius: 3px; }
.asi-legend .k.alt { background: color-mix(in srgb, var(--asi-alt) 14%, transparent); border: 1px solid var(--asi-alt); }
.asi-legend .k.btc { background: color-mix(in srgb, var(--asi-btc) 14%, transparent); border: 1px solid var(--asi-btc); }
.asi-legend .k.est { background: repeating-linear-gradient(90deg, var(--ink-3) 0 3px, transparent 3px 5px); height: 2px; }
.asi-details { margin-top: 14px; }
.asi-details summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 6px 0; }
.asi-details[open] > summary { margin-bottom: 10px; }
.asi-hist tbody th { font-weight: 500; white-space: nowrap; }
.asi-hist .num { white-space: nowrap; }
.asi-excl th { font-weight: 500; }

/* coins table */
.asi-split { display: flex; gap: 3px; height: 12px; margin: 14px 0 6px; }
.asi-split i { display: block; height: 100%; border-radius: 999px; min-width: 4px; }
.asi-s-beat { background: var(--asi-alt); }
.asi-s-lag { background: color-mix(in srgb, var(--asi-neu) 25%, transparent); border: 1px solid var(--asi-neu); } /* an edge keeps it above 3:1 against the card */
.asi-split-l { margin-bottom: 14px; font-size: 13px; color: var(--ink-2); }
.asi-tools { display: none; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 14px; }
.js-ready .asi-tools { display: flex; }
.asi-search { flex: 1 1 220px; max-width: 320px; height: 40px; }
.asi-tbl .asi-r90 { font-weight: 600; }
.asi-tbl tr.nomatch { display: none; }
.js-ready .asi-tbl:not(.expanded):not(.searching) tr.extra { display: none; }
.asi-tbl .asi-pin > tr > * { background: var(--tile); }
.asi-tbl .asi-pin > tr:last-child > * { border-bottom: 1px solid var(--line); }
.asi-btc-row > :first-child { box-shadow: inset 3px 0 0 var(--asi-btc); }
.asi-res { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; }
.asi-beat { color: var(--asi-alt-t); } .asi-lag { color: var(--ink-3); } .asi-bench { color: var(--asi-btc-t); }
.th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.th-sort:hover { color: var(--ink); }
th[aria-sort] .th-sort { color: var(--ink); }
th[aria-sort="descending"] .th-sort::after { content: "↓"; font-size: 11px; }
th[aria-sort="ascending"] .th-sort::after { content: "↑"; font-size: 11px; }
@container (max-width: 960px) { .asi-tbl .c-price { display: none; } }
@container (max-width: 860px) { .asi-tbl .c-30, .asi-tbl .c-7, .asi-tbl .c-cap { display: none; } }
@container (max-width: 480px) {
  .asi-tbl .c-rank { display: none; }
  .asi-tbl th, .asi-tbl td { padding: 10px 6px; font-size: 13px; }
  .asi-tbl .coin-cell { gap: 8px; }
  .asi-tbl .coin-img, .asi-tbl .coin-ph { width: 24px; height: 24px; }
  .asi-tbl .coin-name .n { max-width: 11ch; }
}
@container (max-width: 400px) { .asi-tbl .c-gap { display: none; } }

/* context tiles */
.asi-ctx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
@container (max-width: 760px) { .asi-ctx { grid-template-columns: minmax(0, 1fr); } }
.asi-ctx .tile-s { align-content: start; gap: 4px; padding: 16px; }
.asi-tn { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.asi-tn a { color: var(--ink-2); font-weight: 600; }

/* long text */
.asi-prose > p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); max-width: 78ch; }
.asi-prose > p a, .asi-prose li a, .card-text a, .asi-foot a { color: var(--ink); font-weight: 600; }
.asi-prose > .asi-foot { margin: -2px 0 14px; font-size: 12.5px; color: var(--ink-3); }
.asi-steps { counter-reset: s; display: grid; gap: 10px; margin: 0 0 18px; max-width: 78ch; }
.asi-steps li { counter-increment: s; position: relative; padding: 2px 0 2px 40px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.asi-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); font-size: 13px; font-weight: 700; }
.asi-steps b, .asi-list b { color: var(--ink); }
.asi-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 0 0 14px; }
.asi-defs > div { padding: 14px; border-radius: var(--r-tile); background: var(--tile); }
.asi-defs dt { margin-bottom: 4px; font-weight: 600; color: var(--ink); }
.asi-defs dd { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.asi-prose .asi-example { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--green-soft); color: var(--green-ink); font-size: 14px; }
.asi-list { list-style: disc; padding-left: 22px; display: grid; gap: 8px; margin: 0 0 14px; max-width: 78ch; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.asi-zt, .asi-cmp, .asi-hz { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0 0 14px; }
.asi-zt th, .asi-zt td, .asi-cmp th, .asi-cmp td, .asi-hz th, .asi-hz td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-2); }
.asi-zt thead th, .asi-cmp thead th, .asi-hz thead th { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.asi-zt .num { white-space: nowrap; font-weight: 600; color: var(--ink); }
.asi-cmp { min-width: 640px; }
.asi-cmp tbody th, .asi-hz tbody th { font-weight: 600; color: var(--ink); }
.asi-cmp tbody th { white-space: nowrap; }
.asi-hz .num { text-align: right; white-space: nowrap; }
.asi-faq h3 { margin: 22px 0 6px; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.asi-faq h3:first-child { margin-top: 0; }
.asi-faq p { max-width: 78ch; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.asi-prose.about .muted { max-width: 90ch; font-size: 13px; line-height: 1.65; }

/* The sidebar of a tool page is longer than the dashboard's: tighten it on short laptop screens, drop the extra
   dashboard links on very short ones (the "On this page" links are what a reader of this page needs). */
@media (min-width: 1100px) and (max-height: 960px) {
  .sidebar .side-link { height: 36px; }
  .sidebar .side-label { padding: 8px 12px 3px; }
  .sidebar .brand { padding-bottom: 6px; }
}
@media (min-width: 1100px) and (max-height: 760px) { .sidebar .side-opt { display: none; } }

@media print {
  .js-ready .asi-tools, .more-btn { display: none; }
  .js-ready .mkt.asi-tbl:not(.expanded):not(.searching) tr.extra { display: table-row; } /* print every coin, not the collapsed 25 */
  :root, :root[data-theme="dark"] {
    --asi-btc: #cc6d00; --asi-btc-t: #9a4b00; --asi-neu: #7d8791; --asi-neu-t: #4b5560; --asi-alt: #2563eb; --asi-alt-t: #1d4ed8;
  }
  .asi-gauge, .asi-plot svg, .asi-split i, .zone { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   Bitcoin Rainbow Chart (/bitcoin-rainbow-chart/): the .rb-* rules.
   Nine bands, cool to warm: 0 violet, 1 blue, 2 cyan, 3 green, 4 lime, 5 yellow, 6 orange, 7 red-orange, 8 red.
   --rb-N is the fill (graphics), --rb-N-t the text-safe variant (>= 4.5:1 on the card, the tile and the chip tint); the band's
   name is always printed next to its colour. The price line is near-black in both themes and sits on a light halo (a second,
   wider stroke of the same path): >= 3:1 against every fill, and against the two faded outer fills (--rb-0-fade, --rb-8-fade).
   The two open-ended outer bands are drawn faded in the chart, and the legend swatches of those two bands use the same faded
   fill, so the key matches what it names (the ladder, the chips and the tables keep the full colour): in the light
   theme 60 % of the fill over the white card; in the dark theme 60 % of the fill over a lighter neutral, because fading toward the
   dark card would take the near-black line below 3:1.
   Container sizes: the container is the card (.c-wide); its content box is the viewport width minus 68 px on phones (252 px at 320).
   The light fills are shared with the print rules and the OG image: do not change them.
   ========================================================================== */
:root {
  --rb-0: #9b8bd9; --rb-1: #6f9be8; --rb-2: #5cc0cf; --rb-3: #6cc490; --rb-4: #bcd96a; --rb-5: #f2d35b; --rb-6: #f4a655; --rb-7: #ee7d5f; --rb-8: #e0555a;
  --rb-0-t: #5b45b0; --rb-1-t: #2e5dc0; --rb-2-t: #116b79; --rb-3-t: #197140; --rb-4-t: #546b09; --rb-5-t: #7c5f00; --rb-6-t: #965000; --rb-7-t: #ab3c21; --rb-8-t: #b3262d;
  --rb-0-fade: #c3b9e8; --rb-8-fade: #ec999c;
  --rb-line: #0b0f0d; --rb-halo: rgba(255, 255, 255, .88); --rb-grid: rgba(255, 255, 255, .42); --rb-sep: rgba(255, 255, 255, .6);
}
:root[data-theme="dark"] {
  --rb-0: #6d5bb8; --rb-1: #4a74c9; --rb-2: #2f9aaa; --rb-3: #3a9f66; --rb-4: #8aa636; --rb-5: #c9ab2c; --rb-6: #cf8130; --rb-7: #cc5a3f; --rb-8: #c13a40;
  --rb-0-t: #b4a7ef; --rb-1-t: #8fb2f5; --rb-2-t: #6fd0dd; --rb-3-t: #7fd6a4; --rb-4-t: #c9e27f; --rb-5-t: #f0d66f; --rb-6-t: #f6b878; --rb-7-t: #f59a82; --rb-8-t: #f58488;
  --rb-0-fade: #7972a8; --rb-8-fade: #ab5e60;
  --rb-grid: rgba(255, 255, 255, .24); --rb-sep: rgba(255, 255, 255, .34);
}
.rb-z0 { --zc: var(--rb-0-t); --zf: var(--rb-0); } .rb-z1 { --zc: var(--rb-1-t); --zf: var(--rb-1); } .rb-z2 { --zc: var(--rb-2-t); --zf: var(--rb-2); }
.rb-z3 { --zc: var(--rb-3-t); --zf: var(--rb-3); } .rb-z4 { --zc: var(--rb-4-t); --zf: var(--rb-4); } .rb-z5 { --zc: var(--rb-5-t); --zf: var(--rb-5); }
.rb-z6 { --zc: var(--rb-6-t); --zf: var(--rb-6); } .rb-z7 { --zc: var(--rb-7-t); --zf: var(--rb-7); } .rb-z8 { --zc: var(--rb-8-t); --zf: var(--rb-8); }
/* SVG fills of the ladder and the chart */
.rb-ladder .f0 { fill: var(--rb-0); } .rb-ladder .f1, .rb-plot .f1 { fill: var(--rb-1); } .rb-ladder .f2, .rb-plot .f2 { fill: var(--rb-2); }
.rb-ladder .f3, .rb-plot .f3 { fill: var(--rb-3); } .rb-ladder .f4, .rb-plot .f4 { fill: var(--rb-4); } .rb-ladder .f5, .rb-plot .f5 { fill: var(--rb-5); }
.rb-ladder .f6, .rb-plot .f6 { fill: var(--rb-6); } .rb-ladder .f7, .rb-plot .f7 { fill: var(--rb-7); } .rb-ladder .f8 { fill: var(--rb-8); }
.rb-plot .f0 { fill: var(--rb-0-fade); } .rb-plot .f8 { fill: var(--rb-8-fade); } /* the open-ended outer bands, faded in the chart only */

@media (max-width: 760px) { .rb-date { display: none; } }
.rb-subline { color: var(--ink-2); font-weight: 500; }
.rb-subline strong { color: var(--ink); }

/* hero */
.rb-hero { animation: none; }
.rb-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 24px; align-items: start; }
@container (max-width: 640px) { .rb-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.rb-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; font-size: clamp(40px, 9vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.rb-num small { font-size: 16px; letter-spacing: 0; }
.rb-n { color: var(--zc); }
.rb-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 10px; }
.rb-sub { color: var(--ink-2); font-weight: 600; font-size: 14.5px; }
.rb-honest { margin: 0 0 4px; max-width: 64ch; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.rb-honest a { color: var(--ink-2); font-weight: 600; }
.rb-ladder-wrap { max-width: 560px; margin: 14px 0 16px; }
.rb-ladder { width: 100%; height: auto; overflow: visible; }
.rb-ladder .on { stroke: var(--ink); stroke-width: 2; }
.rb-ladder .mk { fill: var(--ink); }
.rb-lad-ends { display: flex; justify-content: space-between; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.rb-answer { color: var(--ink-2); font-size: 14.5px; line-height: 1.65; max-width: 70ch; }
.rb-answer strong { color: var(--ink); }
.rb-facts { display: grid; gap: 6px; }
.rb-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--tile); font-size: 13px; }
.rb-facts dt { color: var(--ink-3); }
.rb-facts dd { text-align: right; font-weight: 500; }
.rb-facts dd b { font-weight: 700; }
.rb-facts dd small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--ink-3); } /* the band's percent range under its dollar range */
.rb-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--tile); color: var(--ink-2); font-size: 13.5px; }
.rb-meta { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.rb-meta a { color: var(--ink-2); font-weight: 600; }
.rb-disc { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.rb-foot { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 90ch; }
.rb-foot a { color: var(--ink-2); font-weight: 600; }

/* chart: bands, grid and price line are an SVG without aspect ratio (one unit = one day wide), text and cursor are HTML in percent */
.rb-chart { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; height: 340px; margin: 10px 0 40px; }
@media (max-width: 760px) { .rb-chart { height: 280px; } }
.rb-y { position: relative; font-size: 12px; color: var(--ink-3); }
.rb-y li { position: absolute; right: 0; transform: translateY(-50%); line-height: 1; white-space: nowrap; }
.rb-plot { position: relative; touch-action: pan-y pinch-zoom; border-radius: 6px; }
.rb-plot:focus-visible { outline-offset: 4px; }
.rb-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; border-radius: 6px; }
.rb-plot svg path[class^="f"] { stroke: var(--rb-sep); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rb-plot .g { fill: none; vector-effect: non-scaling-stroke; stroke: var(--rb-grid); stroke-width: 1; }
/* The line's path lives in <defs> and is drawn twice with <use>. Its vector-effect is an attribute in the markup, not a rule here:
   a <use> copy is not matched by selectors that reach through <defs>, so only the attribute keeps the stroke at a constant width. */
.rb-plot .lh, .rb-plot .ln { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.rb-plot .lh { stroke: var(--rb-halo); stroke-width: 5; }
.rb-plot .ln { stroke: var(--rb-line); stroke-width: 2; }
.rb-ex { position: absolute; top: 0; right: 0; bottom: 0; pointer-events: none; border-left: 2px dashed var(--rb-line); border-radius: 0 6px 6px 0;
  background: rgba(128, 128, 128, .22); /* without color-mix: a plain wash */
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .3) 6px 7px), color-mix(in srgb, var(--card) 46%, transparent); }
.rb-ex span { position: absolute; top: 8px; left: 11px; padding: 6px 2px; border-radius: 6px; background: var(--card); background: color-mix(in srgb, var(--card) 84%, transparent);
  color: var(--ink); font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
.rb-bl { position: absolute; right: 6px; transform: translateY(-50%); padding: 1px 7px; border-radius: 6px; background: var(--card); background: color-mix(in srgb, var(--card) 84%, transparent);
  color: var(--ink); font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; pointer-events: none; }
.rb-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 3px solid var(--rb-line); pointer-events: none; }
.rb-cur { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--rb-line); box-shadow: 1px 0 0 rgba(255, 255, 255, .55); pointer-events: none; }
.rb-hot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; border: 2.5px solid var(--rb-line); pointer-events: none; }
.rb-xl { position: absolute; top: calc(100% + 9px); transform: translateX(-50%); font-size: 12px; color: var(--ink-3); white-space: nowrap; pointer-events: none; }
/* The caption and the pointer / key readout lie over each other in one grid cell: the box is as tall as the longer of the two (the
   caption, with its hint), so showing or clearing the readout never moves the legend and the table below the chart. */
.rb-cap { display: grid; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.rb-cap > span { grid-area: 1 / 1; }
.rb-cap-r, .rb-cap.is-read .rb-cap-d { visibility: hidden; }
.rb-cap.is-read .rb-cap-r { visibility: visible; }
.rb-cap-h { display: none; } /* hovering and arrow keys need JavaScript: the sentence appears once the head script has set html.js */
.js .rb-cap-h { display: inline; }
.js .rb-cap-h[hidden] { display: none; }
@container (max-width: 560px) { .rb-bl, .rb-xl.mi { display: none; } }
@container (max-width: 284px) { .rb-xl.mi2 { display: none; } } /* the plot is under about 220 px: every second year / month label goes, so none touch */
/* The key: a grid of equal cells, nine in a row when they fit, else 5 + 4, on phones 3 + 3 + 3 (a flex wrap left "Extremely above" alone on a line) */
.rb-legend { display: grid; grid-template-columns: repeat(9, max-content); justify-content: start; gap: 6px 16px; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.rb-legend li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rb-legend .k { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--zf); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
.rb-legend .k.rb-z0 { background: var(--rb-0-fade); } .rb-legend .k.rb-z8 { background: var(--rb-8-fade); } /* the same faded fill as the plot */
@container (max-width: 819px) { .rb-legend { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 12px; } } /* nine in a row need 820 px */
@container (max-width: 540px) { .rb-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 300px) { .rb-legend { gap: 6px 8px; font-size: 11px; } .rb-legend li { gap: 5px; } }
.rb-details { margin-top: 14px; }
.rb-details summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 6px 0; }
.rb-details[open] > summary { margin-bottom: 10px; }
.rb-hist tbody th { font-weight: 500; white-space: nowrap; }
.rb-hist tbody th small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.rb-hist .num { white-space: nowrap; }
.rb-hist th, .rb-hist td { padding-top: 5px; padding-bottom: 5px; } /* rows of about 36 px: 90 of them are a long page */
.rb-hist .zone { padding-top: 3px; padding-bottom: 3px; }

/* chips in tables: the long name in wide cells, the short one in narrow cells */
.zone .rb-sn { display: none; }
.mkt .zone { display: inline-block; white-space: nowrap; }
@container (max-width: 560px) { .zone .rb-ln { display: none; } .zone .rb-sn { display: inline; } }

/* band table */
.rb-bt th, .rb-bt td { padding: 11px 12px; }
.rb-bt thead th, .rb-bt thead th.num { white-space: normal; vertical-align: bottom; }
.rb-bt thead th small, .rb-yt small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.rb-bt tbody th { font-weight: 600; white-space: nowrap; }
.rb-bt .rb-rng { white-space: nowrap; }
.rb-r2 { white-space: nowrap; } /* an en dash allows a break before the no-break space after it, so the dash and the amount are held together here */
.rb-dist { font-size: 13px; color: var(--ink-2); }
.rb-bt thead .rb-dh { white-space: normal; min-width: 130px; }
.rb-bt .rb-shh { min-width: 112px; }
/* wide table: "Share of days" over "in the fit window" and the dates on a line of their own; narrower, the dates wrap with the rest */
@container (min-width: 961px) {
  .rb-bt .rb-dist, .rb-bt thead .rb-dh { min-width: 190px; } /* "16% below to 19% above" (about 165 px) on one line: uniform rows */
  .rb-bt .rb-shh { min-width: 150px; }
  .rb-nb { white-space: nowrap; }
}
.rb-dsm { display: none; margin-top: 3px; font-size: 11.5px; font-weight: 500; line-height: 1.35; color: var(--ink-3); }
.rb-bt tr.is-now > * { background: var(--tile); }
.rb-bt tr.is-now > :first-child { box-shadow: inset 4px 0 0 var(--zf); }
.rb-nowtag { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px; }
.rb-shs { display: none; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.rb-sh b { font-weight: 600; }
.rb-bar { display: block; width: 100%; max-width: 110px; height: 5px; margin: 5px 0 0 auto; border-radius: 3px; background: var(--tile-2); overflow: hidden; }
.rb-bar i { display: block; height: 100%; border-radius: 3px; background: var(--zf); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.rb-exh { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ink) 4%, transparent) 6px 7px); }
/* Narrowing in three steps. Six columns need about 1080 px with the long band names and about 960 px with the short ones: up to
   1100 px the short band names and tighter cells, up to 960 px the distance moves under the band name (a squeezed column made the
   rows uneven), below 820 px the share of days does too and the ranges may wrap. */
@container (max-width: 1100px) {
  .rb-bt .rb-ln { display: none; } .rb-bt .rb-sn { display: inline; }
  .rb-bt th, .rb-bt td { padding-left: 9px; padding-right: 9px; }
  .rb-bt tbody th { white-space: normal; }
}
@container (max-width: 960px) {
  .rb-bt .rb-dist, .rb-bt .rb-dh { display: none; }
  .rb-bt .rb-dsm { display: block; }
}
@container (min-width: 820px) { /* six columns: the ranges take 13 px type and tighter cells, so the distance fits on one line in every row */
  .rb-bt td.rb-rng { font-size: 13px; padding-left: 7px; padding-right: 7px; }
  .rb-bt thead th.num:not(.rb-shh) { white-space: nowrap; } /* "Range on 1 Jan 2027" stays on one line */
}
@container (min-width: 820px) and (max-width: 960px) { .rb-bt .rb-dsm { white-space: nowrap; } }
@container (max-width: 819px) {
  .rb-bt .rb-sh, .rb-bt .rb-shh { display: none; }
  .rb-bt .rb-shs { display: block; }
  .rb-bt td.rb-rng { white-space: normal; }
  .rb-bt .rb-r1, .rb-bt .rb-r2 { display: block; } /* from / to on two lines in every row, so the dash never sits alone */
}
@container (min-width: 561px) and (max-width: 819px) { /* fixed columns: the band's distance line wraps the same way in every row */
  .rb-bt { table-layout: fixed; }
  .rb-bt thead th:first-child { width: 40%; }
}
@container (max-width: 560px) {
  .rb-bt { table-layout: fixed; }
  .rb-bt th, .rb-bt td { padding: 9px 4px; font-size: 12px; }
  .rb-bt thead th:first-child { width: 34%; }
  .rb-bt tbody th { white-space: normal; }
  .rb-bt .zone { padding: 3px 7px; font-size: 11.5px; }
  .rb-bt .rb-hl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* "Range on" stays for screen readers */
  .rb-nowtag { margin: 3px 0 0; display: inline-block; }
}
@container (max-width: 420px) { /* a phone: "– $637,000" is 64 px wide at 12 px, a column has 60 */
  .rb-bt th, .rb-bt td { padding-left: 3px; padding-right: 3px; }
  .rb-bt td.rb-rng { font-size: 11px; }
  .rb-bt .zone { padding: 3px 6px; font-size: 11px; }
}
@container (min-width: 521px) and (max-width: 560px) { .rb-bt thead th:first-child { width: 40%; } } /* room for the distance line on one line (a landscape phone) */
/* the row of today's band: on phones its text keeps clear of the 4 px colour bar (these selectors outrank the paddings above) */
@container (max-width: 560px) { .rb-bt tr.is-now > :first-child { padding-left: 9px; } }

/* share of days per band and year: the darker the cell, the more days */
.rb-yt { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 2px; font-size: 13px; margin: 0 0 4px; }
.rb-yt th, .rb-yt td { padding: 7px 3px; text-align: center; }
.rb-yt thead th { font-size: 11.5px; font-weight: 600; color: var(--ink-2); border-top: 4px solid var(--zf); border-radius: 3px; vertical-align: bottom; white-space: nowrap; }
.rb-yt tbody th { text-align: left; font-weight: 600; white-space: nowrap; padding-right: 8px; color: var(--ink); }
.rb-yt tbody th small { display: inline; font-size: 11px; }
.rb-yt { --k: 1; } /* tint strength at 100% of the days; the dark fills would drag the text below 4.5:1 above about 55% */
:root[data-theme="dark"] .rb-yt { --k: .55; }
.rb-yt td { border-radius: 5px; font-variant-numeric: tabular-nums; color: var(--ink);
  background: color-mix(in srgb, var(--zf) calc(var(--p) * var(--k) * 1%), transparent); }
.rb-yt td[style="--p:0"] { color: var(--ink-3); }
.rb-yt td.hi { font-weight: 700; }
.rb-yt td:nth-child(2) { --zf: var(--rb-0); } .rb-yt td:nth-child(3) { --zf: var(--rb-1); } .rb-yt td:nth-child(4) { --zf: var(--rb-2); }
.rb-yt td:nth-child(5) { --zf: var(--rb-3); } .rb-yt td:nth-child(6) { --zf: var(--rb-4); } .rb-yt td:nth-child(7) { --zf: var(--rb-5); }
.rb-yt td:nth-child(8) { --zf: var(--rb-6); } .rb-yt td:nth-child(9) { --zf: var(--rb-7); } .rb-yt td:nth-child(10) { --zf: var(--rb-8); }
@container (max-width: 740px) { /* the table needs about 712 px in its wide form: below 740 px the last column would be cut off */
  .rb-yt { min-width: 0; font-size: 12px; border-spacing: 1px; }
  .rb-yt th, .rb-yt td { padding: 6px 1px; }
  .rb-yt thead th span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); padding: 2px 0; }
  .rb-yt tbody th { padding-right: 4px; font-size: 12px; }
  .rb-yt tbody th small { display: block; }
}

/* cycle table */
.rb-pt b { margin-right: 8px; }
.rb-pt span { font-weight: 500; white-space: nowrap; }
@container (max-width: 700px) { .rb-mt .rb-tm { display: none; } }
@container (max-width: 560px) {
  .rb-mt th, .rb-mt td, .rb-hist th, .rb-hist td { padding: 9px 3px; font-size: 12px; }
  .rb-hist th, .rb-hist td { padding-top: 7px; padding-bottom: 7px; }
  .rb-mt .zone, .rb-hist .zone { padding: 3px 6px; font-size: 11px; }
  .rb-mt thead th, .rb-mt thead th.num, .rb-hist thead th, .rb-hist thead th.num { white-space: normal; vertical-align: bottom; }
  .rb-pt b, .rb-pt span { display: block; margin: 0; } /* "Highest offset" over its date, the date on one line */
  .rb-mt th:last-child, .rb-mt td:last-child { padding-left: 10px; } /* "Offset, decades" and "Band" read as two headers, not as one */
  /* a date stays on one line, so the 91 rows have one height; only the live row's small line (date and time) may wrap */
  .rb-hist tbody th small { white-space: normal; }
}
@container (max-width: 420px) {
  .rb-mt th, .rb-mt td { padding-left: 2px; padding-right: 2px; }
  .rb-mt th:last-child, .rb-mt td:last-child { padding-left: 8px; }
  .rb-mt .zone { padding: 3px 5px; }
}
@container (max-width: 300px) { /* the narrowest phones: 320 px wide screens */
  .rb-mt th, .rb-mt td, .rb-bt th, .rb-bt td { padding-left: 2px; padding-right: 2px; }
  .rb-mt .zone { padding: 3px 5px; font-size: 10.5px; }
  .rb-pt span { white-space: normal; } /* the date may wrap below 300 px */
}
/* 320 px class phones (container under about 285 px, screens under about 352 px): one more step, so none of the three tables is wider
   than its wrapper. A table that is a few pixels too wide hides the last digit of the last column. */
@container (max-width: 284px) {
  .rb-bt th, .rb-bt td, .rb-mt th, .rb-mt td { padding-left: 1px; padding-right: 1px; font-size: 11px; }
  .rb-bt td.rb-rng { font-size: 10px; } /* "– $637,000" is 49 px; a range column has 58 */
  .rb-bt .zone, .rb-mt .zone { padding: 3px 4px; font-size: 10px; }
  .rb-bt thead th:first-child { width: 33%; }
  .rb-bt tr.is-now > :first-child { padding-left: 6px; }
  .rb-mt th:last-child, .rb-mt td:last-child { padding-left: 5px; }
  .rb-yt { font-size: 11px; border-spacing: 1px; }
  .rb-yt th, .rb-yt td { padding-left: 0; padding-right: 0; }
  .rb-yt tbody th { padding-right: 2px; font-size: 11px; }
  .rb-hist th, .rb-hist td { padding-left: 1px; padding-right: 1px; font-size: 11px; }
  .rb-hist tbody th small { font-size: 10.5px; }
  .rb-hist .zone { padding: 3px 4px; font-size: 10px; }
}

/* long text */
.rb-prose > p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); max-width: 78ch; }
.rb-prose > p a, .rb-prose li a, .rb-prose dd a { color: var(--ink); font-weight: 600; }
.rb-prose > p strong, .rb-prose li strong { color: var(--ink); }
.rb-prose > ol { counter-reset: s; display: grid; gap: 10px; margin: 0 0 18px; max-width: 78ch; }
.rb-prose > ol > li { counter-increment: s; position: relative; padding: 2px 0 2px 40px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.rb-prose > ol > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); font-size: 13px; font-weight: 700; }
.rb-h3 { margin: 22px 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.rb-prose > .table-wrap { margin: 0 0 6px; }
.rb-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 0 0 16px; align-items: start; }
.rb-defs > div { padding: 14px; border-radius: var(--r-tile); background: var(--tile); }
.rb-defs dt { margin-bottom: 4px; font-weight: 600; color: var(--ink); }
.rb-defs dd { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.rb-list { list-style: disc; padding-left: 22px; display: grid; gap: 8px; margin: 0 0 14px; max-width: 78ch; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.rb-faq h3 { margin: 22px 0 6px; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.rb-faq h3:first-child { margin-top: 0; }
.rb-faq p { max-width: 78ch; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.rb-disclaimer p { max-width: 90ch; font-size: 13px; line-height: 1.65; color: var(--ink-3); }

@media print {
  :root, :root[data-theme="dark"] {
    --rb-0: #9b8bd9; --rb-1: #6f9be8; --rb-2: #5cc0cf; --rb-3: #6cc490; --rb-4: #bcd96a; --rb-5: #f2d35b; --rb-6: #f4a655; --rb-7: #ee7d5f; --rb-8: #e0555a;
    --rb-0-t: #5b45b0; --rb-1-t: #2e5dc0; --rb-2-t: #116b79; --rb-3-t: #197140; --rb-4-t: #546b09; --rb-5-t: #7c5f00; --rb-6-t: #965000; --rb-7-t: #ab3c21; --rb-8-t: #b3262d;
    --rb-0-fade: #c3b9e8; --rb-8-fade: #ec999c;
    --rb-grid: rgba(255, 255, 255, .42); --rb-sep: rgba(255, 255, 255, .6);
  }
  .rb-ladder, .rb-plot svg, .rb-ex, .rb-legend .k, .rb-yt td, .rb-yt thead th, .rb-bar i, .rb-facts > div, .zone { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  :root[data-theme="dark"] .rb-yt { --k: 1; }
  .rb-view[hidden] { display: none; }
  .rb-cur, .rb-hot { display: none; }
}

/* ==========================================================================
   Bitcoin DCA Calculator (/bitcoin-dca-calculator/): the .dca-* rules.
   Tokens: --dca-val (value line), --dca-valh (its halo, the card colour), --dca-inv (money put in, dashed), --dca-grid. Text uses the shared
   ink and status tokens. Widths are container queries (the card; .dca-out for the tiles); media queries only for the page head and print.
   ========================================================================== */
:root{--dca-val:#087d45;--dca-valh:#ffffff;--dca-inv:#66706b;--dca-grid:#e4e8e6}
:root[data-theme="dark"]{--dca-val:#34d08a;--dca-valh:#171b19;--dca-inv:#8a948f;--dca-grid:#2a312d}

@media (max-width:760px){
  .dca-date,.head-actions:has(.dca-date){display:none}
  .page-head:has(.dca-date){gap:0;margin-bottom:12px}
}

/* calculator card: form, result, examples (DOM order = phone order) */
.dca-card{animation:none}
.dca-app{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.dca-in,.dca-out,.dca-ex{min-width:0}
.dca-in{position:relative}
.dca-out{container-type:inline-size}
@container (min-width:900px){
  .dca-app{grid-template-columns:minmax(300px,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"in out" "ex out";gap:20px 24px}
  .dca-in{grid-area:in} .dca-out{grid-area:out} .dca-ex{grid-area:ex}
}
@container (max-width:480px){.dca-card .card-h{margin-bottom:12px} .dca-card .card-h h2{font-size:15px} .dca-card .card-h-r{display:none}}

/* no scripts: the fields stay disabled and dim, a note says why (after 8 s when the head script ran) */
.dca-nojs,.dca-note,.dca-warn,.dca-chart-empty{padding:10px 14px;border-radius:12px;background:var(--tile);color:var(--ink-2)}
.dca-nojs{display:none;margin:0 0 14px;font-size:13.5px;line-height:1.5}
html:not(.js) .dca-nojs{display:block}
html:not(.js) .dca-fields{opacity:.55}
.js .dca-app:not(.dca-ready) .dca-nojs{display:block;position:absolute;z-index:2;inset:0 0 auto;margin:0;visibility:hidden;box-shadow:var(--shadow)}
.js .dca-app:not(.dca-ready) :is(.dca-fields,.dca-nojs){animation:dca-late 1ms 8s forwards}
.dca-fields{--o:.55}
@keyframes dca-late{to{opacity:var(--o,1);visibility:visible}}
@media (prefers-reduced-motion:reduce){.js .dca-app:not(.dca-ready) :is(.dca-fields,.dca-nojs){animation:dca-late 1ms 8s forwards !important}}

/* form */
.dca-fields{min-width:0;margin:0;padding:0;border:0}
.dca-fields > *{margin:0 0 14px}
.dca-fields > .dca-hint{margin:-6px 0 14px}
.dca-fields > .dca-actions{margin-bottom:0}
.dca-label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--ink)}
.dca-hint{margin:6px 0 0}
.dca-err{margin:6px 0 0;font-size:13px;font-weight:500;line-height:1.45;color:var(--red)}
.dca-input{display:block;width:100%;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--tile);color:var(--ink);font-size:16px;line-height:1.3}
.dca-input::placeholder{color:var(--ink-3)}
.dca-input:focus-visible{border-color:var(--green);background:var(--card);border-radius:12px}
.dca-input[aria-invalid="true"]{border-color:var(--red);background:var(--red-soft)}
.dca-input[type="date"]{-webkit-appearance:none;appearance:none;text-align:left}
.dca-input::-webkit-date-and-time-value{text-align:left}
:root[data-theme="dark"] .dca-input{color-scheme:dark}
.dca-input-wrap{position:relative}
.dca-affix{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--ink-3);pointer-events:none}
.dca-input-wrap .dca-input{padding-left:30px}
.dca-chips,.dca-freq{display:flex;width:fit-content;max-width:100%}
.dca-freq{width:100%}
.dca-chips{margin-top:8px}
.dca-app .chips button{min-height:40px;padding:0 14px}
.dca-app .dca-freq button{flex:1 1 auto;padding:0 10px}
.dca-app :is(.chips button,.btn):focus-visible{border-radius:999px}
.dca-app .chips button[aria-pressed="true"],.dca-scale button[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--green)}
.dca-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@container (max-width:300px){.dca-row2{grid-template-columns:minmax(0,1fr)}}
.dca-adv{border:1px solid var(--line);border-radius:14px;padding:0 14px}
.dca-adv summary,.dca-details summary{cursor:pointer;padding:11px 0;font-size:14px;font-weight:600}
.dca-adv > .dca-hint:last-child{margin-bottom:12px}
.dca-adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px}
.dca-form{margin:0}
.dca-field,.dca-only-rec,.dca-only-once,.dca-hist{min-width:0}
.dca-actions{display:flex;flex-wrap:wrap;gap:10px}
.dca-actions .btn{flex:1 1 120px}

/* examples: cards, text-like while disabled */
.dca-ex .label{margin:0 0 8px}
.dca-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:8px}
.dca-preset{display:grid;align-content:start;gap:2px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--tile);color:var(--ink);text-align:left}
.dca-preset:not(:disabled):hover{border-color:var(--ink-3)}
.dca-preset[aria-pressed="true"]{border-color:var(--green);background:var(--card);box-shadow:inset 0 0 0 1px var(--green)}
.dca-preset:disabled{opacity:1;cursor:default}
.dca-preset:focus-visible{border-radius:14px}
.dca-ps-t{font-size:13.5px;font-weight:600;line-height:1.3}
.dca-ps-d{font-size:12px;color:var(--ink-3)}
.dca-ps-v{font-size:12.5px;font-weight:600;color:var(--ink-2)}

/* result: the answer note and the lowest point stay visible; a bad input dims the last good result */
.dca-banner{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--red-soft);color:var(--red);font-size:13.5px;font-weight:600;line-height:1.45}
.dca-result{transition:opacity .15s}
.dca-result.is-stale{opacity:.55}
.dca-sentence{margin:0 0 4px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.dca-big,.dca-change{display:flex;flex-wrap:wrap;gap:0 10px;margin:0}
.dca-big{align-items:baseline}
.dca-n{font-size:clamp(34px,8vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1.12;overflow-wrap:anywhere}
.dca-on{font-size:14px;font-weight:500;color:var(--ink-3)}
.dca-change{margin-top:4px;font-size:16px}
.dca-change .chg{white-space:normal;overflow-wrap:anywhere}
.dca-mult{font-weight:500;color:var(--ink-2)}
.dca-note,.dca-low{margin:12px 0 0;font-size:14.5px;line-height:1.6}
.dca-low{padding-left:12px;border-left:3px solid var(--ink-3)}
.dca-kpis{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
.dca-k{align-content:start;padding:12px}
.dca-kpis .t-val{font-size:18px}
.dca-k .t-sub{font-size:12px;line-height:1.4;color:var(--ink-3)}
.dca-k[data-k="btc"] .t-val{font-size:16px;white-space:nowrap;overflow-wrap:normal}
@container (max-width:560px){
  .dca-kpis{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense}
  .dca-k[data-k="btc"],.dca-k[data-k="annual"],.dca-k:last-child:nth-child(odd){grid-column:1 / -1}
  .dca-k[data-k="btc"] .t-val{font-size:18px}
}
@container (max-width:300px){.dca-kpis{grid-template-columns:minmax(0,1fr)}}
.dca-compare{margin-top:14px;padding:14px;border-radius:var(--r-tile);background:var(--tile)}
.dca-compare .dca-h3{margin:0 0 8px}
.dca-cmp{margin:0 0 4px}
.dca-cmp-note,.dca-meta{margin:8px 0 0}
.dca-meta{margin-top:14px}
.dca-meta a{color:var(--ink-2);font-weight:600}
.dca-warn{margin:12px 0 0;padding-left:32px;list-style:disc;font-size:13px;line-height:1.5}
.dca-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px;visibility:hidden}
.dca-ready .dca-share{visibility:visible}
.dca-share-status{font-size:12.5px;color:var(--ink-2)}
.dca-h3{margin:22px 0 10px;font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}

/* chart: a text-free SVG; labels, cursor and dots are HTML in percent */
.dca-chart:not([hidden]){display:grid}
.dca-chart{grid-template-columns:54px minmax(0,1fr);gap:8px;height:340px;margin:10px 0 40px}
@container (max-width:700px){.dca-chart{height:280px}}
.dca-y{position:relative;font-size:12px;color:var(--ink-3)}
.dca-y li{position:absolute;right:0;transform:translateY(-50%);line-height:1;white-space:nowrap}
.dca-plot{position:relative;touch-action:pan-y pinch-zoom;border-radius:6px}
.dca-plot:focus-visible{outline-offset:4px}
.dca-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:6px}
.dca-plot path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.dca-plot .g{stroke:var(--dca-grid);stroke-width:1}
.dca-inv{stroke:var(--dca-inv);stroke-width:2;stroke-dasharray:6 4}
.dca-valh{stroke:var(--dca-valh);stroke-width:5;stroke-opacity:.85;stroke-linecap:round}
.dca-val{stroke:var(--dca-val);stroke-width:2.5;stroke-linecap:round}
.dca-cur{position:absolute;top:0;bottom:0;width:0;border-left:1.5px solid var(--ink-3);pointer-events:none}
.dca-hot{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border:2.5px solid;border-radius:50%;background:var(--card);pointer-events:none}
.dca-hot-v{border-color:var(--dca-val)} .dca-hot-i{border-color:var(--dca-inv)}
.dca-x{position:absolute;inset:0;pointer-events:none}
.dca-xl{position:absolute;top:calc(100% + 9px);transform:translateX(-50%);font-size:12px;color:var(--ink-3);white-space:nowrap}
@container (max-width:480px){.dca-xl:nth-child(even){display:none}}
.dca-chart-empty{margin:10px 0 14px;font-size:13.5px}
.dca-cap{position:relative;margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.dca-cap-d,.dca-cap-h{overflow-wrap:anywhere}
.dca-cap-h{visibility:hidden}
:root:has(.dca-ready) .dca-cap-h{visibility:visible}
.dca-cap-r{position:absolute;inset:0;background:var(--card);color:var(--ink)}
.dca-cap-r:empty{display:none}
.dca-legend:not([hidden]){display:flex}
.dca-legend{flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:12px;color:var(--ink-3)}
.dca-legend li{display:inline-flex;align-items:center;gap:8px}
.dca-key{display:inline-block;flex:none;width:22px;height:0}
.dca-key-val{border-top:3px solid var(--dca-val)} .dca-key-inv{border-top:2px dashed var(--dca-inv)}
.dca-scale button{min-height:40px}

/* tables: .mkt, scrolling inside .table-wrap */
.mkt[class*="dca-t-"] th,.mkt[class*="dca-t-"] td{padding:10px 12px;font-size:13.5px}
.mkt[class*="dca-t-"] thead th{font-size:12.5px;white-space:normal;vertical-align:bottom}
.mkt[class*="dca-t-"] tbody th{font-weight:600;white-space:nowrap}
.mkt[class*="dca-t-"] small{display:block}
.dca-t-year,.dca-t-dca{min-width:720px} .dca-t-lump,.dca-t-freq{min-width:560px} .dca-t-win{min-width:900px}
.dca-t-day{width:100%}
.mkt.dca-t-buys th,.mkt.dca-t-buys td{padding-top:7px;padding-bottom:7px}
/* up to 10,000 rows: a fixed layout and a height-limited scroll box keep every "Show 500 more" frame under 150 ms (7.8 item 11) */
.dca-t-buys{table-layout:fixed;min-width:1040px} .dca-t-buys th:first-child{width:52px} .dca-t-buys th:nth-child(2){width:128px} .dca-t-buys td:nth-child(2){white-space:nowrap}
.dca-t-buys:has(th:nth-child(9)){min-width:1240px}
.dca-t-buys thead th{position:sticky;top:0;z-index:1}
.dca-details .table-wrap{max-height:min(560px,75vh);overflow:auto}
.mkt.dca-t-hist tbody th{font-weight:500;color:var(--ink-2);white-space:normal}
.dca-details{margin-top:14px}
@container (max-width:284px){/* 320 px phones: the card is 252 px wide */
  .dca-chart{grid-template-columns:44px minmax(0,1fr);gap:6px}
  .dca-xl:nth-child(4n + 3){display:none}
  .dca-app .chips button{padding:0 10px}
  .mkt[class*="dca-t-"] th,.mkt[class*="dca-t-"] td{padding-left:6px;padding-right:6px;font-size:12.5px}
}

/* long text */
.dca-prose > p,.dca-faq p,.dca-list,.dca-prose > ul,.dca-prose > ol,.dca-hist-intro{max-width:78ch;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.dca-prose > p,.dca-hist-intro{margin:0 0 12px}
.dca-prose a,.dca-faq a,.dca-disclaimer a{color:var(--ink);font-weight:600}
.dca-list,.dca-prose > ul,.dca-prose > ol{display:grid;gap:8px;margin:0 0 16px}
.dca-list,.dca-prose > ul{list-style:disc;padding-left:22px}
.dca-prose > ol{counter-reset:s;gap:10px}
.dca-prose > ol > li{counter-increment:s;position:relative;padding:2px 0 2px 40px}
.dca-prose > ol > li::before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--green-soft);color:var(--green-ink);font-size:13px;font-weight:700}
.dca-defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px;margin:0 0 16px;align-items:start}
.dca-defs > div{padding:14px;border-radius:var(--r-tile);background:var(--tile)}
.dca-defs dt{margin-bottom:4px;font-weight:600;color:var(--ink)}
.dca-defs dd{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.dca-faq h3{margin:22px 0 6px;font-size:15.5px;line-height:1.35;color:var(--ink)}
.dca-faq h3:first-child{margin-top:0}
.dca-disclaimer p{max-width:90ch;font-size:13px;line-height:1.65;color:var(--ink-3)}
.dca-hint,.dca-cmp-note,.dca-meta,p.dca-foot{font-size:12.5px;line-height:1.55;color:var(--ink-3)}
p.dca-foot{margin-top:14px;max-width:90ch}
.dca-cmp{font-size:14px;line-height:1.55;color:var(--ink-2)}

@media print{
  :root,:root[data-theme="dark"]{--dca-val:#087d45;--dca-valh:#ffffff;--dca-inv:#66706b;--dca-grid:#d9dedb}
  .dca-in,.dca-ex,.dca-share,.dca-banner,.seg.dca-scale,.dca-cap-h,.dca-cap-r,.dca-cur,.dca-hot{display:none}
  .dca-app{display:block}
  .table-wrap,.dca-details .table-wrap{max-height:none;overflow:visible}
  .mkt[class*="dca-t-"]{min-width:0}
  .dca-t-buys{table-layout:auto}
  .mkt[class*="dca-t-"] :is(th,td){padding:7px 5px;white-space:normal}
  .dca-plot svg,.dca-key,.dca-k,.dca-note,.dca-compare,.dca-defs > div{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}