:root {
  --paper: #edf0ea;
  --surface: #f9fbf7;
  --ink: #1b2a25;
  --muted: #56655f;
  --line: #d2d9d0;
  --nest: #2e6b5e;
  --mb: #b8892a;
  --state: #4e62a0;
  --warn: #8f4318;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); }
[hidden] { display: none !important; }
h1 { font: 600 1.6rem/1.2 var(--serif); margin: 0 0 .5rem; }
code { font-size: .9em; word-break: break-all; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--state); outline-offset: 2px; }

/* sign-in screens */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 24rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 2rem 1.75rem; display: grid; gap: 1rem; }
.auth-card p { margin: 0; color: var(--muted); }
.auth-card img { justify-self: center; background: #fff; padding: 8px; border-radius: 8px; }
label { display: grid; gap: .3rem; font-size: .92rem; font-weight: 500; }
input[type=email], input[type=password], input[type=number], input[type=date], input[inputmode] {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
button[type=submit] { padding: .75rem 1rem; border: 0; border-radius: 8px; background: var(--nest); color: #fff; font-weight: 600; cursor: pointer; }
button[type=submit]:disabled { opacity: .6; cursor: wait; }
button.link { background: none; border: 0; padding: .25rem; color: var(--muted); text-decoration: underline; cursor: pointer; justify-self: start; }
.error { color: var(--warn) !important; min-height: 1.2em; }

/* app */
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; padding: .75rem clamp(1rem, 4vw, 2.5rem); background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { font: 600 1.05rem var(--serif); }
.save-status { margin-left: auto; font-size: .85rem; color: var(--muted); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 4rem; max-width: 1200px; margin: 0 auto; }
@media (min-width: 900px) {
  .layout { grid-template-columns: 320px minmax(0, 1fr); }
  .inputs { grid-column: 1; grid-row: 1; position: sticky; top: 4.5rem; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto; padding-right: .5rem; }
  .results { grid-column: 2; }
}

.hero { padding: .5rem 0 1.5rem; }
.hero-lead { font: 400 clamp(1.15rem, 2.4vw, 1.5rem)/1.35 var(--serif); margin: 0; max-width: 32ch; }
.hero-figure { font: 600 clamp(3.2rem, 11vw, 6.5rem)/1 var(--serif); letter-spacing: -.02em; margin: .4rem 0 .5rem; font-variant-numeric: lining-nums tabular-nums; }
.hero-figure span { font: 400 clamp(1.1rem, 2.4vw, 1.5rem) var(--serif); letter-spacing: 0; margin-left: .4rem; color: var(--muted); }
.hero-sub { margin: 0 0 1.25rem; color: var(--muted); max-width: 60ch; }

.split { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line); max-width: 640px; }
.split div { transition: flex-basis .35s ease; }
.split-key { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .9rem; }
.split-key li::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 2px; margin-right: .4em; background: var(--c); }

.slider-row { margin-top: 1.75rem; max-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; }
.slider-row label { display: flex; justify-content: space-between; gap: 1rem; font-size: 1rem; }
.slider-row strong { font: 600 1.15rem var(--serif); }
input[type=range] { width: 100%; accent-color: var(--nest); margin: .75rem 0 .25rem; height: 2rem; }
.hint { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }

.notice { color: var(--warn); max-width: 65ch; margin: 0 0 1rem; }
.notice:empty { display: none; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 2rem; }
.facts div { background: var(--surface); padding: .8rem 1rem; }
.facts dt { font-size: .82rem; color: var(--muted); }
.facts dd { margin: .15rem 0 0; font: 600 1.25rem var(--serif); font-variant-numeric: tabular-nums; }

.chart { margin: 0 0 2.25rem; }
.chart figcaption { font: 600 1.1rem/1.3 var(--serif); margin-bottom: .75rem; max-width: 60ch; }
.chart-wrap { position: relative; height: 280px; }
.chart-wrap.short { height: 220px; }
.small { font-size: .82rem; color: var(--muted); max-width: 70ch; }

/* inputs panel */
fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 1rem 0 1.25rem; display: grid; gap: .8rem; }
fieldset:first-child { border-top: 0; padding-top: 0; }
legend { font: 600 1.05rem var(--serif); padding: 0 0 .25rem; float: left; width: 100%; }
fieldset.src legend::before { content: ""; display: inline-block; width: .65em; height: .65em; border-radius: 50%; margin-right: .45em; background: var(--c); }
.nest { --c: var(--nest); } .mb { --c: var(--mb); } .state { --c: var(--state); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: end; }
label.check { display: flex; align-items: center; gap: .55rem; font-weight: 400; }
label.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--nest); }
.field-warn { color: var(--warn); font-size: .85rem; margin: 0; }

@media (prefers-reduced-motion: reduce) { .split div { transition: none; } }