/* The data value estimate, unbranded (6 Nov 2026). Jason: "make this pretty and unbranded compared to the rest of the Abureau website,
   and also lay in some nice animations that aren't too overwhelming, but keep it interesting." Its own calm look, no logo or house colours;
   every movement is short, eases out, and stops for visitors who ask for reduced motion. Fonts are served from the site itself. */
/* ABURA's own colours (abura/brand/README.md): Night, Paper white, Lantern, Violet and the data colours, in day and in night. The setting
   is shared with the newsroom (localStorage "abureau-theme"), and follows the device until a visitor chooses. */
:root {
  --bg: #F2F4F7; --surface: #FFFFFF; --ink: #080C11; --ink-2: #3D4652; --ink-3: #6B7480; --line: #DCE1E8; --soft: #EBEEF3;
  --accent: #7F77DD; --accent-soft: #ECEBFB; --lantern: #F4A55A; --lantern-ink: #A85F14; --lantern-soft: #FDF0E2;
  --teal: #1D9E75; --amber: #EF9F27; --rose: #D4537E; --blue: #378ADD;
  --hero-a: #1B2140; --hero-b: #0E1220; --hero-c: #080C11; --hero-ink: #F2F4F7; --hero-2: #B8BED0;
  --sky1: #CBC8F4; --sky2: #BFE6D8; --sky3: #FAD9B8; --sky-op: .34;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible Next", "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 2px rgba(8, 12, 17, .04), 0 8px 24px rgba(8, 12, 17, .07);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #080C11; --surface: #10161E; --ink: #F2F4F7; --ink-2: #BAC2CC; --ink-3: #8790A0; --line: #222B36; --soft: #18202A;
  --accent: #9D96EE; --accent-soft: #221F3D; --lantern-ink: #F4A55A; --lantern-soft: #2A1E12;
  --hero-a: #1F1A3C; --hero-b: #121726; --hero-c: #0B0F16;
  --sky1: #3B3580; --sky2: #0F5C47; --sky3: #6B4317; --sky-op: .38;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080C11; --surface: #10161E; --ink: #F2F4F7; --ink-2: #BAC2CC; --ink-3: #8790A0; --line: #222B36; --soft: #18202A;
    --accent: #9D96EE; --accent-soft: #221F3D; --lantern-ink: #F4A55A; --lantern-soft: #2A1E12;
    --hero-a: #1F1A3C; --hero-b: #121726; --hero-c: #0B0F16;
    --sky1: #3B3580; --sky2: #0F5C47; --sky3: #6B4317; --sky-op: .38;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); overflow-x: hidden; }
a { color: var(--accent); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* a slow, soft wash of colour behind everything */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: var(--sky-op); animation: drift 38s var(--ease) infinite alternate; }
.sky i:nth-child(1) { background: var(--sky1); top: -18vmax; left: -10vmax; }
.sky i:nth-child(2) { background: var(--sky2); bottom: -22vmax; right: -12vmax; animation-duration: 46s; animation-delay: -12s; }
.sky i:nth-child(3) { background: var(--sky3); top: 30%; left: 45%; width: 30vmax; height: 30vmax; opacity: .22; animation-duration: 54s; animation-delay: -24s; }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.08); } }

.preview-note { margin: 0; text-align: center; font: 12px var(--mono); letter-spacing: .08em; color: var(--ink-3); padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.shell { max-width: 1080px; margin: 0 auto; padding: 24px 20px 72px; }
.intro { max-width: 760px; margin-bottom: 32px; animation: rise .7s var(--ease) both; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.spark { width: 8px; height: 8px; border-radius: 50%; background: var(--lantern); box-shadow: 0 0 0 0 rgba(244, 165, 90, .5); animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px rgba(244, 165, 90, 0); } }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.015em; line-height: 1.12; margin: 0 0 12px; }
h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
p { margin: 0 0 12px; color: var(--ink-2); }
.lede { font-size: 18px; }
.hint { font-weight: 400; color: var(--ink-3); font-size: 14px; }

/* progress */
.track { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lantern), var(--accent)); transition: width .6s var(--ease); }
.steps { list-style: none; padding: 0; margin: 0 0 22px; display: flex; gap: 4px; flex-wrap: wrap; }
.steps li { flex: 1 1 110px; }
.steps button { width: 100%; text-align: left; border: 0; background: none; padding: 4px 2px; font: 14px var(--sans); color: var(--ink-3); cursor: pointer; transition: color .25s; }
.steps button b { display: inline-block; font: 11px var(--mono); margin-right: 6px; color: var(--ink-3); }
.steps button[aria-current="step"] { color: var(--ink); font-weight: 600; }
.steps button[aria-current="step"] b { color: var(--accent); }
.steps button.done { color: var(--ink-2); }
.steps button.done b::before { content: "\2713 "; color: var(--teal); }
.steps button:disabled { opacity: .45; cursor: default; }

/* the form and its side panel */
.est-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; align-items: start; }
@media (max-width: 880px) { .est-body { grid-template-columns: 1fr; } }
.panel, .side, .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.panel { padding: 30px; }
.panel.enter > * { animation: rise .45s var(--ease) both; }
.panel.enter > *:nth-child(2) { animation-delay: .04s; } .panel.enter > *:nth-child(3) { animation-delay: .08s; }
.panel.enter > *:nth-child(4) { animation-delay: .12s; } .panel.enter > *:nth-child(5) { animation-delay: .16s; } .panel.enter > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.field { margin-bottom: 22px; }
label, legend { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
input[type=text] { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: 16px var(--sans); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; margin: 0; font-weight: 400; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.opt span { display: inline-block; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 14px; color: var(--ink-2);
  transition: transform .18s var(--ease), background .2s, border-color .2s, color .2s; }
.opt:hover span { transform: translateY(-1px); border-color: var(--ink-3); }
.opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); animation: pop .28s var(--ease); }
.opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes pop { 40% { transform: scale(1.06); } }
.types { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); margin-bottom: 6px; }
.tgroup { grid-column: 1 / -1; margin: 12px 0 0; font: 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tcheck { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 400; font-size: 15px; margin: 0;
  transition: border-color .2s, background .2s, transform .18s var(--ease); }
.tcheck:hover { transform: translateY(-1px); }
.tcheck:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tcheck input { margin-top: 4px; accent-color: var(--accent); }
.amount { border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 14px 0; background: var(--soft); animation: rise .4s var(--ease) both; }
.amount h3 { font: 700 16px var(--sans); margin-bottom: 12px; }
.amount .row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ask { background: var(--soft); border-radius: 10px; padding: 12px 14px; margin-top: 12px; font-size: 14px; }
.ask label { font-size: 14px; }
.nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font: 600 15px/1.2 var(--sans);
  text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(21, 24, 30, .14); }
.btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.accent { background: var(--lantern); border-color: var(--lantern); color: #080C11; }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

.side { padding: 22px; position: sticky; top: 20px; }
@media (max-width: 880px) { .side { position: static; } }
.side .eyebrow { margin-bottom: 16px; }
.meter { margin-bottom: 16px; font-size: 14px; display: grid; grid-template-columns: 1fr auto; }
.meter .bar { grid-column: 1 / -1; height: 6px; background: var(--soft); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.meter .bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--lantern), var(--accent)); transition: width .7s var(--ease); }
.sig { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 10px 0; font-size: 14px; }
.sig b { transition: color .3s; }
.sig b.up { color: var(--teal); } .sig b.flat { color: var(--amber); } .sig b.down { color: var(--rose); }

/* the result */
.result { margin-top: 8px; }
.result > * { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.hero { position: relative; overflow: hidden; border-radius: 22px; padding: 36px 34px 30px; color: var(--hero-ink); border: 1px solid rgba(255, 255, 255, .06);
  background: radial-gradient(120% 140% at 0% 0%, var(--hero-a) 0%, var(--hero-b) 55%, var(--hero-c) 100%); box-shadow: 0 20px 50px rgba(8, 12, 17, .25); }
.hero::after { content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; height: 140%; background: radial-gradient(closest-side, rgba(244, 165, 90, .22), transparent); animation: drift 30s ease-in-out infinite alternate; }
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--hero-2); }
.hero .fig { font: 500 clamp(36px, 6.4vw, 64px)/1.02 var(--serif); margin: 6px 0 12px; letter-spacing: -.02em; }
.hero p { color: var(--hero-2); max-width: 46em; }
.range { margin: 26px 0 6px; }
.range .rail { position: relative; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .1); }
.range .band { position: absolute; top: 0; bottom: 0; border-radius: 10px; transform-origin: left; animation: grow .9s var(--ease) .25s both; }
.range .band.you { background: linear-gradient(90deg, #F4A55A, #7F77DD); }
.range .band.prog { top: 14px; bottom: -10px; height: 4px; background: rgba(246, 220, 196, .65); animation-delay: .5s; }
.range .pin { position: absolute; top: -6px; width: 2px; height: 22px; background: #fff; border-radius: 2px; animation: rise .5s var(--ease) .9s both; }
.range .legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-size: 13px; color: var(--hero-2); }
.range .legend i { display: inline-block; width: 18px; height: 4px; border-radius: 4px; vertical-align: middle; margin-right: 6px; }
@keyframes grow { from { transform: scaleX(0); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }

.lic { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 18px 0; }
.lic > div { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s;
  animation: rise .55s var(--ease) both; animation-delay: calc(.2s + var(--k, 0) * 80ms); }
.lic > div:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(21, 24, 30, .1); }
.lic .eyebrow { margin: 0; font-size: 11px; }
.lic b { display: block; font: 500 clamp(22px, 2.4vw, 28px)/1.2 var(--serif); margin: 6px 0 2px; white-space: nowrap; }
.lic small { color: var(--ink-3); font-size: 13px; }
.lic > div.main { border-color: var(--lantern); background: linear-gradient(180deg, var(--lantern-soft), var(--surface) 70%); }

.note { border-radius: 14px; padding: 14px 18px; margin: 12px 0; font-size: 14px; background: var(--lantern-soft); border: 1px solid color-mix(in srgb, var(--lantern) 35%, transparent); color: var(--ink-2); }
.note b { color: var(--ink); }
.note.block { background: color-mix(in srgb, var(--rose) 12%, var(--surface)); border-color: color-mix(in srgb, var(--rose) 40%, transparent); }
.note b { display: block; margin-bottom: 2px; }
.cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); margin-top: 18px; }
@media (max-width: 420px) { .cols { grid-template-columns: 1fr; } }
.card { padding: 24px; }
.card.wide { margin-top: 18px; }
.fac { display: grid; grid-template-columns: minmax(0, 1fr) 90px 52px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--soft); font-size: 14px; }
.fac:last-child { border-bottom: 0; }
.fac small { display: block; color: var(--ink-3); font-size: 12px; }
.fac .x { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.fac .gauge { position: relative; height: 6px; background: var(--soft); border-radius: 6px; }
.fac .gauge::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink-3); }
.fac .gauge i { position: absolute; top: 0; bottom: 0; border-radius: 6px; transform-origin: left; animation: grow .7s var(--ease) both; animation-delay: calc(.3s + var(--k, 0) * 50ms); }
.fac .gauge i.up { left: 50%; background: var(--teal); }
.fac .gauge i.down { right: 50%; background: var(--rose); transform-origin: right; }
.fac.total { font-weight: 700; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; }
.tag { font: 10px var(--mono); letter-spacing: .1em; color: var(--accent); margin-left: 6px; }
.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--soft); vertical-align: top; }
th { font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.share { height: 4px; border-radius: 4px; background: var(--soft); margin-top: 6px; overflow: hidden; }
.share i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: grow .8s var(--ease) both; animation-delay: calc(.35s + var(--k, 0) * 60ms); }
.src { font-size: 12px; color: var(--ink-3); }
.levers { list-style: none; padding: 0; margin: 0; counter-reset: l; }
.levers li { counter-increment: l; padding: 10px 0 10px 36px; position: relative; border-bottom: 1px solid var(--soft); color: var(--ink-2); font-size: 15px; }
.levers li::before { content: counter(l); position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 600 12px/24px var(--sans); text-align: center; }
.levers b { color: var(--ink); }
.not { border: 1px dashed var(--line); border-radius: 16px; padding: 20px 24px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.not ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; align-items: center; }
.foot { text-align: center; padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--ink-3); }
.foot p { color: var(--ink-3); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
details.srcs summary { cursor: pointer; font-size: 12px; color: var(--ink-3); list-style: none; }
details.srcs summary::-webkit-details-marker { display: none; }
details.srcs summary::after { content: " +"; }
details.srcs[open] summary::after { content: " \2212"; }
.two { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 22px; }
.two > div { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 14px 16px; }
.two .eyebrow { margin-bottom: 4px; font-size: 11px; }
.two b { display: block; font: 500 24px/1.2 var(--serif); }
.two small { color: var(--hero-2); font-size: 13px; }
/* systems with their logos */
.tools { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.tool { position: relative; margin: 0; font-weight: 400; }
.tool input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.tool span { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 14px; color: var(--ink-2);
  transition: transform .18s var(--ease), border-color .2s, background .2s, box-shadow .2s; }
.tool:hover span { transform: translateY(-1px); border-color: var(--ink-3); }
.tool input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); box-shadow: 0 0 0 1px var(--accent) inset; }
.tool input:checked + span .lg { animation: pop .28s var(--ease); }
.tool input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.lg { flex: none; width: 24px; height: 24px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: #fff; }
.lg img, .lg svg { width: 24px; height: 24px; display: block; object-fit: contain; }
/* the header: the live logo and the Day / Night switch */
.bar { max-width: 1080px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 0; display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.bar abura-logo { width: 118px; display: block; }
.bar nav { display: flex; gap: 10px; align-items: center; }
.bar .lnk { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.bar .lnk:hover { color: var(--ink); }
.dn { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 7px 12px; font: 13px var(--sans); cursor: pointer; transition: border-color .2s; }
.dn:hover { border-color: var(--ink-3); }
.lg { background: #fff; }
.tcheck:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.hero .quiet { font-size: 14px; margin-top: 4px; color: var(--hero-2); opacity: .85; }
.bar .left { display: flex; align-items: center; gap: 14px; }
.back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 13px var(--sans); text-decoration: none; transition: border-color .2s, transform .18s var(--ease); }
.back:hover { border-color: var(--ink-3); transform: translateX(-2px); }