/* The Haircut Index (round GD, Lane G4). Builds on city.css (body[data-city] tokens); light only, like the other public pages. */
.hx-wrap{max-width:860px}
.hx-sec{margin:34px 0 0}
.hx-note{margin:0 0 14px;font-size:15px;max-width:640px;opacity:.88}
.hx-stories{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.hx-story{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px}
.hx-story:nth-child(1){background:#fff6c8}.hx-story:nth-child(2){background:#d5f6f0}.hx-story:nth-child(3){background:#ffe0f1}.hx-story:nth-child(4){background:#e3f3ff}
.hx-story b{display:block;font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.1;margin:0 0 6px}
.hx-story p{margin:0;font-size:15px;line-height:1.4}
/* chart: one row per city, the dot is the median, the line is the middle half of barbers */
.hx-chart{list-style:none;margin:0;padding:14px 14px 10px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow)}
.hx-row{display:grid;grid-template-columns:minmax(92px,150px) minmax(0,1fr) 58px;gap:10px;align-items:center;min-height:30px}
.hx-city{font-weight:700;font-size:15px;overflow-wrap:anywhere;line-height:1.1}
.hx-track{position:relative;height:30px}
.hx-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--ink);opacity:.12}
.hx-iqr{position:absolute;top:50%;height:8px;margin-top:-4px;background:var(--lagoon);border:2px solid var(--ink);border-radius:99px;box-sizing:border-box;min-width:6px}
.hx-dot{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--coral);border:2px solid var(--ink)}
.hx-val{font:500 14px "DM Mono",monospace;text-align:right}
/* table */
.hx-scroll{overflow-x:auto;border:2px solid var(--ink);border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow)}
.hx-table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.hx-table th,.hx-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #0d2b4a22;vertical-align:baseline}
.hx-table thead th{position:sticky;top:0;background:var(--sun);font:500 12px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;white-space:nowrap;user-select:none;border-bottom:2px solid var(--ink)}
.hx-table thead th[aria-sort]::after{content:" ▲";font-size:10px}.hx-table thead th[aria-sort=descending]::after{content:" ▼"}
.hx-table tbody th{font-weight:800}.hx-table tbody th small{display:block;font:500 12px "DM Mono",monospace;opacity:.7}
.hx-table tbody tr:hover{background:#fff6c8}
.hx-table a{color:inherit;font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.hx-n0{opacity:.55;font-family:"DM Mono",monospace}
.hx-vh{position:absolute;left:-9999px}
.hx-dl{margin:12px 2px 0}.hx-dl a{color:inherit;font-weight:800;display:inline-flex;align-items:center;min-height:44px}
.hx-how{margin:0;padding:0;list-style:none;display:grid;gap:10px;max-width:700px}
.hx-how li{padding-left:2px}
.hx-why{background:#fff;border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px}
.hx-why p{margin:0 0 10px;max-width:640px}.hx-cite{font-size:14px;opacity:.85}
.hx-cta{margin:30px 0 0;text-align:center}
@media (max-width:520px){.hx-row{grid-template-columns:minmax(78px,108px) minmax(0,1fr) 50px;gap:8px}.hx-city{font-size:14px}.hx-table{font-size:14px}.hx-loc{white-space:nowrap}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}