/* D-047 economics. One sentence in, one answer out: the visitor's numbers read as a short sentence on the
   page, and one dark answer card carries the comparison.
   Bars use emphasis encoding, not a categorical palette: two muted greys (reps #5f7366, other sales costs
   #a3b3a7) are context and one lime (purchases and added costs #c0ee83) is the highlight. The dataviz
   validator (validate_palette.js --mode dark --surface #0f1813) checks categorical palettes only, so its
   lightness-band and chroma-floor checks fail by design here; it passes colour-blind separation (worst
   adjacent pair dE 17.7), normal-vision separation (dE 18.8) and contrast against the card (3:1 or more).
   Identity never rests on colour alone: a legend, one direct label on the lime segment, totals at the bar
   ends, a hover or tap readout and a screen-reader table carry it. Marks: 16px bars from one baseline, 2px
   surface gaps, 4px rounded data ends, no background track. */
.econ{--ink:#17201d;--body:#2b3832;--muted:#59645e;--line:#e2e8df;--chip:#ebf2e3;--chip-hover:#e1ecd5;--chip-line:#3f8a4f;
  --error:#b4321f;--error-bg:#fbebe7;
  --card:#0f1813;--card-text:#eef3ea;--card-soft:#a9b7ab;--card-dim:#8b9b8f;--card-line:#223127;--lime:#c0ee83;
  --team:#5f7366;--other:#a3b3a7;--access:#c0ee83;
  max-width:1280px;margin:0 auto;padding:clamp(72px,9vw,120px) clamp(20px,4.5vw,64px) clamp(56px,7vw,96px)}
.econ-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Controls that need the script stay hidden until it runs (an inline script marks the section). */
.econ:not(.is-js) .econ-js-only{display:none!important}
.econ-head{max-width:640px}
.econ-head h2{font-size:clamp(34px,3.6vw,54px);line-height:1.05;letter-spacing:-.05em;font-weight:560;text-wrap:balance}
.econ-head p{margin-top:18px;font-size:17px;line-height:1.6;color:var(--muted);max-width:520px}
.econ-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:clamp(36px,5.2vw,80px);align-items:start;margin-top:clamp(40px,5vw,64px)}

/* The sentence */
.econ-say{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,28px);padding-top:6px}
.econ-say fieldset{border:0;margin:0;padding:0;min-width:0}
.econ-line{font-size:clamp(22px,1.95vw,29px);line-height:1.8;letter-spacing:-.022em;font-weight:500;color:var(--body);text-wrap:pretty}
.econ-line b{font-weight:700;color:var(--ink)}
.econ-val,.econ-count{display:inline-flex;align-items:center;vertical-align:baseline;border-radius:.32em .32em .14em .14em;background:var(--chip);box-shadow:inset 0 -2px 0 var(--chip-line);color:var(--ink);font-weight:700;line-height:1.3;transition:background .2s}
.econ-val{padding:0 .26em;margin:0 .04em;cursor:text}
.econ-val:hover,.econ-count:hover{background:var(--chip-hover)}
.econ-val>span{color:#4f6455;font-weight:600}
.econ-val.is-blank>span{display:none}
.econ-say input{width:3ch;min-width:1ch;border:0;padding:0;margin:0;background:none;font:inherit;color:inherit;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.econ-say input::placeholder{color:#57685c;font-weight:600;opacity:1}
.econ-say input.is-none::placeholder{color:#2f5a22}
.econ-say input:focus,.econ-say input:focus-visible{outline:none}
.econ-val:focus-within,.econ-count:has(input:focus){background:#fff;outline:3px solid #5983fd;outline-offset:2px}
/* Invalid: red text plus two cues that do not rely on colour, a dashed underline and a warning mark. */
.econ-say input[aria-invalid="true"]{color:var(--error)}
.econ-val:has(input[aria-invalid="true"]),.econ-count:has(input[aria-invalid="true"]){background:linear-gradient(90deg,var(--error) 0 5px,transparent 5px 8px) left bottom/8px 2px repeat-x,var(--error-bg);box-shadow:none}
.econ-val:has(input[aria-invalid="true"])::after,.econ-count:has(input[aria-invalid="true"])::after{content:'!';content:'!' / '';display:inline-grid;place-items:center;flex:none;width:1.25em;height:1.25em;margin-left:.3em;border-radius:50%;background:var(--error);color:#fff;font-size:.6em;font-weight:800;line-height:1;letter-spacing:0}
.econ-count{gap:.16em;padding:0 .14em;margin:0 .04em}
/* The reps mark sits after the + stepper, clear of that stepper's 8px right-hand hit area (gap + 7px). */
.econ-count:has(input[aria-invalid="true"])::after{margin-left:7px}
.econ-num{text-align:center;font-variant-numeric:tabular-nums}
/* The reps field owns its whole width: wide enough to hit, and above the steppers' enlarged hit areas. */
.econ-count input{position:relative;z-index:1;min-width:calc(2.5ch + .5em);padding:0 .25em}
output.econ-num{padding:0 .12em;white-space:nowrap}
.econ-pm{position:relative;display:inline-grid;place-items:center;flex:none;width:30px;height:30px;min-height:0;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);font:inherit;font-size:19px;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 1px 2px rgba(23,40,28,.2),0 0 0 1px rgba(23,40,28,.06)}
/* Hit areas grow outward, up and down, never toward the value between the two steppers. */
.econ-pm::after{content:'';position:absolute;top:-7px;bottom:-7px}
.econ-count>.econ-pm:first-child::after{left:-8px;right:0}
.econ-count>.econ-pm:last-child::after{left:0;right:-8px}
.econ-pm:hover{background:#f4f8f0}
.econ-pm:active{transform:scale(.94)}
.econ-pm[aria-disabled="true"]{color:#a3ada5;box-shadow:0 0 0 1px rgba(23,40,28,.08);cursor:default}
.econ-pm:focus-visible{outline:3px solid #5983fd;outline-offset:2px}

/* Quiet notes: what each assumption means, said once, under the sentence it explains */
.econ-note{margin:12px 0 0;padding:1px 0 1px 16px;border-left:2px solid #dbe3d7;max-width:600px;font-size:14px;line-height:1.55;color:var(--muted)}
.econ-note+.econ-note{margin-top:8px}
.econ-note.has-action{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.econ-note.is-hint{border-left-color:var(--chip-line);color:var(--body);font-size:15px;font-weight:560}
.econ-none{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin:0;padding:0 12px;border:1px solid #c8d3c4;border-radius:999px;background:#fff;color:#2c3a31;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.econ-none:hover{border-color:#8fa58f}
.econ-none[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.econ-none[aria-pressed="true"]::before{content:'';width:9px;height:5px;margin-top:-3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.econ-none:focus-visible{outline:3px solid #5983fd;outline-offset:2px}

/* Added and one-time costs stay folded away */
.econ-extra{border-top:1px solid var(--line);padding-top:6px}
.econ-extra summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;min-height:48px;padding:6px 0;list-style:none;cursor:pointer;font-size:15px;font-weight:650;color:#2c3a31}
.econ-extra summary::-webkit-details-marker{display:none}
.econ-extra-title{display:inline-flex;align-items:center;gap:12px}
/* The sign is decoration: empty alternative text keeps it out of the disclosure's name. */
.econ-extra-title::before{content:'+';content:'+' / '';display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid #c8d3c4;font-size:16px;font-weight:600;line-height:1}
.econ-extra[open] .econ-extra-title::before{content:'\2212';content:'\2212' / ''}
.econ-extra-sum{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.econ-extra fieldset{border:0;margin:0;padding:6px 0 4px;min-width:0}
.econ-line.is-small{font-size:clamp(19px,1.5vw,22px)}

/* The answer */
.econ-answer{position:relative;container-type:inline-size;padding:clamp(26px,2.9vw,40px);border-radius:28px;color:var(--card-text);
  background:radial-gradient(120% 70% at 100% 0%,#1a2b20 0%,rgba(15,24,19,0) 62%),var(--card);
  box-shadow:0 44px 90px -48px rgba(11,18,14,.8),inset 0 0 0 1px rgba(255,255,255,.05)}
.econ-answer:focus{outline:none}
.econ-answer:focus-visible{outline:3px solid #8fb4ff;outline-offset:4px}
.econ-answer-label{font-size:14px;font-weight:650;color:var(--card-soft)}
/* Proportional figures: the big answer and the stat values stand alone, so tabular digits would look loose. */
.econ-figure{margin-top:14px;font-size:min(66px,14.5cqi);line-height:1.02;letter-spacing:-.055em;font-weight:600;color:#f6faf3;text-wrap:balance}
.econ-answer.is-long .econ-figure{font-size:min(54px,11.5cqi)}
.econ-figure-unit{display:block;margin-top:10px;font-size:clamp(18px,1.45vw,22px);letter-spacing:-.02em;font-weight:550;color:var(--card-soft)}
.econ-figure-unit:empty{display:none}
.econ-meaning{margin-top:16px;max-width:440px;font-size:15px;line-height:1.55;color:var(--card-soft)}
.econ-goto{margin-top:18px;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--lime);color:#0f1813;font:inherit;font-size:14px;font-weight:750;cursor:pointer}
.econ-goto:hover{background:#d4f6aa}
.econ-goto:focus-visible,.econ-reset:focus-visible{outline:3px solid #8fb4ff;outline-offset:3px}

/* Bars: one shared scale, so equal amounts draw equal lengths; each total sits at its bar's end. */
.econ-bars{position:relative;display:grid;gap:14px;margin-top:30px;padding-top:26px;border-top:1px solid var(--card-line);--label-w:88px;--g:4px}
.econ-bar-row{display:grid;grid-template-columns:4.75rem minmax(0,1fr);align-items:center;gap:6px 12px}
.econ-bar-label{font-size:13px;font-weight:650;color:var(--card-soft)}
.econ-track{container-type:inline-size;display:flex;align-items:center;gap:8px;min-width:0;min-height:26px}
.econ-bar{position:relative;display:flex;flex:none;gap:2px;height:16px}
.econ-bar>i{position:relative;display:block;flex:none;height:100%;width:calc((100cqi - var(--label-w) - 8px - var(--g)) * var(--f,0))}
.econ-bar>i::before{content:'';position:absolute;inset:-6px -1px}
.econ-bar>i[hidden]{display:none}
.econ-bar>i.is-end{border-radius:0 4px 4px 0}
.econ-bar>i.is-hot{filter:brightness(1.16)}
.seg-team{background:var(--team)}.seg-other{background:var(--other)}.seg-access{background:var(--access)}
.econ-total{font-size:19px;font-weight:650;letter-spacing:-.02em;color:var(--card-text);white-space:nowrap}
/* One direct label, on the highlighted segment, right-aligned to its end */
.econ-bar-row.is-plan{padding-bottom:24px}
.econ-cap{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:max-content;text-align:right;white-space:nowrap;font-size:12px;line-height:1.3;font-weight:600;color:var(--card-soft)}
.econ-cap[hidden]{display:none}
.econ-cap b{margin-left:5px;font-weight:700;color:var(--card-text)}
.econ-cap-key{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px;background:var(--access)}
.econ-bars-note{display:none;margin:0;font-size:12px;line-height:1.5;color:var(--card-dim)}
.econ-tip{position:absolute;left:0;top:0;z-index:2;display:grid;grid-template-columns:auto auto;align-items:center;gap:1px 8px;padding:7px 11px 7px 9px;border-radius:10px;background:#1c2a21;box-shadow:0 12px 28px -12px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none;white-space:nowrap;visibility:hidden;opacity:0;transform:translate(-50%,calc(-100% - 8px));transition:opacity .12s,visibility 0s .12s}
.econ-tip.is-on{visibility:visible;opacity:1;transition:opacity .12s}
.econ-tip i{grid-row:1/3;width:3px;height:28px;border-radius:2px}
.econ-tip b{font-size:15px;font-weight:700;color:var(--card-text)}
.econ-tip span{grid-column:2;font-size:12px;color:var(--card-soft)}
.econ-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;padding:0;list-style:none;font-size:12px;line-height:1.4;color:var(--card-soft)}
.econ-legend li{display:flex;align-items:center;gap:7px}
.econ-legend i{width:10px;height:10px;border-radius:3px}
.econ-stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:16px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--card-line)}
.econ-stats>div{display:flex;flex-direction:column}
.econ-stats dt{font-size:12px;line-height:1.4;color:var(--card-dim)}
.econ-stats dd{margin:auto 0 0;padding-top:5px;font-size:20px;font-weight:650;letter-spacing:-.02em;color:var(--card-text)}
.econ-foot{margin-top:22px;font-size:12px;line-height:1.6;color:var(--card-dim)}
.econ-reset{display:inline-flex;align-items:center;min-height:32px;margin-top:4px;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--lime);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Incomplete: no bars and no legend (unknown costs are never drawn), just the labels and what is missing */
.econ-answer[data-state="incomplete"] .econ-figure{font-size:min(40px,9cqi);letter-spacing:-.04em;color:#e6eee3}
.econ-answer[data-state="incomplete"] .econ-bar,.econ-answer[data-state="incomplete"] .econ-legend{display:none}
.econ-answer[data-state="incomplete"] .econ-bar-row.is-plan{padding-bottom:0}
.econ-answer[data-state="incomplete"] .econ-bars-note{display:block}
.econ-answer[data-state="incomplete"] .econ-total,.econ-answer[data-state="incomplete"] .econ-stats dd{font-size:14px;font-weight:600;color:var(--card-dim)}

/* Compact result strip: shown by the script while the sentences are on screen and the card is not */
.econ-strip{display:none}
.econ-strip-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.econ-strip-label{font-size:11.5px;font-weight:600;color:var(--card-soft)}
.econ-strip strong{font-size:16px;line-height:1.25;font-weight:650;letter-spacing:-.015em;color:#f6faf3}
.econ-strip-go{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;background:var(--lime);color:#0f1813;font-size:13px;font-weight:750}
.econ-strip:focus-visible{outline:3px solid #8fb4ff;outline-offset:3px}

@media (pointer:coarse){.econ-none,.econ-reset{min-height:44px}}
@media (max-width:899px){
  .econ-layout{grid-template-columns:minmax(0,1fr)}
  .econ-line{font-size:21px;line-height:1.86}
  .econ-line.is-small{font-size:19px}
  .econ-pm{width:28px;height:28px;font-size:18px}
  .econ-pm::after{top:-8px;bottom:-8px}
  .econ-note{font-size:13.5px}
  .econ-note.is-hint{font-size:14.5px}
  .econ-answer{border-radius:22px}
  .econ-figure{font-size:min(56px,15cqi)}
  .econ-answer.is-long .econ-figure{font-size:min(46px,12cqi)}
  .econ-say input,.econ-say button,.econ-say summary{scroll-margin-bottom:96px}
  .econ-strip{position:fixed;z-index:30;left:16px;right:16px;bottom:calc(12px + var(--econ-kb,0px) + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:560px;min-height:56px;margin:0 auto;padding:8px 8px 8px 16px;border-radius:18px;background:var(--card);color:var(--card-text);text-decoration:none;box-shadow:0 18px 40px -16px rgba(11,18,14,.75),inset 0 0 0 1px rgba(255,255,255,.08);visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  .econ-strip.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
}
/* Narrow cards put each bar's label above it, so the bars keep most of the width */
@container (max-width:420px){.econ-bar-row{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.econ *{transition:none!important}}