/* css/pages/mckinney.css: McKinney page additions (mckinney.html, outside the model markers). Owned by the page agent (audit/city-pages-brief.md section 1).
   2026-10-03 upgrade (brief 4.3): the hero's neighborhoods grouped east, central and west; the Census growth band on white
   with the real population line; the "Neighborhoods and their lines" strip with a mini map of the city on every card.
   Loads after css/pages/city.css (shared, not edited here) and before the model's css/pages/mckinney-model.css. White
   page, neutral greys, his blue as the accent only; every color is a site token, so dark mode follows on its own. */

/* ------------------------------------------------------------------ 1. hero: the neighborhoods, grouped east to west
   One list (city.js cascades every item and points each chip at a text); a small caps label starts each group and a
   zero-height break starts each new row, so the three groups read as three lines. */
/* desktop: the label starts its row at a fixed width (each group is short enough to stay on one row beside the docked
   film); phones: the label sits on its own line above its chips */
.page--city .community-chips--grouped { row-gap: 6px; column-gap: 6px; align-items: center; }
.page--city .community-chips--grouped .community-label { display: inline-flex; align-items: center; flex: none; width: 5.6rem; min-height: 42px; margin: 0; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.page--city .community-chips--grouped .community-break { flex-basis: 100%; height: 0; padding: 0; margin: 0; }
@media (max-width: 899px) {
  .page--city .community-chips--grouped .community-label { flex-basis: 100%; width: auto; min-height: 0; margin: 6px 0 0; letter-spacing: .18em; }
  .page--city .community-chips--grouped .community-label:first-child { margin-top: 0; }
  .page--city .community-chips--grouped .community-break { display: none; }
  .page--city .cwin__streets .community-chips--grouped .community { min-height: 40px; padding: 0 14px; font-size: .9rem; }
}
/* the pinned desktop column is a little fuller now (three rows of neighborhoods): short laptop screens tighten the stat
   tiles so the whole column still fits between the header and the fold */
@media (min-width: 900px) and (max-height: 820px) {
  .page--city .cwin__credits { gap: 8px; }
  .page--city .cwin__credits .cstats > div { padding: 10px 0 8px; gap: 6px; }
  .page--city .cwin__credits .cstats dd { font-size: clamp(2rem, 3vw, 2.75rem); }
  .page--city .cwin__credits .title-card__title { font-size: clamp(2.75rem, 4.6vw, 4.5rem); }
  .page--city .cwin__streets { gap: 8px; padding-top: 12px; }
  .page--city .cwin__streets .community { min-height: 38px; }
  .page--city .community-chips--grouped .community-label { min-height: 38px; }
}

/* ------------------------------------------------------------------ 2. growth, on white: the Census line draws with the scroll
   js/pages/mckinney.js sets --gd (0 to 1) on .gline as the plot crosses the screen: the line and its wash wipe in left to
   right, each point lands as the wipe reaches it, the end value arrives last. Without JS, at T0 and in the fail-safe
   --gd is unset (1), so the finished chart shows. The plot is a picture (aria-hidden); its numbers are the figures below
   it and the table in the Sources drawer. */
.page--city .growth--line .growth__inner { padding-block: clamp(72px, 10vh, 120px) clamp(64px, 9vh, 112px); gap: clamp(24px, 4vh, 44px); }
.page--city .growth--line .growth__head { max-width: 60rem; }
.page--city .growth--line .growth__figs dd { font-size: clamp(3rem, 6vw, 5.75rem); }
@media (min-width: 900px) { .page--city .growth--line .growth__figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; } }
.page--city .gline { --gd: 1; position: relative; margin: 0; padding: 0 0 26px; }
.page--city .gline__plot { position: relative; height: clamp(170px, 30vh, 280px); }
.page--city .gline__tick { position: absolute; left: 0; right: 0; top: calc(var(--y) * 100%); height: 0; border-top: 1px solid var(--line); }
.page--city .gline__tick i { position: absolute; left: 0; bottom: 6px; font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--muted); }
.page--city .gline__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(0 calc((1 - var(--gd)) * 100%) 0 0); }
.page--city .gline__line { fill: none; stroke: var(--blue-text); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.page--city .gline__area { fill: var(--blue-text); opacity: .08; }
.page--city .gline__pt { --s: clamp(0, calc((var(--gd) - var(--x) + .02) * 14), 1); position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--blue-text); box-shadow: 0 0 0 2px var(--paper); opacity: var(--s); transform: scale(calc(.4 + .6 * var(--s))); }
.page--city .gline__pt--end { width: 14px; height: 14px; margin: -7px 0 0 -7px; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px color-mix(in srgb, var(--blue-text) 40%, transparent); }
/* the hover layer (a bigger hit target than the dot; the values are also in the drawer's table) */
.page--city .gline__pt::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.page--city .gline__pt::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.2; white-space: nowrap; color: var(--paper); background: var(--ink); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
.page--city .gline__pt:hover::after { opacity: 1; }
.page--city .gline__lab { position: absolute; display: grid; gap: 2px; padding: 3px 6px; border-radius: 6px; font-size: clamp(1rem, 1.5vw, 1.375rem); font-weight: 400; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.page--city .gline__lab small { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.page--city .gline__lab--start { left: calc(var(--x) * 100% + 14px); top: calc(var(--y) * 100% + 10px); }
.page--city .gline__lab--end { right: calc((1 - var(--x)) * 100% + 10px); bottom: calc((1 - var(--y)) * 100% + 6px); text-align: right; justify-items: end; background: var(--paper); opacity: clamp(0, calc((var(--gd) - .9) * 10), 1); }
.page--city .gline__years { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.page--city .gline__years span { position: absolute; left: calc(var(--x) * 100%); transform: translateX(-50%); font-size: 11px; font-weight: 500; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--muted); }
.page--city .gline__years span:last-child { transform: translateX(-80%); }
@media (max-width: 899px) {
  .page--city .gline__plot { height: clamp(150px, 26svh, 200px); }
  .page--city .gline__lab { font-size: 1rem; }
  .page--city .gline__years span:nth-child(even) { display: none; }
  .page--city .growth--line .growth__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .page--city .growth--line .growth__figs dd { font-size: clamp(2.25rem, 10.5vw, 3.5rem); }
  .page--city .growth--line .growth__figs dt { font-size: 10px; letter-spacing: .16em; }
}
.page--city .growth__table { width: 100%; max-width: 30rem; margin-top: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.page--city .growth__table th, .page--city .growth__table td { padding: 4px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.page--city .growth__table td, .page--city .growth__table th.num { text-align: right; }

/* ------------------------------------------------------------------ 3. neighborhoods and their lines (white)
   Eight cards in true east-to-west order. Each carries a mini map of the city drawn from OpenStreetMap (the city limits,
   US 75 and US 380) with the neighborhood as a blue dot, so the order, the position and the one outside the city limits
   (Trinity Falls) read at a glance. The cards rise in turn and each map draws (city.js initRiseCards arms them); as the
   strip scrolls by, js/pages/mckinney.js lights one card at a time, east to west. T0 and no JS: every card finished. */
.page--city .hoods { position: relative; }
.page--city .hoods__defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.page--city .hoods > .container { display: grid; gap: clamp(26px, 4vw, 44px); padding-block: clamp(72px, 10vw, 140px) clamp(48px, 6vw, 88px); }
.page--city .hoods__head { display: grid; gap: 14px; max-width: 60rem; }
.page--city .hoods__key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 2px 0 0; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.page--city .hoods__key span { display: inline-flex; align-items: center; gap: 8px; }
.page--city .hoods__key i { display: inline-block; flex: none; }
.page--city .hoods__key .k-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue-text); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px color-mix(in srgb, var(--blue-text) 35%, transparent); }
.page--city .hoods__key .k-road { width: 18px; height: 0; border-top: 2px solid var(--line-strong); opacity: .55; }
.page--city .hoods__key .k-city { width: 14px; height: 11px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--paper-2); }
.page--city .hoods__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.4vw, 18px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page--city .hood { --c: var(--ink); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; min-width: 0; padding: 16px 0 6px; border-top: 1px solid var(--c); transition: border-color var(--dur-3) var(--ease-out); }
.page--city .hood::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--blue-text); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }
.page--city .hood.is-lit::before, .page--city .hood:hover::before { transform: none; }
.page--city .hood__map { display: block; width: 100%; max-width: 230px; aspect-ratio: 224 / 211; height: auto; overflow: visible; }
.page--city .hood__limits { fill: color-mix(in srgb, var(--ink) 7%, var(--paper)); stroke: var(--line-strong); stroke-width: .9px; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.page--city .hood__holes { fill: var(--paper); stroke: var(--line-strong); stroke-width: .6px; vector-effect: non-scaling-stroke; }
.page--city .hood__roads { fill: none; stroke: var(--line-strong); stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .45; }
.page--city .hood__ring { fill: none; stroke: var(--blue-text); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.page--city .hood__dot { fill: var(--blue-text); stroke: var(--paper); stroke-width: 2.5px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transition: transform var(--dur-3) var(--ease-out); }
.page--city .hood.is-lit .hood__dot, .page--city .hood:hover .hood__dot { transform: scale(1.25); }
.page--city .hood.is-lit .hood__ring { animation: hood-ping 1.4s var(--ease-out) 1 both; }
@keyframes hood-ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.4); } }
.page--city .hood__name { margin: 0; font-weight: 400; font-size: clamp(1.3rem, 1.75vw, 1.7rem); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); }
.page--city .hood__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.page--city .hood__tags li { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--ink-2); border: 1px solid var(--line); background: var(--paper); }
.page--city .hood__tags li.is-out { color: var(--blue-text); border-color: color-mix(in srgb, var(--blue-text) 45%, transparent); }
/* the drawer: one short line per neighborhood, then the sources */
.page--city .hoods__more .fineprint__body dl { display: grid; gap: 10px; margin: 6px 0 14px; }
.page--city .hoods__more .fineprint__body dl > div { display: grid; gap: 2px; }
.page--city .hoods__more .fineprint__body dt { font-weight: 600; color: var(--ink); }
.page--city .hoods__more .fineprint__body dd { margin: 0; }
/* the reveal: each card rises (city.js data-rise-card), then its city outline draws, the city fills in and the dot lands */
.page--city .hood.is-armed .hood__limits { stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 1.2s var(--ease-out) calc(var(--i, 0) * 110ms + 120ms), fill-opacity .9s var(--ease-out) calc(var(--i, 0) * 110ms + 520ms); }
.page--city .hood.is-armed .hood__roads, .page--city .hood.is-armed .hood__holes { opacity: 0; transition: opacity .8s var(--ease-out) calc(var(--i, 0) * 110ms + 600ms); }
.page--city .hood.is-armed .hood__dot { transform: scale(0); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i, 0) * 110ms + 760ms); }
.page--city .hood.is-armed.is-in .hood__limits { stroke-dashoffset: 0; fill-opacity: 1; }
.page--city .hood.is-armed.is-in .hood__roads { opacity: .45; }
.page--city .hood.is-armed.is-in .hood__holes { opacity: 1; }
.page--city .hood.is-armed.is-in .hood__dot { transform: none; }
.page--city .hood.is-armed.is-in.is-lit .hood__dot, .page--city .hood.is-armed.is-in:hover .hood__dot { transform: scale(1.25); transition-delay: 0s; }
html.is-failsafe .page--city .hood .hood__limits { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; }
html.is-failsafe .page--city .hood .hood__dot { transform: none !important; }
html.is-failsafe .page--city .hood .hood__roads { opacity: .45 !important; }
html.is-failsafe .page--city .hood .hood__holes { opacity: 1 !important; }
@media (max-width: 1099px) { .page--city .hoods__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: one row per neighborhood, the mini map at the left */
@media (max-width: 599px) {
  .page--city .hoods__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .page--city .hood { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 8px; align-items: start; padding: 14px 0; }
  .page--city .hood__map { grid-row: 1 / span 2; width: 92px; }
  .page--city .hood__dot { r: 11px; stroke-width: 2px; }
  .page--city .hood__ring { r: 16px; }
  .page--city .hood__name { align-self: end; font-size: 1.3rem; }
  .page--city .hood__tags li { min-height: 26px; padding: 0 10px; font-size: 11.5px; }
  .page--city .hoods__key { font-size: 11px; gap: 6px 16px; }
}