/* Follow the dollar: one open canvas, words only for what is in focus. */
/* Colours are the Clarifo app's own (frontend/src/app/globals.css): light by default, `.dark` as in the app. */
:root{--bg:#f4f6f9;--ink:#222222;--muted:#5f6774;--faint:#5f6774;--trunk:#d3dce1;--kept:#8a6417;--coin:#8a6417;--loss:#a2531d;--inflow:#3f7a4c;
 --t0:#5f8f96;--t1:#7e9da5;--t2:#4a7880;--t3:#9fbcc0;--t4:#738b92;--cost:#aebcc2;--cost-lit:#475569;--line:#c9d1d8;--focus:#222222}
:root.dark{--bg:#1a1a1a;--ink:#f7fafc;--muted:#cbd5e0;--faint:#9aa3ae;--trunk:#2b2f35;--kept:#d8b26a;--coin:#e2c07a;--loss:#e38a52;--inflow:#8fc29b;
 --t0:#536e7a;--t1:#718a90;--t2:#3e5661;--t3:#a2b5b4;--t4:#667d73;--cost:#4a545e;--cost-lit:#a9b6bf;--line:#363a42;--focus:#f7fafc}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button,select,a{font:inherit;color:inherit}
button{background:none;border:0;padding:8px 2px;cursor:pointer;color:var(--muted)}
button:hover,a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.dx{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;position:relative;overflow:hidden}

.dx-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;padding:22px 32px 0}
.dx-company select{appearance:none;border:0;background:none;font-size:clamp(26px,3.2vw,40px);font-weight:300;letter-spacing:-.02em;color:var(--ink);padding:0 6px 0 0;cursor:pointer}
.dx-company{max-width:100%;min-width:0}.dx-company select{max-width:100%;text-overflow:ellipsis}
.dx-company select option{background:var(--bg);color:var(--ink);font-size:15px}
.dx-sub{margin:0;color:var(--muted);font-size:14px}
.dx-tools{margin-left:auto;display:flex;gap:18px;align-items:baseline;font-size:14px}
.dx-tools a{color:var(--muted);text-decoration:none}
.dx-tools [data-play]{color:var(--coin);font-weight:600}

.dx-stage{min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px}
.dx-svg{width:100%;height:100%;max-height:calc(100vh - 150px);display:block}
.dx-svg text{font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.dx-trunk{fill:var(--trunk)}
.dx-kept-band{fill:color-mix(in srgb,var(--kept) 35%,var(--trunk))}
.dx-source path{opacity:.9;transition:opacity .2s}
.tone-0 path{fill:var(--t0)}.tone-1 path{fill:var(--t1)}.tone-2 path{fill:var(--t2)}.tone-3 path{fill:var(--t3)}.tone-4 path{fill:var(--t4)}
.dx-branch path{fill:var(--cost);opacity:.75;transition:fill .25s,opacity .25s}
.dx-branch.is-lit path{fill:var(--cost-lit);opacity:1}
.dx-branch.is-computed path{fill:none;stroke:var(--cost);stroke-width:1.5;stroke-dasharray:5 4}.dx-branch.is-computed.is-lit path{stroke:var(--cost-lit)}
.dx-branch.is-inflow path{fill:var(--inflow)}
.dx-part{cursor:pointer;outline:none}
.dx-part:hover path,.dx-part:focus-visible path{opacity:1;filter:brightness(1.18)}
.dx-part.is-focus path{opacity:1;filter:brightness(1.25)}
.dx-part:focus-visible .dx-name{text-decoration:underline}
.dx-num{fill:var(--ink);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.dx-big{font-size:44px;font-weight:300;letter-spacing:-.02em}
.dx-name{fill:var(--muted);font-size:13px}
.dx-faint{fill:var(--faint);font-size:12px}
.dx-kept rect{fill:var(--kept)}
/* When the flow ends at the operating result, the operating figure is ink and the net margin,
   stated beside it after the non-cash items, carries the loss colour. */
.dx-kept.is-loss .dx-num.dx-op{fill:var(--ink)}
.dx-net{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;fill:var(--loss)}
.dx-kept .dx-num{fill:var(--kept)}
.dx-kept.is-loss .dx-num,.dx-kept.is-loss .dx-name{fill:var(--loss)}
.dx-kept.is-loss rect{fill:var(--loss)}
.dx-tick line{stroke:var(--line);stroke-width:1.5;stroke-dasharray:3 4}
.dx-tick.has-finding{cursor:pointer}
.dx-pulse{fill:var(--kept)}
.dx-hit{fill:transparent}
@media (prefers-reduced-motion:no-preference){.dx-pulse{animation:dxPulse 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}}
@keyframes dxPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
.dx-coin{cursor:grab;outline:none}
.dx-coin:active{cursor:grabbing}
.dx-coin circle{fill:var(--coin);stroke:var(--bg);stroke-width:3}
.dx-coin:focus-visible circle{stroke:var(--focus)}
.dx-coin .dx-coin-sym{fill:var(--bg);font-size:16px;font-weight:700;pointer-events:none}
.dx-coin .dx-coin-read{fill:var(--coin);font-size:15px;font-weight:600}
.dx-token circle{fill:var(--ink);stroke:var(--bg);stroke-width:3}

.dx-words{position:absolute;left:0;bottom:64px;padding:40px 60px 12px 32px;max-width:min(520px,100%);pointer-events:none;background:radial-gradient(120% 100% at 0% 100%,var(--bg) 55%,transparent 100%)}
.dx-words:has(.dx-hint){background:none}
.dx-words>*{pointer-events:auto}
.dx-hint{margin:0;color:var(--faint);font-size:14px}
.dx-note{display:flex;flex-direction:column;gap:6px;text-shadow:0 1px 10px var(--bg)}
.dx-note h2{margin:0;font-size:24px;font-weight:500;letter-spacing:-.01em}
.dx-eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.dx-figure{margin:0;color:var(--muted)}.dx-figure strong{color:var(--ink);font-size:20px;font-weight:600;margin-right:4px}
.dx-delta{margin:0;color:var(--coin);font-size:14px}
.dx-meaning{margin:0;color:var(--muted);font-size:14px;max-width:38ch}
/* Reported lines inside a computed gap (the tap note's breakdown of a "not to scale" stream). */
.dx-break{list-style:none;margin:6px 0 0;padding:0;max-width:46ch;font-size:13px}
.dx-break li{display:flex;justify-content:space-between;gap:14px;padding:3px 0;border-bottom:1px solid var(--line)}
.dx-break li:last-child{border-bottom:0}
.dx-break span:first-child{color:var(--muted)}
.dx-break-v{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.dx-links{margin:4px 0 0;display:flex;gap:18px;align-items:baseline;font-size:14px}
.dx-links a{color:var(--ink);text-underline-offset:3px}
.dx-act{color:var(--coin);font-weight:600;align-self:flex-start;padding:6px 0}
.dx-sale{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.dx-step{margin:0;font-weight:600}
.dx-entries{margin:0;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.dx-entries .dx-faint{color:var(--faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
button:disabled{opacity:.35;cursor:default}

.dx-time{display:flex;justify-content:center;align-items:center;gap:22px;padding:10px 32px 22px;font-size:14px}
.dx-time button{position:relative;padding:8px 0}
.dx-time button.on{color:var(--ink);font-weight:600}
.dx-time button.on::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--coin);border-radius:2px}
.dx-sep{width:1px;height:16px;background:var(--line)}

@media (max-width:760px){
 .dx-top{padding:16px 16px 0}.dx-tools{margin-left:0;width:100%}
 .dx-words{left:16px;right:16px;bottom:64px;max-width:none}
 .dx-time{gap:14px;padding:8px 16px 16px;flex-wrap:wrap}
 .dx{overflow:visible;min-height:0;display:block}
 .dx-svg{max-height:none;height:auto}
 .dx-svg.is-vertical .dx-faint{font-size:12px}
 .dx-svg.is-vertical .dx-num{font-size:24px}.dx-svg.is-vertical .dx-name{font-size:13px}.dx-svg.is-vertical .dx-big{font-size:40px}
 .dx-stage{align-items:flex-start;padding-bottom:150px}
 .dx-words{position:fixed;bottom:56px;background:linear-gradient(transparent,var(--bg) 22%);padding-top:28px}
 .dx-time{position:fixed;left:0;right:0;bottom:0;background:var(--bg)}
 /* The tap note stays compact on a phone: smaller type, tighter rows, no line see-saw. */
 .dx-note h2{font-size:20px}
 .dx-figure strong{font-size:18px}
 .dx-meaning{font-size:13px}
 .dx-break{font-size:12px}
 .dx-break li{padding:2px 0;gap:10px;align-items:baseline}
 .dx-break span:first-child{line-height:1.35}
}

/* Embedded in the Clarifo app: the app's theme switch applies, and its header names the page. */
[data-embedded] .dx-tools [data-theme]{display:none}

/* Embedded on a marketing page (?surface=landing): the host page's colours, one company, no prototype
   links. The stream sits straight on the page (no card frame), so the background is the page's own. */
:root[data-surface=landing]{--bg:var(--host-landing-page-background,#fff);--ink:var(--host-text-primary,#222);--muted:var(--host-text-muted,#5f6774);--faint:var(--host-text-muted,#5f6774);--trunk:var(--host-border,#d3dce1)}
/* No prototype links, theme switch or Play animation; streams stay tappable. Right padding
   clears the host page's full-screen icon. */
[data-surface=landing] .dx-tools{display:none}
[data-surface=landing] .dx-top{padding-right:64px}
/* Marketing page: no draggable coin; the period's result stays visible under the stream instead. */
[data-surface=landing] .dx-coin{display:none}
.dx-title{margin:0;font-size:clamp(26px,3.2vw,40px);font-weight:300;letter-spacing:-.02em;color:var(--ink)}
/* A line larger than the whole unit is drawn capped; a dashed edge says the shape is not to scale. */
.dx-branch.is-offscale path{fill:var(--loss);fill-opacity:.18;stroke:var(--loss);stroke-width:1.2;stroke-dasharray:5 4}
/* A stretch of the stream with nothing left (costs above revenue) runs as a faint thread. */
.dx-trunk.is-empty{opacity:.45}
.dx-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:760px;margin:0 auto 8px;padding:0 16px}
/* Open tiles, no boxes (docs/DESIGN_PLAYBOOK.md, Density): the grid and type carry the grouping. */
.dx-tile{display:flex;flex-direction:column;gap:2px}
.dx-tile-v{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.dx-tile.is-loss .dx-tile-v{color:var(--loss)}
.dx-tile.is-profit .dx-tile-v{color:var(--inflow)}
.dx-tile-k{font-size:12px;color:var(--muted)}
/* The result row sits in the page flow under the stream, never over it, at any width. */
[data-surface=landing] .dx{grid-template-rows:auto 1fr auto auto}
[data-surface=landing] .dx-words{position:static;padding:4px 16px 8px;background:none;max-width:760px;margin:0 auto;width:100%}
[data-surface=landing] .dx-words:has(.dx-summary) .dx-hint{text-align:center;padding:0 16px;font-size:13px}
[data-surface=landing] .dx-time{position:static}
[data-surface=landing] .dx-stage{padding-bottom:0}
@media (min-width:640px){.dx-summary{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}}
/* Subtotal markers float above the stream; the result row states them, so they are left out here. */
[data-surface=landing] .dx-tick{display:none}
/* Marketing page: each branch carries its own gradient (set inline by dollar-explorer.js) that starts
   at the trunk's colour where it leaves and fades to grey, so colour slides with no seams. */
[data-surface=landing] .dx-branch:not(.is-offscale) path{opacity:1}
/* The result figure is a percentage on this page, wider than a cents figure; keep it inside the frame. */
[data-surface=landing] .dx-big{font-size:34px}
[data-surface=landing] .dx-part:hover path,[data-surface=landing] .dx-part.is-focus path{filter:brightness(.82)}
[data-surface=landing] .dx-time{display:none}
/* Revenue (the trunk) is selectable on the marketing page. */
[data-surface=landing] .dx-revenue{cursor:pointer}
[data-surface=landing] .dx-revenue:hover rect,[data-surface=landing] .dx-revenue.is-focus rect{filter:brightness(.88)}
/* Revenue keeps its colour and slides: the trunk runs from the sources' teal to a lighter teal; the
   branch and source gradients are pinned to the same scale in dollar-explorer.js; the loss stays orange. */
[data-surface=landing] .dx-trunk,[data-surface=landing] .dx-kept-band{fill:url(#dx-rev)}
@media (max-width:520px){.dx-tile-v{font-size:18px}}
/* A tap note never grows the page (no inner scrollbar, ever). On a wide screen the stage yields:
   the frame keeps the viewport height, the stream scales down and the note spreads into two
   columns below it. On a narrow screen the note lies over the foot of the stream instead. */
@media (min-width:761px){
 :root[data-surface=landing] body{overflow:hidden}
 [data-surface=landing] .dx{height:100vh;min-height:0}
 [data-surface=landing] .dx-words{max-width:1040px}
 [data-surface=landing] .dx-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 56px}
 [data-surface=landing] .dx-note>*{grid-column:1}
 [data-surface=landing] .dx-note .dx-break{grid-column:2;grid-row:1/span 9;align-self:center;margin:0;max-width:none}
}
@media (max-width:760px){
 [data-surface=landing] .dx-words:has(.dx-note){position:fixed;left:0;right:0;bottom:0;max-width:none;margin:0;padding:20px 16px 16px;background:linear-gradient(transparent,var(--bg) 14%)}
}