/* Product layer over the approved CSS. shared.css, search.css and results.css are
 * byte-identical copies of FWNI - DESIGN/screens (checked by test/product.test.cjs);
 * everything the live product needs beyond them is here, kept small. */

/* Page background follows the theme (the approved files paint a review backdrop). */
html[data-theme=light], html[data-theme=light] body { background: #f5ece4; }
html[data-theme=dark], html[data-theme=dark] body { background: #102b3a; }
body { margin: 0; }

/* The approved 390x844 phone frame becomes the page itself. */
.app.phone { width: 100%; max-width: none; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible;
  border-radius: 0; box-shadow: none; margin: 0 auto; }
/* OPEN DECISION "DESKTOP" (config.js): mobile layout centred at most 480px wide. */
html[data-desktop=centred-mobile] .app.phone { max-width: 480px; }
/* 'desktop-layout' (default): the same 480px column below the desktop breakpoint; desktop.css
 * takes over from 761px (F, 12 Oct 2026: the desktop bundle, ported as-is). */
html[data-desktop=desktop-layout] .app.phone { max-width: 480px; }
/* Before app.js runs, the remembered dark theme already applies (boot.js sets <html>). */
html[data-theme=dark] .app.phone { --bg:#102b3a; --ink:#f5ece4; --muted:#bcc6c9; --surface:#1a3948; --border:#68808a;
  --green:#8acf9e; --action:#f5ece4; --action-ink:#102b3a; --soft-ink:#e4ddd6; }
.app .results-view { min-height: 100vh; min-height: 100dvh; }

/* Footer: the prototype's placeholder buttons are real links in the product. */
.search-view .search-footer a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px;
  min-height: 44px; font: 600 12.5px/1.4 Manrope, system-ui, sans-serif; padding: 7px; color: var(--muted, #586866);
  text-decoration: none; }
.search-view .search-footer a:focus-visible { outline: 3px solid var(--ink, #102B3A); outline-offset: 3px; }
@container phone (max-width:359px) { .search-view .search-footer a { font-size: 12px; padding: 4px; } }
.search-view .search-noscript { font-size: 14px; line-height: 1.5; text-align: center; margin: 0 0 16px; }

/* Appearance outer circle (CODER-HANDOVER "Coder investigation"): the trigger is a circle
 * (border-radius:50%), so its 3px focus outline at 3px offset paints a second circle around
 * the half-filled icon. app.js restores focus to it after a theme choice or panel close;
 * when that action came from a mouse/touch, the element carries data-pointer-focus and the
 * ring is not painted. Keyboard users keep the full approved ring. */
[data-pointer-focus]:focus-visible { outline: none !important; }
/* Headings receive focus only programmatically (tabindex=-1, to move screen readers to the
 * new screen); they are not controls, so no ring is drawn on them. */
h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible { outline: none; }

/* One quiet line under the summary (routing down; postcode starting point). */
.results-distance-notice { font-size: 13px; line-height: 1.45; color: var(--r-muted); text-align: center; margin: 0 0 8px !important; }
.results-summary + .results-distance-notice { margin-top: -2px !important; }
/* An unmeasured station shows nothing in the distance slot; keep the map icon aligned. */
.results-distance:empty { min-height: 18px; }
.results-pin-note { font-size: 12px !important; }
.results-feedback button[disabled] { opacity: .5; cursor: default; }
/* Four fuel pills (F, 6 Oct 2026: every car fuel is displayed): laid out by fuel-swipe.css
   (FWNI-037, F 12 Oct 2026: Petrol/Diesel first, "swipe for premium"; 2x2 rejected). */

/* Splash: an overlay above the search page, which stays in the document underneath. */
html.fwni-splash-pending body::after { content: ""; position: fixed; inset: 0; z-index: 99; background: #102b3a; }
.fwni-splash { position: fixed; inset: 0; z-index: 100; background: #102b3a; display: flex; align-items: center;
  justify-content: center; overflow: auto; }
.fwni-splash .splash-view { width: min(100vw, calc(100vh * 390 / 844), 480px); width: min(100vw, calc(100dvh * 390 / 844), 480px); flex: none; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* Station field placeholder "Search by station, retailer or fuel brand" (F, 12 Oct 2026) is
   about 285px wide at the approved 16px, but the field leaves at most 272px (340px input,
   52px icon side, 16px right), so it was cut off at every width. Only the placeholder is
   sized to fit (about 15px at 390px and wider, about 11.5px at 320px); typed text stays at
   16px, so iOS does not zoom the page on focus. Measured: 17.8px of width per px of type. */
.search-view #search-station::placeholder { font-size: 14px;
  font-size: min(15px, calc((min(340px, 100cqw - 42px) - 68px) / 18.2)); }