/* OpenRide · Departure board for the Open Gate commute.
   Time leads every ride; one green accent; light and dark follow the system. */
:root {
  color-scheme: light dark;
  --bg: #f4f5f2; --surface: #fff; --surface-2: #eef0ec; --field: #fff;
  --ink: #131d1a; --ink-2: #3a4743; --muted: #5e6a65;
  --line: #e3e6e2; --line-strong: #c9d0cb;
  --accent: #17654c; --accent-fill: #1b6a50; --accent-hover: #155a44; --accent-soft: #e2f0e8; --on-accent: #fff;
  --blue: #2c5d88; --blue-soft: #e5edf6;
  --amber: #85560a; --amber-soft: #f9eed9;
  --danger: #b42318; --danger-soft: #fcebe9;
  --elev: 0 1px 2px rgba(19,29,26,.05), 0 6px 20px rgba(19,29,26,.05);
  --edge: transparent;
  --bar: rgba(244,245,242,.78);
  --radius: 16px; --radius-s: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --tabbar: 0px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1513; --surface: #171e1b; --surface-2: #212a26; --field: #1b2320;
    --ink: #ecf2ef; --ink-2: #c5d0cb; --muted: #9aa7a1;
    --line: #26302c; --line-strong: #3a4641;
    --accent: #5fcf9f; --accent-fill: #21805e; --accent-hover: #279069; --accent-soft: #183229; --on-accent: #fff;
    --blue: #93bfe9; --blue-soft: #1a2836;
    --amber: #f0c472; --amber-soft: #33270f;
    --danger: #ff9a8f; --danger-soft: #3a1c19;
    --elev: none; --edge: var(--line);
    --bar: rgba(15,21,19,.78);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) transparent; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--font); -webkit-font-smoothing: antialiased; padding-bottom: var(--tabbar); }
::selection { background: var(--accent-soft); color: var(--ink); }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: var(--display); line-height: 1.15; letter-spacing: -.022em; font-weight: 680; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(1.875rem, 1.45rem + 1.4vw, 2.5rem); letter-spacing: -.028em; }
h2 { font-size: 1.25rem; } h3 { font-size: 1.0625rem; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
button,input,select,textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: progress; opacity: .6; }
a,button,input,select,textarea,summary,label { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; border-radius: 6px; }
p,strong,a,small,dd,span { overflow-wrap: anywhere; }
input,textarea { caret-color: var(--accent); accent-color: var(--accent-fill); }
.visually-hidden,.sprite { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
main { min-height: 65vh; padding-bottom: 24px; }
main:focus { outline: none; }
.skip { position: fixed; top: 12px; left: 12px; transform: translateY(-200%); z-index: 99; background: var(--surface); color: var(--ink); padding: 12px 18px; border-radius: 12px; box-shadow: var(--elev); }
.skip:focus { transform: none; }

/* Top bar: a floating functional layer, translucent only where content scrolls beneath it. */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--bar); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar { background: var(--bg); } }
@media (prefers-reduced-transparency: reduce) { .topbar,.tabs { background: var(--bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } }
.nav { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: flex; align-items: center; flex-shrink: 0; height: 40px; padding: 2px 4px; border-radius: 10px; text-decoration: none; }
.brand-image { display: block; height: 34px; width: auto; }
@media (prefers-color-scheme: dark) { .brand { background: #eef4ef; padding: 3px 10px; } .brand-image { height: 32px; } }
.tabs { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.tabs a { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); font-size: .9375rem; font-weight: 550; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.tabs a:hover { background: var(--surface-2); color: var(--ink); }
.tabs a[aria-current] { background: var(--surface); color: var(--accent); box-shadow: var(--elev); outline: 1px solid var(--edge); }
.icon-wrap { position: relative; display: inline-flex; }
.tabs .badge~*,.tabs .icon-wrap:has(.badge) { margin-right: 6px; }
.badge { position: absolute; top: -6px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg); }
@media (prefers-color-scheme: dark) { .badge { background: #e5484d; } }
.nav-end { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); font-size: .9375rem; font-weight: 620; text-decoration: none; white-space: nowrap; transition: background-color .15s; }
.nav-cta:hover { background: var(--accent-hover); }
.nav-cta .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.account-summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 4px; border-radius: 999px; color: var(--ink); text-decoration: none; }
.account-summary:hover .account-avatar { box-shadow: 0 0 0 3px var(--accent-soft); }
.account-avatar { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; transition: box-shadow .15s; }
.account-avatar.large { width: 64px; height: 64px; font-size: 1.375rem; }
.account-text strong,.account-text small { display: block; line-height: 1.25; }
.account-text strong { font-size: .875rem; font-weight: 620; }
.account-text small { color: var(--muted); font-size: .75rem; }
.public-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.public-nav a:not(.nav-cta) { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); font-weight: 550; font-size: .9375rem; text-decoration: none; }
.public-nav a:not(.nav-cta):hover,.public-nav a[aria-current=page]:not(.nav-cta) { background: var(--surface-2); color: var(--ink); }
.public-nav .nav-cta { padding: 0 18px; }

/* Controls. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border: 0; border-radius: var(--radius-s); font-size: .9375rem; font-weight: 620; line-height: 1.3; text-align: center; text-decoration: none; transition: background-color .15s, transform .15s; }
.button:active { transform: scale(.985); }
.button.primary { background: var(--accent-fill); color: var(--on-accent); }
.button.primary:hover { background: var(--accent-hover); }
.button.secondary { background: var(--surface-2); color: var(--ink); }
.button.secondary:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--ink) 8%); }
.button.subtle { background: var(--danger-soft); color: var(--danger); }
.button.subtle:hover { background: color-mix(in srgb, var(--danger-soft) 85%, var(--danger) 12%); }
.button.small { min-height: 40px; padding: 8px 14px; font-size: .875rem; border-radius: 10px; }
.button.full { width: 100%; margin-top: 12px; }
.text-link,.filter-reset { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--accent); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.text-link:hover,.filter-reset:hover { text-decoration: underline; }
.text-link .icon { width: 18px; height: 18px; stroke-width: 2; }
.field,.auth-panel input,.form-panel input:not([type=checkbox]):not([type=hidden]):not([type=radio]),.form-panel select,.form-panel textarea,.action-panel select,.resend input {
  display: block; width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; background: var(--field); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-s); font-size: 16px; line-height: 1.35; transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none; }
select.field,.form-panel select,.action-panel select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235e6a65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
input[type=date].field,input[type=time].field { min-height: 48px; }
::placeholder { color: var(--muted); opacity: 1; }
.field:focus,.auth-panel input:focus,.form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus,.action-panel select:focus,.resend input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
textarea { min-height: 112px; resize: vertical; }
input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; margin: 0; }
label,legend { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: .875rem; font-weight: 600; }
.check { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; color: var(--ink); font-weight: 500; font-size: .9375rem; cursor: pointer; }
.hint { display: block; margin: 8px 0; color: var(--muted); font-size: .875rem; line-height: 1.55; }
.error,.errorlist { display: block; margin: 8px 0; color: var(--danger); font-size: .875rem; }
.errorlist { padding-left: 18px; }
.muted { color: var(--muted); }
.panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--elev); outline: 1px solid var(--edge); outline-offset: -1px; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Pills and tags carry state in words; color only reinforces. */
.tag,.listing-kind,.status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .8125rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.tag-blue { background: var(--blue-soft); color: var(--blue); }
.listing-kind { background: var(--surface-2); color: var(--ink-2); }
.status-pending,.status-needs_reconfirm,.status-driver-pending { background: var(--amber-soft); color: var(--amber); }
.status-rejected,.status-cancelled,.status-driver-rejected { background: var(--danger-soft); color: var(--danger); }
.status-closed,.status-driver-none { background: var(--surface-2); color: var(--ink-2); }
.status-completed,.status-resolved { background: var(--blue-soft); color: var(--blue); }
.listing-count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font: 600 .8125rem/1 var(--font); letter-spacing: 0; vertical-align: 3px; font-variant-numeric: tabular-nums; }
.listing-count.attention { background: var(--amber-soft); color: var(--amber); }

/* Marketplace. */
.market-arrival { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 40px 0 24px; }
.market-arrival h1 { margin-bottom: 8px; }
.market-arrival p { margin: 0; color: var(--muted); font-size: 1.0625rem; }
.hero-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.finder { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--elev); outline: 1px solid var(--edge); outline-offset: -1px; }
.segmented { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 0; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.segmented label { margin: 0; color: var(--ink-2); font-size: .9375rem; font-weight: 550; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 9px; white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s; }
.segmented label:hover span { color: var(--ink); }
.segmented input:checked+span { background: var(--surface); color: var(--ink); font-weight: 620; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark) { .segmented input:checked+span { background: #35413c; } }
.segmented input:focus-visible+span { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 1px; }
.search-field { position: relative; min-width: 0; }
.search-field .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-field .field { padding-left: 44px; background: var(--surface-2); border-color: transparent; }
.search-field .field:focus { background: var(--field); }
.more-filters { grid-column: 1/-1; grid-row: 2; }
.more-filters summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-s); background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: .9375rem; }
.more-filters summary:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--ink) 8%); }
.more-filters[open] summary { background: var(--accent-soft); color: var(--accent); }
.more-filters .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-fill); }
.filtergrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; gap: 12px; align-items: end; padding: 12px 4px 4px; }
.filtergrid>div { min-width: 0; }
.filter-check .check { padding: 0 6px; }
.finder-actions { display: flex; align-items: center; gap: 12px; }
.finder-actions .button { min-width: 112px; }
.filter-reset { white-space: nowrap; }
.market-section { margin: 36px 0; scroll-margin-top: 88px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.section-title h2 { margin: 0; }
.day-label { margin: 18px 4px 8px; color: var(--muted); font: 600 .875rem/1.3 var(--font); letter-spacing: 0; }
.section-title+.ride-list,.section-title+.empty { margin-top: 12px; }

/* Ride rows: an inset grouped list, departure time first. */
.ride-list { background: var(--surface); border-radius: var(--radius); box-shadow: var(--elev); outline: 1px solid var(--edge); outline-offset: -1px; overflow: hidden; }
.ride-list+.ride-list { margin-top: 12px; }
.ride-row { position: relative; display: grid; grid-template-columns: 76px minmax(0,1fr) minmax(0,auto) 20px; align-items: center; gap: 20px; padding: 16px 20px; color: var(--ink); text-decoration: none; transition: background-color .15s; }
.ride-row+.ride-row::before { content: ""; position: absolute; top: 0; left: 116px; right: 0; border-top: 1px solid var(--line); }
.ride-row:hover { background: color-mix(in srgb, var(--surface) 94%, var(--ink) 4%); }
.ride-row:focus-visible { outline-offset: -3px; border-radius: var(--radius); }
.ride-time { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.ride-time strong { font: 680 1.5rem/1.1 var(--display); letter-spacing: -.02em; }
.ride-time small { color: var(--muted); font-size: .8125rem; }
.ride-route { position: relative; display: grid; gap: 6px; min-width: 0; }
.stop { position: relative; display: block; padding-left: 22px; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.stop::before { content: ""; position: absolute; left: 1px; top: .42em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--blue); background: var(--surface); box-sizing: border-box; }
.stop-end::before { border-color: var(--accent-fill); background: var(--accent-fill); }
.stop:first-child::after { content: ""; position: absolute; left: 5px; top: calc(.42em + 11px); height: calc(100% - 4px); border-left: 1.5px dotted var(--line-strong); }
.row-title { font-weight: 620; }
.row-sub { color: var(--muted); font-size: .9375rem; }
.ride-meta { display: grid; justify-items: end; gap: 6px; text-align: right; font-size: .875rem; min-width: 0; }
.seats { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 620; white-space: nowrap; }
.is-full .seats { color: var(--muted); }
.seat-dots { display: inline-flex; gap: 3px; }
.seat-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.seat-dots i.free { background: var(--accent-fill); border-color: var(--accent-fill); }
.demand-label { color: var(--blue); font-weight: 600; }
.card-owner { color: var(--muted); }
.chevron { width: 18px; height: 18px; color: var(--line-strong); transition: transform .15s, color .15s; }
.ride-row:hover .chevron { color: var(--muted); transform: translateX(2px); }
.empty { padding: 28px 24px; color: var(--muted); background: transparent; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); text-align: center; }
.empty strong { display: block; color: var(--ink); font-weight: 620; font-size: 1rem; }
.empty p { margin: 6px 0 0; font-size: .9375rem; }
.empty .text-link { margin-top: 6px; }

/* Task pages. */
.page-head { margin: 36px 0 24px; }
.page-head h1 { margin-bottom: 8px; }
.page-head>p { margin-bottom: 0; max-width: 70ch; font-size: 1.0625rem; }
.back { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; margin: -6px 0 10px -8px; padding: 0 10px 0 4px; border-radius: 999px; color: var(--accent); font-weight: 560; font-size: 1rem; text-decoration: none; }
.back:hover { background: var(--accent-soft); }
.back .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.route-title { display: grid; gap: 6px; margin-bottom: 14px; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.route-title>span { position: relative; padding-left: 30px; }
.route-title>span::before { content: ""; position: absolute; left: 2px; top: .36em; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--blue); box-sizing: border-box; background: var(--bg); }
.route-title>.route-to::before { border-color: var(--accent-fill); background: var(--accent-fill); }
.route-title>span:first-child::after { content: ""; position: absolute; left: 8px; top: calc(.36em + 17px); height: calc(100% - 8px); border-left: 2px dotted var(--line-strong); }
.head-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.status-open { background: var(--accent-soft); color: var(--accent); }
.detail-layout,.form-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(300px,1fr); gap: 24px; align-items: start; }
.detail-main,.detail-side { display: grid; gap: 20px; min-width: 0; }
.detail-panel,.map-panel,.action-panel,.side-list,.report,.form-panel,.map-side { padding: 24px; min-width: 0; }
.departure-hero { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.departure-hero strong { font: 700 3rem/1 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.departure-hero span { color: var(--ink-2); font-size: 1.0625rem; font-weight: 500; }
.facts { margin: 0; }
.detail-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.detail-row:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-row dt { color: var(--muted); font-size: .9375rem; }
.detail-row dd { margin: 0; text-align: right; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.detail-copy { display: block; }
.detail-copy dd { display: block; margin-top: 4px; text-align: left; font-weight: 400; line-height: 1.6; }
.privacy-note { margin: 18px 0 0; padding: 14px 16px; background: var(--blue-soft); color: var(--blue); border-radius: var(--radius-s); font-size: .9375rem; }
.map-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.map-heading h2 { margin: 0; }
.map-heading span { color: var(--muted); font-size: .875rem; }
.map-placeholder { padding: 36px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-s); color: var(--muted); font-size: .9375rem; text-align: center; }
#detail-map,#edit-map { height: 360px; border-radius: var(--radius-s); z-index: 0; color-scheme: light; }
.leaflet-container { color: #172e3b; font-family: var(--font); }
.leaflet-container a { color: #12618a; }
.action-panel h2,.side-list h2 { margin-bottom: 14px; }
.action-panel p { font-size: 1rem; }
.action-panel form+form { margin-top: 0; }
.booking-state { margin-bottom: 4px; }
.side-item { display: grid; gap: 8px; border-top: 1px solid var(--line); padding: 14px 0; }
.side-item:last-child { padding-bottom: 0; }
.side-item-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.side-item a { font-size: .9375rem; }
.side-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.report summary { display: flex; align-items: center; min-height: 28px; color: var(--ink-2); font-weight: 600; }
.report summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.report[open] summary::after { transform: rotate(-135deg); }
.report form { margin-top: 16px; }
.report button { margin-top: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.form-item.hidden { display: none; }
.form-item:has(textarea),.form-item:has(.departure-field) { grid-column: 1/-1; }
.form-panel>.button,.form-panel form>.button { margin-top: 20px; }
.departure-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.departure-field legend { padding: 0; }
.departure-inputs,.departure-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.departure-labels label { font-size: .8125rem; color: var(--muted); margin-bottom: 6px; }
.suggestions { position: relative; z-index: 5; margin-top: 6px; background: var(--surface); border-radius: var(--radius-s); box-shadow: 0 8px 28px rgba(0,0,0,.14); outline: 1px solid var(--line); overflow: hidden; }
.suggestions:empty { display: none; }
.suggestions button { display: block; width: 100%; min-height: 44px; text-align: left; color: var(--ink); background: none; border: 0; border-top: 1px solid var(--line); padding: 11px 14px; font-size: .9375rem; }
.suggestions button:first-child { border-top: 0; }
.suggestions button:hover,.suggestions button:focus-visible { background: var(--accent-soft); outline: none; }
.profile-head { display: flex; align-items: center; gap: 18px; }
.profile-head h1 { margin-bottom: 4px; }
.profile-head p { margin: 0; }
.profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: start; }
.profile-grid .field,.profile-grid input:not([type=checkbox]) { margin-bottom: 16px; }
.profile-grid p { margin-bottom: 14px; }
.profile-grid ul { padding-left: 20px; color: var(--muted); font-size: .875rem; }
.profile-grid h2 { margin-bottom: 18px; }
.logout-row { margin-top: 28px; }
.messages { margin-top: 20px; }
.message { margin: 0 0 10px; padding: 14px 18px; border-radius: var(--radius-s); background: var(--accent-soft); color: var(--accent); font-size: .9375rem; font-weight: 500; }
.message.error { background: var(--danger-soft); color: var(--danger); }
.message.info { background: var(--blue-soft); color: var(--blue); }
.notice-list { display: grid; background: var(--surface); border-radius: var(--radius); box-shadow: var(--elev); outline: 1px solid var(--edge); outline-offset: -1px; overflow: hidden; }
.notice-list:has(.empty) { background: none; box-shadow: none; outline: 0; }
.notice { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 18px 20px; border-top: 1px solid var(--line); }
.notice:first-child { border-top: 0; }
.notice-dot { width: 9px; height: 9px; border-radius: 50%; }
.notice.unread .notice-dot { background: var(--accent-fill); }
.notice strong { font-weight: 600; }
.notice.unread strong { font-weight: 700; }
.notice p { margin: 2px 0 4px; color: var(--ink-2); font-size: .9375rem; }
.notice small { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.stat { padding: 22px 24px; }
.stat strong { display: block; font: 700 2.25rem/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat span { color: var(--muted); font-size: .9375rem; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; margin-bottom: 10px; }
.admin-row p { margin: 4px 0; color: var(--muted); font-size: .9375rem; }
.detour-panel>p { font-size: .9375rem; }
.detour-extra { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--accent-soft); border-radius: var(--radius-s); color: var(--accent); flex-wrap: wrap; }
.detour-extra strong { font: 700 1.5rem/1.1 var(--display); letter-spacing: -.02em; }
.detour-breakdown { margin: 14px 0; }
.detour-breakdown>div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.detour-breakdown dt { color: var(--muted); }
.detour-breakdown dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.detour-panel [hidden] { display: none; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0 32px; margin-top: 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; }

/* Sign-in: a calm front door. */
.auth-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,440px); gap: 72px; align-items: center; max-width: 1040px; margin: auto; padding: 64px 0; min-height: calc(100dvh - 200px); }
.auth-intro h1 { margin-bottom: 18px; font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem); line-height: 1.06; letter-spacing: -.035em; }
.auth-intro>p { max-width: 38ch; color: var(--muted); font-size: 1.1875rem; line-height: 1.55; }
.auth-proof { display: flex; align-items: center; gap: 10px; margin: 28px 0 0; color: var(--ink-2); font-size: .9375rem !important; }
.proof-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 0 4px var(--accent-soft); }
.auth-panel { padding: 32px; }
.auth-panel h2 { margin-bottom: 8px; font-size: 1.625rem; }
.auth-panel>.muted { font-size: .9375rem; }
.auth-panel form { margin-top: 20px; }
.auth-field { margin-bottom: 18px; }
.auth-panel ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: .8125rem; }
.auth-links { display: flex; justify-content: center; gap: 8px 20px; flex-wrap: wrap; margin: 16px 0 0; font-size: .9375rem; }
.auth-links a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 550; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.resend { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); font-size: .9375rem; }
.resend summary { display: inline-flex; align-items: center; min-height: 40px; }
.resend summary:hover { color: var(--ink); }
.resend form { margin-top: 12px; }
.resend .button { margin-top: 12px; }
.journey-art { margin-top: 36px; padding: 22px 24px; max-width: 460px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--elev); outline: 1px solid var(--edge); outline-offset: -1px; }
.journey-art-route { display: flex; align-items: center; gap: 16px; }
.journey-art-route>div { flex-shrink: 0; }
.journey-art-route strong,.journey-art-route small { display: block; }
.journey-art-route strong { font-size: 1.0625rem; font-weight: 650; }
.journey-art-route small { color: var(--muted); font-size: .8125rem; }
.journey-art-track { position: relative; flex: 1; min-width: 24px; height: 0; border-top: 2px dotted var(--line-strong); }
.journey-art-track::before,.journey-art-track::after { content: ""; position: absolute; top: -6px; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
.journey-art-track::before { left: -4px; border: 2.5px solid var(--blue); background: var(--surface); }
.journey-art-track::after { right: -4px; background: var(--accent-fill); }

/* Per-reservation drop-off selection and driver review. */
.dropoff-selection { margin-top: 4px; }
.dropoff-consent { align-items: flex-start; font-size: .9375rem; line-height: 1.5; padding: 8px 0; min-height: 0; }
.dropoff-consent input { margin-top: 2px; }
.dropoff-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.requested-dropoff,.my-dropoff { margin: 4px 0; font-size: .9375rem; }
.booking-dropoff-calc { justify-content: flex-start; width: fit-content; }
.booking-dropoff-result { margin: 0; }
.booking-dropoff-result:empty { display: none; }

/* Account ownership confirmation by a school administrator. */
.account-admin-actions { width: min(360px,100%); flex-shrink: 0; }
.manual-verification summary { cursor: pointer; }
.manual-verification form { padding: 16px; background: var(--bg); border-radius: var(--radius-s); margin-top: 8px; }
.verification-consent { align-items: flex-start; font-size: .875rem; line-height: 1.55; min-height: 0; }
.verification-consent input { margin-top: 2px; }
.manual-verification .button { margin-top: 12px; }

/* Medium widths: navigation keeps its place, labels give way to icons. */
@media (max-width: 1100px) {
  .account-text { display: none; }
  .tabs a { padding: 0 12px; }
  .filtergrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .finder { grid-template-columns: minmax(0,1fr) auto; }
  .segmented { grid-column: 1/-1; justify-self: start; }
  .more-filters { grid-row: 3; }
  .detail-layout,.form-layout { grid-template-columns: minmax(0,1.3fr) minmax(280px,1fr); }
  .auth-layout { gap: 40px; }
}

/* Phone and small tablet: bottom tab bar within thumb reach, one column. */
@media (max-width: 767px) {
  .workspace { --tabbar: calc(64px + env(safe-area-inset-bottom)); }
  html { scroll-padding-top: 72px; }
  .shell { width: calc(100% - 32px); }
  /* backdrop-filter would make the header the containing block of the fixed tab bar */
  .topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav { min-height: 56px; gap: 12px; }
  .brand-image { height: 30px; }
  .nav-end { margin-left: auto; gap: 8px; }
  .account-summary { display: none; }
  .nav-cta { min-height: 40px; padding: 0 14px 0 10px; font-size: .875rem; }
  .tabs { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 0; margin: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--bar); border-top: 1px solid var(--line); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .tabs a { flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 4px 2px; border-radius: 12px; font-size: .6875rem; font-weight: 600; color: var(--muted); }
  .tabs a .icon { width: 24px; height: 24px; }
  .tabs .icon-wrap:has(.badge) { margin-right: 0; }
  .tabs a span:not(.badge):not(.icon-wrap):not(.visually-hidden) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabs a:hover { background: none; color: var(--ink); }
  .tabs a[aria-current] { background: none; box-shadow: none; outline: 0; color: var(--accent); }
  .tabs a[aria-current] .icon { stroke-width: 2.1; }
  .public-nav { gap: 2px; }
  .public-nav a:not(.nav-cta) { padding: 0 10px; }
  .public-nav .nav-cta { padding: 0 14px; }
  .market-arrival { display: block; padding: 24px 0 18px; }
  .market-arrival p { font-size: 1rem; }
  .workspace .hero-actions { display: none; }
  .finder { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 10px; }
  .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); width: 100%; }
  .segmented span { padding: 0 6px; font-size: .875rem; }
  .more-filters { grid-row: auto; }
  .more-filters summary { display: flex; justify-content: center; min-height: 44px; }
  .filtergrid { grid-template-columns: 1fr 1fr; padding: 4px 0 0; }
  .filtergrid>div:first-child,.filter-check { grid-column: 1/-1; }
  .finder-actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .filter-reset { justify-content: center; }
  .market-section { margin: 28px 0; }
  .section-title h2 { font-size: 1.1875rem; }
  .section-title .text-link { font-size: .875rem; }
  .ride-row { grid-template-columns: 58px minmax(0,1fr) 16px; grid-template-areas: "time route chev" "time meta chev"; align-items: start; column-gap: 14px; row-gap: 10px; padding: 14px 14px 14px 16px; }
  .ride-row+.ride-row::before { left: 88px; }
  .ride-time { grid-area: time; padding-top: 1px; }
  .ride-time strong { font-size: 1.25rem; }
  .ride-route { grid-area: route; }
  .ride-meta { grid-area: meta; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px 10px; text-align: left; }
  .chevron { grid-area: chev; align-self: center; }
  .page-head { margin: 24px 0 18px; }
  .page-head>p { font-size: 1rem; }
  .detail-layout { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .detail-main { display: contents; }
  .detail-panel { order: 1; } .detail-side { order: 2; gap: 16px; } .map-panel { order: 3; }
  .form-layout,.profile-grid { grid-template-columns: 1fr; gap: 16px; }
  .detail-panel,.map-panel,.action-panel,.side-list,.report,.form-panel,.map-side { padding: 20px; }
  .departure-hero strong { font-size: 2.5rem; }
  .form-grid { grid-template-columns: 1fr; }
  .form-item:has(textarea),.form-item:has(.departure-field) { grid-column: auto; }
  .departure-inputs,.departure-labels { gap: 10px; grid-template-columns: 1.15fr .85fr; }
  .departure-inputs input { padding-inline: 10px; }
  #detail-map,#edit-map { height: 280px; }
  .stats { gap: 10px; grid-template-columns: 1fr; }
  .stat { display: flex; align-items: baseline; gap: 14px; padding: 16px 18px; }
  .stat strong { font-size: 1.75rem; min-width: 40px; }
  .notice { grid-template-columns: 10px minmax(0,1fr); padding: 16px; }
  .notice form { grid-column: 2; }
  .admin-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .auth-layout { grid-template-columns: 1fr; gap: 24px; padding: 28px 0 8px; min-height: 0; }
  .auth-intro h1 { font-size: 2rem; margin-bottom: 10px; }
  .auth-intro>p { font-size: 1.0625rem; margin-bottom: 0; }
  .auth-intro .journey-art,.auth-proof { display: none; }
  .auth-panel { padding: 24px 20px; }
  .footer { margin-top: 24px; flex-direction: column; gap: 4px; font-size: .75rem; padding-bottom: 24px; }
  .empty { padding: 22px 18px; }
}
@media (max-width: 360px) {
  .nav-cta span { display: none; }
  .nav-cta { padding: 0 10px; }
  .ride-meta .card-owner { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; animation: none !important; }
}

/* Ratings: amber stars, approved by an admin before they show. */
.star { width: 18px; height: 18px; }
.rating-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--ink); font-size: .9375rem; font-weight: 620; white-space: nowrap; vertical-align: middle; }
.rating-badge .star,.review-stars .on { color: var(--amber); fill: currentColor; }
.rating-badge .muted { font-weight: 500; }
.review-stars { display: inline-flex; gap: 1px; color: var(--line-strong); }
.review-list { margin-top: 4px; }
.review { padding: 12px 0; border-top: 1px solid var(--line); }
.review:first-child { border-top: 0; padding-top: 4px; }
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-head small { color: var(--muted); font-size: .8125rem; }
.review p { margin: 6px 0 0; overflow-wrap: anywhere; }
.rating-form { margin-top: 16px; }
.star-pick { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.star-pick legend { width: 100%; padding: 0; }
.star-pick label { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border-radius: 10px; color: var(--line-strong); cursor: pointer; transition: background-color .15s, color .15s; }
.star-pick label:hover { background: var(--surface-2); }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-pick .star { width: 30px; height: 30px; }
.star-pick label:has(input:checked),.star-pick label:has(~ label input:checked) { color: var(--amber); }
.star-pick label:has(input:checked) .star,.star-pick label:has(~ label input:checked) .star { fill: currentColor; }
.star-pick label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 1px; }
.rate-details summary { cursor: pointer; list-style: none; }
.rate-details summary::-webkit-details-marker { display: none; }
.rating-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px; }
.rating-summary dt { color: var(--muted); font-size: .8125rem; font-weight: 600; }
.rating-summary dd { margin: 2px 0 0; }
.rating-summary .rating-badge { margin-left: 0; }
.person-reviews { border-radius: var(--radius-s); background: var(--surface-2); }
.person-reviews summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none; font-size: .875rem; }
.person-reviews summary::-webkit-details-marker { display: none; }
.person-reviews .rating-badge { margin-left: 0; }
.person-reviews-label { color: var(--accent); font-weight: 600; }
.person-reviews .chevron { width: 16px; height: 16px; margin-left: auto; color: var(--muted); transition: transform .15s; }
.person-reviews[open] .chevron { transform: rotate(90deg); }
.person-reviews .review-list { margin: 0; padding: 0 12px 4px; }
.person-reviews-empty { margin: 0; }
.review-group { margin: 16px 0 4px; font-size: .9375rem; color: var(--ink-2); }
.notices-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.notices-head-row p { margin: 0; }