/* Shared screen furniture. AGENTS.md and tokens.css own the design. */
* { box-sizing:border-box; }
html { scroll-padding-top:var(--s-8); }
body { margin:0; background:var(--lime); color:var(--ink); font-family:var(--sans); }
[hidden] { display:none!important; }
a { color:var(--celeste); text-underline-offset:4px; }
button, input, select, textarea { font:inherit; }
button, a, summary, label { touch-action:manipulation; }
button, summary { cursor:pointer; }
button:disabled { cursor:default; opacity:.55; }
:focus-visible { outline:3px solid var(--celeste); outline-offset:4px; }
.cu-header, .cu-menu, .cu-section-nav, .cu-footer { font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink); }
.cu-header { height:var(--header-h); min-height:var(--header-h); padding:var(--s-2) var(--gutter); display:flex; align-items:center; gap:var(--s-5); border-bottom:1px solid var(--rule); background:var(--lime); z-index:50; position:relative; flex:none; }
.cu-brand { display:inline-flex; align-items:center; gap:var(--s-3); min-height:var(--hit); font:400 var(--t-sub)/1 var(--sans); letter-spacing:-.01em; text-decoration:none; color:var(--celeste)!important; white-space:nowrap; flex:none; }
.cu-brand-mark { display:block; width:var(--hit); height:var(--hit); flex:none; }
.cu-brand-name { display:inline-flex; align-items:baseline; }
.cu-brand-name b { font-weight:900; font-size:var(--t-head); letter-spacing:-.025em; color:var(--ink); }
.cu-brand:hover .cu-brand-name { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.cu-primary { display:flex; align-self:stretch; align-items:stretch; gap:var(--s-5); margin:auto; }
.cu-primary a { display:flex; align-items:center; min-height:var(--hit); text-decoration:none; color:var(--ink); border-bottom:3px solid var(--clear); padding:var(--s-1); font-weight:700; font-size:var(--t-body); white-space:nowrap; }
.cu-primary a[aria-current] { border-color:var(--action); color:var(--ink); }
.cu-language { color:var(--action); font-weight:700; text-decoration:none; display:flex; align-items:center; min-height:var(--hit); }
.cu-search { font-size:var(--t-sub); color:var(--ink); min-width:var(--hit); min-height:var(--hit); display:grid; place-items:center; text-decoration:none; }
/* Words for screen readers and text-only readers, where the page shows an icon. */
.cu-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.cu-header button, .cu-menu button { font:inherit; color:inherit; min-height:var(--hit); min-width:var(--hit); background:var(--lime-raised); border:1px solid var(--rule); border-radius:var(--radius-ctl); padding:var(--s-2) var(--s-3); }
.cu-section-nav { display:flex; flex-wrap:wrap; gap:0 var(--s-5); flex:none; padding:0 var(--gutter); background:var(--lime); border-bottom:1px solid var(--rule); }
.cu-section-nav a { display:flex; align-items:center; min-height:var(--hit); padding:var(--s-1) 0; color:inherit; text-decoration:none; border-bottom:2px solid var(--clear); white-space:nowrap; }
.cu-section-nav a[aria-current] { border-color:var(--action); color:var(--ink); font-weight:700; }
.cu-section-nav a:hover, .cu-nav-group a:hover, .cu-menu-utility a:hover { color:var(--celeste); text-decoration:underline; }
.cu-menu { width:min(calc(var(--page-max) * .6),calc(100% - var(--s-6))); max-height:calc(100dvh - var(--s-6)); margin:auto; padding:var(--s-6); overflow:auto; overscroll-behavior:contain; background:var(--lime); border:1px solid var(--rule); border-bottom:var(--zocalo-h) solid var(--zocalo-band); border-radius:var(--radius); box-shadow:var(--shadow-overlay); }
.cu-menu::backdrop { background:var(--scrim); }
.cu-menu-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-5); }
.cu-menu .cu-menu-heading :is(h2,#menu-title) { font:700 var(--t-head)/var(--lh-head) var(--serif); margin:0; }
.cu-menu #menu-close { flex:none; }
.cu-directory, .cu-menu nav.cu-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5) var(--s-6); }
.cu-nav-group { min-width:0; }
.cu-nav-group :is(h3,.cu-nav-group-title), .cu-menu .cu-nav-group :is(h3,.cu-nav-group-title), .cu-home-directory .cu-nav-group :is(h3,.cu-nav-group-title) { font:700 var(--t-label)/var(--lh-dense) var(--sans); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--ochre); margin:0 0 var(--s-2); }
.cu-nav-group a, .cu-menu .cu-nav-group a { display:flex; align-items:center; min-height:var(--hit); padding:var(--s-2) 0; border-bottom:1px solid var(--rule); font:var(--t-body)/var(--lh-dense) var(--sans); color:var(--ink); text-decoration:none; }
.cu-menu a[aria-current] { color:var(--celeste); font-weight:700; }
.cu-menu nav.cu-menu-utility { display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin-top:var(--s-5); padding-top:var(--s-3); border-top:1px solid var(--rule); }
.cu-menu .cu-menu-utility a { display:flex; align-items:center; min-height:var(--hit); padding:0; border:0; color:var(--celeste); }
.cu-home-directory { padding:var(--s-6) 0; border-bottom:1px solid var(--rule); margin-bottom:var(--s-6); }
.guide-page .cu-home-directory h2 { font:700 var(--t-head)/var(--lh-head) var(--serif); margin:0 0 var(--s-5); }
.cu-home-directory .cu-directory { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--col-gap); }
.cu-no-script { padding:var(--s-3) var(--gutter); background:var(--lime); }
.cu-footer { display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between; padding:var(--s-6) var(--gutter); border:0; border-top:var(--zocalo-h) solid var(--zocalo-band); background:var(--stone-panel); color:var(--ink-inverse); }
.cu-footer a { display:inline-flex; align-items:center; min-height:var(--hit); color:var(--ink-inverse); font-weight:700; }
.cu-footer a:hover { color:var(--celeste-pale); }
.cu-footer :focus-visible { outline-color:var(--celeste-pale); }
.cu-footer>span { align-self:center; }
.cu-skip { position:fixed; top:-100%; left:var(--s-4); background:var(--stone-panel); color:var(--ink-inverse); padding:var(--s-3) var(--s-4); z-index:2000; }
.cu-skip:focus { top:var(--s-2); outline-color:var(--celeste-pale); }
.bus-return { padding:var(--s-2) var(--gutter); border-bottom:1px solid var(--rule); font:var(--t-dense)/var(--lh-dense) var(--sans); background:var(--lime); }
.transit-page .cu-header~main { height:auto; min-height:0; flex:1; }
.transit-page .cu-footer { display:none; }
html:has(.cu-menu[open]) { overflow:hidden; }

/* Canonical controls. Domain styles supply layout, not another control skin. */
.g-button { min-height:var(--hit); min-width:var(--hit); display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); border:2px solid var(--ink); border-radius:var(--radius-ctl); padding:var(--s-2) var(--s-4); font:700 var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink); text-decoration:none; background:var(--lime-raised); cursor:pointer; }
.g-button.primary { background:var(--action); border-color:var(--action); color:var(--ink-inverse); }
.g-button:hover { border-color:var(--celeste); color:var(--celeste); }
.g-button.primary:hover { background:var(--action-hover); border-color:var(--action-hover); color:var(--ink-inverse); }
.g-field { display:block; width:100%; min-width:0; min-height:var(--hit); padding:var(--s-3) var(--s-4); border:1px solid var(--rule); border-radius:var(--radius-ctl); background:var(--lime-raised); color:var(--ink); font:var(--t-body)/var(--lh-dense) var(--sans); }
.g-field::placeholder { color:var(--ink-3); opacity:1; }
.g-select { position:relative; display:block; min-width:0; }
.g-select select { appearance:none; display:block; width:100%; min-width:0; min-height:var(--hit); padding:var(--s-2) var(--s-6) var(--s-2) var(--s-3); border:1px solid var(--rule); border-radius:var(--radius-ctl); background:var(--lime-raised); color:var(--ink); font:var(--t-dense)/var(--lh-dense) var(--sans); cursor:pointer; }
.g-select::after { content:''; position:absolute; right:var(--s-3); top:50%; width:8px; height:8px; border-right:2px solid var(--celeste); border-bottom:2px solid var(--celeste); transform:translateY(-75%) rotate(45deg); pointer-events:none; }
.g-check { display:flex; align-items:center; gap:var(--s-2); min-height:var(--hit); min-width:0; cursor:pointer; font:var(--t-dense)/var(--lh-dense) var(--sans); }
.g-check input { accent-color:var(--celeste); flex:none; }
.g-segmented { display:flex; flex-wrap:wrap; gap:var(--s-1); padding:var(--s-1); background:var(--lime-sunken); border:1px solid var(--rule); border-radius:var(--radius-ctl); }
.g-segmented>.g-button { flex:1; border:0; background:var(--clear); padding:var(--s-2) var(--s-3); color:var(--ink-2); }
.g-segmented>button:is([aria-pressed=true],[aria-selected=true],.active) { background:var(--ink); color:var(--ink-inverse); }
.g-card { border:1px solid var(--rule); border-radius:var(--radius); background:var(--lime-raised); }
@media (max-width:1100px) { .cu-primary { gap:var(--s-3); } .cu-header { gap:var(--s-3); } }
@media (max-width:1060px) { .cu-primary { display:none; } .cu-language { margin-left:auto; } .cu-home-directory .cu-directory { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
 .cu-header { gap:var(--s-2); padding:var(--s-2) var(--s-4); }
 .cu-brand { font-size:var(--t-dense); gap:var(--s-2); min-width:0; }
 .cu-brand-name b { font-size:var(--t-sub); }
 .cu-header #menu-open { white-space:nowrap; padding:var(--s-2); }
 .cu-brand-mark { width:var(--s-6); height:var(--s-6); }
 .cu-search { display:none; }
 .cu-section-nav { gap:0 var(--s-4); padding:0 var(--s-4); flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
 .cu-section-nav::-webkit-scrollbar { display:none; }
 .cu-home-directory .cu-directory { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5) var(--s-4); }
 .cu-home-directory .cu-nav-group a { font-size:var(--t-dense); }
 .cu-menu { padding:var(--s-5); }
 .cu-directory, .cu-menu nav.cu-directory { grid-template-columns:1fr; gap:var(--s-5); }
 .cu-footer { flex-direction:column; }
 .cu-footer>span { align-self:flex-start; }
}
/* 320 px phones: the wordmark, language link and Menu button need ~320 px, so drop the dome mark and tighten the gutter. */
@media (max-width:340px) { .cu-header { padding-inline:var(--s-3); } .cu-header .cu-brand-mark { display:none; } }
@media (prefers-reduced-motion:no-preference) {
 .cu-menu[open] { animation:cu-menu-in var(--dur) var(--ease); }
 .g-button { transition:transform var(--dur) var(--ease); }
 .g-button:active { transform:translateY(1px); }
 @keyframes cu-menu-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Contract enforcement for source pages whose older rules use ID selectors. */
:root .g-button { min-height:var(--hit); min-width:var(--hit); border-radius:var(--radius-ctl); font-family:var(--sans); }
:root .g-field { min-height:var(--hit); font-size:var(--t-body); line-height:var(--lh-dense); font-family:var(--sans); }
:root .g-select select { min-height:var(--hit); padding:var(--s-2) var(--s-6) var(--s-2) var(--s-3); border:1px solid var(--rule); border-radius:var(--radius-ctl); background:var(--lime-raised); color:var(--ink); font:var(--t-dense)/var(--lh-dense) var(--sans); }
:root .g-button.g-button-row { justify-content:flex-start; border:0; border-radius:var(--radius); background:var(--clear); color:inherit; }
:root .g-button-row:hover { background:var(--lime-sunken); }
:root .g-button.primary { background:var(--action); border-color:var(--action); color:var(--ink-inverse); }
:root .g-button.primary:hover { background:var(--action-hover); border-color:var(--action-hover); }
:root .g-check { min-height:var(--hit); }
:root input.g-check-control { appearance:none; display:inline-grid; place-content:center; flex:none; width:var(--hit); height:var(--hit); min-height:var(--hit); margin:0; padding:0; border:0; background:var(--clear); cursor:pointer; }
:root input.g-check-control::before { grid-area:1/1; content:''; width:20px; height:20px; border:1px solid var(--ink-3); border-radius:var(--radius-ctl); background:var(--lime-raised); }
:root input.g-check-control:checked::before { background:var(--celeste); border-color:var(--celeste); }
:root input.g-check-control:checked::after { content:''; grid-area:1/1; justify-self:center; align-self:center; width:9px; height:5px; border-left:2px solid var(--ink-inverse); border-bottom:2px solid var(--ink-inverse); transform:rotate(-45deg) translateY(-1px); }
:root input.g-check-control[type=radio]::before { border-radius:50%; }
:root input.g-check-control[type=radio]:checked::after { width:8px; height:8px; border:0; background:var(--ink-inverse); border-radius:50%; transform:none; }
:root .g-segmented>button { min-height:var(--hit); font:600 var(--t-dense)/var(--lh-dense) var(--sans); }
:root .g-segmented>button:is([aria-pressed=true],[aria-selected=true],.active) { background:var(--ink); color:var(--ink-inverse); }
:root :is(button,a,input,select,summary,[tabindex]):focus-visible { outline:3px solid var(--celeste); outline-offset:4px; }
:root :is(.play-hero,.g-dark) :focus-visible { outline-color:var(--celeste-pale); }
:root :is(dialog) { box-shadow:var(--shadow-overlay); border-radius:var(--radius); }
:root .maplibregl-ctrl { font:var(--t-dense)/var(--lh-dense) var(--sans); }
:root .maplibregl-ctrl-group { box-shadow:none; border:1px solid var(--rule); border-radius:var(--radius-ctl); background:var(--lime-raised); }
:root .maplibregl-ctrl-group button { width:var(--hit); height:var(--hit); min-height:var(--hit); padding:0; }
:root .maplibregl-ctrl-attrib { font:var(--t-micro)/var(--lh-dense) var(--sans); background:var(--lime-raised); color:var(--ink-3); }
:root .maplibregl-ctrl-attrib-button { min-height:var(--hit); min-width:var(--hit); }
:root .maplibregl-popup-content { background:var(--lime-raised); color:var(--ink); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow-overlay); font:var(--t-dense)/var(--lh-dense) var(--sans); }
:root .maplibregl-popup-close-button { min-height:var(--hit); min-width:var(--hit); }
:root .maplibregl-ctrl-scale { font:var(--t-dense)/var(--lh-dense) var(--sans); background:var(--lime-raised); }
:root .maplibregl-ctrl-attrib a { font-size:var(--t-micro); }
:root :is(.line-row.selected,.map-result.selected,.category-card.active,.g-search-results a:hover) :is(small,p,.category-card-meta) { color:var(--ink); }
:root .g-search-results a:hover span { color:var(--ink); }
input[type=range] { min-height:var(--hit); }
/* Bus map: the Buses section links sit in the header row. */
.cu-primary-section { gap:var(--s-4); }
.cu-primary-section a { font-weight:600; font-size:var(--t-dense); }
.cu-primary-section a[aria-current] { font-weight:700; }
.cu-primary-section { flex:0 1 auto; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.cu-primary-section::-webkit-scrollbar { display:none; }
.cu-primary-section a { flex:none; }
@media (max-width:1280px) { .cu-primary-section { gap:var(--s-3); } .cu-header:has(.cu-primary-section) .cu-search { display:none; } }
#menu-open { white-space:nowrap; }
@media (max-width:1240px) and (min-width:1061px) { .cu-header:has(.cu-primary-section) .cu-brand-name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } }
/* Line tiles: a line number in its own colour, round like the domes. Home uses a larger size (.home-line). */
.g-line-tiles { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s-2); }
.g-line-tile { display:inline-flex; align-items:center; justify-content:center; width:var(--hit); height:var(--hit); border-radius:50%; background:var(--line); color:var(--line-ink); font:900 var(--t-dense)/1 var(--sans); letter-spacing:-.02em; text-decoration:none; }
.g-line-tile:focus-visible { outline:3px solid var(--celeste); outline-offset:4px; }
@media (prefers-reduced-motion:no-preference) { .g-line-tile { transition:transform var(--dur) var(--ease); } .g-line-tile:hover { transform:scale(1.08); } }