:root {
  color-scheme: light;
  --ink: #17332d;
  --muted: #66746f;
  --brand: #0d3029;
  --brand-2: #174b3e;
  --accent: #f3b43f;
  --paper: #ffffff;
  --canvas: #eef2ed;
  --line: #d8dfda;
  --good: #178253;
  --warn: #a96a00;
  --bad: #b7463a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-size: 16px; line-height: 1.5; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }

.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 4vw; background: var(--brand); color: white; }
.brand, .top-actions, .route-card-top, .sync-card, .business-logos { display: flex; align-items: center; }
.brand { gap: .75rem; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.35); border-radius: 11px; color: var(--accent); font-weight: 900; letter-spacing: -.04em; }
.brand strong, .brand small { display: block; }
.brand small { color: #b9c8c3; font-size: .78rem; }
.business-logos { gap: .5rem; margin-left: auto; }
.business-logo, .shop-chip { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; font-weight: 850; white-space: nowrap; }
.business-logo { min-height: 44px; padding: .5rem .75rem; border: 1px solid rgba(255,255,255,.28); background: #f8fbf9; color: #0d3029; font-size: .78rem; box-shadow: 0 10px 24px rgba(0,0,0,.1); }
.business-logo.slowfeeder { background: #315322; border-color: rgba(255,255,255,.34); }
.business-logo img, .shop-chip img { display: block; object-fit: contain; flex: 0 0 auto; }
.business-logo img { width: auto; max-width: 168px; height: 28px; }
.business-logo.slowfeeder img { height: 34px; max-width: 190px; }
.business-logo span, .shop-chip span { overflow: hidden; text-overflow: ellipsis; }
.top-actions { gap: .7rem; }
.mode-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #dfe9e5; font-size: .85rem; }
.mode-pill span, .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #62d49e; box-shadow: 0 0 0 4px rgba(98,212,158,.13); }

main { width: min(1500px, 94vw); margin: 0 auto; padding: 2.2rem 0 4rem; }
.intro { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 2rem; margin-bottom: 1.5rem; }
.eyebrow { margin: 0 0 .25rem; color: #557067; font-size: .75rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 780px; margin-bottom: .45rem; font-size: clamp(2rem, 4vw, 3.9rem); line-height: 1; letter-spacing: -.055em; }
h2 { margin-bottom: 0; font-size: 1.35rem; letter-spacing: -.025em; }
.intro-copy { max-width: 720px; margin-bottom: 0; color: var(--muted); }
.sync-card { min-width: 260px; gap: .8rem; padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.sync-card b, .sync-card span { display: block; }
.sync-card div span { color: var(--muted); font-size: .84rem; }

.summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; margin-bottom: .8rem; }
.metric { padding: 1.05rem 1.15rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.metric span { display: block; color: var(--muted); font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.metric strong { display: block; margin-top: .2rem; font-size: 2rem; letter-spacing: -.05em; }
.metric small { color: var(--muted); }

.planning-panel { margin-bottom: .8rem; }
.view-toggle { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--line); border-radius: 999px; background: #f4f7f4; }
.view-toggle button { min-height: 34px; padding: .35rem .7rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 800; }
.view-toggle button.active { background: var(--brand); color: white; }
.map-view { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: .85rem; padding: .85rem; }
.map-view[hidden], .routes-overview[hidden] { display: none; }
.google-map-card { min-height: 520px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #e5ece7; }
.google-map-card iframe { display: block; width: 100%; height: 520px; border: 0; }
.real-orders-map { min-height: 520px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #e5ece7; }
.leaflet-tooltip { width: 340px; max-width: min(340px, 82vw); white-space: normal; border: 1px solid #cfdad4; border-radius: 12px; background: rgba(255,255,255,.98); color: var(--ink); box-shadow: 0 18px 36px rgba(13,48,41,.22); font-family: inherit; font-size: .94rem; line-height: 1.35; }
.map-tooltip-content { display: grid; gap: .38rem; }
.map-tooltip-content b { color: var(--ink); font-size: 1rem; line-height: 1.2; }
.map-tooltip-content span { color: #324b43; overflow-wrap: anywhere; }
.map-tooltip-content small { color: #65766f; font-size: .86rem; font-weight: 800; }
.map-board { position: relative; min-height: 420px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background:
  linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.35)),
  radial-gradient(circle at 56% 30%, rgba(23,130,83,.18), transparent 20%),
  radial-gradient(circle at 34% 74%, rgba(243,180,63,.22), transparent 24%),
  #e5ece7; }
.map-board::before, .map-board::after { content: ""; position: absolute; border: 1px solid rgba(13,48,41,.12); border-radius: 45% 55% 48% 52%; pointer-events: none; }
.map-board::before { left: 40%; top: 4%; width: 36%; height: 62%; background: rgba(255,255,255,.22); }
.map-board::after { left: 16%; top: 58%; width: 38%; height: 34%; background: rgba(255,248,231,.38); }
.map-country { position: absolute; z-index: 1; color: rgba(23,51,45,.5); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.map-country.nl { left: 54%; top: 12%; }
.map-country.be { left: 28%; top: 70%; }
.map-depot { position: absolute; z-index: 3; transform: translate(-50%, -50%); padding: .22rem .45rem; border-radius: 999px; background: var(--brand); color: white; font-size: .72rem; font-weight: 900; box-shadow: 0 8px 18px rgba(13,48,41,.18); }
.map-pin { position: absolute; z-index: 4; transform: translate(-50%, -50%); display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 3px solid white; border-radius: 999px; color: white; box-shadow: 0 10px 20px rgba(13,48,41,.18); font-size: .62rem; font-weight: 950; }
.map-pin.include { background: var(--good); }
.map-pin.review { background: var(--warn); }
.map-pin.exclude { background: var(--bad); }
.all-orders-board { min-height: 520px; }
.order-map-point { width: 1.15rem; height: 1.15rem; border-width: 2px; color: var(--ink); text-decoration: none; }
.order-map-point:hover, .order-map-point:focus-visible { z-index: 8; transform: translate(-50%, -50%) scale(1.25); outline: none; }
.map-side { display: grid; align-content: start; gap: .75rem; }
.map-route-picker { display: grid; gap: .45rem; }
.route-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.route-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; flex: 1 1 15rem; min-height: 48px; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); text-align: left; }
.route-pick-letter { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: #e9efe9; font-weight: 900; }
.route-pick-name { overflow: hidden; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; }
.route-pick-time { color: var(--muted); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.route-pick.review .route-pick-letter { background: #fbeccc; color: var(--warn); }
.route-pick.active { border-color: var(--brand); background: var(--brand); color: white; }
.route-pick.active .route-pick-letter { background: var(--accent); color: var(--brand); }
.route-pick.active .route-pick-time { color: rgba(255,255,255,.8); }
.map-route-picker button { min-height: 38px; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfa; color: var(--ink); text-align: left; font-weight: 800; }
.map-route-picker button.active { border-color: var(--brand); background: var(--brand); color: white; }
.map-route-summary { display: grid; gap: .45rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfa; }
.map-route-summary b, .map-route-summary span { display: block; }
.map-route-summary span { color: var(--muted); font-size: .85rem; }
.route-add-box { display: grid; gap: .5rem; padding: .8rem; border: 1px solid #f1d28b; border-radius: 12px; background: #fff8e7; }
.route-add-box > b { display: block; }
.route-add-box.compact-add { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.route-add-box.compact-add label { min-width: 0; }
.route-add-box.compact-add select { width: 100%; background: white; }
.route-add-box article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .5rem; align-items: center; padding: .6rem; border-radius: 10px; background: rgba(255,255,255,.75); }
.route-add-box span, .route-add-box small, .route-add-box em { grid-column: 1; min-width: 0; display: block; overflow-wrap: anywhere; }
.route-add-box span { font-weight: 850; }
.route-add-box small { color: var(--muted); }
.route-add-box em { color: var(--warn); font-size: .78rem; font-style: normal; font-weight: 850; }
.route-add-box button { grid-column: 2; grid-row: 1 / 4; align-self: center; }
.loose-order-list { display: grid; gap: .45rem; max-height: 430px; overflow: auto; }
.loose-order-button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .45rem; padding: .65rem; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); text-align: left; }
.loose-order-button.active { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.loose-order-button b, .loose-order-button small { display: block; min-width: 0; overflow-wrap: anywhere; }
.loose-order-button small { grid-column: 2; color: var(--muted); font-size: .82rem; }
.point-cloud { display: flex; flex-wrap: wrap; align-content: start; gap: .75rem; min-height: 180px; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfa; overflow: visible; }
.loose-order-point { position: relative; display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 999px; border: 2px solid white; box-shadow: 0 4px 12px rgba(13,48,41,.18); color: inherit; }
.loose-order-point .map-dot { width: 100%; height: 100%; }
.loose-order-point:hover, .loose-order-point:focus-visible { z-index: 5; transform: translateY(-1px); }
.order-point-popover { position: absolute; left: 50%; bottom: calc(100% + .55rem); z-index: 9; display: none; width: min(280px, 72vw); transform: translateX(-50%); padding: .72rem .78rem; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 18px 34px rgba(13,48,41,.18); color: var(--ink); text-align: left; }
.order-point-popover b, .order-point-popover span, .order-point-popover small { display: block; overflow-wrap: anywhere; }
.order-point-popover span, .order-point-popover small { margin-top: .25rem; color: var(--muted); font-size: .82rem; }
.loose-order-point:hover .order-point-popover, .loose-order-point:focus-visible .order-point-popover, .order-map-point:hover .order-point-popover, .order-map-point:focus-visible .order-point-popover { display: block; }
.map-filter { display: flex; align-items: center; gap: .5rem; margin: .6rem 0; font-weight: 700; cursor: pointer; }
.map-filter input { width: 1.1rem; height: 1.1rem; }
.map-legend { display: flex; flex-wrap: wrap; gap: .55rem; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfa; }
.map-legend span { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
.map-dot { display: inline-block; width: .72rem; height: .72rem; border-radius: 999px; }
.map-dot.include { background: var(--good); }
.map-dot.review { background: var(--warn); }
.map-dot.exclude { background: var(--bad); }
.map-dot.dhl { background: #2f6fb3; }
.map-dot.fvr { background: #6b5b95; }
.map-order-list { display: grid; gap: .45rem; max-height: 340px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.map-order-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; align-items: center; padding: .65rem; border: 1px solid var(--line); border-radius: 10px; background: white; }
.map-order-list b, .map-order-list span, .map-order-list small { display: block; }
.map-order-list span, .map-order-list small { color: var(--muted); font-size: .82rem; }
.routes-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: .85rem; }
.route-overview-card { display: grid; gap: .65rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfa; }
.route-overview-card b, .route-overview-card span { display: block; }
.route-overview-card span { color: var(--muted); font-size: .85rem; }
.route-overview-card ol { margin: 0; padding-left: 1.2rem; color: var(--muted); font-size: .85rem; }
.route-overview-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.route-overview-card .button { justify-self: start; }


.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.25rem; border-bottom: 1px solid var(--line); }
.panel-heading.compact { align-items: center; }
.filters { display: flex; align-items: end; gap: .65rem; }
label span { display: block; margin-bottom: .25rem; color: var(--muted); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
input, select { min-height: 42px; padding: .55rem .7rem; border: 1px solid #c8d2cc; border-radius: 9px; background: white; color: var(--ink); }
input:focus, select:focus, button:focus-visible { outline: 3px solid rgba(243,180,63,.35); outline-offset: 2px; }
.order-list { display: grid; gap: .75rem; padding: .85rem; }
.order-group { display: grid; gap: .7rem; padding: .8rem; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfa; }
.order-group.include { border-left: 4px solid var(--good); }
.order-group.review { border-left: 4px solid var(--accent); }
.order-group.exclude { border-left: 4px solid var(--bad); }
.order-group.dhl { border-left: 4px solid #2f6fb3; }
.order-group.fvr { border-left: 4px solid #6b5b95; }
.order-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .15rem; }
.order-group-heading h3 { margin: 0; font-size: 1rem; }
.order-group-heading p { margin: .1rem 0 0; color: var(--muted); font-size: .82rem; }
.order-group-heading strong { display: grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 999px; background: #edf1ee; }
.order-group-list { display: grid; gap: .65rem; }
.shopify-import { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; margin: 0 0 1rem; padding: .75rem .9rem; border: 1px dashed var(--line); border-radius: 12px; background: #fbfcfa; }
.shopify-import label { display: grid; flex: 1 1 18rem; gap: .25rem; font-size: .9rem; font-weight: 700; }
.shopify-import input { min-height: 40px; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.shopify-import small { flex-basis: 100%; color: var(--muted); }
.selection-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem .85rem; border-bottom: 1px solid var(--line); background: #fff8e7; }
.selection-bar div { display: flex; flex-wrap: wrap; gap: .45rem; }
.selection-bar[hidden] { display: none; }
.order-card { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: white; }
.order-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-bottom: .45rem; }
.select-order { display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); font-size: .75rem; font-weight: 800; }
.select-order span { margin: 0; color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; }
.select-order input { min-height: auto; width: 1rem; height: 1rem; padding: 0; }
.order-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; letter-spacing: -.02em; }
.product-line, .address-line { margin: 0 0 .35rem; color: #344d45; }
.product-line { font-weight: 750; }
.address-line { color: var(--muted); }
.order-side { display: grid; align-content: start; gap: .55rem; }
.order-side span { display: block; padding: .55rem .65rem; border-radius: 10px; background: #f4f7f4; color: var(--muted); font-size: .8rem; }
.order-side b { display: block; color: var(--ink); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.shop-chip { min-width: 88px; max-width: 130px; justify-content: center; padding: .28rem .5rem; background: #f8fbf9; color: #234d42; font-size: .72rem; }
.shop-chip.slowfeeder { background: #315322; color: white; }
.shop-chip img { max-width: 96px; height: 21px; }
.shop-chip.slowfeeder img { max-width: 108px; height: 26px; }
.subtle { display: block; color: var(--muted); font-size: .8rem; }
.badge { display: inline-flex; align-items: center; white-space: nowrap; padding: .28rem .58rem; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.badge.include { color: #08673c; background: #daf4e6; }
.badge.review { color: #855300; background: #fff0c7; }
.badge.exclude { color: #8c352c; background: #f9ded9; }
.badge.dhl { color: #1d4d80; background: #d9e8f7; }
.badge.fvr { color: #4a3d73; background: #e6e1f2; }
.reason { margin: .45rem 0 0; color: #4b5e57; }
.empty { padding: 2rem; text-align: center; color: var(--muted); }

.route-panel { position: sticky; top: .8rem; max-height: calc(100vh - 1.6rem); overflow: auto; overscroll-behavior: contain; }
#routes { display: grid; gap: .75rem; padding: .85rem; }
.suggestions { padding: .85rem .85rem 0; }
.suggestion-box { display: grid; gap: .55rem; padding: .85rem; border: 1px solid #f1d28b; border-radius: 12px; background: #fff8e7; }
.suggestion-box p { margin: -.25rem 0 .1rem; color: var(--muted); font-size: .82rem; }
.suggestion-box article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .55rem; align-items: center; padding: .65rem; border-radius: 10px; background: rgba(255,255,255,.7); }
.suggestion-box span, .suggestion-box small, .suggestion-box em { display: block; }
.suggestion-box span, .suggestion-box small, .suggestion-box em { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.suggestion-box span { font-weight: 800; }
.suggestion-box small { color: var(--muted); }
.suggestion-box em { color: var(--warn); font-size: .78rem; font-style: normal; font-weight: 850; }
.suggestion-box button { grid-column: 2; grid-row: 1 / 4; min-width: 96px; align-self: center; }
.route-card { padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfa; }
.route-card-top { gap: .75rem; }
.route-number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--brand); color: var(--accent); font-weight: 900; }
.route-card-top b, .route-card-top span { display: block; }
.route-card-top .route-number { display: grid; place-items: center; flex: none; }
.route-meta { color: var(--muted); font-size: .8rem; }
.route-stops { position: relative; margin: 1rem 0; padding-left: 2rem; }
.route-stops::before { content: ""; position: absolute; left: .72rem; top: .7rem; bottom: .7rem; width: 2px; background: #ccd7d1; }
.route-stops li { position: relative; padding: .35rem 0 .55rem .35rem; }
.route-stops li::marker { color: var(--brand-2); font-weight: 850; }
.route-stops b, .route-stops span { display: block; }
.route-stops span { color: var(--muted); font-size: .8rem; }
.remove-route-stop { position: absolute; left: -2.1rem; top: .28rem; z-index: 2; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid #d6e0da; border-radius: 999px; background: white; color: #9a3c32; font-size: 1.1rem; font-weight: 950; line-height: 1; }
.remove-route-stop:hover { border-color: #d48a82; background: #fff1ef; }
.route-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.route-footer .route-load { flex: 1 1 100%; }
.route-load { color: var(--muted); font-size: .8rem; }
.button { min-height: 40px; padding: .55rem .8rem; border: 0; border-radius: 9px; font-weight: 750; }
.button.secondary { background: white; color: var(--brand); }
.button.ghost { background: #edf1ee; color: #27483f; text-decoration: none; white-space: nowrap; }
.button.manual-action { background: var(--brand); color: white; }
/* The main action on a screen. Used across the portal and the driver's view,
   and until now never defined, so those buttons fell back to a bare default. */
.button.primary { background: var(--brand); color: #fff; }
.button.primary:hover { background: var(--brand-2); }
.button:disabled { opacity: .6; cursor: default; }
a.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Quiet, but plainly clickable: in grey text these read as switched off. */
.button.subtle-action { background: #f7f9f6; color: #27483f; border: 1px solid var(--line); }

.history-panel, .rules-panel { margin-top: .8rem; }
.history-panel summary { cursor: pointer; list-style: none; user-select: none; }
.history-panel summary::-webkit-details-marker { display: none; }
.history-panel summary:hover { background: #f6f8f5; }
.history-panel summary:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }
.history-count { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .85rem; font-weight: 650; white-space: nowrap; }
.history-panel details[open] summary { border-bottom: 1px solid var(--line); }
.history-list { display: grid; gap: .65rem; padding: .85rem; }
.history-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfa; }
.history-item b, .history-item span, .history-item small { display: block; }
.history-item span, .history-item small { color: var(--muted); font-size: .82rem; }
.rules-panel { display: grid; grid-template-columns: .65fr 1.35fr; gap: 2rem; padding: 1.25rem; }
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.rules-grid article { padding: .9rem; border-left: 3px solid var(--accent); background: #f7f9f6; }
.rules-grid p { margin: .25rem 0 0; color: var(--muted); font-size: .85rem; }

@media (max-width: 1050px) {
  .workspace, .rules-panel { grid-template-columns: 1fr; }
  /* Stacked on a phone, the route list is part of the page. As its own
     scroll box it kept the page from scrolling on to the map below. */
  .route-panel { position: static; max-height: none; overflow: visible; overscroll-behavior: auto; }
  .map-view, .routes-overview { grid-template-columns: 1fr; }
  .google-map-card, .google-map-card iframe { height: 440px; min-height: 440px; }
  .rules-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .topbar, .intro, .panel-heading { align-items: stretch; }
  .topbar, .intro, .panel-heading, .filters, .business-logos, .selection-bar { flex-direction: column; }
  .topbar { padding: .8rem 4vw; }
  .intro { display: flex; }
  .sync-card { min-width: 0; }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .panel-heading, .filters { display: flex; }
  .filters label, .filters input, .filters select { width: 100%; }
  .rules-grid { grid-template-columns: 1fr; }
  .history-item { align-items: stretch; flex-direction: column; }
  .order-card { grid-template-columns: 1fr; }
  .business-logos { align-items: stretch; }
}

.mark-delivered { margin-left: .4rem; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--brand); padding: .2rem .55rem; font-size: .78rem; font-weight: 750; }
.mark-delivered:disabled { opacity: .65; cursor: progress; }


/* ---- Herontwerp: dagregel, tellers, stapblokken ---- */
.topbar { min-height: 56px; }
.brand { display: flex; align-items: baseline; gap: .6rem; }
.brand strong { font-size: 1.05rem; }
#todayLabel { color: #b9c9c2; font-size: .85rem; }
.sync-text { color: #b9c9c2; font-size: .82rem; }

.day-bar { padding: 1.1rem 0 .4rem; }
.day-line { margin: 0 0 .9rem; font-size: clamp(1.25rem, 3.2vw, 1.8rem); line-height: 1.2; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.metric { display: flex; flex-direction: column; gap: .1rem; padding: .85rem 1rem; text-align: left;
  border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 12px;
  background: var(--paper); cursor: pointer; font: inherit; color: inherit; }
.metric:hover { border-color: var(--brand-2); }
.metric strong { font-size: 1.9rem; line-height: 1.1; }
.metric span { font-weight: 700; font-size: .92rem; }
.metric small { color: var(--muted); font-size: .78rem; }
.metric.include { border-left-color: var(--good); }
.metric.review { border-left-color: var(--accent); }
.metric.urgent { border-left-color: var(--bad); }
.metric.leeg { opacity: .55; }
.metric.leeg strong { color: var(--muted); }
.summary-rest { margin: .7rem 0 0; color: var(--muted); font-size: .85rem; }

.notice-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .9rem 1.1rem; border-radius: 12px;
  border: 1px solid #e6c766; background: #fdf6e0; }
.notice-bar[hidden] { display: none; }
.notice-bar p { margin: 0; font-size: .9rem; }

.rules-panel summary { cursor: pointer; list-style: none; user-select: none; }
.rules-panel summary::-webkit-details-marker { display: none; }
.rules-panel summary:hover { background: #f6f8f5; }
.fold-hint { color: var(--muted); font-size: .85rem; font-weight: 650; white-space: nowrap; }
.fold-hint::after { content: " ▾"; }
details[open] > summary .fold-hint::after { content: " ▴"; }

/* Raakvlakken die op een telefoon te raken zijn */
.mark-delivered, .remove-route-stop, .force-include, .clear-force-include {
  min-height: 40px; min-width: 40px; padding: .45rem .8rem; }
.route-stops .mark-delivered { min-height: 44px; padding: .5rem 1rem; font-weight: 700; }

/* Categorie ook zonder kleur herkenbaar */
.badge::before { font-weight: 900; margin-right: .35rem; }
.badge.include::before { content: "✓"; }
.badge.review::before { content: "!"; }
.badge.dhl::before, .badge.fvr::before { content: "▣"; }
.badge.exclude::before { content: "×"; }

@media (max-width: 720px) {
  .metric strong { font-size: 1.6rem; }
  .notice-bar { flex-direction: column; align-items: stretch; }
}


/* ---- Agenda ---- */
.icon-button { display: inline-flex; align-items: center; gap: .4rem; }
.agenda-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem;
  padding: 0 .35rem; border-radius: 999px; background: var(--accent); color: #3a2a00; font-size: .75rem; font-weight: 900; }
.agenda-count[hidden] { display: none; }
.agenda-panel { margin-bottom: 1rem; }
.agenda-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .7rem; padding: .85rem; }
.agenda-day { padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.agenda-day h3 { margin: 0 0 .5rem; font-size: .9rem; }
.agenda-day.vandaag { border-color: var(--brand-2); box-shadow: inset 3px 0 0 var(--brand-2); }
.agenda-day.achterstallig { border-color: var(--bad); box-shadow: inset 3px 0 0 var(--bad); }
.agenda-day.leeg { opacity: .6; }
.agenda-day .empty { margin: 0; padding: 0; font-size: .82rem; }
.agenda-route { display: grid; gap: .2rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.agenda-route:first-of-type { border-top: 0; }
.agenda-route b { font-size: .95rem; }
.agenda-route span { color: var(--muted); font-size: .82rem; }
.agenda-route span.rit-nummer { color: #f7f3e8; font-size: .8rem; }
.agenda-route em { color: var(--bad); font-size: .8rem; font-style: normal; font-weight: 650; }
.agenda-route-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.agenda-route-actions .button { min-height: 40px; }
.plan-route { min-height: 40px; }


/* ---- Vandaag: ritten en kaart naast elkaar op een laptop ---- */
.today { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.today > .panel { margin-bottom: 0; min-width: 0; }
@media (min-width: 1080px) {
  .today { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
  /* De kaart blijft in beeld terwijl je door de ritten scrollt. Daarvoor moet
     het hele blok binnen een scherm passen, dus de kaart wordt lager en het
     infoblok eronder compact. */
  .today .map-panel { position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); display: flex; flex-direction: column; }
  .today .map-panel .map-view { grid-template-columns: minmax(0, 1fr); overflow-y: auto; min-height: 0; }
  .today .map-panel .routes-overview { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .today .map-panel .google-map-card,
  .today .map-panel .google-map-card iframe { height: 340px; min-height: 340px; }
  .today .map-panel .map-side { gap: .5rem; }
}
.map-panel .panel-heading { flex-wrap: wrap; gap: .6rem; }
.map-panel .view-toggle { flex-shrink: 0; }

.rit-nummer { display: inline-block; padding: .1rem .45rem; margin-right: .35rem; border-radius: 6px;
  background: var(--brand); color: #f7f3e8; font-size: .8rem; font-weight: 900; letter-spacing: .02em; }


/* ======================================================================
   Portaal: vaste zijbalk met logo en menu, elk onderdeel een eigen scherm
   ====================================================================== */
.portal { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.2rem;
  padding: 1.3rem 1rem 1rem; background: var(--brand); color: #f4f7f5; overflow-y: auto; }
.sidebar-brand { display: grid; gap: .35rem; padding: 0 .35rem .9rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar-logos { display: grid; gap: .45rem; margin-bottom: .55rem; }
.sidebar-logo { display: flex; align-items: center; padding: .45rem .6rem; border-radius: 10px; background: #fff; }
.sidebar-logo img { display: block; width: 100%; max-height: 30px; object-fit: contain; object-position: left center; }
.sidebar-logo.slowfeeder { background: #2f4a2b; }
.sidebar-brand strong { font-size: 1.05rem; letter-spacing: .01em; }
.sidebar-date { color: #b9c9c2; font-size: .82rem; text-transform: capitalize; }

.sidebar-nav { display: grid; gap: .2rem; }
.nav-item { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 46px; padding: .55rem .75rem;
  border: 0; border-radius: 10px; background: transparent; color: #dbe6e1; font: inherit; font-weight: 650;
  text-align: left; cursor: pointer; }
.nav-item svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: #f4f7f5; color: var(--brand); }
a.nav-item { text-decoration: none; }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-quiet { margin-top: .6rem; opacity: .8; }
.nav-count { margin-left: auto; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: #3a2a00;
  font-size: .75rem; font-weight: 900; }
.nav-count[hidden] { display: none; }

.sidebar-foot { margin-top: auto; display: grid; gap: .55rem; padding: .9rem .35rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar-foot .sync-text { color: #b9c9c2; font-size: .78rem; line-height: 1.35; }
.sidebar-foot .button { width: 100%; }

.content { width: 100%; max-width: 1480px; margin: 0; padding: 1.6rem 2rem 4rem; }
.view[hidden] { display: none; }
.view-head { margin: .2rem 0 1.2rem; }
.view-head h1, .view-title { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.2; }
.view-head p { margin: .35rem 0 0; color: var(--muted); max-width: 60ch; }
.day-bar { padding: .2rem 0 1rem; }

/* Kaart als eigen scherm: groot, over de volle breedte */
.map-away .map-panel { position: static; max-height: none; }
.map-away .map-view { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
.map-away .google-map-card, .map-away .google-map-card iframe { height: calc(100vh - 11rem); min-height: 420px; }
.map-away #allOrdersMap, .map-away .real-orders-map { height: calc(100vh - 11rem); min-height: 420px; }

/* Ingeplande rit die open staat */
.open-plan { margin-bottom: 1rem; border: 2px solid var(--brand-2); }
.open-plan h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
.open-plan-meta { margin: .25rem 0 0; color: var(--muted); font-size: .88rem; }
.plan-offline { margin: 0; padding: .8rem 1.1rem; background: #fdf6e0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.plan-stops { list-style: none; margin: 0; padding: .6rem 1.1rem; display: grid; gap: .35rem; border-bottom: 1px solid var(--line); }
.plan-stop { font-size: .9rem; }
.plan-stop.klaar { color: var(--muted); }
.plan-stop.fout { color: var(--bad); font-weight: 700; }
.plan-additions { padding: .85rem 1.1rem 1rem; display: grid; gap: .6rem; }
.plan-additions h3 { margin: 0; font-size: .95rem; }
.plan-addition { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .85rem;
  border: 1px solid var(--line); border-radius: 12px; background: #fbfcfa; }
.plan-addition b, .plan-addition span { display: block; }
.plan-addition span { color: var(--muted); font-size: .84rem; }
.plan-addition .button { flex: none; min-height: 44px; }

/* Agenda */
.agenda-days { padding: 0; }
.agenda-day.kiesbaar { border: 2px dashed var(--brand-2); opacity: 1; }
.agenda-day .place-here { width: 100%; min-height: 44px; margin-bottom: .4rem; }
.al-gepland { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .85rem; }

/* ---- Telefoon: menu wordt een balk onderin, logo bovenin ---- */
@media (max-width: 860px) {
  .portal { display: block; }
  .sidebar { position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0; top: auto; height: auto;
    flex-direction: row; gap: 0; padding: .3rem .35rem calc(.3rem + env(safe-area-inset-bottom)); overflow: visible;
    box-shadow: 0 -4px 18px rgba(0,0,0,.18); }
  .sidebar-brand, .sidebar-foot { display: none; }
  .sidebar-nav { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .1rem; width: 100%; }
  .nav-item { flex-direction: column; justify-content: center; gap: .15rem; min-height: 54px; padding: .3rem 0;
    font-size: .62rem; letter-spacing: -.01em; text-align: center; position: relative; }
  .nav-item svg { width: 22px; height: 22px; }
  .nav-quiet { margin-top: 0; }
  /* Six fit the bar; the manual is one tap away from Regels on a phone. */
  .nav-item[href] { display: none; }
  .nav-count { position: absolute; top: .15rem; right: 18%; margin: 0; min-width: 1.1rem; height: 1.1rem; font-size: .62rem; }
  .content { padding: 1rem .9rem calc(84px + env(safe-area-inset-bottom)); }
  .mobile-brand { display: flex; }
  .map-away .map-view { grid-template-columns: minmax(0, 1fr); }
  .plan-addition { flex-direction: column; align-items: stretch; }
}
@media (min-width: 861px) { .mobile-brand { display: none; } }
.mobile-brand { align-items: center; justify-content: space-between; gap: .8rem; margin: -1rem -.9rem 1rem;
  padding: .7rem .9rem; background: var(--brand); color: #fff; }
.mobile-brand img { height: 22px; width: auto; }
.mobile-brand .mobile-logos { display: flex; align-items: center; gap: .45rem; }
.mobile-brand .mobile-logos span { display: flex; padding: .25rem .4rem; border-radius: 6px; background: #fff; }
.mobile-brand .mobile-logos span.slowfeeder { background: #2f4a2b; }
.mobile-brand .button { min-height: 38px; padding: .35rem .8rem; }
/* The refresh status, on its own line under the logos: on a phone the
   sidebar's line is hidden, and a failing refresh went unseen. */
.mobile-brand { flex-wrap: wrap; row-gap: .35rem; }
.mobile-sync { flex-basis: 100%; color: #b9c9c2; font-size: .75rem; line-height: 1.3; }
.mobile-sync:empty { display: none; }
.mobile-sync.fout { color: var(--accent); font-weight: 700; }


/* ======================================================================
   Bezorger: alleen de eigen ritten, groot en duimvriendelijk
   ====================================================================== */
.role-driver .sidebar-nav { display: none; }
@media (max-width: 860px) { .role-driver .sidebar { display: none; } .role-driver .content { padding-bottom: 2rem; } }

.driver-view { max-width: 760px; }
.driver-day { margin-bottom: 1.4rem; }
.driver-day h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.driver-day.vandaag h2 { color: var(--brand-2); }
.driver-route { display: grid; gap: .2rem; width: 100%; margin-bottom: .6rem; padding: 1rem 1.1rem; text-align: left;
  border: 1px solid var(--line); border-left: 5px solid var(--brand-2); border-radius: 14px; background: var(--paper);
  font: inherit; color: inherit; cursor: pointer; }
.driver-route b { font-size: 1.1rem; }
.driver-route span:not(.rit-nummer) { color: var(--muted); font-size: .9rem; }
.driver-route em { font-style: normal; font-size: .88rem; color: #6b4d00; }
.driver-route.afgebroken { border-left-color: var(--bad); opacity: .7; }
.driver-route .rit-nummer { justify-self: start; }

.driver-back { margin-bottom: .6rem; min-height: 44px; }
.driver-route-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; font-size: 1.5rem; }
.driver-route-head p { margin: .25rem 0 .9rem; color: var(--muted); }
a.driver-maps { display: flex; justify-content: center; min-height: 52px; margin: .4rem 0 1rem; font-size: 1.05rem; }

.note-box { margin: 0 0 .8rem; padding: .8rem 1rem; border-radius: 12px; border: 1px solid #e6c766; background: #fdf6e0; font-size: .95rem; }
.note-box.afgebroken { border-color: #e2a39b; background: #fbe9e6; }

.driver-stops { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.driver-stop { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .7rem; padding: 1rem;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.driver-stop-nr { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px;
  background: var(--brand); color: #fff; font-weight: 900; font-size: 1.05rem; }
.driver-stop-body { display: grid; gap: .3rem; min-width: 0; }
.driver-stop-body b { font-size: 1.1rem; }
.driver-address { color: var(--brand-2); font-weight: 650; text-decoration: underline; overflow-wrap: anywhere; }
.driver-phone { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .9rem;
  border-radius: 10px; background: #e7f2ec; color: var(--brand); font-weight: 750; text-decoration: none; }
.driver-products { font-size: .92rem; }
.driver-customer-note { padding: .45rem .6rem; border-radius: 8px; background: #fdf6e0; font-size: .9rem; }
.due { display: block; margin-top: .15rem; color: var(--muted); font-size: .85rem; font-weight: 700; }
.due.soon { color: var(--warn); }
.due.late { color: var(--bad); }
.route-pick-due { display: block; color: var(--muted); font-size: .8rem; font-weight: 700; }
.route-pick-due.soon { color: var(--warn); }
.route-pick-due.late { color: var(--bad); }
.route-pick.active .route-pick-due { color: #ffd98a; }
.order-note { display: block; margin-top: .3rem; padding: .3rem .5rem; border-radius: 6px; background: #fdf6e0; color: #5b4a12; font-size: .85rem; line-height: 1.35; white-space: pre-line; }
.driver-meta { color: var(--muted); font-size: .8rem; }
.driver-deliver { justify-self: stretch; min-height: 52px; margin-top: .3rem; font-size: 1.05rem; }

.button.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.abort-box { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.abort-box > .button { width: 100%; min-height: 48px; }
.abort-form { display: grid; gap: .6rem; }
.abort-form[hidden] { display: none; }
.abort-form label { display: grid; gap: .3rem; font-weight: 650; }
.abort-form textarea, .note-form textarea { width: 100%; padding: .6rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.abort-actions, .note-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.abort-actions .button, .note-actions .button { min-height: 44px; }

/* Opmerkingen in de agenda */
.agenda-note, .agenda-day-note { margin: .15rem 0; padding: .4rem .55rem; border-radius: 8px; background: #fdf6e0; font-size: .82rem; }
.agenda-aborted { margin: .15rem 0; padding: .4rem .55rem; border-radius: 8px; background: #fbe9e6; color: #7d2a20; font-size: .8rem; }
.agenda-route.afgebroken b { opacity: .7; }
.note-editor { margin: .2rem 0; }
.note-toggle { padding: 0; border: 0; background: none; color: var(--brand-2); font: inherit; font-size: .82rem; font-weight: 650;
  text-decoration: underline; cursor: pointer; }
.note-toggle[hidden], .note-form[hidden] { display: none; }
.note-form { display: grid; gap: .4rem; margin-top: .3rem; }

.agenda-announce { margin: .15rem 0; padding: .35rem .55rem; border-radius: 8px; font-size: .78rem; }
.agenda-announce.gepland { background: #eef3f0; color: var(--muted); }
.agenda-announce.proef { background: #eef3f0; color: #27483f; border: 1px dashed #9db5ab; }
.agenda-announce.echt { background: #e3f3ea; color: #0f5a37; }
.agenda-announce.laat { background: #fdf6e0; color: #6b4d00; }
.badge-announced { display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: 6px;
  background: #e3f3ea; color: #0f5a37; font-size: .72rem; font-weight: 800; vertical-align: middle; }

/* --- September 2026 review --------------------------------------------- */
.badge.planned { color: #0f4f56; background: #d8eef0; }
.badge.planned::before { content: "▤"; }
.map-dot.planned { background: #1f6f78; }
.badge-planned { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 700; color: #0f4f56; }
.badge-planned .rit-nummer { font-size: .72rem; }
.order-select:disabled + span { opacity: .45; }
.route-card.review { border-color: #e7c565; background: #fffaf0; }
.route-card.review .route-number { background: #c7810c; color: #fff; }
.route-overview-card.review { border-color: #e7c565; background: #fffaf0; }
.agenda-announce.fout { background: #fbe4e0; color: #8c352c; font-weight: 650; }
.open-plan-hint { margin: .2rem 0 .6rem; color: var(--muted); font-size: .85rem; }
.history-note { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.history-cap { margin: 0; color: var(--muted); font-size: .85rem; }
.rules-foot { margin-top: 1.2rem; }
.driver-foot { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.driver-day.eerder h2 { color: var(--bad); }
.plan-stop:not(.klaar):not(.fout) { color: var(--muted); }
.sidebar-foot .logout-button { background: transparent; color: #dbe6e1; border-color: rgba(255,255,255,.25); }
.open-plan .open-plan-hint { margin: .2rem 1.25rem .6rem; }

/* --- Concepten ---------------------------------------------------------- */
.concept-list { display: grid; gap: .9rem; }
.concept-card { display: grid; gap: .7rem; padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-left: 5px solid #7a5c2e; border-radius: 14px; }
.concept-card h2 { margin: 0; font-size: 1.1rem; }
.concept-card .concept-head p { margin: .2rem 0 0; color: var(--muted); font-size: .88rem; }
.concept-age { display: inline-block; margin-left: .3rem; padding: .05rem .4rem; border-radius: 6px; background: #fdf6e0; color: #6b4d00; font-weight: 700; font-size: .78rem; }
.concept-stops { margin: 0; padding-left: 1.3rem; display: grid; gap: .3rem; }
.concept-stops li b, .concept-stops li span { display: block; }
.concept-stops li span { color: var(--muted); font-size: .85rem; }
.concept-gone { margin: 0; padding: .45rem .6rem; border-radius: 8px; background: #fbe4e0; color: #8c352c; font-size: .85rem; }
.concept-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.concept-bar { border-left: 5px solid #7a5c2e; }
.concept-bar-actions { display: flex; gap: .45rem; flex-wrap: wrap; }
.concept-bar[hidden] { display: none; }
.badge.concept { color: #5e4520; background: #f1e6d3; }
.badge.concept::before { content: "✎"; }
.map-dot.concept { background: #7a5c2e; }
.nav-item .nav-short { display: none; }
/* The bottom bar is a seventh of a phone wide: the long word does not fit. */
@media (max-width: 860px) {
  .nav-item .nav-long { display: none; }
  .nav-item .nav-short { display: inline; }
}
.route-footer .save-concept { margin-left: auto; }
.concept-stops li .concept-also { color: #8c352c; font-weight: 650; }