/* 份额拨盘：纸白、墨黑与灰阶，朱红只给等你回的问题。页面框架（顶栏、概念卡）沿用 forms.css。 */
.dl-page { --rule: oklch(0.28 0.025 155 / .18); overflow: hidden; }
.dl-bar { gap: 14px; }
.dl-modes { display: flex; gap: 4px; }
.dl-modes button { height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 12.5px; white-space: nowrap; }
.dl-modes button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.dl-followed .dl-modes { display: none; }
.dl-modes kbd, .dl-keys kbd { font: 10.5px var(--mono); padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; opacity: .7; }
.dl-bar .fs-ticks button { width: 5px; }

.dl-stage { position: relative; display: grid; grid-template-rows: 62px minmax(0, 1fr) 118px; min-width: 0; overflow: hidden; background: var(--paper); outline: none; }

/* Header: five counters echo the ring; a strip of one segment per round under them. */
.dl-head { position: relative; display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(5, minmax(0, 1fr)); align-items: center; gap: 12px; padding: 4px 18px 10px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.dl-brand { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dl-brand b { font: 650 15px var(--mono); letter-spacing: .02em; }
.dl-brand span { font: 10.5px var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-count { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.dl-count small { font: 10px var(--mono); color: var(--ink-2); letter-spacing: .06em; white-space: nowrap; }
.dl-count b { font: 600 19px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-strip { position: absolute; left: 18px; right: 18px; bottom: 4px; display: flex; gap: 2px; }
.dl-strip i { flex: 1; height: 3px; background: var(--rule); overflow: hidden; }
.dl-strip u { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }

.dl-main { position: relative; min-height: 0; overflow: hidden; }
.dl-main > canvas, .dl-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.dl-ring { overflow: visible; pointer-events: none; }
.dl-ticks line { stroke: var(--ink); stroke-width: 1; }
.dl-ticks line.is-major { stroke-width: 1.6; }
.dl-tick-n { font: 9px var(--mono); fill: var(--ink-2); text-anchor: middle; dominant-baseline: middle; }
.dl-ticks line.dl-stop { stroke: var(--ink); stroke-width: 3.5; }
.dl-stop-n { font: 600 10.5px var(--mono); fill: var(--ink); }
.dl-hero { font-family: var(--mono); font-weight: 500; fill: var(--ink); text-anchor: middle; letter-spacing: -.02em; }
.dl-hero-s { font: 11px var(--sans); fill: var(--ink-2); text-anchor: middle; letter-spacing: .08em; }
/* .dl-pop holds the one sector that has stepped out for its detail; it sits under the ticks, which never move. */
.dl-sectors path, .dl-pop path { stroke: var(--paper); stroke-width: 1.2; stroke-linejoin: round; }
.dl-sectors .is-a, .dl-pop .is-a { fill: oklch(0.28 0.025 155 / .15); }
.dl-sectors .is-b, .dl-pop .is-b { fill: oklch(0.28 0.025 155 / .26); }
.dl-sectors .is-cursor, .dl-pop .is-cursor { fill: oklch(0.28 0.025 155 / .9); }
.dl-sectors .is-focus { stroke: var(--ink); stroke-width: 1.6; }
.dl-blank path { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.dl-labels text { font: 600 13.5px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.dl-labels text.is-blank { fill: var(--ink-2); font-family: var(--mono); font-size: 11.5px; font-weight: 400; }
.dl-asks line { stroke: oklch(0.5 0.15 35); stroke-width: 3; }
.dl-needle { stroke: var(--ink); stroke-width: 4; stroke-linecap: butt; }
.dl-cursor.is-hollow .dl-needle { stroke-width: 1.4; stroke-dasharray: 3 2; }
.dl-tag { fill: var(--ink); }
.dl-tag-t { font: 650 12.5px var(--sans); fill: var(--paper); text-anchor: middle; }
.dl-leader { fill: none; stroke: var(--ink); stroke-width: 1; }
/* The detail's leader: drawn under the sector names (their paper halo breaks it), revealed by its dash offset. */
.dl-xline { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
/* Names, the cursor's tag and the cards answer the pointer; the sectors themselves are hit by angle (dial.mjs idAt). */
.dl-labels text[data-id], .dl-cursor[data-id] .dl-tag, .dl-cursor[data-id] .dl-tag-t { pointer-events: all; cursor: pointer; }

/* Title card: the frame's narration (frame.title), on paper so the concept layer never shows through. */
.dl-title { position: absolute; left: 18px; top: 14px; z-index: 2; width: 300px; padding: 9px 14px 10px; background: var(--paper); border: 1px solid var(--ink); }
.dl-kicker { font: 10.5px var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-title h2 { margin: 3px 0 0; font-size: 19px; line-height: 1.3; letter-spacing: .01em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Callout: the one question that needs you. The only vermilion on the page besides the small ask ticks. */
.dl-callout { position: absolute; left: 0; top: 0; z-index: 2; width: 236px; padding: 8px 12px 9px; background: var(--paper); border: 1px solid var(--ink); will-change: transform; }
.dl-callout[hidden] { display: none; }
.dl-c-k { display: flex; align-items: center; gap: 6px; font: 10.5px var(--mono); color: var(--ink-2); }
.dl-c-k i { width: 8px; height: 8px; background: var(--vermilion); }
.dl-c-q { margin: 3px 0 2px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.dl-c-d { font: 11.5px var(--mono); color: var(--ink-2); }
.dl-callout[data-id] { cursor: pointer; }

/* Hover: the summary and detail cards are the interaction module's (ix.css, paper theme by default: this page's
   paper, ink frame and type). The cursor's own note grows in place (.dl-c-more) instead of opening a second card. */
.dl-c-more { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); font: 11.5px/1.5 var(--mono); color: var(--ink-2); }
.dl-c-more[hidden] { display: none; }
.dl-c-more b { color: var(--ink); font-weight: 600; }

/* Panels: three are texture (grey), two echo the timing and the allocation. */
.dl-panels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 8px 18px 12px; border-top: 1px solid var(--rule); }
.dl-p { position: relative; min-width: 0; padding: 7px 10px 8px; border: 1px solid var(--rule); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.dl-p h4 { display: flex; justify-content: space-between; margin: 0 0 5px; font: 600 10px var(--mono); color: var(--ink-2); letter-spacing: .06em; }
.dl-p h4 b { color: var(--ink); font-weight: 600; font-size: 11px; }
.dl-p canvas { flex: 1 1 0; width: 100%; min-height: 0; }
.dl-feed-w { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.dl-feed { font: 8.5px/12px var(--mono); color: var(--ink-2); opacity: .8; white-space: pre; will-change: transform; }
.dl-feed div { height: 12px; overflow: hidden; text-overflow: ellipsis; }
.dl-pipe { flex: 1; display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.dl-pipe li { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ink-2); }
.dl-pipe li.is-on { color: var(--ink); }
.dl-pipe i { height: 7px; background: var(--rule); overflow: hidden; }
.dl-pipe u { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.dl-window { font: 9px var(--mono); color: var(--ink-2); opacity: .8; }

.dl-keys { margin: 16px 0 0; font-size: 12px; color: var(--ink-2); }

@media (max-width: 1000px) {
  .dl-head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dl-brand, .dl-count[data-c="decl"] { display: none; }
  .dl-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dl-p:nth-child(1), .dl-p:nth-child(5) { display: none; }
}