:root {
  --bg: #F4F6F8; --panel: #FFFFFF; --ink: #131C26; --ink2: #4C5A67; --ink3: #7B8896;
  --line: #DEE4EA; --hover: #F1F5F8; --accent: #2F5BD0; --accent-soft: #E8EEFC; --accent-ink: #fff;
  --warn: #C4442E; --warn-bg: #FBECE8; --note: #9A6B12; --note-bg: #FBF3E2;
  --ok: #1B7A4B; --ok-bg: #E8F5ED; --value: #5B3BC4; --value-bg: #EFEBFC;
  --shadow: 0 1px 2px rgba(19, 28, 38, .07), 0 8px 26px rgba(19, 28, 38, .13);
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0D141B; --panel: #151C24; --ink: #E6ECF2; --ink2: #A6B3BF; --ink3: #74828F;
    --line: #26313C; --hover: #1C262F; --accent: #6E9BFF; --accent-soft: #1E2B45; --accent-ink: #08121C;
    --warn: #FF8A73; --warn-bg: #2C1A17; --note: #F0BE5E; --note-bg: #2A2215;
    --ok: #57C98C; --ok-bg: #16281F; --value: #A98BFF; --value-bg: #1F1A33;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
    --bg: #0D141B; --panel: #151C24; --ink: #E6ECF2; --ink2: #A6B3BF; --ink3: #74828F;
    --line: #26313C; --hover: #1C262F; --accent: #6E9BFF; --accent-soft: #1E2B45; --accent-ink: #08121C;
    --warn: #FF8A73; --warn-bg: #2C1A17; --note: #F0BE5E; --note-bg: #2A2215;
    --ok: #57C98C; --ok-bg: #16281F; --value: #A98BFF; --value-bg: #1F1A33;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14.5px; line-height: 1.45; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h2, h3 { margin: 0; }

.app { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "map"; }
@media (min-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "bar bar" "map report"; }
}
.app.detail-mode { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "detail"; }
.app.detail-mode .mapwrap { display: none; }
.app.detail-mode .map-mode-control { display: none; }
.app.detail-mode .report {
  grid-area: detail; position: relative; inset: auto; width: 100%; height: 100%; max-height: none;
  border: 0; border-radius: 0; box-shadow: none; transform: none; z-index: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app.detail-mode .report-head { cursor: default; }
.app.detail-mode .grab { display: none; }
.app.detail-mode .report-body { min-height: 0; }

/* Top bar */
.bar { grid-area: bar; display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.brand svg { width: 22px; height: 22px; color: var(--accent); }
@media (max-width: 620px) { .brand span { display: none; } }
.search { position: relative; flex: 1; min-width: 0; }
.search input { width: 100%; height: 40px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); padding: 0 12px; font-size: 16px; }
.results { position: absolute; top: 44px; left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); list-style: none; margin: 0; padding: 4px; max-height: 60vh; overflow-y: auto; z-index: 40; }
.results button { width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 7px; display: grid; }
.results button:hover { background: var(--hover); }
.results small { color: var(--ink3); }
.results .none { padding: 10px; color: var(--ink2); }
.chip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.chip:hover { border-color: var(--ink3); }
.chip.mode-chip { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: var(--accent-soft); color: var(--accent); }

/* Map */
.mapwrap { grid-area: map; position: relative; min-height: 0; }
#map { position: absolute; inset: 0; visibility: hidden; background: var(--bg); }
#map.map-ready { visibility: visible; }
/* The remote basemap (OpenFreeMap, third-party CDN) is what dominates a cold load — median several
   seconds, sometimes into double digits on a slow connection — and #map stays invisible for all of
   it. A silent, unchanging background reads as broken; a small moving shimmer plus a label at least
   tells a visitor the wait is expected, not a stall. Later in DOM order than #map, so it paints over
   the still-hidden map and the sibling selector below removes it the instant map-ready is set. */
.map-loading { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; gap: 10px; background: var(--bg); pointer-events: none; }
/* Once our own layers are in, the map is shown and usable while OpenFreeMap's tiles and label
   fonts are still arriving (several seconds on a first visit). The cover then shrinks to a small
   pill, so a sea not yet painted blue reads as "still loading" rather than broken, and goes once
   the basemap has settled (map-complete). */
#map.map-ready ~ .map-loading { inset: 12px auto auto 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: var(--shadow); }
#map.map-ready ~ .map-loading .map-loading-shimmer { width: 40px; height: 6px; }
#map.map-ready ~ .map-loading p { font-size: 12px; }
#map.map-complete ~ .map-loading { display: none; }
.map-loading-shimmer { width: min(60%, 220px); height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--hover), var(--line), var(--hover)); background-size: 220% 100%; animation: skeleton 1.25s ease-in-out infinite; }
.map-loading p { margin: 0; color: var(--ink2); font-size: 13px; }
.busy { position: absolute; right: 12px; bottom: 44px; margin: 0; background: var(--ink); color: var(--panel); padding: 6px 12px; border-radius: 999px; font-size: 12.5px; box-shadow: var(--shadow); }
.hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 46px; margin: 0; background: var(--ink); color: var(--panel); padding: 8px 14px; border-radius: 999px; font-size: 13px; box-shadow: var(--shadow); }
.hint.zoomhint { background: var(--accent); color: var(--accent-ink); }
.map-hint { position: absolute; left: 50%; bottom: 46px; z-index: 5; display: flex; align-items: center; gap: 3px; max-width: calc(100% - 24px); transform: translateX(-50%); }
.map-hint[hidden], .hint-reopen[hidden] { display: none !important; }
.map-hint .hint { position: static; left: auto; bottom: auto; max-width: calc(100% - 48px); transform: none; }
.hint-close { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--panel); font-size: 20px; line-height: 1; box-shadow: var(--shadow); cursor: pointer; }
.hint-reopen { position: absolute; left: 50%; bottom: 46px; z-index: 5; min-height: 44px; max-width: calc(100% - 24px); padding: 8px 14px; transform: translateX(-50%); border: 0; border-radius: 999px; background: var(--ink); color: var(--panel); font-size: 13px; box-shadow: var(--shadow); cursor: pointer; }
.panel { position: absolute; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.map-key { top: 10px; right: 58px; z-index: 7; width: min(280px, calc(100% - 76px)); padding: 11px 13px; }
.map-key h3 { margin: 0 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink3); }
.map-key p { margin: 0 0 8px; font-size: 12px; color: var(--ink2); }
.map-inspect-center { width: 100%; margin: 0 0 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 11.5px; text-align: left; }
.map-inspect-center:hover, .map-inspect-center:focus-visible { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
.key-items { display: grid; gap: 6px; max-height: 42vh; overflow-y: auto; }
.key-empty { margin: 8px 0 !important; color: var(--ink3) !important; }
.key-metric > b { display: block; margin-bottom: 5px; color: var(--ink2); font-size: 12px; }
.key-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink2); }
.key-swatch { width: 17px; height: 12px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--ink3) 35%, transparent); }
.key-swatch.line { height: 4px; border: 0; border-radius: 2px; }
.key-swatch.dot { width: 11px; height: 11px; margin-left: 3px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--ink3); }
.key-swatch.gradient { background: linear-gradient(90deg, #E9E3FB, #4A2FC0); }
.key-tip { margin: 9px 0 0 !important; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink3) !important; }
.feature-info { top: 68px; right: 10px; z-index: 8; width: min(340px, calc(100% - 20px)); padding: 12px 13px; }
.feature-info-head { display: flex; align-items: start; gap: 10px; }
.feature-info h3 { margin: 0; font-size: 15px; line-height: 1.25; }
.feature-close { width: 28px; height: 28px; margin: -3px -4px 0 auto; flex: none; border: 0; border-radius: 8px; background: var(--hover); color: var(--ink2); font-size: 19px; line-height: 1; }
.feature-layer { margin: 3px 0 9px; color: var(--ink3); font-size: 11.5px; }
.feature-details { display: grid; gap: 5px; }
.feature-fact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 9px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.feature-fact b { color: var(--ink2); font-weight: 500; }
.feature-fact span { color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.feature-links { display: grid; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.feature-link { color: var(--accent); font-size: 12px; overflow-wrap: anywhere; }
.inline-source { margin-left: 6px; color: var(--accent); font-size: 11.5px; white-space: nowrap; }
.feature-report { width: 100%; margin-top: 10px; border: 0; border-radius: 8px; padding: 8px 10px; background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 600; }
.layers { top: 10px; left: 10px; padding: 10px 12px; display: grid; gap: 7px; max-width: 250px; z-index: 5; }
.explore { top: 10px; left: 10px; padding: 12px 14px; display: grid; gap: 10px; width: 262px; z-index: 6; max-height: calc(100% - 24px); overflow-y: auto; }
.views { top: 10px; right: 10px; padding: 12px 14px; display: grid; gap: 9px; width: min(300px, calc(100% - 20px)); z-index: 6; }
.views h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink3); }
.views p { margin: -3px 0 2px; font-size: 12px; color: var(--ink2); }
.view-list { display: grid; gap: 6px; }
.view-choice { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 8px 10px; display: grid; gap: 1px; }
.view-choice:hover, .view-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.view-choice b { font-size: 13px; }
.view-choice small { color: var(--ink3); font-size: 11.5px; line-height: 1.3; }
.explore h4 { margin: 0; font-size: 11px; text-transform: uppercase; /* Greek accents stripped in JS; see capitals() */ letter-spacing: .07em; color: var(--ink3); }
.explore .prefs { display: grid; gap: 6px; }
.explore .pref { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 7px 10px; display: grid; gap: 1px; }
.explore .pref span { font-weight: 600; font-size: 13px; }
.explore .pref small { font-size: 11.5px; color: var(--ink3); line-height: 1.3; }
.explore .pref[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.explore .pref[aria-pressed="true"] small { color: var(--ink2); }
.explore .advanced summary { font-size: 12px; color: var(--ink3); cursor: pointer; }
.explore .advanced .metrics { margin-top: 7px; }
.explore .metrics { display: flex; flex-wrap: wrap; gap: 5px; }
.explore .metrics button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 4px 9px; font-size: 12px; color: var(--ink2); }
.explore .metrics button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.explore .weight { display: grid; gap: 2px; }
.explore .weight span { font-size: 12px; color: var(--ink2); display: flex; justify-content: space-between; }
.explore input[type="range"] { width: 100%; accent-color: var(--accent); }
.explore .scale { display: flex; gap: 2px; }
.explore .scale i { flex: 1; height: 7px; border-radius: 2px; }
.explore .ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink3); }
.explore .tip { font-size: 11.5px; color: var(--ink3); margin: 0; }
.layers label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.layers i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.pin { width: 28px; height: 36px; color: var(--accent); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.pin svg { width: 100%; height: 100%; display: block; }
.maplibregl-ctrl-attrib { font-family: var(--sans); font-size: 11px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .maplibregl-ctrl-group, :root:not([data-theme]) .maplibregl-ctrl-attrib.maplibregl-compact { background: var(--panel) !important; }
  .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg); }
  .maplibregl-ctrl-attrib a { color: var(--ink2) !important; }
  .maplibregl-ctrl-attrib-button { filter: invert(1); }
}

/* Report */
.report { grid-area: report; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.report-head { padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
/* flex-wrap here (not just under the mobile breakpoint below) because the actions cluster
   (view-full-report + share + PDF) is wider than the fixed 420px report column can fit on one
   line at any desktop width — verified: without it the row ran off the right edge of the page
   itself, not just its container, giving the whole document a horizontal scrollbar that hid the
   PDF button behind it. Letting the row wrap keeps every button on screen, at the cost of one
   extra line of height only when a title is long enough to need it. */
.report-title { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px; }
.report-head h2 { font-size: 17px; letter-spacing: -.01em; }
.report-mode { display: inline-block; margin: 0 0 4px; padding: 3px 7px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 10.5px !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.partner { display: grid; gap: 2px; border: 1px dashed var(--line); border-radius: 10px; padding: 9px 11px; margin-top: 9px; }
.partner .tag { font-size: 10px; text-transform: uppercase; /* Greek accents stripped in JS; see capitals() */ letter-spacing: .08em; color: var(--ink3); }
.partner .sponsor-note { font-size: 11px; color: var(--ink3); }
.partner b { font-size: 13.5px; }
.partner span { font-size: 12.5px; color: var(--ink2); }
.partner a { justify-self: start; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.report-head p { margin: 2px 0 0; font-size: 12px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.report-body { overflow-y: auto; padding: 4px 18px 28px; flex: 1; }
.report.loading .report-body { overflow: hidden; }
.report-nav { position: sticky; top: -4px; z-index: 2; display: flex; gap: 5px; overflow-x: auto; margin: 0 -2px; padding: 4px 2px 8px; background: var(--panel); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.report-nav::-webkit-scrollbar { display: none; }
.report-nav a { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink2); background: var(--hover); font-size: 11px; text-decoration: none; white-space: nowrap; }
.report-nav a:hover, .report-nav a:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
@media (prefers-reduced-motion: no-preference) { .report-body { scroll-behavior: smooth; } }
.view-summary { margin: 4px 0 2px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--hover); }
.view-summary-label { margin: 0 0 3px; color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.view-summary h3 { margin: 0 0 4px; font-size: 15px; }
.view-summary-lead { margin: 0; color: var(--ink2); font-size: 12.5px; line-height: 1.4; }
.summary-chips { display: flex !important; flex-wrap: wrap; gap: 5px !important; list-style: none; margin: 9px 0 0 !important; padding: 0; }
.summary-chip { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink2); font-size: 11.5px; }
.summary-chip.warn { border-color: var(--warn); background: var(--warn-bg); color: var(--ink); }
.summary-chip.note { border-color: var(--note); background: var(--note-bg); color: var(--ink); }
.summary-chip.ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ink); }
.summary-chip.value { border-color: var(--value); background: var(--value-bg); color: var(--ink); }
.report-skeleton { display: grid; gap: 12px; padding: 18px 0; }
.report-skeleton p { margin: 0; color: var(--ink2); font-size: 13px; }
.skeleton-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--hover), var(--line), var(--hover)); background-size: 220% 100%; animation: skeleton 1.25s ease-in-out infinite; }
.skeleton-line.short { width: 58%; }
@keyframes skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.muted { color: var(--ink2); padding: 18px 0; }
.block { padding: 14px 0; border-bottom: 1px solid var(--line); }
.block, h4.group { scroll-margin-top: 48px; }
.block h3 { font-size: 12px; text-transform: uppercase; /* Greek accents stripped in JS; see capitals() */ letter-spacing: .07em; color: var(--ink3); margin-bottom: 8px; }
.block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.row { display: block; padding: 8px 11px; border-radius: 9px; background: var(--hover); font-size: 14px; border-left: 3px solid transparent; }
.row.score { display: grid; gap: 5px; }
.scoreline { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.scoreline b { font-variant-numeric: tabular-nums; }
.parts { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.part { font-size: 12px; color: var(--ink2); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.part em { font-style: normal; color: var(--ink3); font-variant-numeric: tabular-nums; }
.muted-parts { font-size: 12px; color: var(--ink3); }
.row .sub { display: block; font-size: 12.5px; color: var(--ink3); margin-top: 2px; }
.row.warn { background: var(--warn-bg); border-left-color: var(--warn); }
.row.note { background: var(--note-bg); border-left-color: var(--note); }
.row.ok { background: var(--ok-bg); border-left-color: var(--ok); }
.row.value { background: var(--value-bg); border-left-color: var(--value); font-size: 16px; }
.row.plain, .row.link { background: var(--hover); }
.row.link a { color: var(--accent); }
.note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink3); }
.nearlist { display: grid; gap: 2px; }
.nearby-deferred p { margin: 4px 0 9px; color: var(--ink2); font-size: 12.5px; line-height: 1.45; }
.nearby-load { min-height: 44px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 650; cursor: pointer; }
.nearby-load:disabled { opacity: .7; cursor: wait; }
.near-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; align-items: center; padding: 2px 3px 2px 7px; border-radius: 7px; font-size: 13.5px; }
.near-row:nth-child(odd) { background: var(--hover); }
.near-go { min-width: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 2px 4px 2px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.near-go:hover, .near-go:focus-visible { color: var(--accent); }
.near-what { color: var(--ink2); }
.near-where { color: var(--ink3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.near-dist { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.near-source { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; color: var(--accent); font-size: 16px; text-decoration: none; }
.near-source:hover, .near-source:focus-visible { background: var(--accent-soft); }
.daily-card { padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--hover); }
.daily-summary { padding: 1px 2px 4px; color: var(--ink2); font-size: 11.5px; }
.daily-card h4 { margin: 0 0 5px; font-size: 12px; color: var(--ink2); font-weight: 650; }
.daily-list { display: grid; gap: 2px; }
.daily-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line); }
.daily-item:first-child { border-top: 0; }
.daily-go { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.daily-go:hover { color: var(--accent); background: var(--accent-soft); }
.daily-source { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--accent); font-size: 16px; text-decoration: none; }
.daily-source:hover, .daily-source:focus-visible { background: var(--accent-soft); }
.daily-item-main { display: grid; min-width: 0; gap: 1px; }
.daily-item-main b { font-size: 12.5px; font-weight: 600; }
.daily-item-main small { color: var(--ink3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.travel-group { display: grid; gap: 5px; }
.travel-group h4 { margin: 4px 0 0; font-size: 12px; color: var(--ink2); font-weight: 650; }
.bus-journey { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.bus-journey label { display: grid; gap: 3px; color: var(--ink3); font-size: 11px; }
.bus-journey input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; }
.bus-journey-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.bus-journey-actions button { border: 0; border-radius: 6px; padding: 6px 9px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 11.5px; }
.bus-journey-actions button:disabled { opacity: .45; cursor: not-allowed; }
.bus-journey-actions button:not(:disabled):hover, .bus-journey-actions button:not(:disabled):focus-visible { background: var(--accent); color: var(--panel); }
.travel-filter-wrap { padding: 2px 0 3px; }
.travel-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.travel-filter { border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; background: var(--panel); color: var(--ink2); font-size: 11.5px; }
.travel-filter:hover, .travel-filter[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.travel-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.travel-plan-head h4 { display: grid; gap: 1px; margin: 4px 0; }
.travel-plan-summary { color: var(--ink3); font-size: 10.5px; font-weight: 400; }
.travel-plan-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
.travel-compare { border: 0; border-radius: 6px; padding: 3px 7px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; }
.travel-share { border: 0; border-radius: 6px; padding: 3px 7px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; }
.travel-plan-directions { border: 0; border-radius: 6px; padding: 3px 7px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; text-decoration: none; }
.travel-plan-directions:hover, .travel-plan-directions:focus-visible { background: var(--accent); color: var(--panel); }
.travel-list { display: grid; gap: 3px; }
.travel-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 5px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; background: var(--panel); }
.travel-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.travel-go { min-width: 0; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto 16px; gap: 7px; align-items: center; text-align: left; border: 0; padding: 0; background: transparent; color: inherit; }
.travel-save { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink3); font-size: 18px; line-height: 1; }
.travel-save:hover, .travel-save[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.travel-source { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--accent); font-size: 16px; text-decoration: none; }
.travel-source:hover, .travel-source:focus-visible { background: var(--accent-soft); }
.travel-directions { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--ink3); font-size: 18px; text-decoration: none; }
.travel-directions:hover, .travel-directions:focus-visible { background: var(--accent-soft); color: var(--accent); }
.travel-order { display: flex; gap: 2px; }
.travel-order-btn { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink3); line-height: 1; padding: 0; }
.travel-order-btn:hover:not(:disabled), .travel-order-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.travel-order-btn:disabled { opacity: .3; cursor: default; }
.travel-clear { border: 0; border-radius: 6px; padding: 3px 7px; background: transparent; color: var(--ink3); font-size: 11.5px; }
.travel-clear:hover, .travel-clear:focus-visible { color: var(--warn); background: var(--hover); }
.travel-main { display: grid; min-width: 0; gap: 1px; }
.travel-stop-number { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; }
.travel-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.travel-main small { color: var(--ink3); font-size: 11.5px; }
.travel-saved-label { color: var(--accent); font-size: 11.5px; white-space: nowrap; }
.travel-arrow { color: var(--accent); font-size: 17px; line-height: 1; }
.travel-empty { padding: 5px 2px; color: var(--ink3); font-size: 12px; }
.compare-block { overflow: hidden; }
.compare-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.compare-top h3 { margin: 0; }
.compare-scroll { overflow-x: auto; }
.compare-grid { min-width: 25em; display: grid; gap: 1px; }
.compare-row { display: grid; gap: 7px; align-items: center; padding: 7px 6px; border-radius: 6px; background: var(--hover); font-size: 12.5px; }
.compare-row:nth-child(even) { background: var(--panel); }
.compare-row > span:not(.compare-label), .compare-row > b { text-align: center; }
.compare-header { background: var(--accent-soft) !important; }
.compare-header span { display: grid; gap: 1px; min-width: 0; }
.compare-header small { color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-label { color: var(--ink2); }
.compare-score, .compare-price { font-variant-numeric: tabular-nums; }
.compare-score.good { color: var(--ok); }
.compare-score.mid { color: var(--note); }
.compare-score.bad { color: var(--warn); }
.season-label { display: block; color: var(--ink2); font-size: 12px; margin-bottom: 7px; }
.season-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.season-month { display: grid; gap: 1px; padding: 5px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); text-align: center; }
.season-month b { font-size: 11px; color: var(--ink2); }
.season-month small { font-size: 10.5px; color: var(--ink3); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 9px; background: var(--hover); color: var(--ink2); border: 1px solid var(--line); }
.tag-chip.good { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.tag-chip.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.row.tags { background: none; padding: 2px 0; }
.explain { margin-top: 8px; }
.explain summary { font-size: 12px; color: var(--accent); cursor: pointer; }
.explain p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.checklist ul { gap: 5px; }
.checklist li { font-size: 13.5px; color: var(--ink2); padding-left: 16px; position: relative; }
.checklist li::before { content: "→"; position: absolute; left: 0; color: var(--ink3); }
.sources p { margin: 0; font-size: 12.5px; color: var(--ink3); }
.grab { display: none; }

@media (max-width: 899px) {
  .report {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-height: 68dvh;
    border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
    transform: translateY(calc(100% - 100px)); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .report.open { transform: translateY(0); }
  .report-head { cursor: pointer; padding-top: 8px; }
  .grab {
    display: grid; place-items: center; width: 56px; height: 44px; margin: -4px auto 0;
    padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  }
  .grab::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
  .grab:hover::before { background: var(--ink3); }
  /* The closed sheet still covers the bottom 100px of the map, so everything MapLibre and we pin
     to the map's bottom edge goes above it: the tap hint, the toasts, and the OpenStreetMap
     attribution, which the licence requires to be visible and which sat hidden under the sheet. */
  .hint, .map-hint, .hint-reopen, .busy { bottom: calc(100px + 12px + env(safe-area-inset-bottom, 0px)); }
  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .map-key { top: 10px; right: 10px; width: min(280px, calc(100% - 20px)); }
  .feature-info { top: 10px; right: 10px; }
  .layers { max-width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .report { transition: none; }
  .skeleton-line, .map-loading-shimmer { animation: none; }
}

/* Map controls in dark mode, when the visitor has chosen it. */
:root[data-theme="dark"] .maplibregl-ctrl-group,
:root[data-theme="dark"] .maplibregl-ctrl-attrib.maplibregl-compact { background: var(--panel) !important; }
:root[data-theme="dark"] .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib a { color: var(--ink2) !important; }
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }

/* ---------- product shell ---------- */
.brand { text-decoration: none; }
.brand-text { display: grid; line-height: 1.15; }
.brand-text b { font-size: 15.5px; letter-spacing: -.01em; }
.brand-text small { font-size: 11px; color: var(--ink3); font-weight: 500; }
@media (max-width: 860px) { .brand-text small { display: none; } }
.iconchip {
  width: 34px; height: 34px; flex: none; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); display: grid; place-items: center; color: var(--ink2);
}
.iconchip:hover { border-color: var(--ink3); }
.iconchip svg { width: 17px; height: 17px; }
/* wraps for the same reason as .report-title above: the three buttons' own nowrap labels need
   more width than the 420px report column has, even on their own full-width row. */
.report-actions { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }

/* First run */
.intro {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(10, 18, 26, .55); padding: 20px; backdrop-filter: blur(2px);
}
.intro-card {
  background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); padding: 24px 26px 22px;
  width: min(460px, 100%); display: grid; gap: 12px;
}
.intro-card h2 { font-size: 22px; letter-spacing: -.02em; }
.intro-lead { margin: 0; color: var(--ink2); }
.intro-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.intro-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline; counter-increment: step; }
.intro-steps li::before {
  content: counter(step); grid-row: span 2; width: 26px; height: 26px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
}
.intro-steps b { font-size: 14.5px; }
.intro-steps span { grid-column: 2; font-size: 13px; color: var(--ink2); }
.intro-note { margin: 6px 0 0; font-size: 12.5px; color: var(--ink3); }
.intro-actions { display: flex; gap: 8px; margin-top: 6px; }
.btn-primary {
  border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink);
  font-weight: 600; padding: 10px 20px; font-size: 14.5px;
}
.btn-quiet { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink2); padding: 10px 16px; font-size: 14px; }

/* Information pages */
.info {
  border: 0; border-radius: 16px; padding: 0; width: min(680px, calc(100% - 28px));
  max-height: calc(100% - 44px); background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
}
.info::backdrop { background: rgba(8, 14, 20, .5); }
.info-inner { display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: calc(100dvh - 44px); }
.info-inner > header { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 20px 22px 12px; }
.info-inner h2 { font-size: 19px; letter-spacing: -.01em; }
.info-inner header p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink3); }
.info-inner .x { width: 34px; height: 34px; border-radius: 9px; border: 0; background: var(--hover); font-size: 18px; flex: none; }
.info-tabs { display: flex; gap: 4px; padding: 0 22px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.info-tabs button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--ink2); }
.info-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.info-body { overflow-y: auto; padding: 16px 22px 24px; font-size: 14px; line-height: 1.55; }
.info-body h3 { font-size: 14px; margin: 16px 0 4px; }
.info-body p { margin: 0 0 10px; color: var(--ink2); }
.info-body table.sources { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 13px; }
.info-body table.sources th { text-align: left; font-weight: 600; padding: 5px 10px 5px 0; vertical-align: top; width: 45%; }
.info-body table.sources td { color: var(--ink2); padding: 5px 0; vertical-align: top; }
.info-body table.sources tr + tr th, .info-body table.sources tr + tr td { border-top: 1px solid var(--line); }
.info-body .muted-note { font-size: 12.5px; color: var(--ink3); }

/* Layers panel */
.layer-actions { display: flex; gap: 6px; margin-bottom: 4px; }
.layer-actions button { flex: 1; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 4px 8px; font-size: 12px; color: var(--ink2); }
.layer-actions button:hover { border-color: var(--ink3); }
.layer-group + .layer-group { margin-top: 8px; }
.layer-group h5 { margin: 0 0 4px; font-size: 10.5px; text-transform: uppercase; /* Greek accents stripped in JS; see capitals() */ letter-spacing: .07em; color: var(--ink3); font-weight: 600; }
.layers label.layer { display: grid; grid-template-columns: auto 11px 1fr auto; gap: 8px; align-items: center; font-size: 13px; padding: 2px 0; }
.layers .solo { border: 0; background: none; color: var(--ink3); font-size: 11px; padding: 1px 4px; border-radius: 6px; opacity: 0; }
.layers label.layer:hover .solo { opacity: 1; }
.layers .solo:hover { background: var(--hover); color: var(--accent); }

.info-body .sources .src-meta { display: block; font-size: 11.5px; color: var(--ink3); margin-top: 1px; }

#coords { display: grid; gap: 1px; }
#coords .where { font-size: 12.5px; color: var(--ink2); }
#coords .latlng { font-size: 11px; color: var(--ink3); font-variant-numeric: tabular-nums; }
#coords .data-build { font-size: 10.5px; color: var(--ink3); }

.report-head:not(.has-point) .report-actions { display: none; }

/* Score groups: the direction of each is stated, and the number is coloured by it. */
.row.grouphead { background: none; border: 0; padding: 10px 0 2px; }
.grouphead { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink3); }
.scoreline .num.good { color: var(--ok); }
.scoreline .num.mid { color: var(--note); }
.scoreline .num.bad { color: var(--warn); }
.scoreline .num.unknown { color: var(--ink3); font-weight: 500; }
.coverage-note { border-left: 2px solid var(--ink3); padding-left: 8px; }
.coverage-warning.block { border-bottom-color: var(--warn); }
.coverage-warning.block h3 { color: var(--warn); }
.coverage-warning button { display: block; min-height: 44px; margin: 8px 0 0 auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.coverage-warning button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row .sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink2); margin-top: 3px; }

/* ---------- phones ---------- */

/* The five controls are one group, so they can drop to their own scrollable line rather than
   pushing the search box down to 26 pixels and shoving Layers off the screen. */
.bar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

@media (max-width: 899px) {
  .bar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  .search { flex: 1 1 200px; order: 2; }
  .bar-actions {
    order: 3; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    /* A trailing-edge fade hinting there is more to scroll to. Two background layers, no scroll
       listener: a cover the same colour as the bar, anchored to the content's own right edge
       (attachment: local, so it scrolls with the buttons), painted over a shadow anchored to the
       container's own right edge (attachment: scroll, so it stays put). When the strip is
       scrolled all the way to its true end, the cover's content-anchored position lines up with
       the container's edge and hides the shadow; short of that, the shadow shows through. When
       every control already fits (no overflow), the two positions always coincide, so the fade
       never appears at all. Measured 2026-09-25 against the 390px phone finding in
       docs/data-and-product-roadmap.md's "Map legibility" section. */
    background:
      linear-gradient(to left, var(--panel), transparent) 100% 0 / 40px 100% no-repeat local,
      linear-gradient(to left, color-mix(in srgb, var(--ink3) 55%, transparent), transparent) 100% 0 / 16px 100% no-repeat scroll;
  }
  .bar-actions::-webkit-scrollbar { display: none; }
  .report-title { flex-wrap: wrap; }
  .report-actions { flex: 1 1 100%; }
  .report-actions .chip { flex: 1; text-align: center; }
  .layers, .explore, .views { max-width: min(300px, calc(100vw - 24px)); }
}

/* Anything a finger has to hit is at least 44px tall. */
@media (pointer: coarse) {
  .chip, .iconchip, .layer-actions button { min-height: 44px; }
  .iconchip { width: 44px; }
  .layers label.layer { min-height: 44px; }
  .layers input[type="checkbox"] { width: 20px; height: 20px; }
}

@media (max-width: 480px) {
  .coverage-warning button { width: 100%; }
}

/* "only" was invisible and still clickable: on touch one stray tap turned every layer off. */
@media (hover: none) {
  .layers .solo { opacity: 1; border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; }
}
@media (hover: hover) {
  .layers .solo { pointer-events: none; }
  .layers label.layer:hover .solo, .layers .solo:focus-visible { pointer-events: auto; }
}

/* Report group headings: the four questions the sections answer. */
h4.group {
  margin: 22px 0 -2px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; /* Greek accents stripped in JS; see capitals() */ color: var(--ink); display: flex; align-items: center; gap: 10px;
}
h4.group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
h4.group:first-child { margin-top: 6px; }

/* Monthly climate normals: compact enough for the report sheet without losing the numbers. */
.climate-months { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.climate-month {
  display: grid; grid-template-columns: 38px 58px minmax(24px, 1fr) 58px;
  align-items: center; gap: 8px; min-height: 22px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.climate-month > b { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); }
.climate-legend { display: grid; grid-template-columns: 38px 58px minmax(24px, 1fr) 58px; align-items: end; gap: 8px; color: var(--ink3); font-size: 9px; line-height: 1.1; }
.climate-rain-bar { height: 6px; overflow: hidden; border-radius: 99px; background: var(--hover); }
.climate-rain-bar i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--accent); }
.climate-rain-value { text-align: right; color: var(--ink2); white-space: nowrap; }
.climate-details { border-top: 1px solid var(--line); padding-top: 5px; }
.climate-details > summary { color: var(--accent); font-size: 11.5px; cursor: pointer; }
.climate-details-content { padding-top: 7px; }
.climate-detail-months { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.climate-detail-month, .climate-detail-legend { display: grid; grid-template-columns: 42px minmax(76px, 1fr) 78px; align-items: center; gap: 7px; font-size: 11px; }
.climate-detail-month > b { color: var(--ink3); font-size: 10.5px; text-transform: uppercase; }
.climate-detail-month > span:last-child, .climate-detail-legend > span:last-child { text-align: right; white-space: nowrap; }
.climate-detail-legend { color: var(--ink3); font-size: 9px; line-height: 1.1; }
@media (max-width: 390px) {
  .climate-month, .climate-legend { grid-template-columns: 32px 52px minmax(20px, 1fr) 52px; gap: 5px; }
  .climate-month { font-size: 11px; }
  .climate-detail-month, .climate-detail-legend { grid-template-columns: 36px minmax(68px, 1fr) 70px; gap: 5px; }
}

/* Sits below the full-height app: the crawlable description of what this is, plus the entry points
   into the generated pages. Visible and scrollable rather than hidden, because hidden text and
   hidden links are discounted by every engine that reads this page. */
.site-footer { border-top: 1px solid var(--line); background: var(--panel); }
.site-footer-inner { max-width: 860px; margin: 0 auto; padding: 26px 18px 34px; display: grid; gap: 12px; }
.site-footer h1 { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.site-answer { margin: 0; color: var(--ink2); font-size: 14px; }
.site-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; }
.site-links a { color: var(--accent); }
@media (max-width: 899px) {
  /* .report never fully leaves the viewport here — closed, it still peeks 100px off the bottom,
     pinned by position:fixed regardless of page scroll (see the .report rule above). Anyone who
     scrolls past the map to this footer runs into that peek sitting over whatever is at the very
     bottom of the page, which was these links before this rule existed: reachable by scroll,
     covered and untappable. Placed after .site-footer-inner's own padding rule on purpose — same
     specificity, so cascade order is what decides, and an earlier copy of this was silently losing. */
  .site-footer-inner { padding-bottom: calc(34px + 100px + env(safe-area-inset-bottom, 0px)); }
}

/* Read aloud by screen readers, never drawn: toasts and "report ready" are announced from here,
   since the toast itself is shown and hidden too quickly for a live region to be reliable. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }