/*
   depth-lab.css — The Depth Lab (/depth).

   Page-scoped styles for the knob board, cost meter, toll booth, gap
   bars, outputs, tornado, and knowledge base. Chrome follows the site
   palette rules (project_yieldsim_palette.md): blood-red chrome ramp on
   near-black; data colors (green covered / red shortfall) stay separate
   from chrome. The global prefers-reduced-motion kill switch in site.css
   freezes the toll-booth animation — nothing here re-enables motion.
*/

/* ── Toll booth micro-visual ─────────────────────────────────────── */
.dl-tollbooth { width: 220px; flex-shrink: 0; }
.dl-tollbooth svg { width: 100%; height: auto; display: block; }
.dl-toll-road { stroke: var(--bs-border-color); stroke-width: 2; }
.dl-toll-gate { fill: var(--yieldsim-chrome-bright); }
.dl-toll-label { fill: var(--bs-secondary-color); font-size: 9px; font-family: var(--bs-font-monospace); }
.dl-toll-dot {
    fill: #ffd43b; /* payment = data color, not chrome */
    animation: dl-toll-cross 4s linear infinite;
}
@keyframes dl-toll-cross {
    0%   { cx: 12;  r: 5; opacity: 1; }
    32%  { cx: 70;  r: 5; }
    36%  { cx: 76;  r: 4; }  /* first gate takes its cut */
    64%  { cx: 144; r: 4; }
    68%  { cx: 150; r: 3; }  /* second gate takes its cut */
    92%  { cx: 208; r: 3; opacity: 1; }
    100% { cx: 208; r: 3; opacity: 0; }
}

/* (The standalone cost-meter card styles are retired;
   feedback pass — cost now renders on the outputs card's status strip
   and, in full, inside the double-toll ⓘ modal.) */

/* ── Two-curve gap bars (rendered inside the two-curves ⓘ modal) ── */
.dl-bar-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); }
.dl-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; }
.dl-bar-tag { width: 5.2rem; font-size: 0.75rem; color: var(--bs-secondary-color); text-align: right; flex-shrink: 0; }
.dl-bar-track { flex-grow: 1; height: 0.9rem; background: rgba(255, 255, 255, 0.05); border-radius: 0.2rem; overflow: hidden; }
.dl-bar-demand { height: 100%; background: #4dabf7; transition: width 0.2s ease; }
.dl-bar-supply { height: 100%; background: #51cf66; transition: width 0.2s ease, background-color 0.2s ease; }
.dl-bar-supply.dl-short { background: #e64980; }
/* Generic clears/short colouring — used by the status strip's gap span,
   the cost spans (red only reachable by breaking a fee clamp), and the
   verdict line inside the two-curves modal. */
.dl-ok { color: #51cf66; }
span.dl-short, p.dl-short { color: #e64980; font-weight: 600; }

/* ── Outputs ─────────────────────────────────────────────────────── */
.dl-output { border-radius: 0.375rem; padding: 0.75rem 1rem; }
/* The outputs card speaks the layer language (David's order
   late): the FLOOR tile wears utility BLUE, the PREMIUM tile wears
   speculation AMBER (it previously wore chrome red — red now belongs
   only to the hero and the BY WHEN slot), and the two funding readouts
   below get the funding-teal outline. Same hues as the knob hubs, so
   a knob's ring color points at the tile it moves. */
.dl-output-floor { border: 1px solid rgba(86, 156, 255, 0.65); background: rgba(86, 156, 255, 0.06); }
.dl-output-floor .dl-output-eyebrow { color: rgba(86, 156, 255, 0.95); }
.dl-output-premium { border: 1px solid rgba(232, 178, 58, 0.75); background: rgba(232, 178, 58, 0.06); }
.dl-output-eyebrow { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: var(--bs-secondary-color); }
.dl-output-premium .dl-output-eyebrow { color: rgba(232, 178, 58, 0.95); }
.dl-tests-row { border: 1px solid rgba(94, 186, 158, 0.6); background: rgba(94, 186, 158, 0.05); border-radius: 0.375rem; padding: 0.5rem 0.75rem; }
/* The "by 2035" tag on each output tile — follows the target-year knob
   (every price on the page is a by-this-year
   statement, so each answer names its year). */
.dl-output-year { color: var(--bs-body-color); }

/* The target-year spotlight slot inside the outputs card (
   operator request): the "when" dial renders beside the answers it
   dates. Bordered like an output tile so it reads as part of the
   answer, not a stray control. */
/* The year picker lives INSIDE the hero (David: the
   "when" control belongs on the prediction itself; the static "by 2035"
   in the label became the dropdown). Centered between the label and the
   big number; its own ⓘ renders under the dropdown, keeping it apart
   from the hero's ⓘ up in the eyebrow. */
.dl-hero-year { display: flex; justify-content: center; margin: 0.2rem 0 0; }
.dl-knob-block.dl-year .dl-knob-face { stroke: var(--yieldsim-chrome-bright); stroke-width: 2.5; }
/* Year PICKER: the target year is a chosen viewing lens, so it
   renders as a dropdown rather than a rotary knob — deliberately distinct, and
   with no confidence dial. Styled to sit in the "BY WHEN?" spotlight slot. */
.dl-picker-block { width: auto; min-width: 118px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.dl-picker {
    font-family: var(--bs-font-monospace); font-weight: 700; font-size: 1.25rem; line-height: 1.2;
    color: var(--bs-body-color); background-color: transparent;
    border: 2px solid var(--yieldsim-chrome-bright); border-radius: 0.375rem;
    padding: 0.2rem 1.6rem 0.2rem 0.7rem; text-align: center; cursor: pointer;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23a9b0bb' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.55rem center; background-size: 0.7rem;
}
/* The native dropdown popup renders on a light system background, so the
   options need an EXPLICIT dark-on-white — inheriting the select's light
   (on-dark) text color paints white-on-white and the years vanish (only the
   OS-highlighted row stays visible). `color: initial` did not resolve to a
   visible color in the dark-themed UA, so pin both explicitly. */
.dl-picker option { color: #111; background-color: #fff; }
.dl-picker:focus-visible { outline: 2px solid var(--yieldsim-chrome-bright); outline-offset: 2px; }
/* The page's heroes (sized to lead the
   page under the new type scale — a headline number smaller than a
   headline reads as a form field, not an answer). */
.dl-output-price { font-size: clamp(2.25rem, 1.9rem + 1.3vw, 2.75rem); font-weight: 700; font-family: var(--bs-font-monospace); display: block; line-height: 1.15; }
/* THE HERO IS THE SPECULATIVE PRICE (R-EXPECT-01): the tempered
   price×confidence hero was removed; the speculative price now leads the
   outputs card in full focus and the utility floor is a footnote beneath it.
   Chrome-bright frame + the largest type on the page; red stays a signal and
   this IS the signal (red-restraint doctrine: one hero, no texture). */
.dl-price-hero {
    text-align: center;
    border: 1px solid var(--yieldsim-chrome-bright);
    border-radius: 0.5rem;
    padding: 1.15rem 1.15rem 1rem;
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.18), rgba(139, 0, 0, 0.045));
    box-shadow: 0 0 22px rgba(179, 0, 0, 0.20);
}
.dl-price-hero .dl-output-eyebrow { color: var(--yieldsim-chrome-bright); }
/* The reclaimed real estate (no tempered hero above it) goes into the number:
   the biggest type on the page, monospace, tight leading. */
.dl-hero-price {
    font-size: clamp(3rem, 2.2rem + 3vw, 4.6rem);
    font-weight: 800; font-family: var(--bs-font-monospace);
    display: block; line-height: 1.04; letter-spacing: -0.01em;
    color: var(--bs-body-color);
}
.dl-price-hero .dl-out-premium-x,
.dl-price-hero #dl-out-premium-x { margin-top: 0.35rem; }
.dl-hero-conf { border-top: 1px solid rgba(179, 0, 0, 0.22); padding-top: 0.5rem; }
/* THE UTILITY FLOOR FOOTNOTE — deliberately subordinate: a slim, muted block
   under the hero with a thin chrome left-rule, so the eye reads price first
   and "resting on a floor of $X" second. */
.dl-floor-footnote {
    margin-top: 0.85rem; padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--yieldsim-chrome-deep);
    background: rgba(255, 255, 255, 0.02); border-radius: 0 0.375rem 0.375rem 0;
}
.dl-floor-eyebrow {
    display: block; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--bs-secondary-color); margin-bottom: 0.1rem;
}
.dl-floor-value {
    font-size: 1.5rem; font-weight: 700; font-family: var(--bs-font-monospace);
    color: var(--bs-body-color); margin-right: 0.5rem;
}
/* Per-output confidence grades, one inside each tile (the
   floor and premium answers rest on different assumption chains). */
.dl-conf-grade { font-family: var(--bs-font-monospace); font-weight: 700; color: var(--bs-body-color); }

/* Overdue-feed tripwire on the reference anchors: amber =
   degraded-but-alive, same semantic as the warming-up note. The loudest
   case is the monthly LLM anchor going quiet — the operator's chosen
   signal that the Anthropic key died or the LLM fund needs topping up. */
.dl-anchor-warn { color: #e8b34b; font-weight: 600; }

/* ── Knob board ──────────────────────────────────────────────────── */
.dl-board-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); margin: 0.75rem 0 0.25rem; }
.dl-board { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.dl-knob-block { width: 118px; text-align: center; }
/* A MASTER knob (the off-market float master) — chrome ring marks it as the parent that
   drives (and reads back) its sub-knobs. */
.dl-knob-block.dl-master .dl-knob-face { stroke: var(--yieldsim-chrome-bright); stroke-width: 2.5; }
/* (There is no advanced/basic knob split — every knob renders on the
   request — every knob renders on the board.) */

.dl-knob { position: relative; width: 72px; height: 72px; margin: 0 auto; cursor: ns-resize; touch-action: none; outline-offset: 2px; -webkit-user-select: none; user-select: none; }
.dl-knob svg { width: 100%; height: 100%; display: block; }
.dl-knob-face { fill: var(--yieldsim-bg-input); stroke: var(--bs-border-color); stroke-width: 1.5; }
/* Track raised from 0.12 alpha — at 0.12 the
   travel range was invisible, so a knob's position-in-range could only
   be read from the number, never at a glance. */
.dl-knob-track { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 3; stroke-linecap: round; }
/* The value arc — min → current, the mixing-desk cue that makes a row
   of knobs read as a settings profile at a glance (design
   pass). Neutral data-white, NOT chrome: the arc is a data readout,
   and chrome red is reserved so brand marks stay meaningful. */
.dl-knob-arc { fill: none; stroke: #dee2e6; stroke-width: 3; stroke-linecap: round; }
/* Bracket band (ranged claims) — the user's claimed range as
   a wide translucent amber segment UNDER the value arc: readable as "my
   claim spans this stretch of the dial" at a glance, dim enough that a
   collapsed board looks exactly as before. Amber = claim/width, distinct
   from data-white (value) and chrome red (brand/turning). */
.dl-knob-bracket { fill: none; stroke: rgba(255, 193, 7, 0.30); stroke-width: 6; stroke-linecap: round; }
/* The LOW/HIGH range lines (operator's design): two amber
   pointers on the rim, each its own discrete value, that can never cross.
   The grip twin under each is the fat transparent hit/focus target. */
.dl-knob-range-line { stroke: #ffc107; stroke-width: 2; stroke-linecap: round; }
.dl-knob-grip { stroke: rgba(0, 0, 0, 0); stroke-width: 12; cursor: ns-resize; outline: none; }
.dl-knob-grip:focus-visible { stroke: rgba(255, 193, 7, 0.35); }
/* The claimed range, displayed beneath the knob — each end click-to-type.
   Hidden until a range is opened so a point-claim board looks untouched. */
.dl-knob-range { display: none; font-size: 0.72rem; color: #ffc107; text-align: center; }
.dl-knob-range.dl-range-open { display: block; }
.dl-knob-range [data-range-edit] { cursor: text; }
.dl-knob-range [data-range-edit]:hover { text-decoration: underline; }
/* Range-as-headline (operator's direction): when any range is open the
   tile's BIG figure is the band itself — smaller type so "$4.22 – $24.03"
   fits where "$10.34" sat; the sub-line carries central + ×width. */
.dl-band-line { color: var(--bs-secondary-color, #adb5bd); }
/* Preset tick — a fixed notch at David's-preset position outside the
   track, so "how far off the preset am I" is readable per knob. */
.dl-knob-tick { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.5; }
/* Pointer is neutral at rest, chrome-red only while turning: ~30
   red pointers made chrome mean nothing, and the master/year rings —
   the marks red is FOR — disappeared into the noise. Red returns only
   while the knob is actually turning (.dl-turning, set by JS). */
.dl-knob-pointer { stroke: #e6e6e6; stroke-width: 3; stroke-linecap: round; }
.dl-knob.dl-turning .dl-knob-pointer { stroke: var(--yieldsim-chrome-bright); }
.dl-knob:focus-visible { outline: 2px solid var(--yieldsim-chrome-bright); border-radius: 50%; }
/* Coupled-knob glow WHILE turning — the linkage lighting up live. */
.dl-knob.dl-glow .dl-knob-face { stroke: #ffd43b; stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(255, 212, 59, 0.7)); }

/* The confidence appendage — attached to the knob's face, visually its
   own instrument so the two kinds can never be confused. */
.dl-conf { position: absolute; right: -6px; bottom: -4px; width: 24px; height: 24px; cursor: ns-resize; touch-action: none; -webkit-user-select: none; user-select: none; }
.dl-conf svg { width: 100%; height: 100%; display: block; }
.dl-conf-face { fill: var(--yieldsim-bg-card); stroke: var(--bs-border-color); stroke-width: 1; }
.dl-conf-arc { fill: none; stroke: #38d9a9; stroke-width: 2.5; stroke-linecap: round; }
.dl-conf.dl-conf-spec .dl-conf-arc { stroke: #ff922b; }
.dl-conf-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--bs-secondary-color); pointer-events: none; }
.dl-conf:focus-visible { outline: 2px solid var(--yieldsim-chrome-bright); border-radius: 50%; }

/* (There are no hero-dial red rings — every confidence dial reads equally; see the note on the
   tempered-price hero. No confidence dial feeds a headline number any more;
   every dial reads equally as a trust reporter that rolls into the grade %.) */

/* High-impact knobs: the top-3 movers at boot
   render physically larger — the board's only size cue for "these are
   the knobs that matter". Deliberately NOT chrome-ringed: red belongs
   to the master/year rings alone. */
.dl-knob-block.dl-heavy { width: 134px; }
.dl-heavy .dl-knob { width: 88px; height: 88px; }
.dl-impact-hint { display: block; font-size: 0.72rem; color: var(--bs-secondary-color); }

.dl-knob-value { font-family: var(--bs-font-monospace); font-size: 0.85rem; font-weight: 600; margin-top: 0.2rem; cursor: text; border-radius: 0.2rem; }
.dl-knob-value:hover, .dl-knob-value:focus-visible { outline: 1px dashed var(--bs-border-color); }
/* Click-to-type entry: the readout swaps for this input.
   1rem font on purpose — iOS Safari auto-zooms any focused field under
   16px, which would jolt the whole page on a phone. */
.dl-value-input {
    width: 100%; text-align: center; font-family: var(--bs-font-monospace);
    font-size: 1rem; font-weight: 600; padding: 0;
    border: 1px solid var(--yieldsim-chrome-bright); border-radius: 0.2rem;
    background: var(--yieldsim-bg-input); color: var(--bs-body-color);
}
.dl-cap-hint { display: block; font-size: 0.72rem; color: var(--bs-secondary-color); font-family: var(--bs-font-monospace); }
/* R-GAP-05: the "size to fees" control under the ticket knob (a link-style button, same scale as the hint above it). */
.dl-size-btn { display: inline-block; font-size: 0.72rem; line-height: 1.2; text-decoration: underline dotted; vertical-align: baseline; }
/* R-COUPLING-FEE-SIZE: the "size to fees" control goes HOT only while the
   ticket claim sits ABOVE its fee-sized value (the flow does not pay for it)
   — same amber as the coupling glow, so the eye reads "this is where the
   coupling is pointing". A pill rather than a dotted link because the dotted
   link is exactly what got missed. Never hot below the fee-sized value: fees
   cap the ticket, volume never raises it. */
.dl-size-btn.dl-size-hot { text-decoration: none; color: #1a1a1a; background: #ffd43b; border-radius: 999px; padding: 0 0.45rem; font-weight: 600; box-shadow: 0 0 0 2px rgba(255, 212, 59, 0.35); animation: dl-size-pulse 1.2s ease-in-out 2; }
.dl-size-btn.dl-size-hot:hover, .dl-size-btn.dl-size-hot:focus-visible { background: #ffe066; color: #1a1a1a; }
@keyframes dl-size-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 212, 59, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(255, 212, 59, 0.15); } }
/* The funding line's "the flow does not pay for this ticket" notice — amber
   text, hidden unless the claim is ABOVE the fee-sized ticket (depth-lab.js
   toggles [hidden]). */
.dl-gap-unfunded { color: #ffd43b; }
@media (prefers-reduced-motion: reduce) { .dl-size-btn.dl-size-hot { animation: none; } }
.dl-knob-label { font-size: 0.72rem; color: var(--bs-body-color); line-height: 1.2; }
/* (There is no on-board leverage line —
   10px grey monospace under thirty knobs was below the page's new
   0.72rem type floor and duplicated the ⓘ modal's Leverage line.) */
/* Sized up (operator: info icons much larger across the app —
   the matching site-wide bump is on .info-icon-btn in site.css).
   Dimmed (design pass): ~40 chrome-red ⓘ glyphs were the
   single biggest red-noise source on the page; grey at rest, chrome on
   hover/focus keeps them discoverable without spending the accent. */
.dl-info {
    background: none; border: 0; padding: 0 0.1rem; color: var(--bs-secondary-color);
    font-size: 1.2rem; cursor: pointer; line-height: 1; vertical-align: middle;
}
.dl-info:hover, .dl-info:focus-visible { color: var(--yieldsim-chrome-bright); }

/* Linkage caption — the one-line "why this moved", visible while turning. */
.dl-link-caption { min-height: 1.2rem; color: #ffd43b; opacity: 0; transition: opacity 0.2s ease; margin-bottom: 0.5rem; }
.dl-link-caption.dl-visible { opacity: 1; }

/* (No styles exist for: .dl-decouple (coupling-override toggles), the .dl-kb-*
   knowledge-base card styles, and the .dl-ladder conviction-table styles — all
   — those surfaces are retired.) */

/* ── Reality card ────────
   Small stat tiles for the measured today-readings. Mirrors the output
   tiles' hierarchy (eyebrow label / monospace value / small note) at a
   deliberately quieter weight — reality context, not the answer. The
   ⚠ overdue-feed warnings render inline inside the note text. */
.dl-real { display: flex; flex-direction: column; gap: 0.15rem; border-left: 3px solid var(--bs-border-color); padding-left: 0.7rem; }
.dl-real-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); }
.dl-real-value { font-family: var(--bs-font-monospace); font-size: 1.05rem; font-weight: 600; }
.dl-real-note { font-size: 0.72rem; color: var(--bs-secondary-color); line-height: 1.25; }
/* The gap line is the card's payload — body color, not secondary, so the
   distance statement reads as content rather than as a footnote. */
#dl-real-gap { color: var(--bs-body-color); }

/* ── Sticky mini-readout ───────────────────
   Mirrors floor · premium · gap while the outputs card is off-screen,
   so "turn a knob, watch the answer move" works from anywhere on the
   page. Fixed to the bottom edge (thumb-reach on phones, out of the
   navbar's way on desktop); z-index 1030 = Bootstrap's fixed-bottom
   tier, below modal backdrops (1050) so open modals cover it.
   pointer-events only while visible — an invisible bar must never eat
   taps on content behind it. */
.dl-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0.1rem;
    justify-content: center; align-items: baseline;
    padding: 0.45rem 0.75rem;
    background: rgba(0, 0, 0, 0.92);
    border-top: 1px solid var(--bs-border-color);
    backdrop-filter: blur(4px);
    opacity: 0; transform: translateY(100%); pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}
.dl-sticky.dl-visible { opacity: 1; transform: none; pointer-events: auto; }
.dl-sticky-item { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.dl-sticky-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bs-secondary-color); }

/* ── Touch ergonomics ──────────────────────
   On coarse pointers the confidence dial and ⓘ buttons grow into
   comfortable tap targets — the 24px dial was precise under a mouse,
   rough under a thumb. The knob itself (72px) already clears the 44px
   minimum. */
@media (pointer: coarse) {
    .dl-conf { width: 32px; height: 32px; right: -10px; bottom: -8px; }
    .dl-conf-glyph { font-size: 11px; }
    .dl-info { font-size: 1.45rem; padding: 0.3rem 0.45rem; }
    .dl-knob-value { padding: 0.15rem 0; }
}

/* ── Layer tints (R-STRUCT-14 — the layer-scope doctrine).
   The lab computes two totals; most knobs serve ONE of them. The full
   trio got colors at David's order (the outputs card
   now speaks the same language): UTILITY blue (moves the floor, and
   therefore the price), SPECULATION amber (moves the speculative price
   only), FUNDING teal (moves the opportunity-cost test only). Masters'
   chrome ring deliberately wins over the tint (higher specificity);
   their layer is carried by the legend and the ⓘ. ── */
.dl-layer-utility .dl-knob-face { stroke: rgba(86, 156, 255, 0.55); stroke-width: 2; }
.dl-layer-speculation .dl-knob-face { stroke: rgba(232, 178, 58, 0.75); stroke-width: 2; }
.dl-layer-funding .dl-knob-face { stroke: rgba(94, 186, 158, 0.6); stroke-width: 2; }
.dl-layer-fold .dl-knob-face { stroke: rgba(178, 132, 255, 0.65); stroke-width: 2; }
.dl-legend-dot { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; vertical-align: baseline; border: 1.5px solid var(--bs-border-color); background: var(--yieldsim-bg-input); }
.dl-legend-utility { border-color: rgba(86, 156, 255, 0.9); }
.dl-legend-speculation { border-color: rgba(232, 178, 58, 0.9); }
.dl-legend-funding { border-color: rgba(94, 186, 158, 0.85); }
.dl-legend-fold { border-color: rgba(178, 132, 255, 0.9); }

/* Layer HUB (David: ring tints alone not prominent enough) —
   a filled disc at each knob's pivot carrying the layer color, plus
   stronger ring alpha. The legend dots fill to match the hubs. */
.dl-knob-hub { fill: rgba(255, 255, 255, 0.30); }
.dl-layer-utility .dl-knob-hub { fill: rgba(86, 156, 255, 0.9); }
.dl-layer-speculation .dl-knob-hub { fill: rgba(232, 178, 58, 0.95); }
.dl-layer-funding .dl-knob-hub { fill: rgba(94, 186, 158, 0.9); }
.dl-layer-fold .dl-knob-hub { fill: rgba(178, 132, 255, 0.9); }
.dl-layer-utility .dl-knob-face { stroke: rgba(86, 156, 255, 0.75); }
.dl-layer-speculation .dl-knob-face { stroke: rgba(232, 178, 58, 0.9); }
.dl-layer-funding .dl-knob-face { stroke: rgba(94, 186, 158, 0.8); }
.dl-layer-fold .dl-knob-face { stroke: rgba(178, 132, 255, 0.85); }
.dl-legend-utility { background: rgba(86, 156, 255, 0.9); }
.dl-legend-speculation { background: rgba(232, 178, 58, 0.95); }
.dl-legend-funding { background: rgba(94, 186, 158, 0.9); }
.dl-legend-fold { background: rgba(178, 132, 255, 0.9); }
/* LENS layer (R-FLOOR-04, 2026-09-06): a viewing choice, not a claim — the
   freed-token split in the supply block. Neutral grey so the ring says
   "this moves no total" beside the blue utility knobs it sits with. */
.dl-layer-lens .dl-knob-face { stroke: rgba(182, 186, 196, 0.7); stroke-width: 2; }
.dl-layer-lens .dl-knob-hub { fill: rgba(182, 186, 196, 0.9); }
.dl-legend-lens { border-color: rgba(182, 186, 196, 0.9); background: rgba(182, 186, 196, 0.9); }