/* OpenKWh Plan Explorer
   Direction: quiet product UI on warm cream. One typeface (Plus Jakarta Sans), near-black ink, hairline rules,
   one blue accent reserved for links, focus, selection and progress. No decorative shadows or textures:
   surfaces separate by a hairline, not by a brighter fill. Time-of-use colors stay semantic (hot on-peak → deep night).
   Fonts are self-hosted (SIL OFL) because the CSP allows font-src 'self' only. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif: var(--sans);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --paper: #f7f5ef;
  --paper-2: #efece3;
  --card: #fbfaf6;
  --ink: #15171a;
  --ink-2: #4a4d52;
  --ink-3: #6f716c;
  --rule: #e2ded3;
  --rule-strong: #cfcabd;
  --accent: #2451c7;
  --accent-ink: #1e44a8;
  --accent-wash: #e9eefa;
  --link: #2451c7;
  --focus: #2451c7;
  --ok: #24704a;
  --ok-wash: #e3f0e7;
  --warn: #8a5300;
  --warn-wash: #f7ecd8;
  --bad: #b3261e;
  --bad-wash: #f8e4e1;
  --code-bg: #16181b;
  --code-ink: #e9e7e1;
  --shadow: 0 1px 2px rgba(21, 23, 26, .04);
  --shadow-soft: 0 12px 32px -12px rgba(21, 23, 26, .18), 0 2px 6px rgba(21, 23, 26, .05);

  --tou-on: #d0532b;
  --tou-mid: #e0a43c;
  --tou-off: #4b8b7c;
  --tou-super: #2c4c84;
  --tou-critical: #962a58;
  --tou-other: #858a92;
  --tou-on-ink: #fff;
  --tou-mid-ink: #1d1407;
  --tou-off-ink: #fff;
  --tou-super-ink: #fff;
  --tou-critical-ink: #fff;
  --tou-other-ink: #fff;

  --season-summer: #e3aa45;
  --season-winter: #6a88ad;
  --season-shoulder: #92ab80;
  --season-s0: #c98b63;
  --season-s1: #6f9a9e;
  --season-s2: #a48db3;
  --season-s3: #b5a466;

  --st-captured: #24704a;
  --st-partial: #b8730a;
  --st-derived: #2451c7;
  --st-pipe: #6b6f78;
  --st-nil: #a39a88;
  --st-na: #bdb6a6;
  --st-unknown: #b3261e;

  --radius: 8px;
  --radius-lg: 12px;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1160px;
  color-scheme: light;
}

/* Dark palette: follows the system unless the visitor picked light with the masthead toggle, and applies
   whenever they picked dark. theme-init.js sets <html data-theme> from the saved choice before paint. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121311;
    --paper-2: #1a1c19;
    --card: #171916;
    --ink: #ecebe5;
    --ink-2: #b9bab3;
    --ink-3: #8f918a;
    --rule: #2a2d29;
    --rule-strong: #3a3e39;
    --accent: #7ea2f5;
    --accent-ink: #9db8f8;
    --accent-wash: #1b2337;
    --link: #8fb0f7;
    --focus: #8fb0f7;
    --ok: #7fcb9c;
    --ok-wash: #15281c;
    --warn: #e9b465;
    --warn-wash: #2c2312;
    --bad: #f0978b;
    --bad-wash: #321a17;
    --code-bg: #0c0d0c;
    --code-ink: #e9e7e1;
    --shadow: none;
    --shadow-soft: 0 16px 40px -14px rgba(0, 0, 0, .7);

    --tou-on: #e0663a;
    --tou-mid: #e9b04a;
    --tou-off: #5aa18f;
    --tou-super: #4a6fae;
    --tou-critical: #b8407a;
    --tou-other: #8e939c;

    --st-captured: #7fcb9c;
    --st-partial: #e9b465;
    --st-derived: #8fb0f7;
    --st-pipe: #a6abb5;
    --st-nil: #9e9785;
    --st-na: #5f5b52;
    --st-unknown: #f0978b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121311;
  --paper-2: #1a1c19;
  --card: #171916;
  --ink: #ecebe5;
  --ink-2: #b9bab3;
  --ink-3: #8f918a;
  --rule: #2a2d29;
  --rule-strong: #3a3e39;
  --accent: #7ea2f5;
  --accent-ink: #9db8f8;
  --accent-wash: #1b2337;
  --link: #8fb0f7;
  --focus: #8fb0f7;
  --ok: #7fcb9c;
  --ok-wash: #15281c;
  --warn: #e9b465;
  --warn-wash: #2c2312;
  --bad: #f0978b;
  --bad-wash: #321a17;
  --code-bg: #0c0d0c;
  --code-ink: #e9e7e1;
  --shadow: none;
  --shadow-soft: 0 16px 40px -14px rgba(0, 0, 0, .7);

  --tou-on: #e0663a;
  --tou-mid: #e9b04a;
  --tou-off: #5aa18f;
  --tou-super: #4a6fae;
  --tou-critical: #b8407a;
  --tou-other: #8e939c;

  --st-captured: #7fcb9c;
  --st-partial: #e9b465;
  --st-derived: #8fb0f7;
  --st-pipe: #a6abb5;
  --st-nil: #9e9785;
  --st-na: #5f5b52;
  --st-unknown: #f0978b;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 .97rem/1.6 var(--sans);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; outline: none; }
h1, h2, h3 { font-family: var(--sans); font-weight: 650; line-height: 1.15; letter-spacing: -.022em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h3 { font-size: 1.02rem; letter-spacing: -.01em; margin: 1.4rem 0 .5rem; }
p { margin: 0 0 .75rem; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
code, kbd, pre, .mono { font-family: var(--mono); font-size: .86em; }
abbr[title] { text-decoration: none; }
q { quotes: "“" "”" "‘" "’"; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.offscreen { position: fixed; left: -9999px; top: 0; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--page { padding-top: clamp(24px, 4vw, 40px); padding-bottom: 72px; }

.kicker {
  font: 600 .78rem/1.3 var(--sans); letter-spacing: .01em;
  color: var(--ink-3); margin: 0 0 .5rem;
}
.fine { font-size: .84rem; color: var(--ink-3); }
.plain { color: var(--ink-2); }
.nil { color: var(--ink-3); font-style: italic; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.count { font-size: .84rem; color: var(--ink-3); margin: .25rem 0 .75rem; }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ masthead */

.masthead {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
}
.masthead__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand__mark { width: 22px; height: 22px; flex: none; color: var(--ink); }
.brand__bolt { fill: var(--paper); }
.brand__word { font: 700 1.04rem/1 var(--sans); letter-spacing: -.025em; }
.brand__sub {
  font: 500 .86rem/1 var(--sans); color: var(--ink-3);
  border-left: 1px solid var(--rule-strong); padding-left: 10px;
}
.topnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topnav a {
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .92rem; white-space: nowrap;
  padding: .4rem .75rem; border-radius: var(--radius);
  transition: color .15s ease, background .15s ease;
}
.topnav a:hover { color: var(--ink); background: var(--paper-2); }
.topnav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--paper-2); }

/* Jump bar (API pages only) opens the ⌘K palette; it sits centred between the brand and the nav. */
.kbar {
  flex: 1; max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 7px 0 12px; border: 1px solid var(--rule-strong); border-radius: 10px;
  background: var(--card); color: var(--ink-3); font: 500 .88rem/1 var(--sans); cursor: pointer; min-width: 0;
  transition: border-color .15s ease;
}
.kbar:hover { border-color: var(--ink-3); }
.kbar svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.kbar__text { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbar kbd, .pal kbd {
  font: 500 .72rem/1 var(--mono); color: var(--ink-3); padding: 4px 6px; border-radius: 5px;
  border: 1px solid var(--rule-strong); background: var(--paper-2);
}
.kbar:not([hidden]) + .topnav { margin-left: 0; }

.theme-btn {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--card); color: var(--ink-2);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.theme-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn__moon { display: none; }
:root[data-theme="dark"] .theme-btn__sun { display: none; }
:root[data-theme="dark"] .theme-btn__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn__sun { display: none; }
  :root:not([data-theme="light"]) .theme-btn__moon { display: block; }
}

/* ⌘K palette: a modal <dialog>; its ::backdrop dims the page. */
.pal {
  width: min(620px, calc(100% - 32px)); max-height: none; margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--rule-strong); border-radius: 14px; background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-soft); overflow: hidden;
}
.pal::backdrop { background: rgba(15, 16, 14, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pal__in { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--rule); }
.pal__icon { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.pal__input {
  flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; color: var(--ink);
  font: 400 1rem/1 var(--sans); outline: none;
}
.pal__list { max-height: min(52vh, 460px); overflow: auto; padding: 6px; overscroll-behavior: contain; }
.pal__glabel {
  padding: 10px 10px 4px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.pal__item {
  display: flex; align-items: baseline; gap: 12px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: .9rem;
}
.pal__item[aria-selected="true"] { background: var(--accent-wash); }
.pal__title { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pal__title code { font: 500 .82rem/1.3 var(--mono); }
.pal__detail { flex: 1; min-width: 0; font-size: .8rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.pal__detail--mono { font-family: var(--mono); font-size: .76rem; }
.pal__foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--rule); font-size: .76rem; color: var(--ink-3); }
.pal__empty { padding: 24px; margin: 0; text-align: center; color: var(--ink-3); font-size: .9rem; }

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

.hero {
  /* clip only sideways: the search suggestion list must be able to drop below the hero */
  position: relative; overflow-x: clip;
  border-bottom: 1px solid var(--rule);
}
.hero__inner {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(36px, 5vw, 56px);
}
.hero__title {
  font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.1;
  max-width: 22ch; margin-bottom: .9rem; outline: none;
}
.hero__lede { font-size: clamp(1rem, 1.4vw, 1.08rem); color: var(--ink-2); max-width: 56ch; margin-bottom: 2.25rem; line-height: 1.55; }

/* ------------------------------------------------------------------ search / combobox */

.search { position: relative; max-width: 680px; }
.search__label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: .5rem; color: var(--ink-2); }
.search__field {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg);
  padding: 6px 6px 6px 16px; box-shadow: var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search__field:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--rule-strong)); }
.search__field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.search__glyph {
  width: 15px; height: 15px; flex: none; border: 2px solid var(--ink-3); border-radius: 50%; position: relative; margin-right: 4px;
}
.search__glyph::after {
  content: ""; position: absolute; width: 6px; height: 2px; background: var(--ink-3); right: -5px; bottom: -2px; transform: rotate(45deg); border-radius: 2px;
}
.search__input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: 1rem; padding: .6rem .25rem;
}
.search__input::placeholder { color: var(--ink-3); opacity: 1; }
.search__input::-webkit-search-cancel-button { cursor: pointer; }
.search__spinner {
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--accent);
  opacity: 0; flex: none;
}
.search.is-loading .search__spinner { opacity: 1; animation: spin .7s linear infinite; }
.search__go {
  flex: none; border: 0; border-radius: var(--radius); background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: .9rem; padding: .62rem 1.1rem; cursor: pointer; transition: background .15s ease;
}
.search__go:hover { background: color-mix(in srgb, var(--ink) 82%, var(--paper)); }
.search__hint { font-size: .78rem; color: var(--ink-3); margin: .6rem 0 0; }
.search__list {
  position: absolute; left: 0; right: 0; top: auto; z-index: 20;
  list-style: none; margin: 6px 0 0; padding: 6px;
  background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  max-height: min(60vh, 440px); overflow: auto;
}
.search__group {
  font: 600 .72rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  padding: .8rem .7rem .4rem;
}
.search__opt {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline;
  padding: .55rem .7rem; border-radius: var(--radius); cursor: pointer;
}
.search__opt[aria-selected="true"] { background: var(--accent-wash); }
.search__kind {
  grid-row: span 2; align-self: center;
  font: 600 .66rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  background: var(--paper-2); border-radius: 999px; padding: .32rem .5rem; color: var(--ink-2); min-width: 64px; text-align: center;
}
.search__opt[data-kind="plan"] .search__kind { background: var(--accent-wash); color: var(--accent-ink); }
.search__main { font-weight: 600; }
.search__sub { font-size: .8rem; color: var(--ink-3); }
.search__empty { padding: .9rem .7rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ coverage stats */

.odo-wrap { margin-top: clamp(36px, 6vw, 56px); }
.odo {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 20px 0;
  border-top: 1px solid var(--rule);
}
.odo__stat, .odo__progress { display: flex; flex-direction: column; gap: 4px; padding: 1.1rem 1.5rem 0; border-left: 1px solid var(--rule); }
.odo__stat:first-child { padding-left: 0; border-left: 0; }
.odo__num {
  font: 600 clamp(1.4rem, 2.4vw, 1.7rem)/1.15 var(--sans); letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.odo__of { font-weight: 500; font-size: .62em; letter-spacing: 0; color: var(--ink-3); }
.odo__label { font-size: .84rem; color: var(--ink-3); max-width: 24ch; line-height: 1.35; }
.odo__progress { min-width: 0; justify-content: flex-start; gap: 8px; }
.odo__progress .meter { width: 100%; }

/* ------------------------------------------------------------------ meter */

.meter { display: inline-flex; align-items: center; gap: 10px; min-width: 120px; }
.meter__track {
  flex: 1; min-width: 60px; height: 6px; border-radius: 99px; background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden;
}
.meter__fill {
  width: var(--p, 0%); height: 100%; border-radius: 99px; background: var(--accent);
  transition: width .6s cubic-bezier(.16, 1, .3, 1);
}
.meter--full .meter__fill { background: var(--ink); }
.meter__text { font: 500 .76rem/1 var(--sans); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ browse + provider list */

.browse { padding: clamp(32px, 5vw, 52px) 0 clamp(48px, 7vw, 72px); }
.browse__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 1.1rem; }
.browse__head .fine { margin: 0; }
.browse__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 12px; }
.browse__form .field { flex: 1 1 220px; max-width: 320px; }

.states { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.statechip {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: .5rem .7rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--card); color: var(--ink); text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.statechip:hover { border-color: var(--rule-strong); background: var(--paper-2); }
.statechip__code { font: 600 .84rem/1 var(--mono); letter-spacing: .02em; }
.statechip__n { font: 500 .78rem/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: .82rem; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.field__name { font-size: .74rem; color: var(--ink-3); font-weight: 400; font-family: var(--mono); }
.field__help { font-size: .76rem; color: var(--ink-3); }
.select, .input {
  width: 100%; background: var(--card); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: .55rem .75rem; min-height: 42px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select:hover, .input:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--rule-strong)); }
.select:focus-visible, .input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.select:disabled { opacity: .6; }
.input--area { min-height: 64px; resize: vertical; font-family: var(--mono); font-size: .84rem; }

.results { padding: 32px 0 72px; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 1rem; }
.section-head .fine { margin: .35rem 0 0; }

.plist {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--card); overflow: hidden;
}
.prow + .prow { border-top: 1px solid var(--rule); }
.prow__link {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto 180px; gap: 6px 24px; align-items: center;
  padding: .95rem 1.25rem; color: var(--ink); text-decoration: none;
  transition: background .12s ease;
}
.prow__link:hover { background: color-mix(in srgb, var(--paper-2) 60%, var(--card)); }
.prow__link:focus-visible { outline-offset: -2px; border-radius: 0; }
.prow__rank { font: 500 .84rem/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.prow__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prow__name { font: 600 .98rem/1.3 var(--sans); letter-spacing: -.01em; }
.prow__link:hover .prow__name { color: var(--accent-ink); }
.prow__meta { font-size: .8rem; color: var(--ink-3); white-space: pre-wrap; }
.prow__plans { font-size: .84rem; color: var(--ink-3); white-space: nowrap; text-align: right; }
.prow__plans b { font: 650 .98rem/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.prow__plans.is-none { font-style: italic; }
.prow__docs .meter { width: 100%; }
.more { margin-top: 1.2rem; }

/* ------------------------------------------------------------------ buttons, chips */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: .5rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: .88rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: color-mix(in srgb, var(--ink) 82%, var(--paper)); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn--ghost { background: var(--card); color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--paper-2); border-color: color-mix(in srgb, var(--ink) 30%, var(--rule-strong)); }
.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-ink); }
.btn--small { min-height: 30px; padding: .25rem .65rem; font-size: .78rem; }
.btn--chip { background: var(--card); color: var(--ink-2); border-color: var(--rule); font-weight: 500; border-radius: 999px; }
.btn--chip:hover { background: var(--paper-2); color: var(--ink); border-color: var(--rule-strong); }
.btn--copy[data-copied="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn--pdf { background: var(--card); color: var(--ink); border-color: var(--rule-strong); }
.btn--pdf:hover { background: var(--paper-2); }
.btn--pdf::before {
  content: "PDF"; font: 700 .58rem/1 var(--sans); letter-spacing: .05em; padding: .24rem .32rem; border-radius: 4px;
  background: var(--bad-wash); color: var(--bad);
}
.is-disabled { opacity: .55; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 500; line-height: 1; padding: .34rem .6rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); white-space: nowrap;
}
/* Rate-structure chips stay neutral; a small dot carries the category color. */
.chip--tou, .chip--tier, .chip--demand { color: var(--ink-2); }
.chip--tou::before, .chip--tier::before, .chip--demand::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); flex: none; }
.chip--tou { --dot: var(--tou-on); }
.chip--tier { --dot: var(--tou-super); }
.chip--demand { --dot: var(--tou-critical); }
.chip--role { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip--warn { background: var(--warn-wash); color: var(--warn); border-color: transparent; }
.chip--ok { background: var(--ok-wash); color: var(--ok); border-color: transparent; }
.chip--nil { color: var(--ink-3); font-style: italic; }
.chip--season { border-style: solid; }
.chip--period { background: var(--paper-2); border-color: transparent; }
/* Free-text chips (revision strings) may be long: render as a fine-print line under the chips, not a boxed paragraph. */
.chip--long {
  white-space: normal; overflow-wrap: anywhere; line-height: 1.45; max-width: 100%; text-align: left;
  flex-basis: 100%; border: 0; background: none; padding: .2rem 0 0; border-radius: 0; font-size: .76rem; color: var(--ink-3);
}
.chip--state {
  font: 600 .72rem/1 var(--mono); letter-spacing: .04em; text-decoration: none; cursor: help;
  background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); border-radius: 5px;
}

.status { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 500; white-space: nowrap; color: var(--ink-2); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--st-nil)); flex: none; }
.status--ok { --dot: var(--st-captured); }
.status--warn { --dot: var(--st-partial); }
.status--derived { --dot: var(--st-derived); }
.status--pipe { --dot: var(--st-pipe); }
.status--pipe .status__dot { border-radius: 2px; }
.status--nil { --dot: var(--st-nil); }
.status--nil .status__dot { background: transparent; border: 1.5px solid var(--st-nil); }
.status--na { --dot: var(--st-na); }
.status--na .status__dot { background: transparent; border: 1.5px dashed var(--st-na); }
.status--unknown { --dot: var(--st-unknown); }
.status--unknown .status__dot { border-radius: 1px; transform: rotate(45deg); }

.pill { font: 600 .76rem/1 var(--sans); padding: .38rem .6rem; border-radius: 999px; }
.pill--ok { background: var(--ok-wash); color: var(--ok); }
.pill--err { background: var(--bad-wash); color: var(--bad); }

/* ------------------------------------------------------------------ states */

.boot { padding: 80px var(--gutter); text-align: center; color: var(--ink-3); }
.skeleton { display: grid; gap: 12px; padding: 8px 0; }
.skeleton__line {
  height: 14px; border-radius: 6px; width: calc(100% - var(--i, 0) * 14%);
  background: linear-gradient(90deg, var(--paper-2) 0 40%, color-mix(in srgb, var(--paper-2) 40%, var(--card)) 50%, var(--paper-2) 60% 100%);
  background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton__line:first-child { height: 22px; width: 46%; }
.empty {
  border: 1px dashed var(--rule-strong); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; background: var(--card);
}
.empty__title { font: 600 1.02rem/1.3 var(--sans); margin-bottom: .35rem; }
.empty__body { color: var(--ink-2); margin: 0; }
.problem {
  border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.5rem; background: var(--card); max-width: 640px;
}
.problem__code { font: 600 .76rem/1 var(--mono); color: var(--bad); margin-bottom: .6rem; }
.problem__title { font: 650 1.35rem/1.25 var(--sans); letter-spacing: -.02em; margin-bottom: .5rem; outline: none; }
.problem__body { color: var(--ink-2); }
.problem__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }
.notice { padding: 2rem var(--gutter); }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 16px);
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: var(--radius); font-weight: 500; font-size: .86rem;
  box-shadow: var(--shadow-soft);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ provider page */

.crumbs { font-size: .82rem; color: var(--ink-3); margin-bottom: 1.1rem; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.phead { padding-bottom: 2rem; border-bottom: 1px solid var(--rule); margin-bottom: 2.2rem; }
.phead__row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px 56px; align-items: start; }
.phead__title { font-size: clamp(1.9rem, 4.2vw, 2.75rem); font-weight: 700; letter-spacing: -.035em; margin: .35rem 0 1.4rem; outline: none; }
.stamp {
  display: inline-block; font: 600 .74rem/1 var(--sans);
  background: var(--paper-2); color: var(--ink-2); padding: .38rem .6rem; border-radius: 999px;
  margin: 0;
}
.pfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 16px 24px; margin: 0; }
.pfacts__item { border-top: 1px solid var(--rule); padding-top: .65rem; min-width: 0; }
.pfacts dt { font-size: .76rem; color: var(--ink-3); font-weight: 500; margin-bottom: 3px; }
.pfacts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.state {
  display: inline-block; font: 600 .74rem/1 var(--mono); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 5px; padding: .26rem .38rem; margin: 0 4px 4px 0;
}
.phead__coverage {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.25rem 1.3rem;
}
.phead__coverage .meter { width: 100%; margin: .5rem 0 .4rem; }
.phead__coverage .fine { margin: 0; }
.big { font: 500 .9rem/1.3 var(--sans); color: var(--ink-3); margin: 0 0 .2rem; }
.big b { font: 700 2.25rem/1 var(--sans); letter-spacing: -.04em; color: var(--ink); display: block; margin-bottom: .3rem; font-variant-numeric: tabular-nums; }
.territory { margin-top: 1.4rem; }
.territory summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.territory__state h3 { font-size: .9rem; margin: .9rem 0 .2rem; }
.territory__list { font-size: .84rem; color: var(--ink-2); margin: 0; }

.block { margin: 0 0 clamp(40px, 6vw, 60px); scroll-margin-top: 80px; }
.block h2 { outline: none; }

.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 16px; }
.cards--dense { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.sheet {
  position: relative; display: flex; flex-direction: column; gap: .75rem; height: 100%;
  padding: 1.15rem 1.2rem 1.05rem; background: var(--card); color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  transition: border-color .15s ease, background .15s ease;
}
.sheet:hover { border-color: var(--rule-strong); background: color-mix(in srgb, var(--paper-2) 35%, var(--card)); }
.sheet__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sheet__code {
  font: 600 .78rem/1 var(--mono); letter-spacing: .02em; padding: .34rem .5rem; background: var(--paper-2); border-radius: 5px;
  max-width: 100%; overflow-wrap: anywhere;
}
.sheet__eff { font-size: .76rem; color: var(--ink-3); }
.sheet__eff.is-nil { font-style: italic; }
.sheet__name { font: 600 1rem/1.3 var(--sans); letter-spacing: -.012em; }
/* In a multi-column grid, reserve two title lines so price rows line up across a row of cards. */
@media (min-width: 640px) { .cards .sheet__name { min-height: 2.6em; } }
.sheet:hover .sheet__name { color: var(--accent-ink); }
.sheet__prices { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.sheet__price { display: flex; flex-direction: column; gap: 3px; padding: .7rem 0 0; }
.sheet__price + .sheet__price { border-left: 1px solid var(--rule); padding-left: .9rem; }
.sheet__plabel { font-size: .74rem; color: var(--ink-3); font-weight: 500; }
.sheet__pval { font: 600 .94rem/1.3 var(--sans); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sheet__pval.nil { font: italic 400 .88rem/1.25 var(--sans); }
.sheet__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet__honest { margin-top: auto; font-size: .76rem; color: var(--ink-3); display: flex; gap: 7px; align-items: baseline; }
.sheet__honest::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st-partial); flex: none; transform: translateY(-1px); }
.sheet__honest.is-ready::before { background: var(--ok); }

.switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: .88rem; cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 38px; height: 22px; margin: 0; cursor: pointer; }
.switch__ui { width: 38px; height: 22px; border-radius: 99px; background: var(--rule-strong); position: relative; transition: background .15s ease; }
.switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .18s ease; }
.switch input:checked + .switch__ui { background: var(--accent); }
.switch input:checked + .switch__ui::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__ui { outline: 2px solid var(--focus); outline-offset: 2px; }
.others { margin-top: 1.2rem; }
.others__title { font-size: .98rem; margin: 1.6rem 0 .8rem; }
.others__title:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ tables */

.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--card); }
.table-wrap--tall { max-height: 560px; overflow-y: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table caption {
  text-align: left; padding: .9rem 1rem .8rem; font: 600 .98rem/1.2 var(--sans); letter-spacing: -.01em; border-bottom: 1px solid var(--rule);
}
.caption__n { font: 500 .78rem/1 var(--sans); color: var(--ink-3); margin-left: 4px; }
.table th, .table td { padding: .7rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.table thead th {
  font-size: .74rem; color: var(--ink-3); font-weight: 500; letter-spacing: 0;
  background: var(--card); position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--rule);
}
.table tbody th { font-weight: 600; }
/* Rate groups render one tbody each, so only the table's final row drops its rule. */
.table tbody:last-child tr:last-child > * { border-bottom: 0; }
.table .num { text-align: right; }
.table code { font-size: .8rem; overflow-wrap: anywhere; }
.doc__title { display: block; font-weight: 600; }
.doc__label { display: block; font-size: .8rem; color: var(--ink-2); }
.doc__id { display: block; font: 500 .72rem/1.4 var(--mono); color: var(--ink-3); }
.doc__id:empty { display: none; }
.table--docs .doc__eff { min-width: 8.5rem; }
.table--docs td:first-child { min-width: 15rem; }
.table--docs .nil, .table--docs thead th { white-space: nowrap; }
.table--docs .meter + .fine { display: block; margin-top: 4px; }
.table td .chip--state + .chip--state { margin-left: 4px; }

/* Rate groups: a printed group name heads its ordered lines (group → price bands). */
.table .rgroup th {
  font: 600 .86rem/1.3 var(--sans); padding-top: .75rem; padding-bottom: .55rem;
  background: color-mix(in srgb, var(--paper-2) 55%, var(--card));
}
.rgroup__n { font: 500 .76rem/1 var(--sans); color: var(--ink-3); }
.table tr.is-grouped > th:first-child { padding-left: 2rem; position: relative; }
.table tr.is-grouped > th:first-child::before {
  content: ""; position: absolute; left: 1.05rem; top: .7rem; bottom: .7rem; border-left: 2px solid var(--rule-strong); border-radius: 2px;
}

/* ------------------------------------------------------------------ plan page */

.plhead { margin-bottom: 1.6rem; }
.plhead__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 20px; align-items: start; }
.plhead__code {
  font: 600 clamp(.95rem, 1.6vw, 1.1rem)/1 var(--mono); letter-spacing: .02em;
  background: var(--paper-2); border: 1px solid var(--rule); padding: .7rem .8rem; border-radius: var(--radius);
  max-width: 11ch; overflow-wrap: anywhere; text-align: center; margin-top: .3rem;
}
.plhead__title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -.035em; outline: none; }
.plhead__provider { margin: .45rem 0 .9rem; color: var(--ink-3); }
.plhead__provider a { font-weight: 600; color: var(--ink); }
.plhead__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.plhead__printed { display: block; margin-top: .3rem; font-size: .84rem; color: var(--ink-3); }
.banners { display: grid; gap: 10px; margin-top: 1.5rem; }
.banner {
  border: 1px solid var(--rule); background: var(--card); border-radius: var(--radius-lg); padding: .9rem 1.1rem .9rem 2.4rem; position: relative;
}
.banner::before {
  content: "i"; position: absolute; left: .95rem; top: 1.02rem; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-ink); font: 700 .66rem/16px var(--sans); text-align: center;
}
.banner p { margin: 0; color: var(--ink-2); font-size: .9rem; }
.banner__title { font-weight: 600; color: var(--ink) !important; margin-bottom: .15rem !important; }
.banner--warn { background: color-mix(in srgb, var(--warn-wash) 55%, var(--card)); border-color: color-mix(in srgb, var(--warn) 22%, var(--rule)); }
.banner--warn::before { content: "!"; background: var(--warn-wash); color: var(--warn); }
.banner__more { margin-top: .5rem; font-size: .86rem; }
.banner__more summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.banner__more ul { margin: .4rem 0 0; padding-left: 1.2rem; color: var(--ink-2); }

.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--rule); margin: 1.6rem 0 1.8rem; overflow-x: auto; }
.tab {
  border: 0; background: none; padding: .75rem 0 .7rem; font-weight: 500; font-size: .92rem; color: var(--ink-3); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.tabpanel { outline: none; }
.tabpanel:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

.ratecard {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--card); overflow: hidden;
  margin-bottom: clamp(32px, 5vw, 48px);
}
.tile { padding: 1.15rem 1.3rem 1.05rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: -1px -1px 0 0; }
.tile__label { font-size: .78rem; font-weight: 500; color: var(--ink-3); margin-bottom: .45rem; }
.tile__value { font: 650 clamp(1.15rem, 1.8vw, 1.32rem)/1.2 var(--sans); letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin-bottom: .35rem; overflow-wrap: anywhere; }
.tile__value.nil { font: italic 400 1.02rem/1.2 var(--sans); color: var(--ink-3); letter-spacing: 0; }
.tile__sub { font-size: .78rem; color: var(--ink-3); margin: 0; display: block; }
q.tile__sub { font-size: .86rem; color: var(--ink-2); }

.plan__grid { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 48px; align-items: start; }
.plan__rail { position: sticky; top: 84px; display: grid; gap: 20px; }
.toc .kicker { margin-bottom: .6rem; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc li a { display: block; padding: .28rem .9rem; color: var(--ink-3); text-decoration: none; font-size: .86rem; margin-left: -1px; border-left: 1px solid transparent; }
.toc li a:hover { color: var(--ink); border-left-color: var(--ink); }
.source { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.15rem 1.2rem; }
.source__title { font: 600 .95rem/1.35 var(--sans); letter-spacing: -.01em; }
.source__facts { display: grid; gap: 8px; margin: 0 0 1rem; font-size: .82rem; }
.source__facts div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
.source__facts dt { color: var(--ink-3); }
.source__facts dd { margin: 0; overflow-wrap: anywhere; }
.source__meter { display: grid; gap: 6px; margin-bottom: 1rem; }
.source__meter .meter { width: 100%; }
.source .btn { width: 100%; }

.charges { display: grid; gap: 20px; }
.table--charges th[scope="row"] { min-width: 220px; }
.charge__name { display: block; }
.charge__freq { font-weight: 400; font-size: .8rem; color: var(--ink-3); }
.charge__cond { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-3); margin-top: .3rem; max-width: 52ch; line-height: 1.5; }
.cprice b { font: 600 .94rem/1.2 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cprice__credit { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ok); font-weight: 600; margin-right: 4px; }
.cprice__printed { font-family: var(--mono); font-size: .84rem; }
.when { display: flex; flex-wrap: wrap; gap: 4px; }
.src__pages { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* time-of-use strip */
.timing { display: grid; gap: 8px; }
.timing h3 { margin-top: .4rem; }
.tou { display: grid; gap: 20px; }
.tou-group { margin: 0; padding: 1.1rem 1.2rem 1.15rem; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--card); }
.tou-group__title { font: 600 .98rem/1.2 var(--sans); display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; }
.tou-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 14px; align-items: start; margin-bottom: 14px; }
.tou-row__label { font-size: .8rem; font-weight: 500; color: var(--ink-2); padding-top: 9px; }
.tou-row__track { min-width: 0; }
.tou-bar { display: flex; height: 36px; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.tou-seg {
  flex: 0 0 var(--w); min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--card) 70%, transparent);
  background: var(--seg); color: var(--seg-ink, #fff);
}
.tou-seg:last-child { box-shadow: none; }
.tou-seg__label { font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.tou--on { --seg: var(--tou-on); --seg-ink: var(--tou-on-ink); }
.tou--mid { --seg: var(--tou-mid); --seg-ink: var(--tou-mid-ink); }
.tou--off { --seg: var(--tou-off); --seg-ink: var(--tou-off-ink); }
.tou--super { --seg: var(--tou-super); --seg-ink: var(--tou-super-ink); }
.tou--critical { --seg: var(--tou-critical); --seg-ink: var(--tou-critical-ink); }
.tou--other { --seg: var(--tou-other); --seg-ink: var(--tou-other-ink); }
.tou--gap { --seg: repeating-linear-gradient(135deg, var(--paper-2) 0 5px, var(--rule) 5px 6px); }
.tou-seg.tou--gap { background: repeating-linear-gradient(135deg, var(--paper-2) 0 5px, var(--rule) 5px 6px); }
.tou-axis { position: relative; height: 18px; margin-top: 3px; }
.tou-axis__tick { position: absolute; left: var(--x); transform: translateX(-50%); font: 500 .66rem/1 var(--sans); color: var(--ink-3); padding-top: 6px; font-variant-numeric: tabular-nums; }
.tou-axis__tick::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 4px; background: var(--rule-strong); }
.tou-axis__tick:first-child { transform: none; }
.tou-axis__tick:first-child::before { left: 0; }
.tou-axis__tick:last-child { transform: translateX(-100%); }
.tou-axis__tick:last-child::before { left: auto; right: 0; }
.tou-row__note { grid-column: 2; font-size: .78rem; color: var(--warn); margin: 0; }
.tou-legend { list-style: none; margin: .4rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--rule); display: grid; gap: 7px; }
.tou-legend__item { display: grid; grid-template-columns: 16px auto auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; font-size: .86rem; }
.swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--seg); transform: translateY(1px); }
.tou-legend__name { font-weight: 600; }
.tou-legend__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.tou-legend__meta { color: var(--ink-3); font-size: .8rem; }

/* season calendar */
.season-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--season, var(--ink-3)); display: inline-block; flex: none; }
.season--summer { --season: var(--season-summer); }
.season--winter { --season: var(--season-winter); }
.season--shoulder { --season: var(--season-shoulder); }
.season--s0 { --season: var(--season-s0); }
.season--s1 { --season: var(--season-s1); }
.season--s2 { --season: var(--season-s2); }
.season--s3 { --season: var(--season-s3); }
.season--all { --season: var(--ink-3); }
.cal__months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.cal__month { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.cal__name { font: 500 .7rem/1 var(--sans); color: var(--ink-3); text-align: center; }
.cal__fill { display: flex; height: 22px; border-radius: 4px; overflow: hidden; }
.cal__band { flex: 1; background: var(--season); }
.season--none { background: repeating-linear-gradient(135deg, var(--paper-2) 0 4px, var(--rule) 4px 5px); }
.cal__legend { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 6px; font-size: .88rem; }
.cal__legend li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cal__legend .season-dot { transform: translateY(1px); }
.cal__basis { color: var(--ink-3); font-size: .8rem; }
.cal__quote { color: var(--ink-3); font-size: .8rem; flex-basis: 100%; padding-left: 18px; }

.deflist { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.deflist > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 24px; padding: .7rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.deflist dt { font-weight: 500; font-size: .84rem; color: var(--ink-3); }
.deflist dd { margin: 0; color: var(--ink); font-size: .92rem; }
.deflist ul { margin: 0; padding-left: 1.1rem; }
.deflist--compact > div { padding: .55rem 0; }
.deflist dd q + .prop__rule { margin-left: .5rem; }
.prop__rule code { font-size: .76rem; background: var(--paper-2); padding: .12rem .4rem; border-radius: 4px; overflow-wrap: anywhere; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.props h3 { margin: 1.6rem 0 .6rem; }

/* Per-state tabs on multi-state providers. */
/* A segmented control: the selected state lifts onto the card surface. */
.stabs { margin: 0 0 1.8rem; }
.stabs__lede { margin: 0 0 .5rem; font-weight: 500; font-size: .78rem; color: var(--ink-3); }
.stabs__opts { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--paper-2); border-radius: var(--radius); max-width: 100%; }
.stabs__opt {
  display: inline-flex; align-items: center; gap: 8px; padding: .4rem .75rem; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-3); font-weight: 500; font-size: .86rem; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.stabs__opt:hover { color: var(--ink); }
.stabs__opt[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 0, 0, .06); }
.stabs__code { font: 600 .72rem/1 var(--mono); letter-spacing: .04em; text-decoration: none; color: var(--ink-3); }
.stabs__n { font: 500 .74rem/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stabs .fine { margin: .75rem 0 0; }

/* One bordered list with hairline dividers rather than a stack of separate cards. */
.riders { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; }
.rider { padding: .7rem 1rem; display: grid; gap: 2px; }
.rider + .rider { border-top: 1px solid var(--rule); }
.rider__name { font-weight: 600; }
.rider__desc { font-size: .84rem; color: var(--ink-2); }
.addons h3:first-child { margin-top: 0; }
.addons > * + * { margin-top: 1.8rem; }

.rules { margin: 0; padding-left: 1.3rem; display: grid; gap: 14px; }
.rules li::marker { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.rules__meaning { font-weight: 600; margin-bottom: .2rem; }

.bullets { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; color: var(--ink-2); }
.issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.issue { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; color: var(--ink-2); }
.caveats h3:first-child { margin-top: 0; }

.evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.evidence__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.evid .evidence__item { border-left: 2px solid var(--rule-strong); padding: .1rem 0 .1rem .95rem; }
.evidence__quote { font-size: .95rem; color: var(--ink); flex: 1 1 280px; }
.evidence__page {
  font: 500 .72rem/1 var(--sans); padding: .3rem .5rem; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; white-space: nowrap;
  color: var(--link); background: var(--card); font-variant-numeric: tabular-nums;
}
a.evidence__page:hover { border-color: var(--link); background: var(--accent-wash); }
.evidence--compact { gap: 6px; }
.evidence--compact .evidence__quote { font-size: .8rem; flex-basis: 140px; color: var(--ink-2); }

/* ------------------------------------------------------------------ attributes tab */

.attrs__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 40px; align-items: start; margin-bottom: 1.8rem; }
.attrs__intro h2 { margin-bottom: .6rem; }
.attrs__intro p { color: var(--ink-2); }
.attrs__api { display: grid; gap: 10px; min-width: 0; }
.attrs__tools { display: flex; align-items: center; gap: 10px; margin: 1rem 0; }
.attrs__tools label { font-weight: 600; font-size: .84rem; }
.attrs__tools .input { max-width: 380px; }

.sbar { display: flex; width: 100%; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.sbar__seg {
  flex: var(--w) 1 auto; min-width: 0; border: 0; border-right: 1px solid var(--rule); padding: .65rem .7rem .55rem; cursor: pointer;
  background: var(--card); color: var(--ink); text-align: left; display: flex; flex-direction: column; gap: 4px; position: relative;
  transition: background .12s ease;
}
.sbar__seg:last-child { border-right: 0; }
.sbar__seg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--dot); }
.sbar__n { font: 650 1rem/1 var(--sans); padding-top: 3px; font-variant-numeric: tabular-nums; }
.sbar__label { font-size: .7rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbar__seg:hover { background: color-mix(in srgb, var(--dot) 7%, var(--card)); }
.sbar__seg[aria-pressed="true"] { background: color-mix(in srgb, var(--dot) 12%, var(--card)); box-shadow: inset 0 -2px 0 var(--ink); }
.sbar--captured { --dot: var(--st-captured); }
.sbar--partial, .sbar--deferred { --dot: var(--st-partial); }
.sbar--derived { --dot: var(--st-derived); }
.sbar--pipeline_assigned { --dot: var(--st-pipe); }
.sbar--not_stated { --dot: var(--st-nil); }
.sbar--not_applicable { --dot: var(--st-na); }
.sbar--unknown { --dot: var(--st-unknown); }

.table--attrs { font-size: .85rem; }
.table--attrs td, .table--attrs th { padding: .6rem .85rem; }
.attr-group th {
  background: color-mix(in srgb, var(--paper-2) 55%, var(--card)); font: 600 .74rem/1.2 var(--mono) !important; letter-spacing: .02em; color: var(--ink) !important;
}
.attr-group__card { font-family: var(--sans); font-weight: 400; color: var(--ink-3); }
.attr__n { color: var(--ink-3); width: 2.5rem; font-variant-numeric: tabular-nums; }
.attr__field { min-width: 210px; max-width: 300px; }
.attr__id { display: block; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.attr__meaning { display: block; font-weight: 400; font-size: .76rem; color: var(--ink-3); margin-top: 3px; }
.attr__value { min-width: 200px; max-width: 360px; overflow-wrap: anywhere; }
.attr__notes { display: block; font-size: .74rem; color: var(--ink-3); margin-top: 4px; }
.attr__status { white-space: nowrap; }
.attr__owner { display: block; font: 500 .7rem/1 var(--mono); color: var(--ink-3); margin-top: 5px; padding-left: 15px; }
.attr__ev { min-width: 180px; max-width: 280px; }
.attr-empty td { text-align: center; color: var(--ink-3); padding: 1.6rem; }
.v-num, .v-bool, .v-obj { font-family: var(--mono); font-size: .82rem; }
.v-bool { color: var(--st-derived); }
.vlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; counter-reset: row -1; }
.vlist li { counter-increment: row; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 4px; }
.vlist li::before { content: "[" counter(row) "]"; font: 500 .68rem/1.7 var(--mono); color: var(--ink-3); }
.vwrap:has(.vmore[open]) > .vlist { display: none; }
.vmore summary { cursor: pointer; font-size: .76rem; font-weight: 600; color: var(--link); margin-top: 4px; list-style: none; }
.vmore summary::-webkit-details-marker { display: none; }
.vmore summary::before { content: "▸ "; }
.vmore[open] summary::before { content: "▾ "; }
.vmore[open] summary { margin: 0 0 6px; }

/* ------------------------------------------------------------------ code */

.codeblock { position: relative; background: var(--code-bg); color: var(--code-ink); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.codeblock__cap {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: .5rem .55rem .5rem 1rem;
  font-size: .74rem; color: color-mix(in srgb, var(--code-ink) 65%, transparent); border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.codeblock__corner { position: absolute; top: 8px; right: 8px; }
.codeblock pre { margin: 0; padding: .9rem 1rem; overflow-x: auto; font-size: .78rem; line-height: 1.6; white-space: pre; }
.codeblock .btn--copy { background: transparent; border-color: rgba(255, 255, 255, .18); color: var(--code-ink); }
.codeblock .btn--copy:hover { background: rgba(255, 255, 255, .08); }

.j-key { color: #9cc0ff; }
.j-str { color: #a8d5b0; }
.j-num { color: #f2c27a; }
.j-bool { color: #f0a08c; }
.j-null { color: #8e8a82; font-style: italic; }

/* ------------------------------------------------------------------ API page */

/* Developer docs: a sticky sidebar of guides and endpoints (js/apispec.js), a reading column,
   and a sticky dark console. Hairlines separate; type stays small and quiet; GET is green, POST blue. */

.docs {
  max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 0 clamp(28px, 3.5vw, 56px);
}
.docs__nav {
  position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; scrollbar-width: thin;
  padding: 28px 18px 48px 0; border-right: 1px solid var(--rule);
}
.docs__group { margin-bottom: 1.35rem; }
.docs__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.docs__glabel { font: 600 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .5rem .6rem; }
.docs__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: .34rem .6rem; border-radius: 6px; font-size: .86rem; line-height: 1.35; color: var(--ink-2); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.docs__link:hover { background: var(--paper-2); color: var(--ink); }
.docs__link[aria-current="page"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.verb { font: 600 .58rem/1 var(--mono); letter-spacing: .03em; padding: .22rem .3rem; border-radius: 4px; color: var(--ok); background: var(--ok-wash); }
.verb--post { color: var(--accent-ink); background: var(--accent-wash); }
.docs__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; order: 2; }
.docs__dot--post { background: var(--accent); }
.docs__dot--none { background: transparent; }
.docs__ltext { min-width: 0; }
.docs__jump { display: none; }

.docs__page { min-width: 0; padding: clamp(24px, 3.5vw, 40px) 0 88px; }
.docs__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(28px, 3.5vw, 56px); align-items: start; }
.docs__main { min-width: 0; max-width: 700px; }
.docs__main--wide { max-width: none; }
.docs__side { position: sticky; top: 88px; min-width: 0; }
.docs__head { margin-bottom: 1.3rem; }
.docs__head h1 { font-size: clamp(1.7rem, 3vw, 2.15rem); font-weight: 700; letter-spacing: -.032em; margin-bottom: .75rem; outline: none; }
.docs__lede { font-size: 1.04rem; line-height: 1.55; color: var(--ink-2); max-width: 60ch; margin: 0; }
.docs__p { color: var(--ink-2); max-width: 64ch; }
.docs__muted { font-size: .86rem; color: var(--ink-3); margin: 0 0 .7rem; }
.docs__note { font-size: .84rem; color: var(--ink-3); margin: 1rem 0 0; max-width: 64ch; }
.docs__sec { margin-top: 2.5rem; }
.docs__h { font-size: 1.05rem; font-weight: 650; letter-spacing: -.012em; margin: 0 0 .8rem; }
.docs__sub { font: 600 .68rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 1.6rem 0 .55rem; }
.docs__h + .docs__sub { margin-top: .2rem; }
.docs__subnote { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .76rem; }
.docs__list { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .92rem; }
.docs__list li + li { margin-top: .35rem; }
.docs__run { justify-self: start; }

.endpoint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: .4rem .45rem .4rem .5rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card);
}
.endpoint__path { flex: 1 1 auto; min-width: 0; font-size: .86rem; color: var(--ink); overflow-wrap: anywhere; }
.endpoint__base { color: var(--ink-3); }
.endpoint__var { color: var(--accent-ink); }
.endpoint .btn--copy:not([data-copied]), .facts .btn--copy:not([data-copied]) { background: transparent; color: var(--ink-2); border-color: var(--rule-strong); }
.endpoint .btn--copy:not([data-copied]):hover, .facts .btn--copy:not([data-copied]):hover { background: var(--paper-2); color: var(--ink); }
.method { font: 600 .68rem/1 var(--mono); letter-spacing: .03em; padding: .32rem .45rem; border-radius: 5px; background: var(--ok-wash); color: var(--ok); white-space: nowrap; }
.method--post { background: var(--accent-wash); color: var(--accent-ink); }

/* Parameter and response-field rows: docs on the left, a compact try-it control on the right. */
.params { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.param {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 228px); gap: 10px 28px; align-items: start;
  padding: .9rem 0; border-bottom: 1px solid var(--rule);
}
.params--fields .param, .param--wide { grid-template-columns: minmax(0, 1fr); }
.param__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.param__name { font: 600 .84rem/1.4 var(--mono); color: var(--ink); }
.param__type { font-size: .76rem; color: var(--ink-3); }
.param__req { font: 600 .64rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--bad); }
.param__req--soft { color: var(--warn); }
.param__desc { font-size: .87rem; line-height: 1.55; color: var(--ink-2); margin: .3rem 0 0; }
.param__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .76rem; color: var(--ink-3); margin: .45rem 0 0; }
.param__meta > span { min-width: 0; }
.param__meta code { display: inline-block; font-size: .72rem; padding: .1rem .32rem; border-radius: 4px; background: var(--paper-2); color: var(--ink-2); margin: 2px 0 2px 3px; }
.param__ctl { min-width: 0; }
.param__input { min-height: 34px; padding: .3rem .6rem; font: 400 .8rem/1.4 var(--mono); }
.param--wide .param__ctl { max-width: 460px; }
.param__fields { display: grid; gap: 8px; }
.param__fields > .select { max-width: 240px; }

.tryit { display: grid; gap: 14px; min-width: 0; }
.reqbox, .resbox { background: var(--code-bg); color: var(--code-ink); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.reqbox__cap, .resbox__cap {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: .45rem .55rem .45rem 1rem;
  font-size: .74rem; color: color-mix(in srgb, var(--code-ink) 62%, transparent); border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.reqbox__label { font-weight: 600; font-size: .78rem; color: var(--code-ink); }
.reqbox pre, .resbox pre { margin: 0; padding: .9rem 1rem; overflow: auto; font-size: .76rem; line-height: 1.6; white-space: pre; }
.reqbox pre { max-height: 300px; }
.resbox pre { max-height: min(520px, calc(100vh - 420px)); min-height: 140px; }
.reqbox__foot { display: flex; align-items: center; gap: 8px; padding: .5rem .55rem .5rem 1rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.reqbox__hint { flex: 1; min-width: 0; margin: 0; font-size: .74rem; line-height: 1.4; color: #f2c27a; }
.reqbox .method { background: rgba(255, 255, 255, .08); color: var(--code-ink); }
.reqbox .btn--copy:not([data-copied]), .resbox .btn--copy:not([data-copied]), .reqbox__reset {
  background: transparent; border-color: rgba(255, 255, 255, .18); color: var(--code-ink);
}
.reqbox .btn--copy:not([data-copied]):hover, .resbox .btn--copy:not([data-copied]):hover, .reqbox__reset:hover { background: rgba(255, 255, 255, .08); }
.resbox__code { font: 600 .72rem/1 var(--mono); color: #a8d5b0; }
.resbox__meta { font-size: .74rem; }
.resbox__body .problem { margin: 12px; }
.reqbox .seg--dark { background: rgba(255, 255, 255, .07); }
.reqbox .seg--dark .seg__opt span { padding: .24rem .6rem; font-size: .7rem; color: color-mix(in srgb, var(--code-ink) 55%, transparent); }
.reqbox .seg--dark .seg__opt input:checked + span { background: rgba(255, 255, 255, .15); color: var(--code-ink); box-shadow: none; }

/* Overview: key facts, endpoint index, status list. */
.facts { margin: 1.7rem 0 0; border-top: 1px solid var(--rule); }
.facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 20px; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: .84rem; font-weight: 600; }
.facts dd { margin: 0; min-width: 0; font-size: .88rem; color: var(--ink-2); }
.facts__base { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.facts__base code { font-size: .84rem; color: var(--ink); overflow-wrap: anywhere; }
.epgroup + .epgroup { margin-top: .4rem; }
.eplist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.eplist > li { border-bottom: 1px solid var(--rule); }
.eprow {
  display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 3px 12px; align-items: baseline;
  padding: .7rem .6rem; margin: 0 -.6rem; border-radius: 6px; color: inherit; text-decoration: none;
  transition: background .15s ease;
}
.eprow:hover { background: var(--paper-2); }
.eprow--guide { grid-template-columns: minmax(0, 1fr); }
.eprow__line { display: contents; }
.eprow__verbs { display: inline-flex; gap: 3px; }
.eprow .verb { font-size: .62rem; padding: .26rem .36rem; }
.eprow__path { font-size: .84rem; color: var(--ink); overflow-wrap: anywhere; }
.eprow__title { font-weight: 600; font-size: .9rem; color: var(--ink); }
.eprow__sum { grid-column: -2; font-size: .82rem; color: var(--ink-3); }
.eprow:hover .eprow__path, .eprow:hover .eprow__title { color: var(--link); }
.statuslist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.statuslist li {
  display: grid; grid-template-columns: 150px 150px minmax(0, 1fr); gap: 4px 16px; align-items: baseline;
  padding: .65rem 0; border-bottom: 1px solid var(--rule); font-size: .86rem; color: var(--ink-2);
}
.statuslist code { font-size: .76rem; color: var(--ink-3); }
.table--docs th code { white-space: nowrap; }
.errstatus { font: 600 .72rem/1 var(--mono); padding: .26rem .4rem; border-radius: 4px; background: var(--warn-wash); color: var(--warn); }
.errstatus--5 { background: var(--bad-wash); color: var(--bad); }

/* Endpoint pages: intro and "ask it something" on the left, the request/response console beside them,
   reference below. The console's request pane stays dark; responses sit on the card colour so the
   rendered plan reads like the rest of the site. */
.docs__split--ep {
  grid-template-columns: minmax(0, 1fr) clamp(380px, 32vw, 460px);
  grid-template-areas: "intro side" "main side";
  row-gap: 1.4rem; max-width: 1440px;
}
.docs__split--ep .docs__intro { grid-area: intro; min-width: 0; max-width: 700px; }
.docs__split--ep .docs__main { grid-area: main; }
.docs__split--ep .docs__side { grid-area: side; top: 80px; }

.ask { margin-top: 1.6rem; }
.ask__label { font: 600 .68rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .6rem; }
.ask__list { display: grid; gap: 6px; }
.askbtn {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; align-items: center; width: 100%;
  padding: .62rem .85rem; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.askbtn:hover { border-color: var(--rule-strong); background: color-mix(in srgb, var(--card) 60%, var(--paper-2)); }
.askbtn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); background: var(--card); }
.askbtn__q { font-size: .9rem; font-weight: 550; line-height: 1.4; }
.askbtn__q em { font-style: normal; color: var(--accent-ink); }
.askbtn__params { grid-column: 1; font-size: .7rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.askbtn__run { grid-column: 2; grid-row: 1 / span 2; font: 600 .72rem/1 var(--sans); color: var(--ink-3); white-space: nowrap; }
.askbtn:hover .askbtn__run, .askbtn[aria-pressed="true"] .askbtn__run { color: var(--accent-ink); }

.console { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cpanel { min-width: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.cpanel__cap {
  display: flex; align-items: center; gap: 8px; min-height: 46px; padding: .4rem .5rem .4rem .6rem;
  border-bottom: 1px solid var(--rule); font-size: .76rem; color: var(--ink-3);
}
.cpanel__cap[hidden] { display: none; }
.ctabs { display: inline-flex; gap: 2px; }
.ctabs[hidden] { display: none; }
.ctab {
  padding: .36rem .62rem; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font: 600 .76rem/1.2 var(--sans); color: var(--ink-3);
}
.ctab:hover { color: var(--ink); background: var(--paper-2); }
.ctab[aria-selected="true"] { color: var(--ink); background: var(--paper-2); box-shadow: inset 0 -2px 0 var(--accent); }
.cpanel__label { font-weight: 600; font-size: .78rem; color: var(--ink-2); padding-left: .3rem; }
.cpanel__status { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.cpanel__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cpanel__cap > .btn, .cpanel__copy, .cpanel__cap > .ctabs { flex: none; }
.cpanel__code { font: 600 .72rem/1 var(--mono); color: var(--ok); }
.cpanel__copy:empty { display: none; }
pre.cpanel__code {
  margin: 0; padding: .95rem 1rem; max-height: 300px; overflow: auto;
  background: var(--code-bg); color: var(--code-ink); font: 400 .76rem/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
pre.cpanel__code:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 0; }
.cpanel__foot { display: flex; align-items: center; gap: 10px; padding: .5rem .55rem .5rem .6rem; border-top: 1px solid var(--rule); }
.cpanel__hint { flex: 1; min-width: 0; margin: 0; font-size: .74rem; line-height: 1.4; color: var(--warn); }
.cpanel__body { min-height: 320px; max-height: calc(100vh - 330px); overflow: auto; overscroll-behavior: contain; }
.cpanel__body:focus { outline: none; }
.cpanel__body .problem { margin: 12px; }
.btn--go { gap: 6px; }
.btn__key { font: 500 .7rem/1 var(--mono); opacity: .6; }
.seg--mini { padding: 2px; }
.seg--mini .seg__opt span { padding: .22rem .55rem; font-size: .7rem; }

/* Response JSON on the card colour, with key hover definitions. */
.jsonpane { margin: 0; padding: .95rem 1rem; font: 400 .76rem/1.6 var(--mono); white-space: pre; color: var(--ink); background: var(--card); min-height: 100%; }
.jsonpane:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 0; }
.jsonpane .j-key { color: var(--accent-ink); }
.jsonpane .j-str { color: var(--ok); }
.jsonpane .j-num { color: var(--warn); }
.jsonpane .j-bool { color: var(--bad); }
.jsonpane .j-null { color: var(--ink-3); }
.jsonpane [data-k] { cursor: help; border-radius: 3px; }
.jsonpane [data-k]:hover { background: var(--accent-wash); }
.jtip {
  position: fixed; z-index: 60; max-width: 320px; padding: .55rem .7rem; border-radius: var(--radius);
  background: var(--ink); color: var(--paper); font-size: .76rem; line-height: 1.45; pointer-events: none; box-shadow: var(--shadow-soft);
}
.jtip b { display: block; font: 600 .72rem/1.3 var(--mono); margin-bottom: .2rem; }

/* Rendered response: plan cards with the evidence behind each value. */
.rres { padding: 14px; display: grid; gap: 12px; }
.rres__count { margin: 0; font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rres__note { margin: 0; font-size: .8rem; color: var(--ink-3); }
.rres--err { padding: 18px; }
.rres__errcode { font: 600 .74rem/1 var(--mono); color: var(--bad); margin: 0 0 .4rem; }
.rres__errmsg { margin: 0 0 .6rem; font-size: .9rem; color: var(--ink); }

.rplan { display: grid; gap: 12px; min-width: 0; padding: 14px 14px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.rplan__kicker { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; font-size: .74rem; color: var(--ink-3); }
.rplan__title { margin: -6px 0 0; font-size: 1.02rem; font-weight: 650; letter-spacing: -.012em; line-height: 1.3; }
.rplan__title a { color: var(--ink); text-decoration: none; }
.rplan__title a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.rplan__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rplan__id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -4px 0 0; font-size: .74rem; color: var(--ink-3); }
.rplan__id code { font-size: .76rem; color: var(--ink); }
.rplan__id .btn--copy { min-height: 24px; padding: .1rem .5rem; font-size: .7rem; }
.rplan .btn--copy:not([data-copied]) { background: transparent; color: var(--ink-2); border-color: var(--rule-strong); }
.rplan__chips:empty { display: none; }
.rplan__figs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .6fr); margin: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.rplan__fig { min-width: 0; padding: .55rem .7rem; }
.rplan__fig + .rplan__fig { border-left: 1px solid var(--rule); }
.rplan__fig dt { font-size: .68rem; color: var(--ink-3); margin-bottom: .2rem; }
.rplan__fig dd { margin: 0; font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.rplan__h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 .5rem; font-size: .8rem; font-weight: 650; }
.rplan__hnote { font-weight: 500; font-size: .72rem; color: var(--ink-3); }
.rplan__tou:empty { display: none; }
.rplan__source { margin: 0; font-size: .74rem; color: var(--ink-3); overflow-wrap: anywhere; }
.rplan .tou { gap: 8px; }
.rplan .tou-group { padding: .7rem .8rem .5rem; }
.rplan .tou-group + .tou-group { margin-top: 8px; }
.rplan .tou-group__title { font-size: .82rem; margin-bottom: .6rem; }
.rplan .tou-row { grid-template-columns: 76px minmax(0, 1fr); gap: 2px 10px; margin-bottom: 8px; }
.rplan .tou-row__label { font-size: .72rem; padding-top: 5px; }
.rplan .tou-bar { height: 24px; }
.rplan .tou-legend { padding-top: .55rem; gap: 4px; }
.rplan .tou-legend__item { font-size: .76rem; gap: 2px 8px; }
.rplan .tou-legend__meta { font-size: .72rem; }
.rplan .tou-axis__tick { font-size: .6rem; }
.cpanel .btn--copy:not([data-copied]) { background: transparent; color: var(--ink-2); border-color: var(--rule-strong); }
.cpanel .btn--copy:not([data-copied]):hover { background: var(--paper-2); color: var(--ink); }
.docs__head .endpoint { margin-top: 1.1rem; }

.evrows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.evrows > li { border-bottom: 1px solid var(--rule); }
.evrow {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; width: 100%;
  padding: .5rem .3rem; border: 0; background: transparent; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
}
.evrow:hover { background: var(--paper-2); }
.evrow[aria-expanded="true"] { background: var(--accent-wash); }
.evrow__f { min-width: 0; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evrow__f code { font-size: .72rem; color: var(--ink-2); }
.evrow__v { min-width: 0; font-size: .8rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.evrow .status { font-size: .7rem; }
.evrow__pg { font: 500 .7rem/1 var(--mono); color: var(--accent-ink); white-space: nowrap; }
.evrow__pg--none { color: var(--ink-3); }
.evrow__detail { margin: 0 0 .6rem .3rem; padding: .55rem .8rem; border-left: 2px solid var(--accent); display: grid; gap: .45rem; font-size: .8rem; }
.evrow__quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.evrow__quotes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.evrow__quotes q { font-family: var(--mono); font-size: .74rem; line-height: 1.5; color: var(--ink); background: var(--card); padding: .1rem .3rem; border-radius: 4px; }
.evrow__meaning, .evrow__notes, .evrow__meta, .evrow__none { margin: 0; color: var(--ink-2); line-height: 1.5; }
.evrow__meaning:empty { display: none; }
.evrow__meta, .evrow__none { font-size: .74rem; color: var(--ink-3); }
.evrows__more { margin-top: 8px; }

/* Attribute dictionary. */
.dict__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; }
.dict__q { flex: 1 1 260px; max-width: 380px; }
.dict__e { flex: 0 1 220px; }
.dict__count { margin: 0 0 0 auto; }
.table--dict td.dict__n { width: 3rem; min-width: 0; color: var(--ink-3); }
.table--dict .dict__card { color: var(--ink-3); font-size: .8rem; white-space: nowrap; }
.table--dict .dict__meaning { color: var(--ink-2); min-width: 240px; }

@media (max-width: 1180px) {
  .docs__split, .docs__split--ep { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "side" "main"; }
  .docs__side { position: static; max-width: 700px; }
  .cpanel__body { max-height: 70vh; }
}
@media (max-width: 980px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs__nav { display: none; }
  .docs__jump { display: grid; gap: 6px; margin-bottom: 1.6rem; }
}
@media (max-width: 620px) {
  .param, .facts > div, .statuslist li { grid-template-columns: minmax(0, 1fr); }
  .eprow { grid-template-columns: minmax(0, 1fr); }
  .eprow__sum { grid-column: auto; }
  .evrow { grid-template-columns: minmax(0, 1fr) auto; }
  .evrow__f { grid-column: 1 / -1; }
  .evrow .status { grid-column: 1; grid-row: 3; justify-self: start; }
  .evrow__pg { grid-column: 2; grid-row: 2 / span 2; }
  .rplan__figs { grid-template-columns: minmax(0, 1fr); }
  .rplan__fig + .rplan__fig { border-left: 0; border-top: 1px solid var(--rule); }
  .askbtn { grid-template-columns: minmax(0, 1fr); }
  .askbtn__run { display: none; }
  .rplan .tou-row { grid-template-columns: minmax(0, 1fr); }
  .rplan .tou-row__label { padding-top: 0; }
  .dict__count { margin-left: 0; }
  .table--dict, .table--dict tbody, .table--dict tr.rgroup, .table--dict tr.rgroup th { display: block; }
  .table--dict thead { display: none; }
  .table--dict tbody tr:not(.rgroup) {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 2px 8px; padding: .7rem .85rem; border-bottom: 1px solid var(--rule);
  }
  .table--dict tbody tr:not(.rgroup) > * { padding: 0; border: 0; min-width: 0; }
  .table--dict td.dict__n { width: auto; text-align: left; grid-row: span 3; }
  .table--dict .dict__card, .table--dict .dict__meaning { grid-column: 2; min-width: 0; }
}

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--paper-2); border-radius: var(--radius); }
.seg__opt { position: relative; cursor: pointer; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg__opt span { display: block; padding: .38rem .75rem; font: 600 .76rem/1.4 var(--mono); border-radius: 6px; color: var(--ink-3); }
.seg__opt input:checked + span { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--rule); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg__opt input:disabled + span { opacity: .45; cursor: not-allowed; }
.picker { margin-top: .6rem; border: 1px solid var(--rule); border-radius: var(--radius); padding: .55rem .85rem; }
.picker summary { cursor: pointer; font-weight: 600; font-size: .84rem; }
.picker__count { color: var(--ink-3); font-weight: 400; }
.picker__bulk { margin: .7rem 0; }
.picker__groups { display: grid; gap: 10px; max-height: 340px; overflow: auto; padding-right: 4px; }
.picker__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.picker__group legend { font: 600 .72rem/1 var(--mono); color: var(--ink-2); margin-bottom: .4rem; padding: 0; }
.picker__opt { display: inline-flex; align-items: center; gap: 5px; margin: 0 12px 6px 0; font-size: .8rem; cursor: pointer; }
.picker__opt input { margin: 0; accent-color: var(--accent); }
.codeblock { min-width: 0; }

/* ------------------------------------------------------------------ footer */

.colophon { border-top: 1px solid var(--rule); margin-top: auto; }
.colophon__inner { margin: 0 auto; padding: 28px var(--gutter) 40px; font-size: .82rem; color: var(--ink-3); display: grid; gap: 8px; max-width: min(var(--maxw), 100%); }
.colophon__inner p { max-width: 82ch; margin: 0; }
.colophon__inner strong { color: var(--ink-2); font-weight: 600; }
.colophon__meta { font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ motion */

.rise { animation: rise .5s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
/* An open suggestion list must sit above later .rise siblings (each animating .rise is its own stacking context). */
.rise:has(.search.is-open) { position: relative; z-index: 30; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rise { animation: none; }
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 980px) {
  .plan__grid { grid-template-columns: minmax(0, 1fr); }
  .plan__rail { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); order: -1; }
  .toc { display: none; }
  .attrs__intro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .brand__sub { display: none; }
  .kbar { flex: none; width: 38px; padding: 0; justify-content: center; margin: 0 0 0 auto; }
  .kbar__text, .kbar kbd { display: none; }
  .phead__row { grid-template-columns: minmax(0, 1fr); }
  .plhead__row { grid-template-columns: auto minmax(0, 1fr); }
  .plhead__actions { grid-column: 1 / -1; }
  .prow__link { grid-template-columns: 2rem minmax(0, 1fr); padding: .9rem 1rem; }
  .prow__plans, .prow__docs { grid-column: 2; text-align: left; }
  .prow__docs { max-width: 240px; }
  .odo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .odo__progress { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); padding-top: 1rem; }
  .deflist > div { grid-template-columns: minmax(0, 1fr); }
  .tou-row { grid-template-columns: minmax(0, 1fr); }
  .tou-row__label { padding-top: 0; }
  .tou-row__note { grid-column: 1; }
  .tou-legend__item { grid-template-columns: 16px auto minmax(0, 1fr); }
  .tou-legend__meta { grid-column: 2 / -1; }
  .sbar { flex-wrap: wrap; }
  .sbar__seg { flex: 1 1 30%; border-bottom: 1px solid var(--rule); }
  /* Attributes table stacks: number in the gutter, then field, value, status and evidence. */
  .table--attrs, .table--attrs tbody, .table--attrs tr.attr-group, .table--attrs tr.attr-empty,
  .table--attrs .attr-group th, .table--attrs .attr-empty td { display: block; }
  .table--attrs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--attrs tr.attr { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 6px 0; padding: .8rem .9rem; border-bottom: 1px solid var(--rule); }
  .table--attrs tr.attr > * { grid-column: 2; padding: 0; border: 0; min-width: 0; max-width: none; }
  .table--attrs tr.attr > .attr__n { grid-column: 1; grid-row: 1; width: auto; text-align: left; line-height: 1.5; }
  .table--attrs tr.attr > .attr__ev:has(> .fine:only-child) { display: none; }
  .table--attrs tr[hidden] { display: none; }
}
@media (max-width: 480px) {
  .search__go { padding: .62rem .8rem; }
  .search__hint { display: none; }
  .odo__stat { padding: 1rem .9rem 0; }
  .cal__months { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 10px; }
  .masthead__inner { height: 56px; gap: 8px; }
  .topnav { gap: 2px; }
  .topnav a { padding: .4rem .5rem; }
  .kbar, .theme-btn { width: 36px; height: 36px; }
  .cpanel__cap { flex-wrap: wrap; }
  .tile { padding: .95rem 1rem; }
  .table th, .table td { padding: .55rem .75rem; }
  .table--charges th[scope="row"] { min-width: 170px; }
}

@media print {
  .masthead, .colophon, .tabs, .toc, .search, .btn, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  .sheet, .ratecard, .source, .problem { box-shadow: none; }
}