/*
  SolOS minimal prototype.
  Follows .agents/skills/minimalist-ui: warm monochrome canvas, one-pixel borders, editorial
  serif headings, flat cards, pastel tags as the only colour. Secondary text is slightly darker
  than the skill's #787774 so small explanatory copy clears 4.5:1 contrast.
*/

:root {
  --canvas: #FBFBFA;
  --surface: #FFFFFF;
  --wash: #F7F6F3;
  --line: #EAEAEA;
  --line-strong: #8F8D87;
  --ink: #111111;
  --text: #2F3437;
  --muted: #6F6E69;

  --yellow-bg: #FBF3DB;
  --yellow-ink: #956400;
  --blue-bg: #E1F3FE;
  --blue-ink: #1F6C9F;
  --green-bg: #EDF3EC;
  --green-ink: #346538;
  --red-bg: #FDEBEC;
  --red-ink: #9F2F2D;

  /* Chart: one highlight hue and a grey for everything else */
  --chart-mine: #1F6C9F;
  --chart-rest: #B4B2AB;

  /* Split by appliance on Costs: one colour per person, fixed to that person and never reused. The set was
     checked for colour-blind separation against the light and the dark surface. */
  --series-1: #2A78D6;
  --series-2: #EB6834;
  --series-3: #1BAF7A;
  --series-4: #EDA100;
  --series-5: #E87BA4;

  /* Everything else that used to be written as a fixed colour, so dark mode can change it. */
  --on-ink: #FFFFFF;  /* text on a filled (ink) button, tag or tooltip */
  --on-ink-soft: rgba(255, 255, 255, 0.8);
  --ink-hover: #333333;
  --quiet-hover: #EFEEEA;
  --quiet-hover-line: #DCDBD7;
  --top-bg: rgba(251, 251, 250, 0.86);
  --axis: #D2D1CC;
  --wire: #DAD9D4;
  --track: #EFEEEA;
  --col-active: rgba(17, 17, 17, 0.045);
  --solar: #B07A12;
  --solar-strong: #8A5E0C;
  --tip-soft: #C9C7C1;
  --tip-text: #E6E5E1;
  --tip-mine: #6DB3E2;
  --shadow: rgba(0, 0, 0, 0.05);

  color-scheme: light dark;

  --sans: "SF Pro Display", "Geist Sans", system-ui, -apple-system, "Helvetica Neue", "Switzer", sans-serif;
  --serif: "Lyon Text", "Newsreader", "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "Geist Mono", "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --radius: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(20px, 4vw, 96px);
}

/* Dark mode follows the device's setting. Same layout and meaning; only the colours change. */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #121211;
    --surface: #1B1B1A;
    --wash: #252523;
    --line: #2F2F2C;
    --line-strong: #74726C;
    --ink: #F2F1EE;
    --text: #D7D6D1;
    --muted: #A4A29C;

    --yellow-bg: #3A2F13;
    --yellow-ink: #F2C66E;
    --blue-bg: #14324B;
    --blue-ink: #92C7EF;
    --green-bg: #1D3421;
    --green-ink: #97CC9F;
    --red-bg: #47211F;
    --red-ink: #F2A3A0;

    --chart-mine: #6DB3E2;
    --chart-rest: #5E5D59;

    --series-1: #3987E5;
    --series-2: #D95926;
    --series-3: #199E70;
    --series-4: #C98500;
    --series-5: #D55181;

    --on-ink: #111111;
    --on-ink-soft: rgba(17, 17, 17, 0.75);
    --ink-hover: #D4D3CF;
    --quiet-hover: #2B2B29;
    --quiet-hover-line: #4A4945;
    --top-bg: rgba(18, 18, 17, 0.86);
    --axis: #4A4945;
    --wire: #4A4945;
    --track: #2B2B29;
    --col-active: rgba(255, 255, 255, 0.06);
    --solar: #D9A441;
    --solar-strong: #F2C66E;
    --tip-soft: #5F5E59;
    --tip-text: #2F3437;
    --tip-mine: #1F6C9F;
    --shadow: rgba(0, 0, 0, 0.4);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* A single warm light spot so the canvas is not dead flat. Fixed, behind everything, never interactive. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58rem 34rem at 88% -8%, rgba(203, 158, 82, 0.07), transparent 62%);
}

/* The page fills the window up to a very wide screen, so a large monitor is not mostly empty margin. */
.page {
  width: 100%;
  max-width: 150rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

h1,
h2,
h3,
p,
ul,
figure,
fieldset {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

strong {
  color: var(--ink);
  font-weight: 600;
}

/* Hidden means hidden, even for elements whose own style sets a display, such as buttons. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 6px;
}

.skip:focus {
  top: 12px;
}

.muted {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --- Header ------------------------------------------------------------------- */

.top {
  border-bottom: 1px solid var(--line);
  background: var(--top-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* The name on the left and the three tabs in the middle of the page, as buttons in one pill. */
.top__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}

.wordmark {
  justify-self: start;
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

/* Three tabs of the same width, so the highlight can move by whole tabs. */
.nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: var(--wash);
}

/* The highlight behind the tab you are on: one piece, placed by --tab (0, 1 or 2), that slides when it changes. */
.nav[data-tab]::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 10px) / 3);
  border-radius: 9999px;
  background: var(--surface);
  box-shadow: 0 1px 3px var(--shadow);
  transform: translateX(calc(var(--tab) * (100% + 2px)));
  transition: transform 320ms var(--ease);
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 9999px;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.nav a:hover {
  color: var(--ink);
}

.nav a[aria-current] {
  color: var(--ink);
}

/* While the next page loads: a bar along the top that runs most of the way and waits there, and the page */
/* fades back a little after a moment, so a quick page never flickers. The new page replaces both. */
.is-leaving body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 3px;
  background: var(--ink);
  transform-origin: left;
  animation: leaving 8s cubic-bezier(0.08, 0.7, 0.2, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

@keyframes leaving {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(0.94);
  }
}

.is-leaving main {
  opacity: 0.55;
  transition: opacity 200ms var(--ease) 150ms;
}

/* Between pages the old one fades into the new one, and the bar with the tabs stays where it is. */
@view-transition {
  navigation: auto;
}

.top {
  view-transition-name: top;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
}

/* On a phone the tabs do not fit beside the name, so they get their own row under it, the full width. */
@media (max-width: 40rem) {
  .top__row {
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .nav a {
    padding: 0 8px;
  }
}

/* The pages under Analytics, a row of links where the eyebrow would be. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 12px;
}

.subnav a {
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.subnav a:hover {
  color: var(--ink);
}

.subnav a[aria-current] {
  border-bottom-color: currentColor;
  color: var(--ink);
}

/* --- Type --------------------------------------------------------------------- */

.intro {
  padding: clamp(48px, 9vw, 104px) 0 clamp(28px, 5vw, 48px);
}

/* A smaller second paragraph under the lede, for a caveat that matters but is not the point. */
.intro__note {
  margin-top: 14px;
  max-width: 36rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --- Step 1: the ways to start, as large buttons ----------------------------------------- */

.paths {
  display: grid;
  gap: 12px;
}

.paths__title {
  margin-bottom: 4px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.path {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 18px 20px;
  line-height: 1.4;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}

.path:hover {
  border-color: var(--ink);
  box-shadow: 0 2px 8px var(--shadow);
}

.path:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.path__name,
.path__what {
  display: block;
}

.path__name {
  font-size: 1.0625rem;
  font-weight: 600;
}

.path__what {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* The suggested way in: filled, like the main button on every other page. */
.path--main {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.path--main:hover {
  border-color: var(--ink-hover);
  background: var(--ink-hover);
}

.path--main .path__what {
  color: var(--on-ink-soft);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow a {
  color: inherit;
}

h1 {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.125rem, 6vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h3 {
  margin-top: 40px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.lede {
  margin-top: 18px;
  max-width: 36rem;
  color: var(--muted);
  font-size: 1.125rem;
}

/* --- Tags --------------------------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 9999px;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.tag--estimate {
  background: var(--yellow-bg);
  color: var(--yellow-ink);
}

.tag--demo {
  background: var(--blue-bg);
  color: var(--blue-ink);
}

.tag--saving {
  background: var(--green-bg);
  color: var(--green-ink);
}

.tag--alert {
  background: var(--red-bg);
  color: var(--red-ink);
}

.tag--bill {
  background: var(--wash);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* --- Cards and the Home figures -------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  transition: box-shadow 200ms var(--ease);
}

.card:hover {
  box-shadow: 0 2px 8px var(--shadow);
}

.bento {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.figure {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 46rem) {
  .bento {
    grid-template-columns: 1fr 1fr;
  }

  /* The main figure runs the full width, in equal columns: today, the quarter, what could be saved a year, and
     the ring when there is one. On a medium window they sit two by two. */
  .figure--lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "today quarter" "save .";
    align-items: start;
    gap: 32px clamp(32px, 4vw, 64px);
  }

  .figure--lead.figure--fourths {
    grid-template-areas: "today quarter" "save split";
  }

  .figure--lead > .figure__save {
    grid-area: save;
  }

  .figure--lead > .figure__today {
    grid-area: today;
  }

  .figure--lead > .figure__quarter {
    grid-area: quarter;
  }

  .figure--lead > .figure__split {
    grid-area: split;
  }

  .flow,
  .supply {
    grid-column: 1 / -1;
  }
}

@media (min-width: 62rem) {
  .figure--lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "today quarter save";
  }

  /* The ring and its legend need a little more room than a single figure. */
  .figure--lead.figure--fourths {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
    grid-template-areas: "today quarter save split";
  }
}

/* On a wide window: the two smaller figures side by side, then the diagram on the left with the
   hourly chart beside it. Each row is only as tall as its content, so no card is stretched. */
@media (min-width: 62rem) {
  .flow,
  .supply {
    grid-column: auto;
  }
}

/* A label with its "i" button beside it. */
.figure__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Info buttons: the explanation of a figure, opened on demand instead of printed under it --- */

.info {
  position: relative;
  flex: none;
  line-height: 1;
}

.info__button {
  position: relative;  /* the larger tap area below is measured from the button, never from the page */
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}

.info__button::-webkit-details-marker {
  display: none;
}

/* A bigger area to tap than the circle itself. */
.info__button::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.info__button:hover,
.info[open] > .info__button {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.info__body {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  left: -10px;
  width: max-content;
  max-width: min(22rem, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 28px var(--shadow);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
}

.info__body > * + * {
  margin-top: 6px;
}

.info__body .figure__calc {
  margin: 0;
}

/* Opened near the right edge: the panel opens to the left instead (set by the script). */
.info--flip .info__body {
  left: auto;
  right: -10px;
}

/* On a phone the panel spans the screen under the button, whatever side the button is on. */
@media (max-width: 38rem) {
  .info {
    position: static;
  }

  .info__body {
    top: auto;  /* straight under the button, where it would sit in the page */
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    margin-top: 10px;
  }
}

.figure__label {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text);
}

.figure__amount {
  margin-top: 10px;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* Today, the quarter and the yearly saving are the same size: figures side by side, none more important. */
.figure--lead .figure__amount,
.figure--lead .figure__quarter-amount {
  font-size: clamp(2.5rem, 11vw, 3.5rem);
}

/* On a phone the figures stack, each under a rule, so the card reads as a short list rather than a poster. */
@media (max-width: 45.99rem) {
  .figure--lead {
    gap: 0;
  }

  .figure--lead > * + * {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }

  .figure--lead .tags {
    margin-top: 8px;
  }
}

.figure--lead .figure__amount--none {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

/* What could be saved is the one figure in colour, on a soft green panel, so it is the first thing seen. */
.figure--lead > .figure__save {
  margin: -16px -20px;
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--green-bg);
}

.figure--lead .figure__save-amount,
.figure__save .figure__label,
.figure__save .figure__note,
.figure__save .figure__note a {
  color: var(--green-ink);
}

@media (max-width: 45.99rem) {
  .figure--lead > .figure__save {
    margin: 20px -14px 0;
    padding: 16px 14px;
    border-top: 0;
  }

  .figure--lead > .figure__save + * {
    margin-top: 20px;
  }
}

.figure--lead .figure__quarter-amount {
  margin-top: 10px;
}

/* While a new panel size or period is fetched, the section dims a little instead of the page reloading. */
.day-region {
  transition: opacity 150ms var(--ease);
}

.day-region.is-swapping {
  opacity: 0.6;
  cursor: progress;
}

/* Under the figures, across the card and centred: the way into the solar diagram, which opens playing the day. */
.figure__solar {
  text-align: center;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.figure__solar a {
  color: var(--ink);
  text-underline-offset: 0.2em;
}

@media (min-width: 46rem) {
  .figure--lead > .figure__solar {
    grid-column: 1 / -1;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
}

/* In columns the amounts share a size that still fits a four-figure quarter in a quarter of a wide window. */
@media (min-width: 46rem) {
  .figure--lead .figure__amount,
  .figure--lead .figure__quarter-amount {
    font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  }
}

@media (min-width: 62rem) {
  .figure--lead .figure__amount,
  .figure--lead .figure__quarter-amount {
    font-size: clamp(2.25rem, 3vw, 4.5rem);
  }
}

/* Today's estimate over a quarter, beside the day's figure: smaller, because the day leads. */
.figure__quarter .figure__label,
.figure__save .figure__label,
.figure__split .figure__label {
  margin-top: 0;
}

.figure__quarter-amount {
  margin-top: 8px;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.figure__amount--none {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.figure__period {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;  /* "for 91 days" moves down whole, never split after "91" */
}

.figure__calc,
.calc {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

.figure__note {
  margin-top: 6px;
  max-width: 26rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.empty h2 + p {
  margin-top: 10px;
  max-width: 32rem;
}

.alert {
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.9375rem;
}

.alert .tag {
  margin-right: 6px;
}

/* --- The one suggestion -------------------------------------------------------------- */

.idea {
  margin-top: clamp(56px, 10vw, 112px);
  max-width: 40rem;
}

/* On Analytics the suggestions sit under their own heading, so the first needs no gap of its own. */
.section-title + .idea {
  margin-top: 8px;
}

.idea__title {
  margin-top: 14px;
  font-size: clamp(1.75rem, 4.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.idea__effect {
  margin-top: 16px;
  font-size: 1.125rem;
}

.idea .accordion {
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

/* Under the suggestions on Analytics, when one was passed on. */
.suggestions__restore {
  margin-top: 16px;
  font-size: 0.9375rem;
}

.follow {
  margin-top: clamp(48px, 8vw, 80px);
  border-top: 1px solid var(--line);
}

.follow__item {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

.follow__item .eyebrow + p {
  margin-top: 6px;
}

.follow__item form {
  margin-top: 4px;
}

/* The next power bill: the countdown on the left, the weekly set-aside on the right. */
.next-bill__grid {
  display: grid;
  gap: 24px;
  margin-top: 14px;
}

@media (min-width: 46rem) {
  .next-bill__grid {
    grid-template-columns: repeat(2, minmax(0, 30rem));
    gap: clamp(32px, 5vw, 80px);
  }
}

.next-bill__grid p + p {
  margin-top: 6px;
}

.next-bill__big {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.next-bill__big span {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.next-bill__track {
  display: block;
  height: 8px;
  margin-top: 16px;
  max-width: 24rem;
  border-radius: 4px;
  background: var(--track);
  overflow: hidden;
}

.next-bill__track span {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 4px;
  background: var(--text);
}

.next-bill__note {
  color: var(--muted);
  font-size: 0.875rem;
}

/* Tell the household: an editable message and a Copy button. */
.tell__text {
  display: block;
  width: 100%;
  max-width: 44rem;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  /* Grow to fit the message where the browser can; otherwise leave room for it on a narrow screen. */
  field-sizing: content;
  min-height: 5.5em;
}

@media (max-width: 38rem) {
  .tell__text {
    min-height: 10.5em;
  }
}

.tell__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.tell__done {
  color: var(--muted);
}

/* --- Buttons ------------------------------------------------------------------ */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  color: var(--on-ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}

.button:hover {
  background: var(--ink-hover);
  border-color: var(--ink-hover);
}

.button:active {
  transform: scale(0.98);
}

.button--quiet {
  border-color: var(--line);
  background: var(--wash);
  color: var(--ink);
}

.button--quiet:hover {
  border-color: var(--quiet-hover-line);
  background: var(--quiet-hover);
}

.link {
  padding: 0;
  min-height: 32px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.link:hover {
  text-decoration-thickness: 2px;
}

/* --- Accordions: no boxes, a rule underneath, a plus that becomes a minus --------------- */

.accordion {
  border-bottom: 1px solid var(--line);
}

.accordion summary,
.cost summary {
  list-style: none;
  cursor: pointer;
}

.accordion summary::-webkit-details-marker,
.cost summary::-webkit-details-marker {
  display: none;
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  color: var(--ink);
  font-weight: 500;
}

.accordion summary::after,
.cost summary::after {
  content: "+";
  flex: none;
  width: 1ch;
  font-family: var(--mono);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--muted);
  text-align: center;
}

.accordion[open] summary::after,
.cost[open] summary::after {
  content: "\2212";
}

.accordion__body {
  display: grid;
  gap: 10px;
  padding: 0 0 22px;
  max-width: 38rem;
  font-size: 0.9375rem;
}

.accordion--flush {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.accordion--flush .accordion__body {
  max-width: none;
  padding-bottom: 0;
  overflow-x: auto;
}

/* --- Costs -------------------------------------------------------------------- */

.costs {
  border-top: 1px solid var(--line);
}

.costs__head,
.cost summary,
.cost--total,
.cost--part {
  display: grid;
  grid-template-columns: minmax(8rem, 1.3fr) 6.5rem minmax(3rem, 2fr) 4.5rem 1ch;
  align-items: center;
  gap: 16px;
}

.costs__head {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.costs__head span:nth-child(4),
.cost__amount {
  text-align: right;
}

.cost {
  border-bottom: 1px solid var(--line);
}

.cost summary {
  min-height: 60px;
}

.cost__name {
  color: var(--ink);
  font-weight: 500;
}

.cost__time {
  color: var(--muted);
  font-size: 0.9375rem;
}

.cost__bar {
  display: block;
  height: 6px;
}

.cost__bar span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 0 3px 3px 0;
  background: var(--text);
}

.cost__amount {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cost__detail {
  display: grid;
  gap: 8px;
  padding: 0 0 22px;
  max-width: 38rem;
  font-size: 0.9375rem;
}

.cost--total {
  min-height: 60px;
  border-bottom: 0;
}

.cost--total .cost__name,
.cost--total .cost__amount {
  font-weight: 600;
}

.after-table {
  margin-top: 14px;
  max-width: 40rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.after-table .tag {
  margin-right: 6px;
}

@media (max-width: 38rem) {
  .costs__head {
    display: none;
  }

  .cost summary,
  .cost--total,
  .cost--part {
    grid-template-columns: 1fr auto 1ch;
    grid-template-areas: "name amount toggle" "time amount toggle";
    gap: 0 12px;
    padding: 12px 0;
  }

  .cost__name {
    grid-area: name;
  }

  .cost__time {
    grid-area: time;
  }

  .cost__amount {
    grid-area: amount;
  }

  .cost__bar,
  .cost--total > span:empty,
  .cost--part > span:empty {
    display: none;
  }
}

/* --- Measured by the team meter (Costs, trial) ------------------------------------- */
/* The same rows as the estimate below it, so the two read as one list of what costs the most. */

.measured {
  margin-top: clamp(24px, 4vw, 40px);
}

.measured__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.measured__head h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
}

.measured__head .switch {
  margin-top: 0;
}

.measured__head .switch__option {
  white-space: nowrap;
}

.measured__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 16px 0 12px;
}

.measured__amount {
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cost--part {
  min-height: 56px;
}

/* Room for "47% · 2 to name" on one line beside the bar. */
@media (min-width: 38.01rem) {
  .cost--part {
    grid-template-columns: minmax(8rem, 1.3fr) 9.5rem minmax(3rem, 2fr) 4.5rem 1ch;
  }
}

/* What is not one appliance (not named yet, everything else) is drawn quieter, after the appliances. */
.cost--left .cost__name,
.cost--left .cost__amount {
  color: var(--muted);
  font-weight: 500;
}

.cost--left .cost__bar span {
  background: var(--line-strong);
}

.measured__none {
  margin-top: 16px;
  color: var(--muted);
}

.measured__next {
  margin-top: clamp(40px, 6vw, 64px);
}

/* --- Split by appliance (Costs) ------------------------------------------------------ */
/* A ring with one slice per person, beside a list that carries every figure, so nothing relies on colour. */

.parts__body {
  display: grid;
  gap: 28px;
  align-items: center;
  margin-top: 24px;
}

@media (min-width: 46rem) {
  .parts__body {
    grid-template-columns: minmax(170px, 230px) minmax(0, 44rem);
    gap: clamp(32px, 4vw, 64px);
  }
}

.parts__chart {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
}

.parts__slice {
  fill: none;
  stroke-width: 6.5;
  transition: stroke-width 160ms var(--ease);
}

.parts__slice:hover {
  stroke-width: 8;
}

.parts__centre {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.parts__centre-note {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 2.8px;
}

.parts__legend {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.parts__person {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto 4ch;
  grid-template-areas: "swatch name amount percent" ". what what what";
  gap: 2px 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.parts__swatch {
  grid-area: swatch;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.parts__name {
  grid-area: name;
  color: var(--ink);
  font-weight: 500;
}

.parts__name small {
  color: var(--muted);
  font-weight: 400;
}

.parts__amount {
  grid-area: amount;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.parts__percent {
  grid-area: percent;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.parts__what {
  grid-area: what;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Home: a small ring beside the quarter, with each person's part listed next to it. */
.mini-split {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 30rem;
  margin-top: 10px;
}

.mini-split .parts__chart {
  flex: none;
  width: clamp(96px, 7vw, 132px);
}

.mini-split__legend {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.mini-split__legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto 3.5ch;
  align-items: center;
  gap: 8px;
}

/* The swatch is placed by name in the Costs list; here it simply comes first. */
.mini-split__legend .parts__swatch {
  grid-area: auto;
}

.mini-split__name small {
  color: var(--muted);
}

.mini-split__name {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-split__amount {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mini-split__percent {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

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

/* --- Generic sections --------------------------------------------------------------- */

.block {
  margin-top: clamp(56px, 10vw, 104px);
}

.intro + .block {
  margin-top: clamp(4px, 2vw, 24px);
}

.block > h2 + * {
  margin-top: 18px;
}

.block > p {
  max-width: 38rem;
}

.block > .muted {
  margin-top: 16px;
}

.changes li {
  display: grid;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

/* Before and after a change: two bars on the same scale, each with its amount beside it. */
.compare {
  display: grid;
  gap: 6px;
  margin: 6px 0 2px;
  max-width: 34rem;
}

.compare__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.compare dt {
  color: var(--muted);
}

.compare dd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.compare__bar {
  display: block;
  height: 10px;
}

.compare__bar span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 0 3px 3px 0;
}

.compare__bar--before span {
  background: var(--chart-rest);
}

.compare__bar--after span {
  background: var(--chart-mine);
}

.compare__amount {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.compare__gap {
  color: var(--muted);
}

.changes li:first-child {
  border-top: 1px solid var(--line);
}

/* --- Forms -------------------------------------------------------------------- */

.form {
  display: grid;
  gap: 28px;
  max-width: 34rem;
}

.card.form,
.card .form {
  max-width: none;
}

/* Short fields sit side by side when there is room. */
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 28px 24px;
  align-items: start;
}

.fields input,
.fields select {
  max-width: none;
}

/* Room for two lines of help under each label, so inputs in the same row line up. */
.fields .field__help {
  min-height: 3.2em;
}

.form h3 {
  margin-top: 12px;
  scroll-margin-top: 24px;
}

.form h3 + .form__note {
  margin-top: -18px;
}

.form .actions {
  margin-top: 4px;
}

.form__note {
  color: var(--muted);
  font-size: 0.9375rem;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
}

.field label,
.field legend {
  padding: 0;
  color: var(--ink);
  font-weight: 500;
}

/* A question with several answers. It is laid out as an ordinary block and its heading is given
   the full width, because Safari squeezes a legend inside a grid to the width of its longest word. */
fieldset.field {
  display: block;
}

.field legend {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

fieldset.field .field__errors {
  margin-top: 10px;
}

/* A hidden legend keeps its 1px size. The full-width rule above would otherwise stretch it past the page edge. */
.field legend.visually-hidden {
  width: 1px;
  max-width: 1px;
}

.field__help {
  color: var(--muted);
  font-size: 0.9375rem;
}

.field__control {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.field__suffix {
  color: var(--muted);
  font-size: 0.9375rem;
  white-space: nowrap;
}

input[type="text"],
input[type="number"],
input[type="date"],
select {
  width: 100%;
  max-width: 14rem;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

input[type="text"] {
  max-width: 100%;
}

input[type="file"] {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

input:focus-visible,
select:focus-visible {
  outline-offset: 1px;
}

.field--error input,
.field--error select {
  border-color: var(--red-ink);
}

.field__errors {
  color: var(--red-ink);
  font-size: 0.9375rem;
}

.choices {
  gap: 0;
}

.choices legend {
  margin-bottom: 10px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  cursor: pointer;
}

.choices legend + .choice,
.choices .choice:first-of-type {
  border-top: 1px solid var(--line);
}

.choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ink);
}

.field .choice span {
  color: var(--ink);
}

.field .choice .choice__meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: right;
}

/* --- Notices ------------------------------------------------------------------ */

.notices {
  display: grid;
  gap: 8px;
  padding-top: 24px;
}

.notice {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--green-bg);
  color: var(--green-ink);
  font-size: 0.9375rem;
}

/* --- Day chart ------------------------------------------------------------------ */

.pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-bottom: 16px;
}

.pick__label {
  margin-right: 8px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.pick a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.9375rem;
  text-decoration: none;
}

.pick a:hover {
  color: var(--ink);
  background: var(--wash);
}

.pick a[aria-current="true"] {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
}

.chart__title {
  color: var(--ink);
  font-weight: 500;
}

.chart__title .tag {
  margin-left: 6px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.875rem;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend__swatch--mine {
  background: var(--chart-mine);
}

.legend__swatch--rest {
  background: var(--chart-rest);
}

.chart__frame {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  margin-top: 16px;
  border-radius: 6px;
}

.plot__y,
.plot__area {
  position: relative;
  height: 212px;
  margin-top: 26px; /* room for the value above the tallest column */
}

.plot__y {
  width: 2.75rem;
}

.plot__y span,
.plot__x span {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}

.plot__y span {
  right: 0;
  transform: translateY(50%);
}

.plot__area {
  border-bottom: 1px solid var(--axis);
}

.plot__grid {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--line);
}

.plot__cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
}

.col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px; /* surface gap between the two stacked segments */
  height: 100%;
}

.col:hover,
.col.is-active {
  background: var(--col-active);
}

.col__rest,
.col__mine {
  flex: none;
  width: min(18px, 68%);
  min-height: 1px;
}

.col__rest {
  border-radius: 4px 4px 0 0;
  background: var(--chart-rest);
}

.col__mine {
  background: var(--chart-mine);
}

/* Rounded only at the data end: the highlighted segment gets it when nothing is stacked above. */
.col__mine:first-child,
.col__value + .col__mine {
  border-radius: 4px 4px 0 0;
}

.col__value {
  position: absolute;
  left: 50%;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.plot__x {
  position: relative;
  grid-column: 2;
  height: 26px;
}

.plot__x span {
  top: 9px;
  transform: translateX(-50%);
}

.chart__tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.8125rem;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.chart__tip[hidden] {
  display: none;
}

.tip__value {
  font-size: 0.9375rem;
  font-weight: 600;
}

.tip__when {
  color: var(--tip-soft);
}

.tip__row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tip-text);
}

.tip__row::before {
  content: "";
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--chart-rest);
}

.tip__row--mine::before {
  background: var(--tip-mine);
}

.table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.table th,
.table td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-weight: 400;
}

.table th:first-child {
  text-align: left;
}

.table thead th {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.table tbody th {
  color: var(--ink);
}

.table--list {
  min-width: 0;
  font-size: 0.9375rem;
  font-variant-numeric: normal;
}

.table--list th,
.table--list td {
  padding: 16px 16px 16px 0;
  text-align: left;
  vertical-align: baseline;
}

.table--list tbody th {
  font-weight: 500;
}

.table--list tbody th small {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.table--list td {
  color: var(--muted);
  white-space: nowrap;
}

.table--list th:last-child,
.table--list td:last-child {
  padding-right: 0;
  text-align: right;
}

.table--list tbody tr:last-child th,
.table--list tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 34rem) {
  /* On a phone the start time goes; it is still on the appliance's own page and on Day. */
  .table--list th:nth-child(4),
  .table--list td:nth-child(4) {
    display: none;
  }

  .table--list th,
  .table--list td {
    padding-right: 10px;
  }
}

.tracks {
  border-top: 1px solid var(--line);
}

.track {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 9rem 5.5rem;
  gap: 4px 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.track__name {
  color: var(--ink);
  font-weight: 500;
}

.track__when,
.track__length {
  color: var(--muted);
  font-size: 0.9375rem;
}

.track__length {
  text-align: right;
}

.track__strip {
  position: relative;
  grid-column: 1 / -1;
  height: 6px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--track);
}

.track__strip span {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 3px;
  border-radius: 3px;
  background: var(--text);
}

@media (max-width: 30rem) {
  .track {
    grid-template-columns: 1fr auto;
  }

  .track__when {
    grid-column: 1;
    grid-row: 2;
  }

  .track__length {
    grid-column: 2;
    grid-row: 1;
  }
}

/* --- Footer ------------------------------------------------------------------- */

.foot {
  margin-top: clamp(80px, 14vw, 144px);
  padding-top: 28px;
  padding-bottom: 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

.foot p {
  max-width: 40rem;
}

.foot__build {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
}

/* --- High-contrast modes replace background colours, so name system colours for the marks -- */

@media (forced-colors: active) {
  .col__mine,
  .legend__swatch--mine,
  .cost__bar span,
  .track__strip span {
    background: CanvasText;
  }

  .col__rest,
  .col__grid,
  .legend__swatch--rest {
    background: GrayText;
  }

  .col__solar {
    background: CanvasText;
  }

  .track__strip {
    border: 1px solid GrayText;
  }
}

/* --- Motion: quiet, and off when the person asks for less ---------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: calc(var(--index, 0) * 80ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .button,
  .card,
  .nav a,
  .nav[data-tab]::before {
    transition: none;
  }

  .is-leaving body::before {
    animation: none;
    transform: scaleX(0.94);
  }

  .button:active {
    transform: none;
  }
}

/* --- Page layouts for wide screens ------------------------------------------------------ */

/* Two cards side by side: the list on the left, the form on the right. */
.columns {
  display: grid;
  gap: 16px;
  align-items: start;
}

@media (min-width: 62rem) {
  .columns {
    grid-template-columns: minmax(0, 13fr) minmax(0, 11fr);
  }
}

.stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.stack .panel--row {
  margin-top: 0;
}

.panel {
  min-width: 0;
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 20px;
}

.panel__note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.875rem;
}

.panel > p {
  max-width: 34rem;
}

.panel h3 {
  margin-top: 8px;
  scroll-margin-top: 24px;
}

/* A heading and one action on a single line. */
.panel--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 16px;
}

.panel--row > div {
  flex: 1 1 18rem;
}

.panel--row p {
  margin-top: 8px;
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* A heading on the left and its form on the right. Stacked on narrow screens. */
.split__main {
  display: grid;
  gap: 0;
}

.split__main.stack {
  gap: 16px;
}

@media (min-width: 62rem) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 72px;
    align-items: start;
  }

  .split .intro {
    padding-bottom: 0;
  }

  .split__main {
    padding-top: clamp(48px, 9vw, 104px);
  }
}

/* --- Landing page (example at /welcome/) ------------------------------------------------------- */

.welcome {
  display: grid;
  gap: 24px;
  align-items: start;
}

@media (min-width: 62rem) {
  .welcome {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 72px;
  }

  .welcome__preview {
    padding-top: clamp(48px, 9vw, 104px);
  }
}

.welcome__intro .lede {
  max-width: 34rem;
}

.welcome__small {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.875rem;
}

.welcome__preview .eyebrow + .card {
  margin-top: 12px;
}

.welcome__sample .tags {
  margin: 0 0 16px;
}

.welcome__sample .figure__amount {
  font-size: clamp(3rem, 7vw, 4rem);
}

.welcome__facts {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.welcome__facts dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.welcome__facts dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 0.9375rem;
}

.welcome__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 46rem) {
  .welcome__list {
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
  }
}

.welcome__list li {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.welcome__list strong {
  display: block;
  font-size: 1.0625rem;
}

.welcome__list p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.welcome__honest > p,
.welcome__go > p {
  max-width: 40rem;
}

/* --- The flow diagram -------------------------------------------------------------------- */

.flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.flow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.flow__head .tags {
  margin-top: 0;
}

/* The time of day, large, with a step either side. This is what moves when the day plays. */
.flow__clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.flow__now {
  display: grid;
  gap: 6px;
  text-align: center;
}

.flow__time {
  color: var(--ink);
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.flow__until {
  color: var(--muted);
  font-size: 0.875rem;
}

.flow__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.75rem;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--wash);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.flow__step:hover {
  border-color: var(--quiet-hover-line);
  background: var(--quiet-hover);
}

.flow__stage {
  position: relative;
  height: 236px;
  margin-top: 24px;
}

.flow__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  overflow: visible;
}

.flow__wire,
.flow__current {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

/* The wire is always drawn faintly, so the route is visible even when nothing is flowing. */
.flow__wire {
  stroke: var(--wire);
  stroke-width: 1.5;
}

.flow__current {
  display: none;
  stroke-width: var(--flow-width, 3px);
  stroke-dasharray: 1 13;
  animation: flow-travel var(--flow-speed, 2s) linear infinite;
  animation-play-state: paused;
}

.flow__route.is-active .flow__current {
  display: inline;
}

.flow__route--solar .flow__current {
  stroke: var(--solar);
}

.flow__route--grid .flow__current {
  stroke: var(--muted);
}

.flow__stage[data-motion="on"] .flow__current {
  animation-play-state: running;
}

@keyframes flow-travel {
  to {
    stroke-dashoffset: -28;
  }
}

.flow__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 38%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.flow__node--solar {
  top: 0;
  left: 0;
  height: 42%;
  background: var(--yellow-bg);
}

.flow__node--grid {
  bottom: 0;
  left: 0;
  height: 42%;
  background: var(--wash);
}

.flow__node--home {
  top: 18%;
  right: 0;
  height: 64%;
}

.flow__node--off {
  background: var(--surface);
  border-style: dashed;
}

.flow__name {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.flow__node strong {
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.flow__node small {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.flow__node--off strong {
  color: var(--muted);
  font-weight: 500;
}

/* Fixed room for the sentence and the list, so the card does not jump as the hour changes. */
.flow__status {
  min-height: 3.2em;
  margin-top: 20px;
  font-size: 0.9375rem;
}

.flow__running {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px 8px;
  min-height: 4.75rem;
  margin-top: 8px;
}

.flow__running li {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.875rem;
  white-space: nowrap;
}

.flow__running span {
  margin-left: 4px;
  color: var(--ink);
  font-weight: 600;
}

.flow__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 4px;
}

/* Try the diagram with a different panel size. */
.flow__solar {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.flow__solar-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.flow__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.flow__sizes a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9375rem;
  text-decoration: none;
}

.flow__sizes a:hover {
  background: var(--wash);
}

.flow__sizes a[aria-current="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.flow__keep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 14px;
}

.flow__keep p {
  flex: 1 1 14rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.flow__note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.8125rem;
}

@media (max-width: 26rem) {
  .flow__node {
    width: 41%;
    padding: 10px;
  }

  .flow__node strong {
    font-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow__current {
    animation: none;
  }
}

@media (forced-colors: active) {
  .flow__wire,
  .flow__current {
    stroke: CanvasText;
  }
}

/* --- Electricity used each hour, beside the flow diagram ------------------------------------- */

.supply {
  display: flex;
  flex-direction: column;
}

.supply .legend {
  margin-top: 12px;
}

/* The plot grows to fill the card, so the chart is as tall as the diagram beside it. */
.supply__frame {
  flex: 1 1 auto;
  grid-template-rows: minmax(212px, 1fr) auto;
}

.supply__frame .plot__y,
.supply__frame .plot__area {
  height: auto;
}

.supply__frame .plot__cols {
  margin: 0;
  padding: 0;
  list-style: none;
}

.supply__frame .plot__cols li {
  display: contents;
}

.supply__frame .col {
  border-radius: 4px 4px 0 0;
  text-decoration: none;
  transition: background-color 200ms var(--ease);
}

.supply__frame .col:focus-visible {
  outline-offset: -2px;
}

.col__grid,
.col__solar {
  flex: none;
  width: min(18px, 68%);
  min-height: 1px;
}

.col__grid {
  background: var(--chart-rest);
}

.col__solar {
  background: var(--solar);
}

.col__grid:first-child,
.col__solar:first-child {
  border-radius: 4px 4px 0 0;
}

/* The hour the diagram is showing: its time above the column, darker marks, and a tick on the baseline. */
.supply__frame .col.is-now {
  box-shadow: inset 0 -3px 0 var(--ink);
}

.supply__frame .col.is-now::before {
  content: attr(data-time);
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.supply__frame .col.is-now .col__grid {
  background: var(--text);
}

.supply__frame .col.is-now .col__solar {
  background: var(--solar-strong);
}

.supply__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.supply__stat dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.supply__stat dd {
  margin: 0;
}

.supply__value {
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.supply__note {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.supply__foot {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* --- What a solar panel changes ------------------------------------------------------------ */

.impact {
  margin-top: 16px;
}

.impact__head h2 {
  margin-top: 10px;
}

.impact__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 24px 32px;
  margin-top: 28px;
}

.impact__split {
  display: grid;
  gap: 12px;
  max-width: 44rem;
  margin-top: 32px;
}

/* One bar for the day's electricity: the panel's part, then a surface gap, then the grid's. */
.impact__bar {
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--chart-rest);
}

.impact__bar span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-right: 2px solid var(--surface);
  background: var(--solar);
}

.legend__swatch--solar {
  background: var(--solar);
}

.impact .accordion:first-of-type {
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.impact .accordion:last-of-type {
  border-bottom: 0;
}

/* --- Over time: today's estimate repeated for a number of years ------------------------------ */

.over-time__pick {
  margin: 24px 0 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.over-time__custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.over-time__custom input[type="number"] {
  width: 5.5rem;
  min-height: 40px;
  padding: 0 10px;
}

.over-time__custom .button {
  min-height: 40px;
  padding: 0 14px;
}

.over-time .impact__figures {
  margin-top: 24px;
}

.over-time__part {
  margin-top: 24px;
  max-width: 44rem;
  font-size: 0.9375rem;
}

.over-time .accordion {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

/* --- Smaller tables: appliances helped by solar, and provider prices ------------------------- */

.table--compact {
  min-width: 0;
  font-size: 0.9375rem;
}

.table--compact th,
.table--compact td {
  padding: 12px 16px 12px 0;
  vertical-align: baseline;
}

.table--compact th:last-child,
.table--compact td:last-child {
  padding-right: 0;
}

.table--compact tbody th {
  font-weight: 500;
}

.table--compact small {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* --- What other providers charge ------------------------------------------------------------ */

.accordion--section {
  border-top: 1px solid var(--line);
}

.accordion--section summary {
  min-height: 88px;
  padding: 14px 0;
}

.accordion__title {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 1.875rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.accordion__body--wide {
  gap: 24px;
  max-width: none;
  padding-bottom: 32px;
}

.providers__area select {
  max-width: 24rem;
}

.providers__area .field__control {
  flex-wrap: wrap;
}

.providers__intro {
  max-width: 46rem;
}

.providers__scroll {
  overflow-x: auto;
}

.providers__table {
  min-width: 40rem;
}

.providers__you th,
.providers__you td {
  background: var(--wash);
  font-weight: 600;
}

.providers__you th {
  padding-left: 12px;
}

/* On a phone each provider becomes a short block: name and total on top, the two prices underneath. */
@media (max-width: 40rem) {
  .providers__scroll {
    overflow: visible;
  }

  .providers__table,
  .providers__table tbody {
    display: block;
    min-width: 0;
  }

  .providers__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .providers__table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  .providers__table .providers__you {
    padding: 14px 12px;
    border-radius: 6px;
    background: var(--wash);
  }

  .providers__table .providers__you th,
  .providers__table .providers__you td {
    background: none;
  }

  .providers__table .providers__you .providers__gap {
    display: none;
  }

  .providers__table th,
  .providers__table td {
    padding: 0;
    border: 0;
    text-align: left;
  }

  .providers__table .providers__you th {
    padding-left: 0;
  }

  .providers__table .providers__total {
    grid-column: 2;
    grid-row: 1;
    color: var(--ink);
    font-weight: 600;
    text-align: right;
  }

  .providers__table .providers__total::after {
    content: " a day";
    color: var(--muted);
    font-weight: 400;
  }

  .providers__table .providers__usage,
  .providers__table .providers__daily,
  .providers__table .providers__gap {
    color: var(--muted);
    font-size: 0.8125rem;
  }

  .providers__table .providers__usage small {
    display: inline;
  }

  .providers__table .providers__daily {
    text-align: right;
  }

  .providers__table .providers__daily::before {
    content: "Daily charge ";
  }

  .providers__table .providers__appliances {
    display: none;
  }

  .providers__table .providers__gap {
    grid-column: 1 / -1;
  }
}

.providers__notes {
  display: grid;
  gap: 8px;
  max-width: 46rem;
  padding-left: 1.2em;
  list-style: disc;
  color: var(--muted);
  font-size: 0.875rem;
}

code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--wash);
  font-family: var(--mono);
  font-size: 0.875em;
}

@media (forced-colors: active) {
  .impact__bar span,
  .legend__swatch--solar {
    background: CanvasText;
  }

  .impact__bar {
    background: GrayText;
  }
}

/* Setup: offer to fill in the chosen provider's published prices. */
.provider-fill {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}

.fields select {
  min-width: 0;
}

/* --- Reading a bill: a loading screen over the page while the bill is read ---------------------- */

.reading {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--top-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.reading[hidden] {
  display: none;
}

.is-reading,
.is-reading body {
  overflow: hidden;
}

.reading__panel {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 30rem);
  padding: clamp(28px, 5vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 40px var(--shadow);
  text-align: center;
}

.reading__panel:focus {
  outline: none;
}

.reading__spinner {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border: 3px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: reading-spin 900ms linear infinite;
}

@keyframes reading-spin {
  to {
    transform: rotate(360deg);
  }
}

.reading__title {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.2;
  text-wrap: balance;
}

.reading__note {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Less motion asked for: a slow pulse instead of a spinning ring. */
@media (prefers-reduced-motion: reduce) {
  .reading__spinner {
    border-top-color: var(--line);
    background: var(--ink);
    animation: reading-pulse 2s ease-in-out infinite;
  }

  @keyframes reading-pulse {
    50% {
      opacity: 0.35;
    }
  }
}

/* --- Trial features --------------------------------------------------------------------- */

.trial-grid {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}

@media (min-width: 46rem) {
  .trial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.trial-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.trial-card h2 {
  font-size: 1.5rem;
}

.trial-card p {
  max-width: 34rem;
  color: var(--muted);
}

.trial-card .trial-card__status {
  margin-top: auto;
  padding-top: 8px;
  color: var(--ink);
  font-weight: 500;
}

.trial-card:hover h2 {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.trial-sample {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.meter-bands .meter-bands__biggest .eyebrow {
  color: var(--ink);
}

.meter-finding h2 {
  margin-top: 10px;
  max-width: 44rem;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.2;
}

.meter-finding p {
  margin-top: 12px;
  max-width: 40rem;
}

.block > .figure__head h2 {
  margin: 0;
}

/* Time-of-use: each hour coloured by its price, with the household's use as a bar inside it. */
.tou__levels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.tou__levels li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tou__swatch {
  width: 14px;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.tou__chart {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
  height: 140px;
  margin-top: 18px;
}

.tou__hour {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 3px;
}

.tou__use {
  display: block;
  width: 45%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--ink);
}

.tou__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.tou__figures {
  margin-top: 16px;
}

/* Bill reminders */
.push__status {
  margin-top: 10px;
  font-size: 1.0625rem;
}

.push__details {
  margin-top: 16px;
}

.push__preview {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--wash);
  max-width: 28rem;
}

.push__preview img {
  border-radius: 8px;
}

.push__preview p {
  margin-top: 2px;
  color: var(--text);
  font-size: 0.9375rem;
}

.label-read {
  margin-bottom: 16px;
}

/* --- Bill X-ray: where the yearly saving in the figures comes from, one short row each. --- */

.intro--home {
  padding: clamp(28px, 6vw, 64px) 0 clamp(16px, 3vw, 28px);
}

.xray {
  margin-top: clamp(28px, 5vw, 48px);
  max-width: 56rem;
}

.xray__heading {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
}

.xray__total {
  color: var(--green-ink);
}

.xray__lines {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.xray__line {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

.xray__kind {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.xray__name {
  color: var(--ink);
  font-weight: 500;
}

.xray__name small {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
}

.xray__name .tag {
  margin-left: 4px;
}

.xray__value {
  color: var(--green-ink);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
}

.xray__value small {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* Electricity the list does not explain is shown, but not counted in the total. */
.xray__line--check .xray__value {
  color: var(--muted);
}

.xray__ask {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.button--small {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.875rem;
}

.xray__area {
  grid-column: 1 / -1;
  max-width: 36rem;
}

.xray__area select {
  flex: 1 1 14rem;
  min-height: 46px;
}

.xray__actions {
  margin-top: 20px;
}

/* On a phone: the kind of finding on its own line, then what it is and its amount side by side. */
@media (max-width: 38rem) {
  .xray__line {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 0;
  }

  .xray__kind {
    grid-column: 1 / -1;
  }

  .xray__ask {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* The hourly chart follows the figures card closely: it is the same day, hour by hour. */
.bento + .section-title,
.live + .section-title {
  margin-top: clamp(32px, 5vw, 48px);
}

/* A heading over a group of cards on Home. */
.section-title {
  margin: clamp(48px, 8vw, 80px) 0 16px;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
}

/* The hourly chart on its own, when there is no flow diagram beside it. */
@media (min-width: 62rem) {
  .bento--single .supply {
    grid-column: 1 / -1;
  }
}

.solar-try {
  margin-top: 16px;
  font-size: 0.9375rem;
}

/* The hours that are free on some plans, behind the hourly columns. */
.plot__free {
  position: absolute;
  top: -26px;
  bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--green-bg);
}

.legend__swatch--free {
  background: var(--green-bg);
  box-shadow: inset 0 0 0 1px var(--green-ink);
}

/* --- Plans: is free midday power worth it? --- */

.verdict__title {
  margin-top: 14px;
  max-width: 40rem;
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  line-height: 1.15;
  text-wrap: balance;
}

.verdict--yes .verdict__title {
  color: var(--green-ink);
}

.verdict__why {
  margin-top: 14px;
  max-width: 40rem;
}

.verdict__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.verdict__figures .figure__amount {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.tou {
  margin-top: 16px;
}

/* The plans table scrolls sideways on a narrow phone rather than widening the page. */
.plans__scroll {
  overflow-x: auto;
}

.tou__hour--free {
  box-shadow: inset 0 0 0 1px var(--green-ink);
  background: var(--green-bg) !important;
}

.tou__swatch--free {
  background: var(--green-bg) !important;
  border-color: var(--green-ink);
}

/* --- The household's link --- */

.share__track {
  margin-top: 20px;
}

.share__cta {
  margin-top: clamp(48px, 8vw, 80px);
}

.tell__actions .link {
  font-size: 0.9375rem;
}

/* --- The plan switch on Home's hourly chart: each hour on the price paid now, or on a free midday plan --- */

.switch {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  margin-top: 14px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: var(--wash);
}

.switch__option {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 9999px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.switch__option:hover {
  color: var(--ink);
}

.switch__option[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: 0 1px 3px var(--shadow);
  color: var(--ink);
}

.col__now,
.col__later {
  flex: none;
  width: min(18px, 68%);
  min-height: 1px;
  border-radius: 4px 4px 0 0;
  transition: height 300ms var(--ease);
}

.col__now {
  background: var(--chart-rest);
}

.col__later {
  background: var(--chart-mine);
}

.col__later--free {
  background: var(--green-ink);
}

.versus[data-mode="now"] .col__later,
.versus[data-mode="free"] .col__now {
  display: none;
}

/* The free hours are only marked when the free plan is showing. */
.versus[data-mode="now"] .versus__band {
  display: none;
}

.supply__frame .col.is-now .col__now {
  background: var(--text);
}

/* The hour's figure for the plan not showing steps back. */
.versus[data-mode="now"] .versus__stat--later,
.versus[data-mode="free"] .versus__stat--now {
  opacity: 0.55;
}

.versus__totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.versus__total dt {
  color: var(--muted);
  font-size: 0.8125rem;
}

.versus__total .versus__plan {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.versus__total dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.versus__total dd span {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.versus[data-mode="now"] .versus__total--later dd,
.versus[data-mode="free"] .versus__total--now dd {
  color: var(--muted);
}

.versus__total--gap dd {
  color: var(--green-ink);
}

@media (max-width: 30rem) {
  .versus__totals {
    grid-template-columns: 1fr 1fr;
  }

  .versus__total--gap {
    grid-column: 1 / -1;
  }

  .switch {
    display: flex;
    align-self: stretch;
  }

  .switch__option {
    flex: 1;
    justify-content: center;
    padding: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .col__now,
  .col__later,
  .switch__option {
    transition: none;
  }
}

/* --- Trial: the team's meter, live --- */

.live__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.live__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--wash);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}

.live__status {
  white-space: nowrap;
}

/* Digits all the same width, so a changing reading does not nudge the text beside it. */
.live__power,
.live__number,
.live .figure__note,
.live .plot__y span {
  font-variant-numeric: tabular-nums;
}

/* Drawn at full size before the first reading arrives, so filling it in moves nothing on the page. */
.live.is-loading .live__power,
.live.is-loading .live__number {
  color: var(--line-strong);
}

.live__open {
  flex: none;
  color: var(--ink);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Filling the card in must never change its height, or the page below jumps on a phone: the top row and
   each figure's note stay on one line, and anything too long ends in "…". */
.live__top {
  flex-wrap: nowrap;
}

.live__status {
  min-width: 0;
}

.live__status [data-live-seen],
.live .figure__note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live__empty {
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.live__device {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.live__status.is-live {
  background: var(--green-bg);
  color: var(--green-ink);
}

.live__status.is-live .live__dot {
  background: var(--green-ink);
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  50% { opacity: 0.35; }
}

.live__name {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

/* On a phone: power right now across the top, then the three smaller figures two to a row. */
.live__figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 16px;
  margin-top: 24px;
}

.live__now {
  grid-column: 1 / -1;
}

/* Two to a row on a phone: small enough that "2.11 kWh" stays on one line. */
.live__number {
  font-size: clamp(1.5rem, 7vw, 2.25rem);
  white-space: nowrap;
}

@media (min-width: 46rem) {
  .live__figures {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    align-items: end;
  }

  .live__now {
    grid-column: auto;
  }
}

.live__power {
  margin-top: 8px;
  color: var(--ink);
  font-size: clamp(3rem, 9vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.live__chart {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.live__cols {
  grid-template-columns: repeat(60, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.live__col {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.live__col > span {
  position: relative;
  width: 70%;
  min-height: 1px;
  border-radius: 2px 2px 0 0;
  background: var(--chart-mine);
  transition: height 400ms var(--ease);
}

.live__col.is-empty > span {
  background: transparent;
}

/* With solar: the bottom of each minute's bar, as much as the panel covered, in the solar colour. */
.live__sun {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background: var(--solar);
  transition: height 400ms var(--ease), opacity 200ms var(--ease);
}

/* The switch only changes which of two same-sized versions shows, so nothing on the page moves. */
.live[data-view="grid"] .live__as-solar,
.live[data-view="solar"] .live__as-grid {
  display: none;
}

.live[data-view="grid"] .live__sun {
  opacity: 0;
}

.live__top--switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px 16px;
}

.live__switch {
  margin-top: 0;
}

.live__top--switch > .live__status {
  justify-self: start;
}

/* The legend keeps its room with "Grid only" too, since on a phone it takes a line of its own. */
.live[data-view="grid"] .live__legend.live__as-solar {
  display: flex;
  visibility: hidden;
}

/* On a phone the switch has a row of its own under the status, whatever the status says. */
@media (max-width: 38rem) {
  .live__top--switch {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "status other" "switch switch";
  }

  .live__top--switch > .live__status {
    grid-area: status;
  }

  .live__top--switch > .live__switch {
    grid-area: switch;
  }

  .live__top--switch > :last-child {
    grid-area: other;
  }
}

.live__switch .switch__option {
  white-space: nowrap;
}

.live__chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
}

.live__legend {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.live__key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--chart-mine);
}

.live__key + .live__key,
.live__legend .live__key:not(:first-child) {
  margin-left: 6px;
}

.live__key--sun {
  background: var(--solar);
}

.live__saved {
  color: var(--green-ink);
}

/* The solar diagram's nodes, wires and moving dots, live: a little shorter inside the meter card. */
.live__flow {
  height: 200px;
  margin-top: 28px;
}

/* With "Grid only" the panel is drawn, but as not counted, so switching does not change the card's size. */
.live[data-view="grid"] .live__flow .flow__node--solar {
  border-style: dashed;
  background: var(--surface);
}

.live[data-view="grid"] .live__flow .flow__node--solar strong {
  color: var(--muted);
  font-weight: 500;
}

/* More made than used: the dots on the grid line run the other way, back to the grid, in the solar colour. */
.flow__route.is-back .flow__current {
  stroke: var(--solar);
  animation-direction: reverse;
}

.live__axis {
  display: flex;
  justify-content: space-between;
}

.live__axis span {
  position: static;
  padding-top: 9px;
  transform: none;
}

.live__foot {
  margin-top: 16px;
  font-size: 0.8125rem;
}

/* What switched on today, under the live meter: one row a switch-on, newest first. */
.switches {
  margin-top: clamp(40px, 6vw, 64px);
  max-width: 56rem;
}

.switches__head h2,
.always h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
}

.switches__lede {
  margin: 4px 0 0;
  font-size: 0.875rem;
}

.switches__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.switch-on {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 4px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.switch-on__time {
  margin: 2px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.switch-on__what,
.switch-on__guess {
  margin: 0;
  font-size: 0.9375rem;
}

.switch-on__what strong {
  font-variant-numeric: tabular-nums;
}

.switch-on__guess {
  margin-top: 4px;
}

.switch-on__ask {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
}

.switch-on__ask form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.switch-on__other summary {
  list-style: none;
}

.switch-on__other summary::-webkit-details-marker {
  display: none;
}

.switch-on__other[open] summary {
  display: none;
}

.switch-on__name input[type="text"] {
  width: 14rem;
  min-height: 36px;
  font-size: 0.875rem;
}

.switches__none {
  margin-top: 16px;
  color: var(--muted);
}

/* On a phone the time sits above what switched on. */
@media (max-width: 38rem) {
  .switch-on {
    grid-template-columns: minmax(0, 1fr);
  }
}

.always {
  margin-top: clamp(40px, 6vw, 64px);
  max-width: 56rem;
}

.always > p {
  margin-top: 10px;
}

.always__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 12px 0 8px;
}

.always__power {
  color: var(--ink);
  font-size: clamp(2.25rem, 6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.always__year {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
}

.always__label {
  margin-top: 20px;
}

.always__list {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--ink);
}

.always__list li + li {
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .live__status.is-live .live__dot,
  .live__col > span,
  .live__sun {
    animation: none;
    transition: none;
  }
}