@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('barlow-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('barlow-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA, U+1E00-1EFF, U+20A0-20C0; }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('barlow-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url('barlow-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('barlow-condensed-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('barlow-condensed-latin-700.woff2') format('woff2'); }

/* The French borne kilométrique: a white stone with a coloured cap. Red cap = nationale, here the cheapest; blue = autoroute. */
:root {
  --route: #123c8c;
  --route-ink: #ffffff;
  --sign: #d0202e;
  --asphalt: #1c2733;
  --kerb: #e6e9ee;
  --paper: #ffffff;
  --ink: #1c2733;
  --muted: #566372;
  --amber: #99570a;
  --danger: #b3202b;
  --line: #d4d9e0;
  --stone: #ffffff;
  --cap: #5a6675;
  --shadow: 0 -2px 18px rgb(18 40 80 / 18%);
  --font: 'Barlow', system-ui, sans-serif;
  --numerals: 'Barlow Condensed', 'Barlow', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #16202b; --ink: #edf1f5; --muted: #a2afbd; --kerb: #243140; --line: #33424f; --stone: #f4f6f8;
    --route: #2a5fc4; --sign: #e7404d; --amber: #eda94c; --danger: #ff8d92; --cap: #62707f; --shadow: 0 -2px 18px rgb(0 0 0 / 50%);
    color-scheme: dark;
  }
}

:focus-visible { outline-color: var(--sign); }

/* Search bar: a French autoroute panel, one blue field with a thin white keyline inside. */
.search { border: 0; outline: 0; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--route), inset 0 0 0 3.5px #ffffffb8, 0 2px 10px rgb(18 40 80 / 30%); }
.locate { color: #fff; }

/* Fuel choice: route-number cartouches. */
.fuels button { border-radius: 4px; font: 700 15px/1 var(--numerals); letter-spacing: 0.02em; padding: 8px 11px; }
.fuels button[aria-checked='true'] { background: var(--sign); color: #fff; }
.sorts button { border-radius: 4px; }
.sorts button[aria-checked='true'] { background: var(--route); color: #fff; }

/* The stone. */
.st { grid-template-columns: 78px 1fr auto; }
.tile, .board > div, .row .price {
  position: relative; background: var(--stone); color: #1c2733; border: 1.5px solid #8390a0;
  border-radius: 26px 26px 5px 5px / 22px 22px 5px 5px; text-align: center; overflow: hidden;
  font-family: var(--numerals); font-weight: 700;
}
.tile { padding: 22px 2px 6px; font-size: 25px; }
.tile::before, .board > div::before {
  content: attr(data-cap); position: absolute; inset: 0 0 auto 0; height: 18px; background: var(--cap); color: #fff;
  font: 600 11.5px/18px var(--numerals); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden;
}
.st.motorway .tile::before { background: var(--route); }
.st.best .tile { background: var(--stone); color: #1c2733; border-color: var(--sign); box-shadow: 0 0 0 1px var(--sign); }
.st.best .tile::before { background: var(--sign); }
.st.stale .tile, .st.suspect .tile, .st.closed .tile, .st.out .tile { background: var(--kerb); color: var(--muted); border-color: var(--line); }
.st.stale .tile::before, .st.suspect .tile::before, .st.closed .tile::before, .st.out .tile::before { background: #8d98a5; }
.out .flag { color: var(--danger); }
.ppl { font-family: var(--numerals); font-weight: 700; letter-spacing: 0; }
.st h3 { font-weight: 700; }
.meta .gain { color: #0f6b3f; }

.board { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.board > div { padding: 24px 6px 8px; }
.board > div.stale { background: var(--kerb); color: var(--muted); }
.board .ppl { font-size: 30px; }
.board small { color: #4a5563; font: 400 11.5px/1.25 var(--font); opacity: 1; }

/* Pins: a small stone with a cap stripe. */
.pin { background: #fff; color: #1c2733; border: 1.5px solid #5a6675; border-top: 5px solid #5a6675; border-radius: 9px 9px 3px 3px; font: 700 14px/1 var(--numerals); padding: 2px 5px; }
.pin::after { border-top-color: #5a6675; }
.pin.motorway { border-color: var(--route); }
.pin.motorway::after { border-top-color: var(--route); }
.pin.best { background: #fff; color: #1c2733; border-color: var(--sign); }
.pin.best::after { border-top-color: var(--sign); }
.pin.dim { background: #e6e9ee; color: #566372; border-color: #8d98a5; }
#map .pin.hl { background: #1c2733; color: #fff; border-color: var(--sign); }

.primary { background: var(--route); border-radius: 6px; font-weight: 700; }
.secondary { border-radius: 6px; font-weight: 700; }
.close { border-radius: 4px; }
.panel { border-radius: 10px; }
.sheet { border-radius: 10px 10px 0 0; }
.settings input:not([type='checkbox']) { border-radius: 4px; }

/* Pages. */
.bar { background: var(--route); }
.logo img { border-radius: 6px; }
.doc h1 { font-family: var(--numerals); font-weight: 700; letter-spacing: 0; }
.cta { background: var(--sign); color: #fff; font-weight: 700; border-radius: 6px; }
.row a { grid-template-columns: 86px 1fr auto; }
.row .price { font-size: 22px; padding: 16px 0 5px; }
.row .price::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 9px; background: var(--cap); }
.row.motorway .price::before { background: var(--route); }
.row:first-child .price { background: var(--stone); color: #1c2733; border-color: var(--sign); }
.row:first-child .price::before { background: var(--sign); }
.foot .linkish { font-size: inherit; }