:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --band: #f2f2f2;
  --fg: #111111;
  --muted: #3d3d3d;
  --accent: #0b3d91;
  --accent-fg: #ffffff;
  --ok-bg: #e6f4ea;
  --ok-fg: #0d5223;
  --warn-bg: #fff3cd;
  --warn-fg: #5c3d00;
  --focus-in: #0b3d91;
  --focus-out: #ffdd00;
  --border: #767676;
  --problem-bg: #fde8e8;
  --problem-fg: #7a1212;
  --info-bg: #e3edfb;
  --info-fg: #0b3d91;
  --note-bg: #f2f2f2;
  --note-fg: #111111;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --surface: #1a1a1a;
    --band: #1e1e1e;
    --fg: #f5f5f5;
    --muted: #cfcfcf;
    --accent: #9ec5ff;
    --accent-fg: #0b1a33;
    --ok-bg: #0d3b1e;
    --ok-fg: #c9f2d6;
    --warn-bg: #4a3300;
    --warn-fg: #ffe9a8;
    --focus-in: #0b3d91;
    --focus-out: #ffdd00;
    --border: #9a9a9a;
    --problem-bg: #4a0d0d;
    --problem-fg: #ffd3d3;
    --info-bg: #0f2a52;
    --info-fg: #cfe0ff;
    --note-bg: #222222;
    --note-fg: #f5f5f5;
  }
}
@media (prefers-contrast: more) {
  :root { --muted: var(--fg); --border: var(--fg); --surface: var(--bg); --band: var(--bg); }
  .results li { border-color: var(--fg); }
}
* { box-sizing: border-box; }
html { font-size: 125%; }
body {
  margin: 0;
  padding: 0 1rem 2rem;
  max-width: 44rem;
  margin-inline: auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
}
a { color: var(--accent); text-underline-offset: 0.15em; }
header { margin: 0 -1rem; padding: 1.5rem 1rem 1rem; background: var(--band); border-bottom: 1px solid var(--border); }
header:has(+ .profile-bar) { padding-bottom: 0.5rem; border-bottom: 0; }
h1 { display: flex; align-items: center; gap: 0.5rem; font-size: 2rem; line-height: 1.2; margin: 0; }
h1 a { color: inherit; text-decoration: none; }
.mark { width: 2rem; height: 2rem; flex: none; color: var(--accent); }
h2 { font-size: 1rem; margin: 1.5rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
p, li, legend, label, .lede, .how { max-width: 70ch; }
.lede, .how { color: var(--muted); margin-top: 0; }
.lede { margin: 0.5rem 0 0; }
.how { margin-bottom: 1rem; }
.skip {
  position: absolute; left: -999px; top: 0.5rem;
  background: var(--accent); color: var(--accent-fg); padding: 0.5rem 1rem;
}
.skip:focus { left: 0.5rem; z-index: 10; }
.field { margin: 1rem 0; }
label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.opt { font-weight: 400; color: var(--muted); }
input, textarea {
  width: 100%;
  font: inherit;
  padding: 0.75rem;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--fg);
  min-height: 3rem;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; font-style: italic; }
button {
  font: inherit; font-weight: 600;
  padding: 0.75rem 1.5rem;
  background: var(--accent); color: var(--accent-fg);
  border: 2px solid var(--accent);
  border-radius: 0.5rem;
  min-height: 3rem; min-width: 6rem;
  cursor: pointer;
}
:focus-visible { outline: 3px solid var(--focus-in); outline-offset: 0; box-shadow: 0 0 0 6px var(--focus-out); }
.ask { margin-top: 1.5rem; }
.scanned { margin: 1rem 0 0; }
@media (min-width: 48rem) {
  .ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0; align-items: end; }
  .ask .how, .ask .quick { grid-column: 1 / -1; }
  .ask .field { margin: 0; }
  .ask > button { margin: 0; }
}
.quick { border: 0; padding: 0; margin: 1.5rem 0 0; }
.quick legend { font-weight: 600; padding: 0; margin-bottom: 0.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.5rem 1rem;
  border: 2px solid var(--accent);
  border-radius: 2rem;
  text-decoration: none;
  min-height: 2.75rem;
  font-weight: 600;
}
.chip:hover { text-decoration: underline; }
#answer:focus { outline: none; }
.summary { font-weight: 600; }
.t-answer { font-size: 1.5rem; line-height: 1.35; margin: 0.5rem 0 1rem; }
.here { color: var(--muted); }
.results { padding-left: 0; list-style-position: inside; }
.results li { margin: 0.5rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--surface); }
.results strong { display: block; font-weight: 600; }
.where, .notes, .distance { display: block; color: var(--muted); font-size: 0.9rem; }
.when { display: block; font-weight: 600; }
.notes.route { display: inline-block; margin: 0.5rem 0.5rem 0 0; padding: 0.1rem 0.6rem; border: 1px solid var(--border); border-radius: 2rem; color: var(--fg); }
.badge, .callout {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2rem 0.6rem;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.badge + .badge, .callout + .callout { margin-left: 0.25rem; }
.badge.ok, .callout.success { background: var(--ok-bg); color: var(--ok-fg); }
.badge.warn, .callout.warning { background: var(--warn-bg); color: var(--warn-fg); }
.callout.info { background: var(--info-bg); color: var(--info-fg); }
.badge.warn::before, .callout.warning::before, .badge.problem::before, .callout.problem::before { content: "\25B2 " / ""; }
.badge.ok::before, .callout.success::before { content: "\2713 " / ""; }
p.callout { display: block; margin: 1rem 0; padding: 1rem; font-size: 1rem; border: 1px solid currentColor; border-radius: 0.5rem; }
footer { margin-top: 2rem; padding-top: 0.5rem; color: var(--muted); font-size: 0.85rem; line-height: 1.5; border-top: 1px solid var(--border); }
footer p { margin: 0.25rem 0; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.badge.problem, .callout.problem { background: var(--problem-bg); color: var(--problem-fg); border-color: var(--problem-fg); }
.badge.note, .callout.note { background: var(--note-bg); color: var(--note-fg); border-color: var(--border); }
.reported { font-weight: 600; }
.report { margin-top: 0.5rem; }
.report summary { cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; border: 2px solid transparent; border-radius: 0.5rem; color: var(--accent); background: transparent; }
.report summary:hover { text-decoration: underline; }
.report summary:focus-visible { border-color: currentColor; }
.report form { margin: 0.5rem 0 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--surface); }
.report fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.report legend { font-weight: 600; padding: 0; margin-bottom: 0.5rem; }
.choice { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.5rem 0; }
.choice input { width: 1.5rem; height: 1.5rem; min-height: 0; margin: 0.1rem 0 0; flex: none; }
.choice label { font-weight: 400; margin: 0; }
textarea { width: 100%; font: inherit; padding: 0.75rem; border: 2px solid var(--border); border-radius: 0.5rem; background: var(--surface); color: var(--fg); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.status { font-weight: 600; margin-top: 1rem; }
.applied { padding-left: 1.25rem; color: var(--muted); }
.profile-bar { margin: 0 -1rem; padding: 0 1rem 0.5rem; background: var(--band); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; min-height: 44px; font-weight: 600; }
.profile-bar .edit { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 0.5rem; }
.profile-bar .edit.wide { display: none; }
.profile { display: none; margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.profile.shown { display: block; }
.profile h2 { font-size: 1rem; margin: 0 0 0.5rem; }
@media (min-width: 60rem) {
  body { max-width: 72rem; display: grid; grid-template-columns: minmax(0, 44rem) minmax(16rem, 22rem); column-gap: 3rem; align-items: start; }
  header, .profile-bar, footer { grid-column: 1 / -1; }
  header { grid-row: 1; }
  .profile-bar { grid-row: 2; }
  footer { grid-row: 4; }
  main { grid-column: 1; grid-row: 3; }
  .profile { grid-column: 2; grid-row: 3; display: block; position: sticky; top: 1rem; margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--surface); }
  .profile-bar .edit.wide { display: inline-flex; }
  .profile-bar .edit.narrow { display: none; }
}
.chips { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips .chip { margin: 0; min-width: 44px; min-height: 44px; background: var(--surface); color: var(--accent); font-weight: 600; }
.chips .chip.on { background: var(--info-bg); color: var(--accent); }
.chips .chip.learned { border-style: dashed; }
.chips .chip .from { font-weight: 400; }
.chips .chip.keep { font-weight: 400; border-color: transparent; background: transparent; }
.chips .chip.keep:hover { text-decoration: underline; }
.chips .chip.keep:focus-visible { border-color: currentColor; }
.privacy { color: var(--muted); font-size: 0.95rem; }
.secondary { background: var(--surface); color: var(--accent); }
.save { margin-top: 1rem; }
.save summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--accent); text-decoration: underline; }
.link a { overflow-wrap: anywhere; }
.copy { min-height: 44px; min-width: 44px; margin-left: 0.5rem; padding: 0.5rem 1rem; }
@media (prefers-contrast: more) {
  .callout, .badge, .badge.ok, .badge.warn, .badge.problem, .badge.note, .callout.success, .callout.warning, .callout.info, .callout.problem, .callout.note { background: transparent; color: var(--fg); border: 2px solid currentColor; }
  .chips .chip.on { background: var(--accent); color: var(--accent-fg); }
  .chips .chip.keep, .report summary { border-color: currentColor; }
}
.agenda { margin: 1rem 0; }
.agenda-line { margin: 0.25rem 0; }
.schedule textarea { min-height: 8rem; resize: vertical; }
.schedule .secondary { margin-left: 0.5rem; }
.schedule { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.schedule summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; min-height: 44px; }
.schedule summary h2 { display: inline; font-size: 1.1rem; margin: 0; }
.schedule .edit { color: var(--accent); text-decoration: underline; flex: none; }
.schedule[open] .edit { display: none; }