/* Priced In — one stylesheet, read once at start-up and served from memory.

   The information here is not "how much" — a total is one number and anyone can
   print one. It is "how much, and how much of that can you actually believe."
   So status gets the only saturated colour on the page and everything else is
   near-neutral: green where a rate is set in legislation, amber where it is
   announced and not set, slate where the date is certain and the number is not.

   That is also why the timeline is the hero rather than the total. A regulatory
   calendar is a shape, not a figure, and the shape is what a person budgeting
   actually needs to see. */

:root {
  --paper: #f1f2f5;
  --card: #ffffff;
  --sunk: #f5f6f8;
  --line: #d9dce3;
  --ink: #12141a;
  --body: #454b57;
  --mute: #767d8b;

  --brand: #14161c;
  --brand-ink: #f4f5f7;

  /* Status is the information, so it gets the colour. */
  --enacted: #2c6b4c;
  --announced: #a5691d;
  --scheduled: #545d6d;
  --enacted-soft: #e2efe8;
  --announced-soft: #f7ecdc;
  --scheduled-soft: #e8eaee;

  --save: #2c6b4c;
  --bad: #a63c22;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(18, 20, 26, 0.05), 0 4px 14px rgba(18, 20, 26, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d0f13;
    --card: #16191f;
    --sunk: #1b1f26;
    --line: #2a2f38;
    --ink: #e9ecf1;
    --body: #b0b7c2;
    --mute: #808995;
    --brand: #0a0c10;
    --brand-ink: #e9ecf1;
    --enacted: #5fb98d;
    --announced: #dda66a;
    --scheduled: #939dad;
    --enacted-soft: #172f25;
    --announced-soft: #332614;
    --scheduled-soft: #1f242c;
    --save: #5fb98d;
    --bad: #dd7d5f;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 calc(30px + env(safe-area-inset-bottom));
  background: var(--paper);
  color: var(--body);
  font: 16px/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: anywhere;
}
.wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }

/* -------------------------------------------------------------- the hero */

.hero { background: var(--brand); color: var(--brand-ink); padding: 28px 0 34px; margin-bottom: 18px; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 650; letter-spacing: 0.01em; opacity: 0.9;
}
.mark {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.14); font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
}
.hero h1 {
  margin: 18px 0 0; font-size: 30px; line-height: 1.16; letter-spacing: -0.022em;
  text-wrap: balance; max-width: 20ch;
}
.lede { margin: 13px 0 0; font-size: 16.5px; line-height: 1.58; opacity: 0.94; max-width: 60ch; }
.lede b { font-weight: 650; color: #fff; }
.lede2 { margin: 11px 0 0; font-size: 14.5px; line-height: 1.6; opacity: 0.7; max-width: 62ch; }

@media (min-width: 620px) { .hero h1 { font-size: 40px; } }

/* --------------------------------------------------------------- panels */

.card, .rules {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; margin: 16px 0;
}
.card h2, .rh { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.card h3 {
  margin: 16px 0 8px; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--mute); font-weight: 650;
}
.sub { margin: 0 0 12px; color: var(--body); font-size: 14.5px; }
.tiny, .cap { margin: 12px 0 0; color: var(--mute); font-size: 13px; line-height: 1.55; }
.quiet { background: transparent; box-shadow: none; }
em { font-style: normal; font-weight: 600; color: var(--ink); }

/* ----------------------------------------------------------------- form */

.egs {
  display: grid; gap: 8px; margin: 0 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.eg {
  cursor: pointer; font: inherit; text-align: left; display: grid; gap: 2px;
  background: var(--sunk); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
}
.eg b { font-size: 14px; font-weight: 650; }
.eg span { color: var(--mute); font-size: 12.5px; line-height: 1.45; }
.eg:hover { border-color: var(--ink); }
.eg.on { border-color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink); }

.fields {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.fl { display: grid; gap: 4px; min-width: 0; }
.fl span { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.fl i { color: var(--mute); font-size: 12px; font-style: normal; line-height: 1.4; }
.fl input {
  width: 100%; min-width: 0;
  background: var(--sunk); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.go {
  display: block; width: 100%; margin-top: 16px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 650;
  background: var(--brand); color: var(--brand-ink);
  border: 0; border-radius: 9px; padding: 13px;
}
.go:hover { filter: brightness(1.6); }
.eg:focus-visible, .go:focus-visible, input:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

/* -------------------------------------------------------------- verdict */

.verdict {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin: 16px 0;
}
.vlab { margin: 0; color: var(--mute); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.07em; }
.big {
  margin: 8px 0 0; font-size: 33px; line-height: 1.1; font-weight: 700;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.big .to {
  font-size: 17px; font-weight: 400; color: var(--mute);
  letter-spacing: 0; padding: 0 10px;
}
.vhead { margin: 14px 0 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.vsay { margin: 6px 0 0; color: var(--body); font-size: 14.5px; }
.vnote {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 9px;
  background: var(--enacted-soft); color: var(--ink); font-size: 14px; line-height: 1.55;
}

@media (min-width: 620px) { .big { font-size: 44px; } }

/* The split that matters more than the total. */
.split {
  display: grid; gap: 9px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.sb {
  display: grid; gap: 3px; padding: 12px 13px;
  border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 9px;
  background: var(--sunk);
}
.sb.enacted { border-left-color: var(--enacted); }
.sb.announced { border-left-color: var(--announced); }
.sb.unpriced { border-left-color: var(--mute); border-style: dashed; }
.sl { color: var(--mute); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.sv { font-size: 21px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sn { color: var(--mute); font-size: 12px; line-height: 1.4; }

/* --------------------------------------------------------- the timeline */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
svg.tl { display: block; width: 100%; min-width: 560px; height: auto; }
.grid { stroke: var(--line); stroke-width: 1; }
.base { stroke: var(--mute); stroke-width: 1.5; }
.tick { stroke: var(--mute); stroke-width: 1.5; }
.ax { fill: var(--mute); font-size: 13px; font-family: inherit; }
.ax.mid { text-anchor: middle; }
.ax.end { text-anchor: end; }
.ax.tot { fill: var(--ink); font-weight: 650; }
/* Bars carry status in their fill, so an announced policy cannot be mistaken
   for enacted law at a glance — which is the mistake this whole page exists
   to prevent. */
.tb.enacted { fill: var(--enacted); }
.tb.announced { fill: var(--announced); }
.tb.scheduled { fill: var(--scheduled); }
.cumline { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.legend .li { display: inline-flex; align-items: center; gap: 7px; color: var(--body); font-size: 13px; }
i.k { width: 13px; height: 13px; border-radius: 3px; display: inline-block; flex: none; }
i.k.enacted { background: var(--enacted); }
i.k.announced { background: var(--announced); }
i.k.scheduled { background: var(--scheduled); }
i.k.cumline { background: var(--ink); height: 3px; border-radius: 2px; width: 18px; }

/* ------------------------------------------------------- the rule cards */

.rules { padding: 4px 18px 6px; }
.rh { padding: 14px 0 0; }
.rule { border-top: 1px solid var(--line); padding: 18px 0; }
.rules > .rh + .rule { border-top: 1px solid var(--line); }
.rtop { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; justify-content: space-between; }
.rwhen { display: flex; gap: 8px; align-items: baseline; }
.rwhen b { color: var(--ink); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rwhen span { color: var(--mute); font-size: 13px; }
.rchips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-style: normal; font-size: 11px; font-weight: 650; letter-spacing: 0.05em;
  text-transform: uppercase; border-radius: 5px; padding: 3px 8px; white-space: nowrap;
  color: var(--scheduled); background: var(--scheduled-soft);
}
.chip.enacted { color: var(--enacted); background: var(--enacted-soft); }
.chip.announced { color: var(--announced); background: var(--announced-soft); }
.chip.dom { color: var(--mute); background: var(--sunk); border: 1px solid var(--line); }

.rule h3 { margin: 10px 0 0; font-size: 17.5px; line-height: 1.3; color: var(--ink); letter-spacing: -0.012em; }
.rmoney {
  margin: 8px 0 0; font-size: 25px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.rmoney span { font-size: 14px; font-weight: 400; color: var(--mute); letter-spacing: 0; }
.rmoney.unpriced { color: var(--mute); font-size: 19px; }
.rbasis { margin: 6px 0 0; color: var(--body); font-size: 14px; line-height: 1.55; }
.rsum { margin: 10px 0 0; color: var(--body); font-size: 14.5px; }
.rsrc { margin: 12px 0 0; color: var(--mute); font-size: 12.5px; }
.rsrc a { color: var(--body); }
.rule.unpriced h3, .rule.unpriced .rsum { opacity: 0.75; }

.lever {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 9px;
  background: var(--sunk); border: 1px solid var(--line);
}
.lever b {
  display: block; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 4px;
}
.lever p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.55; }

/* ---------------------------------------------------------------- lists */

.card.bad { border-color: var(--bad); }
.list { margin: 0; padding-left: 20px; color: var(--body); font-size: 14px; }
.list li { margin: 8px 0; }
.list b { color: var(--ink); }

.foot {
  margin-top: 26px; padding: 16px 0 0;
  border-top: 1px solid var(--line); color: var(--mute); font-size: 13px;
}
.foot a { color: var(--body); }