/* The traffic map (I2, The roads fill; October 8, 2026). Self-contained: every rule is under .tm, and the colors and
   typefaces come from the page's tokens with the locked look's values as fallbacks (New Look guide, October 6;
   brand book, October 7): Royal, Pale blue, White; on white the headline and figures royal, the rest black; Sand
   for the one control a thumb moves (Taylor, October 7: "Sand on both."); Literata Black and Lexend. No red.
   The map is drawn in its own units (1000 wide) and scales whole, so a road keeps its width against the map at
   every screen size; only the names over it are set in points, in the list at the end of this file. */
.tm {
  --tm-royal: var(--royal, #1F3C99);
  --tm-pale: var(--pale, #A8C8E6);
  --tm-white: var(--white, #FFFFFF);
  --tm-sand: var(--sand, #D9C4A0);
  --tm-ink: var(--ink, #000000);
  --tm-display: var(--display, "Literata", Georgia, serif);
  --tm-text: var(--text, "Lexend", system-ui, sans-serif);
  --tm-water: #DBE8F5;   /* the pale blue, lightened: water, the same tint the power bill uses */
  --tm-land: #F4F5FA;    /* the royal at one twentieth on white: the district */
  --tm-shore: #9AA7D1;   /* the royal at less than half: the district's edge */
  --tm-counted: calc(10 / 15);   /* where the last counted year stands along the years (2025, of 2015 to 2030); the script sets it from the data */
  --tm-lastbar: 65.69%;          /* the middle of that year's bar, as a share of the bars' width (the eleventh of sixteen); the script sets it too */
  --tm-fill: calc(100% * var(--tm-counted));   /* how far along the years the handle is; the page opens on the last counted year */
  background: var(--tm-white);
  color: var(--tm-ink);
  font-family: var(--tm-text);
  -webkit-font-smoothing: antialiased;
}
.tm *, .tm *::before, .tm *::after { box-sizing: border-box; }
.tm :where(p, h2) { margin: 0; text-wrap: pretty; }
.tm-nb { white-space: nowrap; }
.tm ::selection { background: var(--tm-pale); color: var(--tm-ink); }
.tm-wrap { max-width: 1240px; margin: 0 auto; padding: 40px 16px 52px; }

.tm-head { font-family: var(--tm-display); font-weight: 900; font-size: var(--head, 30px); line-height: 1.08; letter-spacing: 0;
           color: var(--tm-royal); font-feature-settings: "liga" 0; text-wrap: balance; }
.tm-lede { font-size: 18px; line-height: 1.45; margin-top: 14px; max-width: 32ch; }

/* The map. */
.tm-stage { margin: 22px -16px 0; }
.tm-mapbox { position: relative; container-type: inline-size; }
.tm-map { display: block; width: 100%; height: auto; overflow: hidden; touch-action: manipulation; }
.tm-map path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tm-map .tm-water { fill: var(--tm-water); }
.tm-map .tm-district { fill: var(--tm-land); stroke: var(--tm-shore); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.tm-map .tm-around { stroke: var(--tm-pale); stroke-width: 1.1px; vector-effect: non-scaling-stroke; }
.tm-edges path, .tm-map .tm-gap { stroke: var(--tm-white); }
/* Each road's bed is as wide as its fullest year; the royal fills it as the year moves. */
.tm-beds path, .tm-map .tm-bed { stroke: var(--tm-royal); transition: stroke-width .35s ease; }
/* A road's color is its own stroke (shaded by growth); royal stands behind it until the page sets one. */
.tm-fills, .tm-chosen, .tm-near { stroke: var(--tm-royal); }
.tm-fills path, .tm-map .tm-fill { transition: stroke-width .35s ease, stroke .35s ease; }
/* The chosen stretch, drawn again on top of the map inside a royal line with white between, so where it starts
   and ends is plain. The same, lighter, under a mouse. */
.tm-map .tm-ring { stroke: var(--tm-royal); }
.tm-near .tm-ring { stroke: var(--tm-shore); }
.tm-near[hidden] { display: none; }
.tm-jump .tm-fill, .tm-jump .tm-bed { transition: none; }
.tm-map.tm-can { cursor: pointer; }

/* What a road's color means. */
.tm-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; padding: 0 16px; font-size: 13px; line-height: 1.3; }
/* What a voter can do with the map, said once under it (three cold readers: "Nothing says to tap a road"). It shows
   only when the script has made the roads something to pick. */
.tm-hint { display: none; flex-basis: 100%; font-weight: 600; color: var(--tm-royal); }
.tm-live .tm-hint { display: block; }
/* The key names both ends of the color: as in the first year, and the most. */
.tm-k { flex: none; width: 64px; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--tm-pale), var(--tm-royal)); outline: 1px solid var(--tm-royal); outline-offset: -1px; }

/* The year. */
.tm-yearrow { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 18px; margin-top: 14px; }
/* The year keeps one width whatever its digits, so the track beside it never moves as the year changes. */
.tm-year { font-family: var(--tm-display); font-weight: 900; font-size: 44px; line-height: 1; color: var(--tm-royal); width: 2.62em;
           font-variant-numeric: lining-nums tabular-nums; }
/* What kind of year it is, on a line of its own under the year and its track: a count, or a projection and how it
   is made (L3). One line at every width, so nothing under it moves as the year crosses over. */
.tm-kind { grid-column: 1 / -1; font-weight: 500; font-size: 13px; line-height: 1.3; margin-top: 6px; white-space: nowrap; }
@media (max-width: 339px) { .tm-kind { font-size: 12.5px; } }
.tm-slide { min-width: 0; }
.tm-ends { display: flex; justify-content: space-between; font-size: 13px; line-height: 1.3; }
/* Each end's year sits under the middle of the handle when the handle is at that end, and the last counted year
   under the handle's middle when it stands there (the handle is 32 points wide and stops 16 short of each end). */
.tm-slide .tm-ends { position: relative; margin-top: -2px; padding: 0 1px; }
.tm-lastcount { position: absolute; left: calc(16px + (100% - 32px) * var(--tm-counted)); transform: translateX(-50%); }
/* The one control a thumb moves: sand on a royal and pale blue track, 44 points tall, as on the power bill. */
.tm input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0;
                        background: transparent; cursor: pointer; touch-action: pan-y; }
/* The track is whole through the counted years and dashed past the last one: white gaps laid over its right end,
   from the middle of the handle's place at the last counted year. */
.tm input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: repeating-linear-gradient(to right, transparent 0 5px, var(--tm-white) 5px 9px) right / calc((100% - 32px) * (1 - var(--tm-counted)) + 16px) 100% no-repeat,
              linear-gradient(to right, var(--tm-royal) 0 var(--tm-fill), var(--tm-pale) var(--tm-fill) 100%); }
.tm input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; margin-top: -13px;
  border-radius: 50%; background: var(--tm-sand); border: 3px solid var(--tm-royal); }
.tm input[type=range]::-moz-range-track { height: 6px; border-radius: 3px;
  background: repeating-linear-gradient(to right, transparent 0 5px, var(--tm-white) 5px 9px) right / calc((100% - 32px) * (1 - var(--tm-counted)) + 16px) 100% no-repeat,
              linear-gradient(to right, var(--tm-royal) 0 var(--tm-fill), var(--tm-pale) var(--tm-fill) 100%); }
.tm input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--tm-sand); border: 3px solid var(--tm-royal); }
.tm input[type=range]:focus { outline: none; }
.tm input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--tm-white), 0 0 0 6px var(--tm-royal); }
.tm input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--tm-white), 0 0 0 6px var(--tm-royal); }
.tm input[type=range]:disabled { cursor: default; }

/* Past the last count, one line under the year (Taylor's yes, October 9, 2026). It opens as the year crosses over,
   so the page as it loads has no empty line waiting for it. */
.tm-still { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.tm-still > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .3s; }
.tm-still.tm-on { grid-template-rows: 1fr; }
.tm-still.tm-on > div { visibility: visible; transition-delay: 0s; }
.tm-still p { font-family: var(--tm-display); font-weight: 900; font-size: 24px; line-height: 1.15; color: var(--tm-royal); padding-top: 18px;
              font-feature-settings: "liga" 0; font-variant-numeric: lining-nums; }

/* The road: its name is the control that changes it, a plain list under the name. A tap on the map does the same. */
.tm-pick { position: relative; min-height: 48px; margin-top: 12px; padding: 11px 40px 11px 0; border-top: 2px solid var(--tm-royal); border-bottom: 1px solid var(--tm-pale); }
.tm-pick::after { content: ""; position: absolute; right: 7px; top: 50%; width: 9px; height: 9px; margin-top: -8px; border-right: 2px solid var(--tm-royal);
                  border-bottom: 2px solid var(--tm-royal); transform: rotate(45deg); pointer-events: none; }
.tm-pick select { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; opacity: 0;
                  font-family: var(--tm-text); font-size: 16px; cursor: pointer; }
.tm-pick select:disabled { cursor: default; }
.tm-pick:has(select:disabled)::after { display: none; }
.tm-pick:has(select:focus-visible) { outline: 3px solid var(--tm-royal); outline-offset: 3px; }

/* The chosen stretch's count in the chosen year. */
.tm-card { margin-top: 4px; }
.tm-road { font-weight: 600; font-size: 18px; line-height: 1.3; }
.tm-stretch { font-size: 15px; line-height: 1.4; margin-top: 2px; }
.tm-fig { font-family: var(--tm-display); font-weight: 900; font-size: 56px; line-height: 1; color: var(--tm-royal); margin-top: 12px;
          font-variant-numeric: lining-nums; display: flex; align-items: baseline; column-gap: 10px; white-space: nowrap; }
/* In a projected year the figure says so itself, on its own line, as the bill's figure says "a month by 2030". */
.tm-proj { font-family: var(--tm-text); font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--tm-ink); }
@media (max-width: 339px) { .tm-fig { column-gap: 6px; } .tm-proj { font-size: 14px; } }
.tm-unit { font-size: 15px; line-height: 1.4; margin-top: 6px; text-wrap: balance; }
.tm-bars { display: block; width: 100%; height: 56px; margin-top: 14px; }
.tm-bars rect { fill: var(--tm-pale); }
.tm-bars .tm-now { fill: var(--tm-royal); }
/* A projected year's bar is an outline, never a solid count: pale as the counted bars are, and royal for the chosen
   year as theirs is (a cold reader, of a pale bar inside a royal line: "looks half counted and half projected"). */
.tm-bars .tm-ahead { fill: var(--tm-white); stroke: var(--tm-pale); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.tm-bars .tm-ahead.tm-now { fill: var(--tm-white); stroke: var(--tm-royal); stroke-width: 2.5px; }
.tm-card .tm-ends { position: relative; margin-top: 4px; }
/* The last counted year, under the middle of its own bar. */
.tm-lastbar { position: absolute; left: var(--tm-lastbar); transform: translateX(-50%); }
/* The picked road's note and its source line, behind "Every road's count" with the table. */
.tm-note { font-size: 16px; font-weight: 500; line-height: 1.4; margin-top: 4px; max-width: 34em; }
.tm-src { font-size: 13px; line-height: 1.5; margin-top: 8px; }
.tm-all .tm-src { margin-top: 6px; margin-bottom: 16px; }
.tm-all .tm-note[hidden] + .tm-src { margin-top: 4px; }
.tm-all .tm-src + .tm-method { margin-top: -10px; }

/* Every road's count, as a table. */
.tm-all { margin-top: 28px; border-top: 1px solid var(--tm-pale); border-bottom: 1px solid var(--tm-pale); }
.tm-all summary { display: flex; align-items: center; justify-content: space-between; column-gap: 16px; min-height: 48px; cursor: pointer;
                  list-style: none; font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--tm-royal); }
.tm-all summary::-webkit-details-marker { display: none; }
.tm-all summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 5px 0 0; border-right: 2px solid var(--tm-royal);
                         border-bottom: 2px solid var(--tm-royal); transform: rotate(45deg); }
.tm-all[open] summary::after { margin-top: 5px; transform: rotate(225deg); }
.tm-all summary:focus-visible { outline: 3px solid var(--tm-royal); outline-offset: 2px; }
.tm-all table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }
.tm-all thead th { padding: 4px 0 8px 14px; text-align: right; font-weight: 500; font-size: 12px; }
.tm-all thead th:first-child { padding-left: 0; text-align: left; }
.tm-all tbody tr { border-top: 1px solid var(--tm-pale); }
.tm-all tbody th { padding: 9px 0; font-weight: 400; text-align: left; }
.tm-all td { padding: 0 0 0 14px; text-align: right; white-space: nowrap; }
.tm-all tbody th > b { display: block; font-weight: 600; }
.tm-all tbody th > span { display: block; font-size: 13px; }
.tm-all .tm-on b { color: var(--tm-royal); }
.tm-all .tm-on b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--tm-royal); vertical-align: 1px; }

/* What the district has paid, and the road that was widened. */
.tm-facts { display: grid; gap: 24px 48px; margin-top: 32px; }
.tm-n { font-family: var(--tm-display); font-weight: 900; font-size: 44px; line-height: 1; color: var(--tm-royal); font-variant-numeric: lining-nums; }
.tm-t { font-size: 16px; line-height: 1.45; margin-top: 6px; }
/* Samuel's line closes the part (H3, October 9, 2026), in the headline's face, under the count on a laptop. */
.tm-close { font-family: var(--tm-display); font-weight: 900; font-size: 24px; line-height: 1.15; color: var(--tm-royal); margin-top: 32px; max-width: 20em;
            font-feature-settings: "liga" 0; text-wrap: balance; }
.tm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) { .tm-fills path, .tm-map .tm-fill, .tm-beds path, .tm-map .tm-bed, .tm-still, .tm-still > div { transition: none; } }

@media (min-width: 600px) {
  .tm-wrap { padding-left: 40px; padding-right: 40px; }
  .tm-stage { margin-left: 0; margin-right: 0; }
  .tm-key { padding: 0; }
  .tm-facts { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
/* Below a laptop the part is one column in this order: the headline, the map, the year, the road, the count, the
   list's line, and Samuel's line last. His line lives with the count in the markup (so on a laptop it sits right
   under the count, in the count's own column), and here the column's pieces are set in the order a thumb meets them. */
@media (max-width: 959px) {
  .tm-wrap { display: flex; flex-direction: column; }
  .tm-side { display: contents; }
  .tm-top { order: 1; } .tm-stage { order: 2; } .tm-yearrow, .tm-still, .tm-pick, .tm-card { order: 3; } .tm-all { order: 4; } .tm-facts { order: 5; } .tm-close { order: 6; }
}
/* Two columns: the map with the list under it, and beside them the headline, the year, the count and Samuel's
   line. Each column stacks on its own, so the list sits under the map however long the other column runs. */
@media (min-width: 960px) {
  .tm-wrap { display: flow-root; padding-top: 72px; padding-bottom: 80px; --tm-left: calc((100% - 56px) * 1.7 / 2.7); --tm-right: calc((100% - 56px) / 2.7); }
  .tm-top, .tm-side { float: right; clear: right; width: var(--tm-right); }
  .tm-stage, .tm-all { float: left; clear: left; width: var(--tm-left); }
  .tm-stage { margin-top: 0; }
  .tm-all { margin-top: 20px; }
  .tm-yearrow { margin-top: 26px; }
  .tm-facts { clear: both; margin-top: 0; padding-top: 48px; }
  .tm-close { margin-top: 36px; font-size: 26px; }
}

/* The names on the map. Each is placed by hand against the roads, at a share of the map's width and height, and
   grows away from the road beside it, so no name sits on a road at any width (measured, I2 second pass). The first
   list is a phone's map; the second is the map from 520 points wide. */
.tm-names span { position: absolute; white-space: nowrap; line-height: 1; pointer-events: none;
                 text-shadow: 0 0 2px var(--tm-white), 1.5px 0 0 var(--tm-white), -1.5px 0 0 var(--tm-white), 0 1.5px 0 var(--tm-white), 0 -1.5px 0 var(--tm-white),
                              1px 1px 0 var(--tm-white), -1px 1px 0 var(--tm-white), 1px -1px 0 var(--tm-white), -1px -1px 0 var(--tm-white); }
.tm-place { font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-ink); }
.tm-far { display: none; font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-ink); }
.tm-river { font-weight: 500; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--tm-royal); }
.tm-names .tm-river { text-shadow: 0 0 2px var(--tm-land), 1.5px 0 0 var(--tm-land), -1.5px 0 0 var(--tm-land), 0 1.5px 0 var(--tm-land), 0 -1.5px 0 var(--tm-land),
                                   1px 1px 0 var(--tm-land), -1px 1px 0 var(--tm-land), 1px -1px 0 var(--tm-land), -1px -1px 0 var(--tm-land); }
.tm-way { font-weight: 600; font-size: 12px; color: var(--tm-royal); }
.tm-wide { display: none; }

.tm-n-hanahan { left: 28%; top: 43%; transform: translate(0, -50%); }
.tm-n-daniel { left: 47%; top: 94%; transform: translate(-50%, -50%); }
/* Cainhoy ends on the page's own margin, never against the map's edge (a cold reader, October 9). */
.tm-n-cainhoy { left: calc(100% - var(--gutter, 16px)); top: 15%; transform: translate(-100%, -50%); }
/* On narrow phones the name is set tighter, step by step, so it clears the ring Cainhoy Road wears when it is
   chosen, on the module's own page and on Home, whose margin is wider (L3, measured at 320, 360 and 375). */
@media (max-width: 389px) { .tm-n-cainhoy { letter-spacing: .04em; } }
@media (max-width: 374px) { .tm-n-cainhoy { font-size: 10.5px; letter-spacing: .02em; } }
@media (max-width: 339px) { .tm-n-cainhoy { font-size: 10px; letter-spacing: 0; left: calc(100% - var(--gutter, 16px) + 4px); } }
.tm-n-cooper { left: 36.5%; top: 81.5%; transform: translate(-50%, -50%); }
.tm-n-wando { left: 77%; top: 61.5%; transform: translate(-50%, -50%); }
.tm-n-526 { left: 22%; top: 67%; transform: translate(-50%, -50%); }
.tm-n-clements { left: 75.5%; top: 31.5%; transform: translate(-100%, -50%); }
.tm-n-rhett { left: 22%; top: 21%; transform: translate(0, -50%); }

@container (min-width: 520px) {
  .tm-place { font-size: 12px; letter-spacing: .12em; }
  .tm-far, .tm-wide { display: block; }
  .tm-n-hanahan { left: 11%; top: 31%; transform: translate(-50%, -50%); }
  .tm-n-daniel { left: 53%; top: 91%; }
  .tm-n-cainhoy { left: 81%; top: 16%; transform: translate(0, -50%); }
  .tm-n-cooper { left: 36.5%; top: 80.5%; }
  .tm-n-wando { left: 77%; top: 61.5%; }
  .tm-n-526 { left: 21%; top: 66%; }
  .tm-n-clements { left: 76%; top: 31.5%; }
  .tm-n-rhett { left: 21.5%; top: 21.5%; }
  .tm-n-donholt { left: 39.5%; top: 52%; transform: translate(-50%, -50%); }
  .tm-n-41 { left: 90.5%; top: 43%; transform: translate(0, -50%); }
  .tm-n-ncharleston { left: 1.5%; top: 88%; transform: translate(0, -50%); }
  .tm-n-mtpleasant { left: 99%; top: 86%; transform: translate(-100%, -50%); }
}