/* Navy blue theme (#0a1f44, picked by p over #003153) and larger text, 5 Nov 2026. */
/* A centred phone layout keeps the same flow on mobile and larger screens. */
:root { color-scheme: light; --ink:#1e2d3a; --blue:#0a1f44; --muted:#66737f; --line:#d9e0e7; --paper:#f3f5f7; }
* { box-sizing:border-box; }
body { margin:0; background:#e6eaef; color:var(--ink); font-family:Inter,"Segoe UI",Arial,sans-serif; line-height:1.5; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled,select:disabled { cursor:wait; opacity:.55; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,#map:focus-visible { outline:3px solid #bd923e; outline-offset:3px; }
.app { width:100%; max-width:480px; min-height:100vh; margin:auto; background:var(--paper); box-shadow:0 0 80px #1e2d3a10; padding-bottom:20px; }
h1,h2,p { margin:0; }
h1 { font-size:25px; font-weight:600; letter-spacing:-.7px; line-height:1.25; }
h2 { font-size:18px; font-weight:600; letter-spacing:-.3px; }
.masthead { padding:18px 18px 16px; background:#0a1f44; color:white; }
.site-title { display:flex; align-items:center; gap:11px; }
.version { border:1px solid #ffffff33; padding:3px 6px; border-radius:4px; font-size:12px; letter-spacing:1px; margin-left:auto; }
/* Menus share the row equally; a hidden menu (one building only) leaves the rest full width. */
.selectors { flex:1; min-width:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:12px; }
.selectors label[hidden] { display:none; }
.selectors label { font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:5px; letter-spacing:.3px; }
select { min-width:0; width:100%; height:44px; background:white; color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:0 9px; font-size:18px; }
select option { color:var(--ink); background:white; }
.card { margin:18px 18px 0; border:1px solid var(--line); background:#fff; border-radius:12px; }
.journey { padding:17px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:17px; }
.search-row { display:flex; gap:11px; margin-bottom:14px; align-items:flex-start; }
.endpoint { width:10px; height:10px; margin-top:28px; border:2px solid var(--blue); flex-shrink:0; }
.start-dot { border-radius:50%; background:#dfe8f0; }
.end-dot { border-color:#a17e38; background:#eadfc8; }
.search-field { flex:1; min-width:0; }
.search-field label { display:block; font-size:13px; font-weight:600; margin-bottom:4px; }
input { width:100%; min-width:0; height:43px; padding:0 10px; border-radius:7px; border:1px solid #d6dee6; color:var(--ink); background:#fbfcfd; font-size:18px; }
input::placeholder { color:#87929c; }
.search-field small { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.results { border:1px solid var(--line); border-radius:7px; margin-top:6px; max-height:220px; overflow-y:auto; background:white; }
.result { display:block; width:100%; text-align:left; padding:10px; border:0; border-bottom:1px solid #edf0f3; background:white; color:var(--ink); font-size:15px; min-height:48px; }
.result:hover,.result:focus-visible { background:#eaf1f7; }
.result small { font-size:13px; margin:2px 0 0; }
.no-results { padding:12px; font-size:15px; color:var(--muted); }
.primary { width:100%; border:0; border-radius:7px; background:var(--blue); color:white; min-height:44px; font-size:15px; font-weight:600; margin-top:3px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; }
.primary span { font-size:20px; font-weight:400; }
.map-section { margin:23px 18px 0; }
.map-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-bottom:10px; }
.map-heading h2 { font-size:19px; margin-top:2px; }
.quiet { background:white; border:1px solid var(--line); border-radius:6px; color:var(--blue); min-height:44px; padding:0 10px; font-size:13px; flex-shrink:0; }
/* Map key row above the map, drawn to match the boxes on the floor plans. */
.map-key { list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--ink); }
.map-key li { display:flex; align-items:center; gap:6px; }
.key-box { display:grid; place-items:center; width:20px; height:20px; background:#f0eadb; border:1.5px solid #7a889f; border-radius:2px; font-size:11px; font-weight:400; color:#1f2f4a; }
.key-box.hatch { background:repeating-linear-gradient(135deg, #eef0eb 0 3px, #c4cdc3 3px 4.5px); }
.map-shell { position:relative; border:1px solid #d3dce4; border-radius:11px; overflow:hidden; background:white; }
/* The map box has about the same shape as the floor plans, so a whole floor fills it. */
#map { width:100%; height:auto; aspect-ratio:4 / 3; background:#fffdf7; }
#map-error { position:absolute; z-index:900; inset:0; padding:30px; display:grid; place-content:center; text-align:center; font-size:15px; color:#7a332a; background:#fffcf4f2; }
#map-error[hidden] { display:none; }
.map-caption { font-size:13px; color:var(--muted); margin:8px 2px 0; }
/* Route key: a 2-column list of the line and marker symbols used in the route pictures. */
.route-key { list-style:none; margin:12px 0 14px; padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; background:#f5f7fa; border-radius:9px; font-size:14px; }
.route-key[hidden] { display:none; }
.route-key li { display:flex; align-items:center; gap:7px; }
.key-line { display:inline-block; width:26px; height:7px; background:#1452b0; border:1px solid #0a1f44; border-radius:4px; flex-shrink:0; }
.key-dot { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#1452b0; color:white; font-size:11px; border:2px solid white; box-shadow:0 0 0 1px #0a1f44; flex-shrink:0; }
.key-dot.end { background:#c33d37; box-shadow:0 0 0 1px #7a1f1b; }
.key-dot.small { font-size:8px; }
.legend-line { display:inline-block; vertical-align:middle; width:22px; height:6px; background:#1452b0; border:1px solid #0a1f44; margin-right:5px; border-radius:3px; }
/* Map decorations stay on the same coordinate plane as the hand-drawn image. */
.room-label { background:#fffffff0; border:1px solid #d8e0e8; border-radius:4px; box-shadow:0 1px 5px #0000000c; padding:3px 5px; color:#2b3d4d; font:10px/1.2 "Segoe UI",sans-serif; white-space:nowrap; }
.room-label::before { display:none; }
.route-marker { display:grid; place-items:center; width:30px; height:30px; background:#1452b0; color:white; font:700 12px "Segoe UI",sans-serif; border:3px solid white; border-radius:50%; box-shadow:0 1px 6px #0004; }
.route-marker.destination-marker { background:#c33d37; }
/* Spin buttons match the size of the + / - zoom buttons. */
.spin-control a { color:var(--blue)!important; width:36px!important; height:36px!important; line-height:36px!important; font-size:20px; text-align:center; text-decoration:none; }
.leaflet-control-zoom a { color:var(--blue)!important; width:36px!important; height:36px!important; line-height:36px!important; }
.leaflet-container a { color:var(--blue); }
.route-card { padding:17px; }
.route-card .section-head { margin-bottom:10px; }
.text-button { min-height:32px; border:0; background:transparent; color:var(--blue); font-size:13px; padding:0 3px; text-decoration:underline; text-underline-offset:3px; }
#status { font-size:15px; color:var(--muted); }
#status.error { color:#9b3e32; }
/* Picture guides reuse floor SVGs and graph coordinates, with no timing UI. */
#picture-guidance { margin-top:18px; }
#picture-guide { display:grid; gap:14px; }
.picture-step { display:block; width:100%; min-width:0; padding:0; overflow:hidden; text-align:left; color:var(--ink); background:white; border:1px solid var(--line); border-radius:9px; }
/* The picture button fills the card; walking steps sit below it, outside the button. */
.picture-open { display:block; width:100%; border:0; padding:0 0 12px; color:inherit; background:transparent; text-align:left; font:inherit; }
.picture-open:focus-visible { outline-offset:-3px; }
/* Only the current page's floor card is shown; the pager moves between them. */
.picture-step[hidden] { display:none; }
.pager { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.pager[hidden] { display:none; }
.pager button { min-height:44px; min-width:92px; padding:0 14px; border-radius:7px; border:1px solid var(--blue); background:var(--blue); color:white; font-size:15px; font-weight:600; }
.pager button:disabled { background:white; color:var(--muted); border-color:var(--line); cursor:default; opacity:1; }
#page-count { font-size:15px; font-weight:600; }
.picture-step strong { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:11px 12px; font-size:15px; background:#e8f0fe; }
.picture-step .page-label { flex:none; font-weight:600; color:#1557b0; }
.route-picture { display:block; width:100%; height:260px; background:#f9fafc; border-block:1px solid var(--line); }
.picture-open > span { display:block; margin:9px 12px 0; font-size:14px; overflow-wrap:anywhere; }
.picture-step small { display:block; margin:10px 12px 0; font-size:13px; color:#1557b0; }
/* Numbered turns for the picture above; the full list is in "All written directions". */
.walking-directions { margin:0; padding:12px 14px 12px 32px; border-top:1px solid var(--line); background:#f9fafc; font-size:15px; }
.walking-directions li { padding:4px 0 4px 3px; overflow-wrap:anywhere; }
.walking-directions li::marker { color:#1557b0; font-weight:600; }
#written-guidance { margin-top:18px; font-size:15px; }
#written-guidance summary { cursor:pointer; min-height:44px; padding:10px 0; }
#route-steps { list-style:none; counter-reset:route-step; margin:15px 0 0; padding:0; }
#route-steps li { counter-increment:route-step; display:flex; align-items:flex-start; gap:10px; margin-top:9px; }
#route-steps li::before { content:counter(route-step); display:grid; place-items:center; border-radius:50%; min-width:22px; height:22px; font-size:13px; color:var(--blue); background:#e8eff5; margin-top:4px; }
.route-step { border:0; background:#f5f7fa; color:var(--ink); border-radius:6px; text-align:left; font-size:14px; padding:9px 10px; width:100%; min-height:44px; }
footer { margin:21px 24px 0; color:var(--muted); font-size:13px; line-height:1.7; }
/* Hidden from view but still read out by screen readers. */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
noscript { display:block; margin:20px; color:#9b3e32; }
@media(max-width:350px) { .masthead { padding:22px 16px; } .site-title { gap:8px; } h1 { font-size:22px; } .card,.map-section { margin-left:12px; margin-right:12px; } .journey,.route-card { padding:13px; } .selectors { gap:8px; }  }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
/* Stairs or lift question (after Show route) and the switch on the route panel. */
.mode-ask { margin:4px 0 12px; }
.mode-ask p { margin:0 0 10px; font-size:17px; font-weight:600; }
.mode-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mode-buttons button { width:100%; margin:0; justify-content:center; font-size:16px; }
.mode-switch .text-button { font-size:15px; }
.mode-ask[hidden], .mode-switch[hidden] { display:none; }
.mode-switch { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0 0 10px; font-size:15px; }