/* The power bill (I1, October 7, 2026; I1b, October 8): the slider's slip redrawn as the voter's own power bill, on Taylor's word
   ("make it look like a power bill instead of a receipt"; "this is actual thing we show that are often laying on
   people's kitchen counters, right? So let's connect that dot straight to the voter.").
   Drawn from each company's own bill: Dominion Energy South Carolina's sample bill (its Understand My Bill page:
   the logo and the two-row Amount Due box at the top, the blue section bars, Current Charges) and
   Berkeley Electric Cooperative's (its New Member Handbook, January 2026: the round Total Amount Due, the blue
   bars, and a blue head over a pale blue cell). The layout is the bill's; the colors and type are Samuel's
   (New Look guide, October 6; brand book, October 7): Royal, Pale blue, White; Sand for the one control a thumb
   moves (Taylor: "Sand on both."); Literata for Samuel's figure and line, Lexend for the bill itself; on white,
   blue for headlines and figures and black for the rest. Nothing on the bill is made up: no account number, no
   date, no address, no meter reading.
   Written on the site's token names, each with the locked value as its fallback. The site serves the two typefaces. */
.pb {
  --pb-royal: var(--royal, #1F3C99);
  --pb-pale: var(--pale, #A8C8E6);
  --pb-white: var(--white, #FFFFFF);
  --pb-sand: var(--sand, #D9C4A0);
  --pb-ink: var(--ink, #000000);
  --pb-display: var(--display, "Literata", Georgia, serif);
  --pb-text: var(--text, "Lexend", system-ui, sans-serif);
  --pb-tint: #DBE8F5;
  --pb-pad: 16px;      /* the bill's margin */
  --pb-over: 8px;      /* how far a bar runs past the text on each side */
  background: var(--pb-royal);
  color: var(--pb-white);
  font-family: var(--pb-text);
  font-size: 17px;
  line-height: 1.5;
  padding: 44px 0 56px;
}
.pb *, .pb *::before, .pb *::after { box-sizing: border-box; }
.pb h2, .pb p, .pb ol, .pb li, .pb fieldset, .pb legend { margin: 0; padding: 0; }
.pb p { text-wrap: pretty; }
.pb ::selection { background: var(--pb-pale); color: var(--pb-ink); }
.pb .pb-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 1fr; }
.pb .pb-head { font-family: var(--pb-display); font-weight: 900; font-size: var(--head, 30px); line-height: 1.08; color: var(--pb-white);
               letter-spacing: 0; text-wrap: balance; font-feature-settings: "liga" 0; max-width: 13em; }

/* Who sends the bill: two choices on the royal field, one tap each, 48 points tall. The bill under them changes. */
.pb .pb-who { border: 0; min-width: 0; margin-top: 24px; width: 100%; max-width: 480px; }
.pb .pb-who legend { float: left; width: 100%; font-weight: 600; font-size: 16px; line-height: 1.3; margin-bottom: 10px; color: var(--pb-white); }
.pb .pb-pair { clear: both; display: grid; grid-template-columns: 1fr 1fr; }
.pb .pb-pair label { position: relative; display: block; }
.pb .pb-pair input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pb .pb-pair span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 8px; text-align: center;
                    border: 1.5px solid var(--pb-white); color: var(--pb-white); font-weight: 600; font-size: 15px; line-height: 1.2; }
.pb .pb-pair label + label span { border-left-width: 0; }
.pb .pb-pair label:first-child span { border-radius: 2px 0 0 2px; }
.pb .pb-pair label:last-child span { border-radius: 0 2px 2px 0; }
.pb .pb-pair input:checked + span { background: var(--pb-white); color: var(--pb-royal); }
.pb .pb-pair input:focus-visible + span { outline: 3px solid var(--pb-white); outline-offset: 3px; }
.pb .pb-pair input:disabled { cursor: default; }

/* The bill: one sheet of paper on the royal field. */
.pb .pb-sheet { background: var(--pb-white); color: var(--pb-ink); border-radius: 2px; padding: 18px var(--pb-pad) 4px; width: 100%;
                box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); }
.pb .pb-nojs { font-size: 15px; line-height: 1.4; margin-bottom: 14px; }
.pb.pb-live .pb-nojs { display: none; }

.pb .pb-sheet.pb-swap { animation: pb-swap 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pb-swap { from { opacity: 0.35; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The top of the bill: who sent it, and what is due. Both bills keep one height, so nothing under the top moves
   when the voter picks the other company: the company at the top left, the amount at the right, and the slider's
   label on the last line at the left, over the slider. */
.pb .pb-mast { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 12px; min-height: 116px; }
.pb .pb-from { grid-column: 1; grid-row: 1; min-width: 0; }
.pb .pb-due { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.pb .pb-label { grid-column: 1; grid-row: 2; align-self: end; max-width: 8.4em; font-weight: 600; font-size: 16px; line-height: 1.25; text-wrap: balance; }
.pb .pb-co { display: none; }
.pb[data-company="dominion"] .pb-co-dominion, .pb[data-company="bec"] .pb-co-bec { display: block; }
.pb img.pb-co { width: 100%; max-width: 164px; height: auto; margin-top: 2px; }
.pb img.pb-co-dominion { max-width: 150px; }

/* Dominion's bill prints the amount in a ruled box, the top row in blue. */
.pb .pb-due { width: 168px; border: 2px solid var(--pb-ink); font-variant-numeric: tabular-nums; }
.pb .pb-due p { display: flex; justify-content: space-between; align-items: baseline; column-gap: 8px; padding: 7px 9px; font-weight: 600; font-size: 13px; line-height: 1.3; white-space: nowrap; }
.pb .pb-due .pb-due-a { background: var(--pb-royal); color: var(--pb-white); padding-top: 8px; padding-bottom: 8px; }
.pb .pb-due .pb-due-v { font-size: 23px; line-height: 1.1; }
.pb .pb-due .pb-due-b { justify-content: flex-end; }

/* Berkeley Electric's prints it in a ring. */
.pb[data-company="bec"] .pb-due { width: 116px; height: 116px; border: 5px solid var(--pb-ink); border-radius: 50%; background: var(--pb-tint);
                                  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pb[data-company="bec"] .pb-due p { display: block; padding: 0; background: none; color: var(--pb-ink); font-size: 10px; line-height: 1.2;
                                    text-transform: uppercase; letter-spacing: 0.03em; white-space: normal; }
.pb[data-company="bec"] .pb-due .pb-due-a { background: none; color: var(--pb-ink); padding: 0; }
.pb[data-company="bec"] .pb-due .pb-due-l { display: block; max-width: 7.6em; margin: 0 auto; }
.pb[data-company="bec"] .pb-due .pb-due-v { display: block; font-size: 28px; line-height: 1.12; letter-spacing: 0; margin-top: 1px; }
.pb[data-company="bec"] .pb-due .pb-due-b { margin-top: 3px; padding: 4px 6px 0; border-top: 1px solid var(--pb-ink); }

/* The bill's amount: the one control a thumb moves, sand on a royal and pale blue track, 44 points tall. */
.pb .pb-bill { margin-top: 8px; }
.pb input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 2px 0 0;
                        background: transparent; cursor: pointer; touch-action: pan-y; --pb-fill: 34%; }
.pb input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--pb-royal) 0 var(--pb-fill), var(--pb-pale) var(--pb-fill) 100%); }
.pb input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; margin-top: -13px;
  border-radius: 50%; background: var(--pb-sand); border: 3px solid var(--pb-royal); }
.pb input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--pb-pale); }
.pb input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--pb-royal); }
.pb input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--pb-sand); border: 3px solid var(--pb-royal); }
.pb input[type=range]:focus { outline: none; }
.pb input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--pb-white), 0 0 0 6px var(--pb-royal); }
.pb input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--pb-white), 0 0 0 6px var(--pb-royal); }
.pb input[type=range]:disabled { cursor: default; }

/* Both bills head each part with a blue bar, and both print the words Current Charges: what is in the bill now.
   A bar runs a little past the text on each side, so every line of type on the bill keeps one left edge and one right edge. */
.pb .pb-bar { margin: 8px calc(var(--pb-over) * -1) 0; padding: 5px var(--pb-over); background: var(--pb-royal); color: var(--pb-white);
              font-weight: 600; font-size: 14px; line-height: 1.3; }
.pb .pb-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; font-size: 15px; line-height: 1.3; }
.pb .pb-line b { font-weight: 600; white-space: nowrap; }

/* The bottom line: what data centers could add, set the way each bill sets its amount. Dominion's bill rules a
   box; Berkeley Electric's sets a pale blue cell. Who adds it is the bill's largest line of words, in black, right
   over the figure (Samuel, October 8: at a glance "it looks like I'm asking for $49/month"; "Maybe larger or more
   focus on the 'data centers' text"). */
.pb .pb-dc { margin: 0 calc(var(--pb-over) * -1); border: 2px solid var(--pb-ink); }
.pb .pb-dclabel { padding: 12px calc(var(--pb-over) - 2px) 0; font-family: var(--pb-display); font-weight: 900; font-size: 25px; line-height: 1.06;
                  letter-spacing: -0.005em; color: var(--pb-ink); font-feature-settings: "liga" 0; text-wrap: balance; }
.pb .pb-dclabel sup { font-family: var(--pb-text); font-weight: 600; font-size: 11px; vertical-align: 1em; }
.pb .pb-fig { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 4px; padding: 8px calc(var(--pb-over) - 2px) 12px; font-family: var(--pb-display);
              font-weight: 900; font-size: 52px; line-height: 1; color: var(--pb-royal); font-feature-settings: "liga" 0; }
.pb .pb-fig .pb-mo { font-family: var(--pb-text); font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--pb-ink); }
.pb[data-company="bec"] .pb-dc { border-color: var(--pb-tint); background: var(--pb-tint); }
.pb[data-company="bec"] .pb-dclabel { padding: 12px calc(var(--pb-over) - 2px) 0; }
/* Made clear (I1c's drawing, built October 9): the slider's two ends carry their dollars; a little more room sets the
   raise, which is part of the amount, apart from the figure, which is added on top; under the figure, what it is
   added to. */
.pb .pb-ends { display: flex; justify-content: space-between; margin-top: -3px; font-weight: 500; font-size: 12px; line-height: 1.3; font-variant-numeric: tabular-nums; }
/* What is in the bill now is one group, tight under its bar; what could be added stands apart from it, by space alone. */
.pb .pb-line { padding: 10px 0 24px; }
.pb .pb-fig { padding-bottom: 0; }
/* The plus: Literata draws it lighter and lower than its figures, so it is thickened to the figures' weight, lifted to
   their middle and pulled to the bill's left edge. */
.pb .pb-fig .pb-num { margin-left: -0.065em; white-space: nowrap; }
.pb .pb-fig .pb-plus { position: relative; top: -0.07em; -webkit-text-stroke: 0.03em currentColor; }
/* What the figure is added to: the amount the voter set, in the bill's own type, on its own line at every width. */
.pb .pb-top { padding: 4px calc(var(--pb-over) - 2px) 12px; font-weight: 500; font-size: 16px; line-height: 1.3; }
.pb .pb-top b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Samuel's plan, right under it, with his name. */
.pb .pb-plan { padding: 16px 0 14px; }
.pb .pb-pays { font-family: var(--pb-display); font-weight: 900; font-size: 22px; line-height: 1.12; color: var(--pb-royal);
               font-feature-settings: "liga" 0; }
.pb .pb-by { display: flex; align-items: center; column-gap: 8px; margin-top: 10px; font-weight: 600; font-size: 12px; line-height: 1.3;
             text-transform: uppercase; letter-spacing: 0.1em; }
.pb .pb-by::before { content: ""; width: 20px; height: 2px; background: var(--pb-royal); }

.pb sup { font-size: 0.68em; line-height: 0; margin-left: 2px; }

/* The bill and, under it on the royal field, where each figure comes from. */
.pb .pb-desk { width: 100%; max-width: 480px; margin-top: 16px; }
/* The two notes open from one line, "Sources" (H3, October 9, 2026), so the bill is the tallest thing in its row. */
.pb .pb-notes { position: relative; padding: 0 var(--pb-pad); color: var(--pb-white); }
.pb .pb-notes summary { display: inline-flex; align-items: center; column-gap: 10px; min-height: 44px; cursor: pointer; list-style: none;
                        font-weight: 600; font-size: 13px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pb-white); }
.pb .pb-notes summary::-webkit-details-marker { display: none; }
.pb .pb-notes summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--pb-sand);
                               border-bottom: 2px solid var(--pb-sand); transform: rotate(45deg); }
.pb .pb-notes[open] summary::after { margin-top: 4px; transform: rotate(225deg); }
.pb .pb-notes summary:focus-visible { outline: 3px solid var(--pb-sand); outline-offset: 2px; }
/* The notes are a card under the line, the sheet's own width, over what is under it, as the search's sources are
   (October 10, 2026). */
.pb .pb-notes-in { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; display: grid; padding: 12px 14px;
                   border-radius: 2px; background: var(--pb-white); color: var(--pb-ink); outline: 1px solid var(--pb-pale); outline-offset: -1px; }
/* Each company has its own list of the two notes. Both lists sit in the one place and only the picked company's
   shows, so the notes keep the longer list's room at any width and nothing under them moves. */
.pb .pb-notes ol { grid-area: 1 / 1; list-style: none; display: grid; row-gap: 6px; align-content: start; visibility: hidden; }
.pb[data-company="dominion"] .pb-nl-dominion, .pb[data-company="bec"] .pb-nl-bec { visibility: visible; }
.pb .pb-notes li { display: grid; grid-template-columns: 16px 1fr; font-size: 12.5px; line-height: 1.45; }

/* Under the bill, on the royal field */
.pb .pb-lawblock { margin-top: 24px; }
.pb .pb-law { font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--pb-white); }

/* Said to a screen reader when the voter lets go of the slider or picks a company; never seen. */
.pb .pb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (min-width: 400px) {
  .pb { --pb-pad: 20px; }
  .pb .pb-wrap { padding: 0 20px; }
}
@media (min-width: 900px) {
  .pb { padding: 88px 0 96px; --pb-pad: 28px; --pb-over: 10px; }
  /* The words beside the bill are one stack, the headline, the chooser and the Senate's sentence, set at the middle of
     the bill's height, as the first screen sets its words beside its photograph. The row is the bill's height. */
  .pb .pb-wrap { grid-template-columns: 6fr 5fr; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 88px; align-items: start; }
  .pb .pb-ask { grid-column: 1; grid-row: 2; }
  .pb .pb-who { grid-column: 1; grid-row: 3; margin-top: 36px; max-width: 420px; }
  .pb .pb-desk { grid-column: 2; grid-row: 1 / span 5; justify-self: end; margin-top: 0; }
  .pb .pb-sheet { padding: 28px var(--pb-pad) 10px; }
  .pb .pb-lawblock { grid-column: 1; grid-row: 4; align-self: start; margin-top: 36px; max-width: 420px; }
  .pb .pb-head { font-size: var(--head, 40px); max-width: 12em; }
  .pb .pb-mast { min-height: 132px; }
  .pb .pb-label { font-size: 17px; }
  .pb img.pb-co { max-width: 204px; }
  .pb img.pb-co-dominion { max-width: 184px; }
  .pb .pb-due { width: 196px; }
  .pb .pb-due p { padding: 8px 12px; font-size: 14px; }
  .pb .pb-due .pb-due-a { padding-top: 9px; padding-bottom: 9px; }
  .pb .pb-due .pb-due-v { font-size: 28px; }
  .pb[data-company="bec"] .pb-due { width: 132px; height: 132px; border-width: 6px; }
  .pb[data-company="bec"] .pb-due p { font-size: 11px; }
  .pb[data-company="bec"] .pb-due .pb-due-v { font-size: 32px; }
  .pb .pb-fig { font-size: 60px; }
  .pb .pb-top { font-size: 17px; }
  .pb .pb-ends { font-size: 13px; }
  .pb .pb-dclabel { font-size: 28px; }
  .pb .pb-pays { font-size: 24px; }
}
@supports (color: color-mix(in srgb, red, blue)) { .pb { --pb-tint: color-mix(in srgb, var(--pb-pale) 42%, var(--pb-white)); } }
@media (prefers-reduced-motion: reduce) { .pb *, .pb *::before, .pb *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  .pb .pb-pair input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .pb .pb-bar, .pb .pb-dc, .pb .pb-due .pb-due-a { forced-color-adjust: none; }
}