:root {
  --bg: #ffffff; --fg: #111827; --muted: #6b7280; --line: #e5e7eb; --card: #f9fafb;
  --accent: #f7a20f; --accent-fg: #232528; --error: #b91c1c; --notice: #ecfdf5;
  --brand-bg: #232528; --brand-amber: #f7a20f; --modal-bg: #ffffff; --modal-line: transparent;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b0f17; --fg: #e5e7eb; --muted: #9ca3af; --line: #1f2937; --card: #111827;
          --error: #f87171; --notice: #052e1f; --modal-bg: #1f2937; --modal-line: #374151; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 16px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 16px; }
a { color: inherit; }
h1 { font-size: 1.6rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
.top { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
       padding: 10px 16px; background: var(--brand-bg); color: #fff; }
.top nav { display: flex; gap: 16px; align-items: center; }
.top nav a, .top .link { color: #d1d5db; text-decoration: none; }
.top nav a:hover, .top .link:hover { color: var(--brand-amber); }
.top nav form { margin: 0; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand img { height: 36px; width: auto; }
.wordmark { font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; color: #fff; }
.wordmark span { color: var(--brand-amber); }
.hero-logo img { display: block; width: min(260px, 70vw); height: auto; margin-bottom: 8px; }
.foot { text-align: center; color: var(--muted); font-size: .8rem; padding: 24px 16px; }
.hero { padding: 48px 0; }
.hero h1 { font-size: 2.2rem; line-height: 1.2; }
.narrow { max-width: 420px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 0 0 16px; }
.button { display: inline-block; background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 6px;
          padding: 10px 18px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line);
                          border-radius: 6px; padding: 8px 10px; width: 100%; }
input[type=checkbox] { width: auto; }
label { display: block; }
.stack > * + * { margin-top: 12px; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; }
.inline input { flex: 1 1 200px; }
fieldset { border: 1px solid var(--line); border-radius: 6px; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.row form { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.error { color: var(--error); }
.notice { background: var(--notice); border-radius: 6px; padding: 8px 12px; }
.danger h2 { color: var(--error); }
.board { width: 100%; border-collapse: collapse; }
.board td { padding: 8px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.tenth { font-size: 0.6em; line-height: 0; vertical-align: super; }
.num { text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.legend { font-size: .85rem; color: var(--muted); }
.pill { font-size: .7rem; border: 1px solid var(--muted); border-radius: 999px; padding: 0 6px; color: var(--muted); white-space: nowrap; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
/* green (cheapest) → gray → red (priciest); matches daily.ShadeColors */
.shade-0 { background: #16a34a; }
.shade-1 { background: #62c383; }
.shade-2 { background: #b4e2c2; }
.shade-3 { background: #e4e3dd; }
.shade-4 { background: #f2aaa9; }
.shade-5 { background: #e66767; }
.shade-6 { background: #b33636; }
.dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.scale { display: inline-flex; gap: 3px; vertical-align: middle; margin: 0 6px; }

.map { height: 420px; border-radius: 10px; border: 1px solid var(--line); margin: 0 0 8px; }
/* Gray the base map so the price colors carry the meaning (FuelWatch's filter). */
.map .leaflet-tile-pane { filter: grayscale(1) contrast(.85) brightness(1.06); }
@media (prefers-color-scheme: dark) { .map .leaflet-tile-pane { filter: grayscale(1) invert(.92) contrast(.9); } }
/* Best-price tag: a dark label whose arrow tip sits on the station (anchor at 0,0). */
.best-tag { width: 0 !important; height: 0 !important; }
.best-tag span, .best-tag-sample { position: relative; display: inline-block; background: #111827; color: #fff;
  font: 700 13px/1 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 6px 8px; border-radius: 6px;
  white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); font-variant-numeric: tabular-nums; }
.best-tag span { transform: translate(-50%, calc(-100% - 8px)); }
.best-tag span::after, .best-tag-sample::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: #111827; }
.best-tag-sample { font-size: 11px; padding: 3px 6px; vertical-align: middle; margin-bottom: 6px; }
.leaflet-popup-content .num { text-align: left; margin: 4px 0; }
/* sign-in */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.digits { font-size: 1.4rem; letter-spacing: .4em; font-variant-numeric: tabular-nums; max-width: 12rem; }
.narrow form + p, .narrow p + form { margin-top: 8px; }
/* route setup */
.button.secondary { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.button[disabled], .link[disabled] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.actions form { margin: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 8px; }
.inline-form { display: flex; gap: 8px; align-items: baseline; margin: 0; }
.stops { padding-left: 1.2rem; margin: 12px 0; }
.stops li + li { margin-top: 4px; }
.warn { margin: 4px 0 0; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--card); }
.examples { display: grid; gap: 8px; margin: 12px 0; }
.examples > div { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
details summary { cursor: pointer; margin: 8px 0; }
.draft { border-color: var(--accent); }
/* place suggestions */
.places { position: relative; }
.places-list { position: absolute; z-index: 1000; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: 4px 0;
               list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
               box-shadow: 0 6px 18px rgba(0, 0, 0, .15); max-height: 18rem; overflow-y: auto; }
.places-list li { padding: 10px 12px; cursor: pointer; font-size: 1rem; }
.places-list li[aria-selected="true"], .places-list li:hover { background: var(--card); }
@media (max-width: 600px) { .map { height: 320px; } }
/* route page buttons */
.button.secondary.dirty { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.button.discard { background: #fde8e8; color: #9b1c1c; border: 1px solid #f5b5b5; }
@media (prefers-color-scheme: dark) { .button.discard { background: #3b1414; color: #fca5a5; border-color: #7f1d1d; } }
details.edit > summary { list-style: none; display: inline-block; }
details.edit > summary::-webkit-details-marker { display: none; }
details.edit[open] > summary { margin-bottom: 12px; }
.actions.paid { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
/* messages */
.error-banner { background: #fde8e8; color: #9b1c1c; border: 1px solid #f5b5b5; border-radius: 6px; padding: 8px 12px; margin: 0 0 12px; }
@media (prefers-color-scheme: dark) { .error-banner { background: #3b1414; color: #fca5a5; border-color: #7f1d1d; } }
/* Sized to the screen with a margin on phones; a lighter panel than the page in dark mode. */
.modal { border: 1px solid var(--modal-line); border-radius: 12px; padding: 20px 22px; margin: auto;
         width: calc(100% - 40px); max-width: 440px; box-sizing: border-box;
         background: var(--modal-bg); color: var(--fg); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.modal::backdrop { background: rgba(17, 24, 39, .55); }
@media (prefers-color-scheme: dark) { .modal::backdrop { background: rgba(0, 0, 0, .75); } }
.modal .actions .button { flex: 1 1 auto; }
.modal h2 { margin: 0 0 8px; }
.modal p { margin: 0 0 16px; }
.modal .actions { justify-content: flex-end; margin: 0; }
.modal.is-error h2 { color: var(--error); }
.reason { color: var(--muted); font-size: .85rem; margin: 4px 0 0; }

/* Saved routes and switch-back dates */
input[type=date] { width: auto; }
.activate label, .return label { margin-bottom: 8px; }
.saved { list-style: none; padding: 0; margin: 12px 0 0; }
.saved > li { padding: 12px 0; border-top: 1px solid var(--line); }
.saved > li > form { margin-top: 8px; }