/* The road (I3b, redrawn October 8, 2026; built October 9; rebuilt by H3 that evening). Taylor, October 8, on the
   first two ideas: "The Bill is alomst identical to the power bill feature." October 9, on the piece as a road drawn
   in plan, two lanes with broken lines and two paragraphs under them: "This section is wild. I have no idea what is
   going on here."
   So it is one object on one field, and it reads as a sum does. His line runs across it: "You paid for the roads,"
   over what the county's penny paid on the road picked; "the builders did not," over the builders' road fee since
   2014, $0; the two figures at one size, each with its one label; one rule under them; and under the rule "and
   Columbia made sure." beside the bill that died, with its one line of sources. Nothing else.
   Its ground is the look's third, pale blue: the traffic map stands on white and the power bill on royal. On pale
   blue, headlines and figures are royal and the rest is black, as on white. Sand marks the one control.
   The page supplies the tokens; the values typed here are the locked ones, as fallbacks. On a laptop the two sides
   meet at the page's middle line and each keeps the page's lane from it (--lane).
   Every word, figure and source is road.data.json's. */
.rd {
  --rd-royal: var(--royal, #1F3C99);
  --rd-pale: var(--pale, #A8C8E6);
  --rd-white: var(--white, #FFFFFF);
  --rd-sand: var(--sand, #D9C4A0);
  --rd-ink: var(--ink, #000000);
  --rd-display: var(--display, "Literata", Georgia, serif);
  --rd-text: var(--text, "Lexend", system-ui, sans-serif);
  --rd-side: var(--gutter, 16px);   /* the site's side margin wherever the piece stands (on its own check page it had 16 px and its figure came within 8 px of a phone's edge) */
  --rd-lane: var(--lane, 0px);
  background: var(--rd-pale); color: var(--rd-ink); font-family: var(--rd-text); font-size: 17px; line-height: 1.5;
  padding: 56px 0;
}
.rd *, .rd *::before, .rd *::after { box-sizing: border-box; }
.rd h2, .rd p { margin: 0; padding: 0; }
.rd p { text-wrap: pretty; }
.rd ::selection { background: var(--rd-royal); color: var(--rd-white); }
.rd .rd-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: var(--rd-side); padding-right: var(--rd-side); }
.rd .rd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Every road's sum is set in the one place and only the picked road's shows, so nothing moves. */
.rd .rd-stack { display: grid; }
.rd .rd-set { grid-area: 1 / 1; visibility: hidden; align-self: start; }
.rd[data-road="clements"] .rd-set-clements, .rd[data-road="railroad"] .rd-set-railroad,
.rd[data-road="tanner"] .rd-set-tanner, .rd[data-road="county"] .rd-set-county { visibility: visible; }

/* Taylor's line, a clause over each figure and the last under the rule. On a phone the longest clause runs the measure. */
.rd .rd-clause { font-family: var(--rd-display); font-weight: 900; font-size: min(30px, calc((100vw - 2 * var(--rd-side)) / 13.475)); line-height: 1.08;
                 letter-spacing: 0; font-feature-settings: "liga" 0; white-space: nowrap; color: var(--rd-royal); }

/* The two sides: what you paid, what the builders paid. One size, one label each. */
.rd .rd-pair { display: grid; row-gap: 32px; }
.rd .rd-fig { font-family: var(--rd-display); font-weight: 900; font-size: min(60px, calc((100vw - 2 * var(--rd-side)) / 6.6)); line-height: 1;
              font-feature-settings: "liga" 0; margin: 10px 0 0 -0.03em; white-space: nowrap; font-variant-numeric: lining-nums; color: var(--rd-royal); }
/* where the sum came from. In the first the road's name is the one control: picked inside the sentence. */
.rd .rd-from { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 8px; min-height: 44px; margin-top: 6px; font-weight: 500; font-size: 16px; line-height: 1.3; }
/* on a phone the road's name takes its own line under these words, so both sides set the words in the same box */
.rd .rd-from label, .rd .rd-from > span:not(.rd-pick) { padding: 6px 0 2px; }
.rd .rd-pick { position: relative; display: inline-block; }
.rd .rd-pick select { -webkit-appearance: none; appearance: none; display: block; min-height: 44px; margin: 0; padding: 0 38px 0 0;
                      border: 0; border-bottom: 2px solid var(--rd-royal); border-radius: 0; background: transparent; color: var(--rd-royal);
                      font-family: var(--rd-text); font-weight: 600; font-size: 16px; line-height: 1.2; cursor: pointer; }
.rd .rd-pick select:focus-visible { outline: 3px solid var(--rd-royal); outline-offset: 3px; }
.rd .rd-pick select:disabled { cursor: default; opacity: 1; }
.rd .rd-pick option { color: var(--rd-ink); background: var(--rd-white); }
.rd .rd-chev { position: absolute; right: 0; top: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--rd-sand); pointer-events: none; }
.rd .rd-chev::before { content: ""; position: absolute; left: 9.5px; top: 7.5px; width: 9px; height: 9px; border-right: 3px solid var(--rd-royal);
                       border-bottom: 3px solid var(--rd-royal); transform: rotate(45deg); }
/* When the road changes, its sum comes in again. The builders' side does not move. */
.rd .rd-paid.rd-lay .rd-fig { animation: rd-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes rd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Under the rule: the third clause, and what Columbia did. */
.rd .rd-made { margin-top: 28px; padding-top: 28px; border-top: 2px solid var(--rd-royal); display: grid; row-gap: 12px; }
.rd .rd-law { font-weight: 500; font-size: 18px; line-height: 1.4; max-width: 30em; }
/* Its sources, behind one small line, as the search's are: a card under the line, over what is under it. */
.rd .rd-cite { position: relative; justify-self: start; margin-top: -4px; }
.rd .rd-cite summary { display: inline-flex; align-items: center; column-gap: 9px; min-height: 44px; cursor: pointer; list-style: none;
                       font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-royal); }
.rd .rd-cite summary::-webkit-details-marker { display: none; }
.rd .rd-cite summary::after { content: ""; flex: none; width: 6px; height: 6px; margin-top: -4px; border-right: 2px solid var(--rd-royal);
                              border-bottom: 2px solid var(--rd-royal); transform: rotate(45deg); }
.rd .rd-cite[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.rd .rd-cite summary:focus-visible { outline: 3px solid var(--rd-royal); outline-offset: 2px; }
.rd .rd-card { position: absolute; left: 0; top: 100%; z-index: 3; display: grid; row-gap: 6px; width: max-content;
               max-width: min(100vw - 2 * var(--rd-side), 27em); margin: 0; padding: 12px 14px; list-style: none; border-radius: 2px;
               background: var(--rd-white); color: var(--rd-ink); font-size: 13px; line-height: 1.45; }

@media (min-width: 400px) { .rd { --rd-side: 20px; } }
@media (min-width: 480px) {
  /* where the road's name fits beside the words before it, both sides set that line in one 44 point line box,
     so the two lines stand at the same height and the chooser's words sit on the words' own line */
  .rd .rd-from { align-items: center; margin-top: 2px; }
  .rd .rd-from, .rd .rd-from label { line-height: 44px; }
  .rd .rd-from label, .rd .rd-from > span:not(.rd-pick) { padding: 0; }
  .rd .rd-pick select { height: 44px; line-height: 44px; }
}
@media (min-width: 900px) {
  .rd { padding: 96px 0; --rd-lane: var(--lane, 56px); }
  .rd .rd-pair, .rd .rd-made { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(2 * var(--rd-lane)); }
  .rd .rd-clause { font-size: clamp(30px, 3vw, 40px); line-height: 1.05; }
  .rd .rd-fig { font-size: clamp(48px, calc((50vw - 90px) / 7.2), 76px); margin-top: 14px; }
  .rd .rd-from { margin-top: 10px; font-size: 18px; }
  .rd .rd-pick select { font-size: 18px; }
  .rd .rd-made { margin-top: 36px; padding-top: 36px; align-items: start; }
  .rd .rd-made .rd-law { grid-column: 2; grid-row: 1; }
  .rd .rd-made .rd-cite { grid-column: 2; grid-row: 2; }
  .rd .rd-made .rd-clause { grid-column: 1; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) { .rd *, .rd *::before, .rd *::after { animation: none !important; transition: none !important; } }