/* turfrig.com — editorial, photographic, calm. Deep forest, meadow, ochre, cream paper. 8px grid, tabular figures. */
@font-face { font-family: "Figtree"; src: url("/static/fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
/* Fraunces (OFL, /static/fonts/OFL-Fraunces.txt): variable, latin subset; axes opsz 9-144, wght 400-900, SOFT 0-100, WONK 0-1 */
@font-face { font-family: "Fraunces"; src: url("/static/fonts/fraunces.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
:root {
  --forest: #1f4a2e; --forest-deep: #15351f; --meadow: #3f7d4e; --meadow-soft: #a9c4a3; --meadow-pale: #e3ecdd;
  --ochre: #c9963a; --ochre-soft: #f0dfb6; --ochre-deep: #8f6520;
  --cream: #f6efdd; --paper: #fbf7ee; --card: #fffdf8; --ink: #22211d; --ink-soft: #5f5c53; --ink-faint: #8b877c; --line: #e6dcc6;
  --rust: #a8402f; --rust-soft: #f3dcd6;
  --serif: "Fraunces", Georgia, serif; --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 16px; --r-sm: 10px; --shadow: 0 1px 2px rgba(34,33,29,.05), 0 8px 24px rgba(34,33,29,.06);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); font-feature-settings: "tnum" 1; }
body.grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.17 0 0 0 0 0.1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: var(--forest); text-decoration-color: var(--ochre); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--meadow); }
img { max-width: 100%; display: block; }
h1, h2, h3, .serif { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-optical-sizing: auto; font-weight: 600; color: var(--forest); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 var(--s2); }
h1, .display { font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: var(--s6); }
h3 { font-size: 1.15rem; margin-top: var(--s3); }
p { margin: 0 0 var(--s2); }
.num { font-variant-numeric: tabular-nums; }
.wrap { width: min(1160px, 100% - 2 * var(--s2)); margin: 0 auto; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.small { font-size: .875rem; }
.xs { font-size: .78rem; }
.lead { font-size: 1.2rem; line-height: 1.45; max-width: 52ch; color: var(--ink-soft); }
.route { display: block; width: 100%; height: 24px; margin: var(--s4) 0; color: var(--ochre); }

/* header */
.top { background: var(--forest); color: var(--cream); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) 0; flex-wrap: wrap; }
.brand { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 1.75rem; color: var(--cream); text-decoration: none; display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; }
.brand img, .brand svg { width: 36px; height: 36px; display: block; }
.brand small { font-family: var(--sans); font-weight: 500; font-size: .78rem; color: var(--meadow-soft); margin-left: 6px; letter-spacing: .01em; font-variation-settings: normal; }
nav.main { display: flex; gap: var(--s3); flex-wrap: wrap; }
nav.main a { color: var(--cream); text-decoration: none; font-weight: 600; font-size: .95rem; opacity: .92; }
nav.main a:hover { color: var(--ochre-soft); opacity: 1; }
.preview-bar { background: var(--ochre); color: var(--ink); font-weight: 600; font-size: .8rem; text-align: center; padding: 6px var(--s2); }

/* hero */
.hero { position: relative; min-height: min(70vh, 560px); display: grid; align-items: end; color: var(--cream); background: var(--forest); overflow: hidden; }
.hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .bg.placeholder { display: block; }
.hero .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,53,31,.05) 30%, rgba(21,53,31,.78) 100%); }
.hero .wrap { position: relative; padding: var(--s10) 0 var(--s6); }
.hero h1 { color: var(--cream); max-width: 16ch; font-size: clamp(2.4rem, 6vw, 4.25rem); margin-bottom: var(--s2); }
.hero p.lead { color: var(--cream); opacity: .9; max-width: 46ch; margin-bottom: var(--s3); }
.hero .cta { display: flex; gap: var(--s2); flex-wrap: wrap; }
.hero .note { font-size: .75rem; opacity: .7; margin: var(--s2) 0 0; }
.lanes { display: grid; gap: var(--s2); grid-template-columns: 1fr; margin: var(--s4) 0; }
@media (min-width: 640px) { .lanes { grid-template-columns: 1fr 1fr; } }
.lane { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); box-shadow: var(--shadow); text-decoration: none; color: inherit; display: block; }
.lane:hover { border-color: var(--ochre); }
.lane h2 { margin: 0 0 var(--s1); font-size: 1.5rem; }
.lane .count { color: var(--ochre-deep); font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; }

/* chips, badges, buttons */
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0; }
.chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: .9rem; text-decoration: none; color: var(--ink); }
.chip:hover { border-color: var(--meadow); }
.chip b { color: var(--forest); font-variant-numeric: tabular-nums; }
.badge { display: inline-block; border-radius: 6px; padding: 3px 8px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.3; }
.badge.bc { background: var(--meadow-pale); color: var(--forest); }
.badge.rtr { background: var(--ochre-soft); color: var(--ochre-deep); }
.badge.other { background: #ebe6d8; color: var(--ink-soft); }
.badge.cc { background: var(--cream); color: var(--forest); border: 1px solid var(--line); }
.badge.flag { background: var(--rust-soft); color: var(--rust); }
.badge.pending { background: #ece7d9; color: var(--ink-soft); font-weight: 600; text-transform: none; }
.btn { display: inline-block; background: var(--ochre); color: var(--ink); font-weight: 700; padding: 12px 20px; border-radius: var(--r-sm); text-decoration: none; box-shadow: var(--shadow); }
.btn:hover { background: #d9a74a; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--cream); border: 1.5px solid rgba(246,239,221,.6); box-shadow: none; }
.btn.ghost:hover { border-color: var(--cream); color: var(--cream); }

/* score dial */
.dial { width: 52px; height: 52px; display: block; }
.dial circle { fill: none; stroke-width: 3.6; }
.dial .track { stroke: rgba(246,239,221,.35); }
.dial .arc { stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.dial text { font-family: var(--serif); font-weight: 700; font-size: 13px; fill: var(--cream); text-anchor: middle; dominant-baseline: central; font-variation-settings: "SOFT" 100; }
.dial.good .arc { stroke: #8fd38f; } .dial.ok .arc { stroke: var(--ochre); } .dial.poor .arc { stroke: #e08a7a; }
.dial.big { width: 128px; height: 128px; }
.dial.big circle { stroke-width: 3; }
.dial.big text { font-size: 11.5px; fill: var(--forest); }
.dial.big .track { stroke: var(--line); }
.dial.on-paper text { fill: var(--forest); } .dial.on-paper .track { stroke: var(--line); }

/* van cards */
.grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; margin: var(--s3) 0 var(--s6); }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card .img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--meadow-pale); overflow: hidden; }
.card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .img img { transform: scale(1.03); }
.card .img .dial { position: absolute; right: 10px; bottom: 10px; background: rgba(21,53,31,.72); border-radius: 50%; padding: 2px; backdrop-filter: blur(2px); }
.card .img .tag { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.card .body { padding: var(--s2) var(--s2) var(--s2); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card .price { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 1.5rem; color: var(--forest); font-variant-numeric: tabular-nums; line-height: 1.1; display: flex; align-items: baseline; gap: 8px; }
.card .price .sub { font-family: var(--sans); font-size: .78rem; font-weight: 500; color: var(--ink-faint); }
.card .title { font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { font-size: .84rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.card .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--s1); padding-top: var(--s1); font-size: .8rem; color: var(--ink-faint); }
.card .deal { font-family: var(--serif); font-weight: 700; color: var(--ochre-deep); font-size: 1rem; }
.pager { display: flex; gap: var(--s1); justify-content: center; margin: var(--s2) 0 var(--s6); flex-wrap: wrap; }
.pager a, .pager span { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); text-decoration: none; font-variant-numeric: tabular-nums; }
.pager span.cur { background: var(--forest); color: var(--cream); border-color: var(--forest); }

/* van page */
.crumbs { font-size: .85rem; color: var(--ink-faint); margin: var(--s3) 0 var(--s2); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.vhead h1 { margin-bottom: 6px; }
.vhead .raw { font-size: .85rem; color: var(--ink-faint); margin: 0 0 var(--s3); }
.van { display: grid; gap: var(--s4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .van { grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr); } .van aside { align-self: stretch; } .van aside .stick { position: sticky; top: var(--s2); } }
.photo { border-radius: var(--r); overflow: hidden; background: var(--meadow-pale); border: 1px solid var(--line); }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); box-shadow: var(--shadow); margin-bottom: var(--s3); }
.panel h2 { margin-top: 0; font-size: 1.35rem; }
.price-big { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 2.6rem; color: var(--forest); margin: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.disclosure { font-size: .76rem; color: var(--ink-faint); margin: var(--s1) 0 0; line-height: 1.4; }
.scores { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; margin: var(--s1) 0 var(--s2); }
.scores .k { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); font-weight: 700; margin: 0 0 4px; }
.scores .v { font-family: var(--serif); font-weight: 700; font-size: 1.8rem; color: var(--forest); line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.scores .v.deal { color: var(--ochre-deep); }
.trail { list-style: none; padding: 0 0 0 var(--s3); margin: var(--s2) 0 0; border-left: 2px dashed var(--ochre); }
.trail li { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: var(--s2); padding: 6px 0; font-size: .95rem; }
.trail li::before { content: ""; position: absolute; left: calc(-1 * var(--s3) - 6px); top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--meadow); border: 2px solid var(--paper); }
.trail li.neg::before { background: var(--rust); }
.trail .pts { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; text-align: right; color: var(--forest); font-variant-numeric: tabular-nums; }
.trail li.neg .pts { color: var(--rust); }
table.spec { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.spec th { text-align: left; font-weight: 600; color: var(--ink-soft); padding: 7px 8px 7px 0; width: 38%; border-top: 1px solid var(--line); vertical-align: top; }
table.spec td { padding: 7px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.spec tr:first-child th, table.spec tr:first-child td { border-top: 0; }
.notice { background: var(--ochre-soft); border-left: 4px solid var(--ochre); padding: 10px 14px; border-radius: 8px; font-size: .92rem; margin: 0 0 var(--s2); }
.notice.warn { background: var(--rust-soft); border-color: var(--rust); }
.parts .row { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s2); align-items: center; padding: var(--s1) 0; border-top: 1px solid var(--line); }
.parts .row:first-of-type { border-top: 0; }
.parts .row img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--meadow-pale); }
.parts .row .t { font-size: .88rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.parts .row .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; }
.parts .row .p { font-family: var(--serif); font-weight: 700; color: var(--forest); font-size: 1.05rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.parts .match { font-size: .72rem; color: var(--ink-faint); }
.parts .kit { display: grid; grid-template-columns: 1fr; gap: var(--s1); margin-top: var(--s1); }
@media (min-width: 560px) { .parts .kit { grid-template-columns: 1fr 1fr; } }
.total { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--ochre-deep); margin: 0 0 var(--s1); font-variant-numeric: tabular-nums; }

/* prose */
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s5); }
.prose li { margin: 6px 0; }

/* brand page */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s2); }
.swatch { border-radius: var(--r-sm); padding: var(--s2); height: 112px; display: flex; flex-direction: column; justify-content: flex-end; font-size: .78rem; font-family: ui-monospace, monospace; border: 1px solid var(--line); }
.specimen > * { margin: var(--s1) 0; }
.headers > div { margin-bottom: var(--s3); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.headers .label { padding: 6px var(--s2); font-size: .78rem; color: var(--ink-faint); background: var(--card); }

/* footer */
footer { margin-top: var(--s10); background: var(--forest); color: var(--cream); padding: var(--s6) 0 var(--s8); font-size: .9rem; }
footer a { color: var(--ochre-soft); }
footer .cols { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between; }
footer .cols .note { max-width: 46ch; }
footer p { margin: 4px 0; }

/* phase B */
.badge.new { background: var(--forest); color: var(--cream); }
.badge.drop { background: var(--ochre); color: var(--ink); text-transform: none; }
.save { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(246,239,221,.9); color: var(--ink-faint); font-size: 16px; cursor: pointer; line-height: 34px; padding: 0; }
.save.on { color: var(--rust); background: var(--cream); }
.save.inline { position: static; width: auto; height: auto; border-radius: var(--r-sm); padding: 10px 14px; background: var(--card); border: 1px solid var(--line); font: inherit; font-weight: 600; margin-left: 8px; line-height: 1.2; }
.save.inline.on { color: var(--rust); border-color: var(--rust); }
nav.main a.sl { opacity: .75; } nav.main a.sl.has { opacity: 1; color: var(--ochre-soft); }
#sl-count:not(:empty)::before { content: " "; }
.filters { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); margin: 0 0 var(--s3); box-shadow: var(--shadow); }
.filters .f { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: end; margin-bottom: var(--s1); }
.filters label { font-size: .8rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 4px; }
.filters .checks label { flex-direction: row; align-items: center; gap: 6px; font-size: .9rem; color: var(--ink); padding: 6px 0; }
.filters input[type=number], .filters input[type=text], .filters select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); width: 12ch; color: var(--ink); }
.filters .btn.small { padding: 9px 16px; }
.filters p { margin: 4px 0 0; }
.gallery .strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; border-radius: var(--r); border: 1px solid var(--line); background: var(--meadow-pale); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery .strip::-webkit-scrollbar { display: none; }
.gallery .strip img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: start; cursor: zoom-in; }
.gallery .thumbs { display: flex; gap: 6px; overflow-x: auto; padding: var(--s1) 0 0; scrollbar-width: thin; }
.gallery .thumbs button { flex: 0 0 auto; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; opacity: .7; }
.gallery .thumbs button.on { border-color: var(--ochre); opacity: 1; }
.gallery .thumbs img { width: 70px; height: 52px; object-fit: cover; border-radius: 6px; display: block; }
#lightbox { position: fixed; inset: 0; background: rgba(21,53,31,.94); z-index: 50; display: grid; place-items: center; }
#lightbox[hidden] { display: none; }
#lightbox img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: 8px; }
#lightbox button { position: absolute; background: rgba(246,239,221,.15); color: var(--cream); border: 0; font-size: 34px; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; }
#lightbox .close { top: 16px; right: 16px; } #lightbox .prev { left: 12px; top: 50%; } #lightbox .next { right: 12px; top: 50%; }
#lightbox .cap { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--cream); font-size: .85rem; margin: 0; }
.parts .row { grid-template-columns: 24px 1fr; }
.parts .row .rl { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s2); align-items: center; text-decoration: none; color: inherit; min-width: 0; }
.parts .tick input { width: 18px; height: 18px; accent-color: var(--meadow); }
.budget { font-family: var(--serif); font-size: 1.1rem; color: var(--forest); }
.budget b { color: var(--ochre-deep); font-size: 1.35rem; }
table.cmp { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.cmp th, table.cmp td { border-top: 1px solid var(--line); padding: 10px 8px; text-align: left; vertical-align: top; }
table.cmp thead th, table.cmp tr:first-child th { border-top: 0; }
table.cmp img { border-radius: 8px; margin-bottom: 6px; width: 100%; max-width: 200px; aspect-ratio: 4/3; object-fit: cover; }
table.cmp tr > th:first-child { width: 22%; color: var(--ink-soft); font-weight: 600; }

/* phase C */
.badge.priv { background: var(--forest); color: var(--ochre-soft); }
.form { max-width: 60ch; }
.fld { display: block; margin: 0 0 var(--s2); font-size: .9rem; color: var(--ink-soft); }
.fld span { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ink); }
.fld input, .fld textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); }
.fld.bad input, .fld.bad textarea { border-color: var(--rust); }
.fld .err { color: var(--rust); margin: 4px 0 0; font-size: .85rem; }
fieldset.fld { border: 0; padding: 0; min-width: 0; }
fieldset.fld legend { padding: 0; margin-bottom: 6px; font-weight: 600; color: var(--ink); }
.fld .opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--ink); cursor: pointer; }
.fld .opt input { width: auto; padding: 0; margin: 0; flex: none; }
.thumbs-edit { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s2); }
.thumbs-edit figure { margin: 0; } .thumbs-edit img { border-radius: 8px; } .thumbs-edit button { font-size: .75rem; }
button.xs { font: inherit; font-size: .75rem; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
/* mobile nav */
.menu { display: none; background: none; border: 1.5px solid rgba(246,239,221,.5); color: var(--cream); border-radius: 8px; font-size: 1.2rem; padding: 4px 10px; cursor: pointer; }
@media (max-width: 760px) {
  .menu { display: block; }
  nav.main { display: none; width: 100%; flex-direction: column; gap: 0; padding: var(--s1) 0 var(--s2); }
  nav.main.open { display: flex; }
  nav.main a { padding: 10px 0; border-top: 1px solid rgba(246,239,221,.12); }
}

/* language + structure pass */
nav.main .grp { display: flex; gap: var(--s3); align-items: center; }
nav.main .grp .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--meadow-soft); font-weight: 700; }
nav.main > a, nav.main .grp a { white-space: nowrap; }
.verdict { font-family: var(--serif); font-weight: 700; color: var(--ochre-deep); margin: 4px 0 2px; font-size: 1.15rem; }
.parts .nofit { grid-column: 2; text-align: right; text-decoration: none; }
.pager .dis, .pager .gap { color: var(--ink-faint); border-color: transparent; background: none; }
@media (max-width: 760px) { nav.main .grp { flex-direction: column; align-items: stretch; gap: 0; } nav.main .grp .lbl { padding: 10px 0 2px; } }
@media (min-width: 761px) and (max-width: 1100px) { nav.main .grp { gap: var(--s2); } nav.main { gap: var(--s2); } }

/* design fixes: header row, dropdown, sticky footer, spacing, tiles, lane cards, two-column pages, passport, sell */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main, body > .page { flex: 1 0 auto; }
footer { flex-shrink: 0; margin-top: var(--s8); }
main.wrap { padding-top: var(--s4); }
main.wrap .crumbs { margin-top: 0; }
.top .wrap { flex-wrap: nowrap; }
nav.main { align-items: center; gap: var(--s3); margin-left: auto; }
nav.main .grp, nav.main .lbl { display: none; }
nav.main .dd { position: relative; }
nav.main .dd summary { list-style: none; cursor: pointer; color: var(--cream); font-weight: 600; font-size: .95rem; opacity: .92; }
nav.main .dd summary::-webkit-details-marker { display: none; }
nav.main .dd summary::after { content: " ▾"; font-size: .7em; }
nav.main .dd[open] summary { color: var(--ochre-soft); }
nav.main .fly { position: absolute; top: calc(100% + 10px); left: -12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow); min-width: 180px; padding: 6px 0; z-index: 20; display: flex; flex-direction: column; }
nav.main .fly a { color: var(--ink); padding: 8px 14px; font-weight: 600; }
nav.main .fly a:hover { background: var(--meadow-pale); color: var(--forest); }
nav.main a.signin { border: 1.5px solid rgba(246,239,221,.55); border-radius: 999px; padding: 6px 14px; opacity: 1; }
nav.main a.signin:hover { border-color: var(--cream); }
@media (max-width: 900px) {
  .top .wrap { flex-wrap: wrap; }
  .brand { order: 1; } .menu { order: 2; margin-left: auto; } nav.main { order: 3; }
  nav.main { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s1) 0 var(--s2); margin-left: 0; }
  nav.main.open { display: flex; }
  nav.main .dd summary, nav.main > a { padding: 10px 0; border-top: 1px solid rgba(246,239,221,.12); }
  nav.main .fly { position: static; background: none; border: 0; box-shadow: none; padding: 0 0 6px 14px; }
  nav.main .fly a { color: var(--cream); padding: 8px 0; }
  nav.main .dd { } nav.main .dd[open] .fly { display: flex; }
  nav.main a.signin { display: inline-block; align-self: flex-start; margin-top: var(--s1); }
  .menu { display: block; }
}
@media (min-width: 901px) { .menu { display: none; } .brand small { display: inline; } }
@media (max-width: 480px) { .brand small { display: none; } }
/* hero */
.hero .bg.placeholder { object-fit: cover; }
/* lane cards */
.lane { padding: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.lane .lane-img { display: block; aspect-ratio: 16 / 9; background: var(--meadow-pale); overflow: hidden; }
.lane .lane-img img { width: 100%; height: 100%; object-fit: cover; }
.lane .lane-body { display: block; padding: var(--s2) var(--s3) var(--s3); }
.lane .count { color: var(--forest); }
/* platform tiles */
.tgroup { margin: var(--s2) 0 var(--s3); }
.tgroup h3 { margin: 0 0 var(--s1); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); font-family: var(--sans); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s1) var(--s2); margin: var(--s2) 0 var(--s4); }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; text-decoration: none; color: var(--forest); display: grid; grid-template-columns: 64px 1fr; gap: var(--s2); align-items: center; }
.tile:hover { border-color: var(--meadow); background: var(--meadow-pale); }
.tile .van-ic { width: 64px; height: 26px; color: var(--forest); opacity: .85; }
.tile .tx { display: grid; gap: 1px; min-width: 0; }
.tile .nm { font-weight: 600; font-size: .95rem; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .ct { font-size: .78rem; color: var(--ink-faint); font-weight: 500; }
.h-tiles { margin-top: var(--s2); font-size: 1.1rem; }
/* two column pages */
.two { display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: start; }
@media (min-width: 900px) { .two { grid-template-columns: minmax(0, 6fr) minmax(320px, 5fr); } .two aside { position: sticky; top: var(--s3); } }
.rows { margin-top: var(--s3); border-top: 1px solid var(--line); }
.row3 { display: grid; grid-template-columns: 140px 1fr; gap: var(--s2); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.row3 b { color: var(--forest); }
/* example passport */
.passport { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); box-shadow: var(--shadow); }
.pp-head { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.plate { display: inline-block; background: #f7d117; color: #111; font-family: "Figtree", sans-serif; font-weight: 800; letter-spacing: .06em; padding: 6px 10px; border-radius: 6px; border: 2px solid #c9a800; font-size: 1.05rem; white-space: nowrap; }
.pp-row { display: grid; grid-template-columns: 96px 1fr; gap: var(--s2); padding: 10px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.pp-row .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; padding-top: 3px; }
.pp-row .v { display: flex; flex-direction: column; gap: 6px; }
.adv { display: block; } .adv em { font-style: normal; color: var(--ochre-deep); font-weight: 700; white-space: nowrap; margin-left: 6px; }
.ph-ph { display: block; width: 100%; aspect-ratio: 16/9; background: var(--meadow-pale); border-radius: 8px; display: grid; place-items: center; color: var(--ink-faint); font-size: .8rem; }
.toggles { flex-direction: row; gap: var(--s2); } .toggles label { display: flex; gap: 4px; align-items: center; }
/* sell page */
.sell { display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: start; }
@media (min-width: 960px) { .sell { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); } .sell aside { position: sticky; top: var(--s3); } }
input.plate-in { background: #f7d117 !important; color: #111 !important; font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase; border: 2px solid #c9a800 !important; font-size: 1.2rem !important; width: 12ch !important; text-align: center; }
.drop { border: 2px dashed var(--line); border-radius: var(--r-sm); padding: var(--s3); text-align: center; color: var(--ink-soft); background: var(--paper); }
.drop.over { border-color: var(--ochre); background: var(--ochre-soft); }
.drop input[type=file] { display: block; margin: var(--s1) auto 0; }
.js .drop input[type=file] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.thumbs-new { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s1) 0 0; }
.thumbs-new figure { margin: 0; position: relative; }
.thumbs-new img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
.thumbs-new button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--rust); color: var(--cream); font-size: 14px; line-height: 22px; cursor: pointer; padding: 0; }
.preview-note { font-size: .78rem; color: var(--ink-faint); margin: 0 0 8px; }

/* parts panel v2 */
.sums { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s1); margin: 0 0 var(--s2); }
.sum { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 2px; }
.sum .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; }
.sum .v { font-family: var(--serif); font-weight: 700; color: var(--ochre-deep); font-size: 1.2rem; line-height: 1.1; }
.pgroup { border: 1px solid var(--line); border-radius: var(--r-sm); margin: 0 0 var(--s1); background: var(--card); }
.pgroup summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 10px 14px; }
.pgroup summary::-webkit-details-marker { display: none; }
.pgroup summary::before { content: "▸"; color: var(--ochre); margin-right: 6px; }
.pgroup[open] summary::before { content: "▾"; }
.pgroup .gl { font-weight: 700; color: var(--forest); flex: 1; }
.pgroup .gm { font-size: .8rem; color: var(--ink-faint); }
.plist { padding: 0 14px 10px; }
.prow { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s2); align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.prow > img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--meadow-pale); }
.prow .pb { min-width: 0; }
.prow .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.prow .k .fit { color: var(--forest); text-transform: none; letter-spacing: 0; font-weight: 600; }
.prow .t { font-size: .88rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prow .pr { display: grid; justify-items: end; gap: 6px; min-width: 110px; }
.prow .p { font-family: var(--serif); font-weight: 700; color: var(--forest); font-size: 1.05rem; white-space: nowrap; }
.buy { font-size: .78rem; font-weight: 700; color: var(--ink); background: var(--ochre); padding: 5px 10px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.buy:hover { background: #d9a74a; color: var(--ink); } .buy.sm { padding: 3px 8px; font-size: .72rem; }
.prow .tick { font-size: .75rem; color: var(--ink-faint); display: flex; align-items: center; gap: 4px; }
.prow .tick input { width: 16px; height: 16px; accent-color: var(--meadow); }
.nofit { color: var(--ink-faint); text-decoration: underline; font-size: .75rem; white-space: nowrap; line-height: 1; }
.nofit:hover { color: var(--rust); }
.oem { font-size: .68rem; background: var(--meadow-pale); color: var(--forest); border-radius: 4px; padding: 1px 5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.more { margin-top: 4px; }
.more summary { font-size: .78rem; color: var(--ochre-deep); cursor: pointer; list-style: none; font-weight: 600; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+ "; }
.alt { display: grid; grid-template-columns: 44px 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--line); font-size: .84rem; }
.alt img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.alt .p { font-family: var(--serif); font-weight: 700; color: var(--forest); }
.alt .tick input { width: 15px; height: 15px; accent-color: var(--meadow); }
.yourlist { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s2); }
.yourlist ul { list-style: none; padding: 0; margin: 0; }
.yourlist li { display: flex; justify-content: space-between; gap: var(--s2); padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.yourlist li .num { white-space: nowrap; }
.yourlist li button { background: none; border: 0; color: var(--rust); cursor: pointer; font-size: .85rem; }
@media (max-width: 560px) { .prow { grid-template-columns: 48px 1fr; } .prow .pr { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; } .alt { grid-template-columns: 36px 1fr auto; } .alt .buy, .alt .tick { grid-column: span 1; } }

/* landing page */
main.home { padding-top: var(--s6); }
.feat { display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: center; padding: var(--s6) 0; border-top: 1px solid var(--line); }
.feat:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .feat { grid-template-columns: 5fr 7fr; gap: var(--s8); } .feat.alt .feat-text { order: 2; } .feat.alt .feat-vis { order: 1; } }
.feat h2 { margin-top: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.feat .feat-text p { font-size: 1.05rem; color: var(--ink-soft); }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ochre-deep); font-weight: 700; margin: 0 0 var(--s1); }
.eyebrow svg { width: 26px; height: 26px; color: var(--forest); }
.feat-vis.lanes { margin: 0; }
.ex-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); box-shadow: var(--shadow); text-decoration: none; color: inherit; }
a.ex-card:hover { border-color: var(--ochre); }
.ex-head { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: center; margin-bottom: var(--s1); }
.ex-head .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); font-weight: 700; margin: 0; }
.ex-head .v { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--forest); margin: 0 0 6px; line-height: 1.1; }
.ex-head .v.deal { color: var(--ochre-deep); }
.ex-card .trail li { font-size: .9rem; }
.ex-part { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--line); font-size: .9rem; }
.ex-part img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.ex-part .fit { font-size: .75rem; color: var(--forest); margin-left: 4px; }
.ex-part .p { font-family: var(--serif); font-weight: 700; color: var(--forest); }
.ex-card .total { margin: 0 0 var(--s1); }
.ex-list { margin: 0; padding: 0 0 0 1.2em; } .ex-list li { padding: 6px 0; color: var(--ink); }
.trust { display: grid; grid-template-columns: 1fr; gap: var(--s2); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); }
@media (min-width: 720px) { .trust { grid-template-columns: 1fr 1fr 1fr; } }
.trust b { color: var(--forest); display: block; }

/* overland */
.badge.ov { background: #3b3a2e; color: var(--ochre-soft); }
.badge.good { background: var(--meadow-pale); color: var(--forest); }
.lanes.one { grid-template-columns: 1fr; max-width: 520px; }

.card .auct { color: var(--ochre-deep); margin-bottom: 2px; } .card .auct b { color: var(--rust); }

/* ---------- Europe and North Africa ---------- */
.eu-hero { background: var(--forest-deep); color: var(--cream); padding: var(--s8) 0 var(--s6); }
.eu-hero h1 { color: var(--cream); font-size: clamp(2.2rem, 5vw, 3.6rem); margin: var(--s1) 0 var(--s2); }
.eu-hero .lead, .eu-hero .eyebrow { color: var(--cream); opacity: .9; }
.eu .eu-sec { padding: var(--s6) 0 0; }
.eu .eu-sec h2 { margin-top: 0; }
.eu-mapwrap { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin-top: calc(-1 * var(--s5)); align-items: start; }
@media (min-width: 960px) { .eu-mapwrap { grid-template-columns: minmax(0, 8fr) minmax(280px, 3fr); } .eu-panel { position: sticky; top: var(--s2); } }
.eu-map { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.eumap { display: block; width: 100%; height: auto; }
.eumap .sea { fill: #dbe7ea; }
.eumap .c { stroke: var(--paper); stroke-width: 1.2; fill: #ece6d6; transition: filter .15s; }
.eumap .c.dim { fill: #e9e3d5; stroke: #f3eee2; }
.eumap a .c.has { cursor: pointer; }
.eumap a:hover .c, .eumap .c.sel { filter: brightness(.86); stroke: var(--ink); stroke-width: 1.6; }
.eumap .c.sel { stroke: var(--rust); stroke-width: 2.2; }
.eumap .f0, .lg.f0 { fill: #7fae7a; background: #7fae7a; } .eumap .f1, .lg.f1 { fill: #bcd6b0; background: #bcd6b0; } .eumap .f2, .lg.f2 { fill: #efe6c3; background: #efe6c3; }
.eumap .f3, .lg.f3 { fill: #e0a860; background: #e0a860; } .eumap .f4, .lg.f4 { fill: #c0633f; background: #c0633f; }
.eumap .nf, .lg.nf { fill: #ece6d6; background: #ece6d6; }
.eumap .lbl { font: 600 20px/1 var(--sans); fill: var(--ink); opacity: .72; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.eumap .route { fill: none; stroke: var(--forest); stroke-width: 3; stroke-dasharray: 7 9; stroke-linecap: round; opacity: .35; pointer-events: stroke; transition: opacity .15s, stroke-width .15s; }
.eumap .route.on, .eumap .route:hover { opacity: 1; stroke-width: 5; stroke: var(--rust); }
.eumap .x { fill: var(--ochre); stroke: var(--ink); stroke-width: 2.5; cursor: pointer; }
.eumap .xa:hover .x, .eumap .x.on { fill: var(--rust); r: 12; }
.eumap.mini .lbl, .eumap.mini .x, .eumap.mini .route { display: none; }
.eumap.mini .c { stroke-width: 1; }
.eu-feat a { display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.eu-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); font-size: .95rem; }
.eu-panel h3 { margin: 0 0 var(--s1); font-size: 1.4rem; }
.eu-panel .eu-fuelbox { margin: var(--s2) 0; }
.eu-panel .more { display: inline-block; margin-top: var(--s2); font-weight: 600; }
.eu-legend { display: grid; grid-template-columns: 14px 1fr; gap: 4px 8px; align-items: center; font-size: .8rem; color: var(--ink-soft); margin-top: var(--s2); }
.eu-legend b { grid-column: 1 / -1; color: var(--ink); font-size: .85rem; margin-bottom: 2px; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(34,33,29,.15); }
.eu-two { display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: start; }
@media (min-width: 900px) { .eu-two { grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); } .eu-two.rev { grid-template-columns: minmax(0, 8fr) minmax(260px, 3fr); } }
.eu-fuel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.eu-fuel th, .eu-fuel td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.eu-fuel th.num, .eu-fuel td.num { text-align: right; white-space: nowrap; }
.eu-fuel thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.eu-fuel abbr { text-decoration: none; color: var(--ochre-deep); cursor: help; }
.eu-hints { padding-left: 1.2em; } .eu-hints li { margin-bottom: 8px; }
.eu-clim-wrap { overflow-x: auto; }
.eu-clim { border-collapse: separate; border-spacing: 2px; font-size: .78rem; min-width: 640px; }
.eu-clim th { font-weight: 600; text-align: left; white-space: nowrap; padding: 2px 8px 2px 0; color: var(--ink-soft); }
.eu-clim thead th { text-align: center; padding: 0 0 4px; }
.eu-clim thead th.now, .eu-clim th[scope=row] { color: var(--ink); }
.eu-clim td { text-align: center; padding: 6px 0; min-width: 40px; border-radius: 4px; position: relative; color: var(--ink); }
.eu-clim td.now { outline: 2px solid var(--ink); outline-offset: -2px; }
.eu-clim td.best::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ink); }
.eu-clim .t0 { background: #d6e3ea; } .eu-clim .t1 { background: #e3ebe1; } .eu-clim .t2 { background: #e6efdd; } .eu-clim .t3 { background: #eee9b9; }
.eu-clim .t4 { background: #f0d99a; } .eu-clim .t5 { background: #e6b26f; } .eu-clim .t6 { background: #d47c55; color: var(--cream); }
.eu-now { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); }
.eu-now ul { list-style: none; padding: 0; margin: 0; } .eu-now li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .95rem; } .eu-now li:last-child { border: 0; }
.eu-grp { margin: var(--s4) 0 var(--s2); font-size: 1.15rem; color: var(--ink-soft); }
.eu-xs { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
@media (min-width: 700px) { .eu-xs { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .eu-xs { grid-template-columns: 1fr 1fr 1fr; } }
.eu-x, .eu-route { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); }
.eu-x h3, .eu-route h3 { margin: 0 0 4px; font-size: 1.25rem; }
.eu-x.on { border-color: var(--rust); box-shadow: 0 0 0 3px var(--rust-soft); }
.eu-x ul, .eu-route ul { padding-left: 1.2em; }
.eu-calc { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; background: var(--meadow-pale); border-radius: var(--r-sm); padding: var(--s2) var(--s3); margin: var(--s2) 0 var(--s3); }
.eu-calc input { width: 5ch; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.eu-calc select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--card); }
.eu-routes { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 1000px) { .eu-routes { grid-template-columns: 1fr 1fr; } }
.eu-route .lead-s { font-family: var(--serif); font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 4px; }
.eu-route.on { border-color: var(--rust); }
.eu-legs { width: 100%; border-collapse: collapse; font-size: .9rem; margin: var(--s2) 0; }
.eu-legs th, .eu-legs td { padding: 6px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.eu-legs th.num, .eu-legs td.num { text-align: right; white-space: nowrap; }
.eu-legs thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.eu-legs tfoot th, .eu-legs tfoot td { font-weight: 700; border-bottom: 0; }
.eu-countries { columns: 2; list-style: none; padding: 0; gap: var(--s3); } @media (min-width: 700px) { .eu-countries { columns: 4; } }
.eu-countries li { padding: 4px 0; break-inside: avoid; }
.eu-attr { margin-top: var(--s6); }
.eu-chead { display: grid; grid-template-columns: 1fr; gap: var(--s3); align-items: start; }
@media (min-width: 900px) { .eu-chead { grid-template-columns: minmax(0, 7fr) minmax(260px, 4fr); } }
.eu-mini { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.eu-fuelbox { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: var(--s2) 0 var(--s1); }
.eu-fuelbox > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2); display: grid; gap: 2px; }
.eu-fuelbox .k { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.eu-fuelbox .v { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.eu-briefs { display: grid; grid-template-columns: 1fr; gap: var(--s2); } @media (min-width: 800px) { .eu-briefs { grid-template-columns: 1fr 1fr; } }
.eu-brief { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); }
.eu-brief h3 { margin: 0 0 6px; font-size: 1.05rem; } .eu-brief p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.eu-scroll { max-height: 640px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.eu-scroll .eu-fuel thead th { position: sticky; top: 0; background: var(--card); }
.eu-x .eyebrow { margin: 0 0 2px; font-size: .7rem; }
@media (max-width: 760px) { .eu-scroll { max-height: none; overflow-x: auto; border: 0; background: none; } .eu-fuel td:last-child, .eu-fuel th:last-child { display: none; } .eu-fuel { font-size: .85rem; } .eu-fuel th, .eu-fuel td { padding: 6px 5px; } .eu-mapwrap { margin-top: calc(-1 * var(--s3)); } }
.eu-hints { list-style: none; padding: 0; margin: 0; }
.eu-hints li { display: flex; justify-content: space-between; gap: var(--s2); padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .95rem; margin: 0; }
.eu-hints li b { font-weight: 600; } .eu-hints li .num { font-weight: 700; color: var(--rust); white-space: nowrap; }
.eu-x ul, .eu-route .eu-notes { margin-bottom: 0; }

/* ---------- EU rollout: switcher, suggestion banner, Dutch reg check ---------- */
.switch { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); font-size: .85rem; }
.switch label { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.switch select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); max-width: 14ch; }
.suggest { background: var(--ochre-soft); color: var(--ink); padding: 8px var(--s2); font-size: .9rem; display: flex; gap: var(--s2); align-items: center; justify-content: center; flex-wrap: wrap; }
.suggest .btn.sm { padding: 6px 12px; font-size: .85rem; } .suggest .ghost.sm { background: none; border: 1px solid var(--ink-faint); border-radius: var(--r-sm); padding: 5px 10px; font: inherit; font-size: .85rem; cursor: pointer; color: var(--ink); }
form.check { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: end; margin: var(--s3) 0; }
form.check label { display: grid; gap: 4px; font-weight: 600; }
form.check input.plate-in { font: 700 1.6rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border: 2px solid var(--ink); border-radius: var(--r-sm); background: #f7d117; width: 12ch; }
.chk { display: grid; gap: var(--s2); margin: var(--s3) 0; }
.chk .panel h3 { margin: 0 0 6px; font-size: 1.05rem; }
.chk table.spec td, .chk table.spec th { padding: 4px 8px; vertical-align: top; }
.chk .ok { color: var(--forest); font-weight: 600; } .chk .bad { color: var(--rust); font-weight: 600; }
.chk ul.insp { list-style: none; padding: 0; margin: 0; } .chk ul.insp li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.chk ul.insp li:last-child { border: 0; } .chk .defects { color: var(--ink-soft); font-size: .88rem; }
.eu-note { background: var(--ochre-soft); color: var(--ink); border-radius: var(--r-sm); padding: 8px 12px; font-size: .9rem; margin: 0 0 var(--s3); display: inline-block; }
.eu-hero .eu-note { background: rgba(246,239,221,.14); color: var(--cream); }
/* region and language control, top right */
nav.main .dd.region summary { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; opacity: .85; border: 1px solid rgba(246,239,221,.35); border-radius: 999px; padding: 5px 11px; }
nav.main .dd.region summary:hover, nav.main .dd.region[open] summary { opacity: 1; border-color: var(--ochre-soft); }
nav.main .dd.region summary::after { content: " ▾"; font-size: .65em; }
nav.main .fly.region { left: auto; right: 0; min-width: 300px; flex-direction: row; gap: 0; padding: 8px 0; }
nav.main .fly.region > div { flex: 1; padding: 0 4px; }
nav.main .fly.region > div + div { border-left: 1px solid var(--line); }
nav.main .fly.region .lbl { display: block; margin: 4px 14px 2px; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); font-weight: 700; }
nav.main .fly.region a { display: block; font-size: .92rem; }
nav.main .fly.region a[aria-current] { color: var(--forest); background: var(--meadow-pale); }
nav.main .fly a.other-region { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; font-weight: 500; }
.filters label.cc select { min-width: 12ch; }
.panel.origin form.check.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0 4px; }
.panel.origin form.check.inline label { font-size: .85rem; display: flex; flex-direction: column; gap: 4px; }
.panel.origin .plate-in { width: 11ch; text-transform: uppercase; }
@media (max-width: 900px) { nav.main .dd.region summary { border: 0; padding: 10px 0; font-size: .95rem; } nav.main .fly.region { flex-direction: column; min-width: 0; padding: 0 0 6px 0; } nav.main .fly.region > div + div { border-left: 0; margin-top: 4px; } nav.main .fly.region .lbl { color: rgba(246,239,221,.6); margin-left: 0; } nav.main .fly.region a { padding: 8px 10px; margin-left: -10px; } nav.main .fly.region a[aria-current] { color: var(--cream); background: rgba(246,239,221,.12); border-radius: 6px; } nav.main .fly.region a:hover { background: rgba(246,239,221,.08); color: var(--cream); } }
/* reg check (UK): the form and the result page */
form.check { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: var(--s3) 0; }
form.check label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.check-result h2 { margin-top: var(--s4); }
.check-result .scores { display: flex; align-items: center; gap: var(--s3); }
.check-result .prow { grid-template-columns: 1fr auto; }
.check-result .prow .fit { font-weight: 500; color: var(--ink-faint); text-transform: lowercase; }
.check-result .parts .v { font-family: var(--serif); font-size: 1.5rem; color: var(--forest); margin: 0 0 var(--s2); }
.mot-test { border-top: 1px solid var(--line); padding: 8px 0; }
.mot-test summary { cursor: pointer; }
.mot-test li.fail { color: var(--rust); }
.mot-test li.adv { color: var(--ink-soft); }

/* reg check page: hero, tiles, worked example, van-page panel */
.check-hero { padding: var(--s4) 0 var(--s3); }
.check-hero h1 { max-width: 18ch; }
.check-hero .lead { max-width: 56ch; }
.check-hero form.check { margin: var(--s3) 0 var(--s2); }
.check-hero form.check label span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.check-hero .plate-in { font-size: 1.5rem !important; width: 13.5ch !important; padding: .45rem .5rem; letter-spacing: .04em; }
.check-tips { max-width: 60ch; }
.tiles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: var(--s3) 0; }
.ck-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3); }
.ck-tile h3 { margin: 0 0 6px; font-size: 1.05rem; }
.ck-tile p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.check-hero.has-result .lead, .check-hero.has-result .check-tips { display: none; }
.check-hero.has-result { padding-bottom: 0; }
.check-hero.has-result h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.check-example, .check-notes { margin-top: var(--s5); }
.check-ex { max-width: 640px; }
.check-ex .prow { grid-template-columns: 1fr auto; }
.check-ex .prow .fit, .check-result .prow .fit { font-weight: 500; color: var(--ink-faint); text-transform: lowercase; }
.panel.origin form.check.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0 4px; }
.panel.origin form.check.inline label { font-size: .85rem; display: flex; flex-direction: column; gap: 4px; }
.panel.origin .plate-in { width: 13ch !important; font-size: 1.05rem !important; letter-spacing: .04em; }
@media (max-width: 760px) { .tiles3 { grid-template-columns: 1fr; } }

/* Rigbook (internally garage) */
.gvans { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.gv { display: grid; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2) var(--s3); color: var(--ink); text-decoration: none; }
.gv:hover { border-color: var(--meadow); background: var(--meadow-pale); }
.gv .plate { display: inline-block; width: max-content; background: #f7d117; color: #111; font-weight: 800; letter-spacing: .06em; padding: 2px 8px; border-radius: 4px; border: 1px solid #c9a800; font-size: .9rem; }
.tiles3.one-col { grid-template-columns: 1fr; }
.inline-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s2); align-items: end; }
.inline-form p { grid-column: 1 / -1; margin: 0; }
.glog { border-top: 1px solid var(--line); padding: var(--s2) 0; }
.glog h3 { margin: 4px 0; }
.gpics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gpics img { border-radius: 6px; object-fit: cover; }
.plist-saved { list-style: none; padding: 0; margin: 0 0 var(--s2); }
.plist-saved li { display: flex; justify-content: space-between; gap: var(--s2); padding: 6px 0; border-top: 1px solid var(--line); }
button.xs { font: inherit; font-size: .72rem; background: none; border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; cursor: pointer; color: var(--ink-soft); }
.check-hero .cta { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* mobile pass (23 Oct 2026) */
.van > div, .van > aside { min-width: 0; }        /* grid children may shrink: a long line no longer pushes the page sideways */
.scores > div { min-width: 0; }
.scores .v { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .scores { grid-template-columns: 1fr; justify-items: start; gap: var(--s2); }
  .scores .v { font-size: 1.5rem; }
  .trail { padding-left: var(--s2); }
  .trail li { grid-template-columns: 2.6rem 1fr; }
}
/* ghost buttons on light surfaces (pages, panels, forms); the hero's ghost stays cream on green */
.check-hero .btn.ghost, .panel .btn.ghost, form .btn.ghost { color: var(--forest); border-color: var(--line); background: transparent; }
.check-hero .btn.ghost:hover, .panel .btn.ghost:hover, form .btn.ghost:hover { color: var(--forest); border-color: var(--meadow); background: var(--meadow-pale); }
/* plain inputs inside the inline forms (Rigbook add and rename, reminders) */
form.check input:not(.plate-in):not([type=hidden]), .fld select, form.inline-form select {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); min-width: 0; }
form.check.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
form.check.inline label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; }
@media (max-width: 520px) {
  form.check.inline label:not(:has(.plate-in)) { flex: 1 1 100%; }
  form.check.inline input:not(.plate-in):not([type=hidden]) { width: 100%; }
  .check-hero .cta .btn { flex: 1 1 auto; text-align: center; }
  .gvans { grid-template-columns: 1fr; }
}

/* "Parts for this van" on the reg check and Rigbook: van-page rows (photo, part, price), not the advisory list's two columns */
.van-parts .prow { grid-template-columns: 56px 1fr auto; }
.van-parts .prow .fit { font-weight: 600; color: var(--forest); text-transform: none; }
@media (max-width: 560px) { .van-parts .prow { grid-template-columns: 48px 1fr; } }

/* No inline styles anywhere: the edge CSP is style-src 'self' with no 'unsafe-inline', so every one-off rule the app
   used to write as style="..." lives here instead (27 Oct 2026). Email HTML (turf/email_layout.py) keeps its inline
   styles: mail clients need them and no CSP applies there. */
.hp { position: absolute; left: -9999px; }                                   /* honeypot field: off-screen, out of the tab order, still fillable by bots */
form.inline { display: inline; }
.btn.danger, .btn.danger:hover { background: var(--rust); color: var(--cream); }
.btn.ghost.forest, .btn.ghost.forest:hover { color: var(--forest); border-color: var(--forest); }
.filters .btn.ghost, .filters .btn.ghost:hover { color: var(--forest); border-color: var(--line); }
.scores .v .unit { font-size: 1rem; font-family: var(--sans); font-weight: 500; }
.scores .why { margin: 6px 0 0; }
.panel.reading { margin-top: 1rem; }
.panel .flags-line { margin-top: .6rem; }
.k.tight { margin: 0; }
h3.kit-head { margin-top: var(--s3); }
h2 .count { font-weight: 500; font-size: 1rem; }
.more-row { text-align: center; }
#more[hidden], #pv-img[hidden] { display: none; }
.prow > .ph { width: 56px; height: 56px; border-radius: 8px; background: var(--meadow-pale); }
.fld input.w6 { width: 6ch; } .fld input.w10 { width: 10ch; }
.filters input.w9 { width: 9ch; } .filters input.w11 { width: 11ch; }
.refresh-form { margin-top: 8px; }
.pre { white-space: pre-wrap; }
.thumb { border-radius: 6px; margin: 2px; }
.decide { display: flex; gap: 8px; align-items: center; } .decide.below { margin-top: 12px; } .decide input { flex: 1; padding: 8px; }
.row-flex { display: flex; gap: 16px; align-items: center; }
.marks-row { display: flex; gap: 16px; align-items: center; margin: 8px 0; } .marks-row .lockup { height: 48px; }
.og-sample { max-width: 600px; border: 1px solid var(--line); border-radius: 12px; }
.passport .lbl { margin: 0 0 6px; }
.swatch.dark { color: #f6efdd; } .swatch.light { color: #22211d; }
.sw-forest { background: var(--forest); } .sw-forest-deep { background: var(--forest-deep); } .sw-meadow { background: var(--meadow); }
.sw-meadow-soft { background: var(--meadow-soft); } .sw-meadow-pale { background: var(--meadow-pale); } .sw-ochre { background: var(--ochre); }
.sw-ochre-soft { background: var(--ochre-soft); } .sw-ochre-deep { background: var(--ochre-deep); } .sw-cream { background: var(--cream); }
.sw-paper { background: var(--paper); } .sw-ink { background: var(--ink); } .sw-rust { background: var(--rust); }

/* home: the Rig builder card (a render and its numbers) */
.rig-card { padding: 0; overflow: hidden; }
.rig-card img { display: block; width: 100%; height: auto; background: var(--paper); }
.rig-card span { display: block; padding: var(--s2) var(--s3); }