:root {
      --bg:#0f1720; --panel:#182430; --panel2:#1e2c3a; --line:#2a3a48;
      --fg:#eef4f9; --muted:#9fb1c1; --accent:#4aa8ff; --accent-ink:#04121f;
      --ok:#5fe08a; --warn:#ffb15c; --bad:#ff7d8a; --info:#c8a6ff;
      --focus:#ffd54a;
      --tap:44px;
    }
    /* Light mode: follow the OS unless the user overrides via the toggle. */
    @media (prefers-color-scheme: light) {
      :root:not([data-theme="dark"]) {
        --bg:#f3f6f9; --panel:#ffffff; --panel2:#f0f4f8; --line:#d3dde6;
        --fg:#12222f; --muted:#4c6072; --accent:#0a66c2; --accent-ink:#ffffff;
        --ok:#1c7a41; --warn:#8a5200; --bad:#b3261e; --info:#5a3ea8;
        --focus:#8a5200;
      }
    }
    :root[data-theme="light"] {
      --bg:#f3f6f9; --panel:#ffffff; --panel2:#f0f4f8; --line:#d3dde6;
      --fg:#12222f; --muted:#4c6072; --accent:#0a66c2; --accent-ink:#ffffff;
      --ok:#1c7a41; --warn:#8a5200; --bad:#b3261e; --info:#5a3ea8;
      --focus:#8a5200;
    }
    * { box-sizing: border-box; }
    #theme { position:absolute; top:.8rem; right:.8rem; min-height:var(--tap); min-width:var(--tap);
      background:var(--panel2); color:var(--fg); border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:1.1rem; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      margin:0; background:var(--bg); color:var(--fg);
      font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    }
    .skip {
      position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-ink);
      padding:.6rem 1rem; border-radius:0 0 8px 0; z-index:10;
    }
    .skip:focus { left:0; }
    :focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }

    header { padding:1.1rem 1rem .6rem; text-align:center; border-bottom:1px solid var(--line); }
    header .wordmark { margin:0; font-size:1.9rem; font-weight:800; letter-spacing:.01em; }
    header p { margin:.5rem auto 0; max-width:34rem; color:var(--muted); font-size:.92rem; }

    main { max-width:44rem; margin:0 auto; padding:1rem; }
    h1,h2,h3 { line-height:1.2; }
    h2 { font-size:1.15rem; margin:1.4rem 0 .6rem; }

    form { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1rem; }
    .field { margin-bottom:.9rem; }
    .field:last-child { margin-bottom:0; }
    label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; }
    select {
      width:100%; min-height:var(--tap); padding:.55rem .7rem; font-size:1rem;
      color:var(--fg); background:var(--panel2); border:1px solid var(--line); border-radius:10px;
    }
    fieldset { border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; margin:0; }
    legend { font-weight:600; font-size:.9rem; padding:0 .3rem; }
    details { margin-top:.9rem; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
    summary { cursor:pointer; padding:.7rem .9rem; min-height:var(--tap); font-weight:600; }
    .prefs-body { padding:0 .9rem .9rem; }
    .choice { display:flex; align-items:center; gap:.5rem; min-height:var(--tap); }
    .choice input { width:1.15rem; height:1.15rem; }
    .choice label { margin:0; font-weight:400; }
    .avoid-grid { display:grid; grid-template-columns:1fr 1fr; gap:.1rem .8rem; }

    button.primary {
      margin-top:1rem; width:100%; min-height:48px; font-size:1.05rem; font-weight:700;
      color:var(--accent-ink); background:var(--accent); border:none; border-radius:12px; cursor:pointer;
    }
    button.primary:disabled { opacity:.55; cursor:default; }

    [role=status] { margin-top:1.2rem; }
    .banner {
      display:flex; gap:.6rem; align-items:flex-start; padding:.85rem 1rem; border-radius:12px;
      border:1px solid var(--line); font-weight:600;
    }
    .banner .big { font-size:1.4rem; line-height:1; }
    .banner.viable { background:color-mix(in srgb, var(--ok) 16%, transparent); border-color:var(--ok); }
    .banner.alternative { background:color-mix(in srgb, var(--warn) 16%, transparent); border-color:var(--warn); }
    .banner.no-route { background:color-mix(in srgb, var(--bad) 16%, transparent); border-color:var(--bad); }
    .banner.insufficient-data { background:color-mix(in srgb, var(--info) 16%, transparent); border-color:var(--info); }

    .synthetic-flag {
      display:inline-flex; gap:.35rem; align-items:center; margin-top:.5rem;
      background:color-mix(in srgb, var(--warn) 22%, transparent); color:var(--fg);
      border:1px solid var(--warn); border-radius:999px; padding:.25rem .7rem; font-size:.82rem; font-weight:700;
    }

    .route-picker { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 .3rem; }
    .route-tab {
      flex:1 1 auto; min-height:var(--tap); border:1px solid var(--line); background:var(--panel);
      color:var(--fg); border-radius:10px; padding:.5rem .8rem; cursor:pointer; font-weight:600; font-size:.9rem;
      display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
    }
    .route-tab[aria-pressed=true] { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent); }
    .route-tab .tag { font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

    .chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 0; padding:0; list-style:none; }
    .chip {
      display:inline-flex; gap:.35rem; align-items:center; background:var(--panel2);
      border:1px solid var(--line); border-radius:999px; padding:.25rem .65rem; font-size:.84rem;
    }

    ol.steps { list-style:none; margin:1rem 0 0; padding:0; counter-reset:step; }
    ol.steps > li {
      position:relative; background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--accent);
      border-radius:12px; padding:.85rem .9rem .9rem 2.9rem; margin-bottom:.7rem;
    }
    ol.steps > li::before {
      counter-increment:step; content:counter(step);
      position:absolute; left:.7rem; top:.85rem; width:1.6rem; height:1.6rem; border-radius:50%;
      background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:.9rem;
      display:flex; align-items:center; justify-content:center;
    }
    .step-mode { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
    .step-instr { margin:.15rem 0 0; font-weight:600; }
    .attrs { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.55rem; padding:0; list-style:none; }
    .attr {
      display:inline-flex; gap:.3rem; align-items:center; font-size:.8rem;
      background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:.2rem .5rem;
    }
    .attr.bad { border-color:var(--bad); color:var(--fg); background:color-mix(in srgb, var(--bad) 14%, transparent); }
    .attr.warn { border-color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent); }
    .attr.ok { border-color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent); }
    .landmarks { margin:.55rem 0 0; font-size:.85rem; color:var(--muted); }
    .landmarks strong { color:var(--fg); }
    .step-photos { display:flex; gap:.5rem; overflow-x:auto; margin-top:.6rem; padding-bottom:.2rem; }
    .step-photos figure { margin:0; flex:0 0 auto; width:150px; }
    .step-photos .photo-open { display:block; padding:0; border:none; background:none; cursor:zoom-in; }
    .step-photos img { width:150px; height:100px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
    .step-photos figcaption { font-size:.72rem; color:var(--muted); margin-top:.2rem; }
    .landmark-btn { font:inherit; font-weight:700; color:var(--fg); background:var(--panel2);
      border:1px solid var(--line); border-radius:8px; padding:.1rem .45rem; cursor:zoom-in; }
    /* Photo modal (native <dialog>). */
    dialog.photo-modal { border:none; background:transparent; max-width:96vw; max-height:96vh; padding:0; }
    dialog.photo-modal::backdrop { background:rgba(0,0,0,.8); }
    .modal-inner { position:relative; }
    .modal-inner img { max-width:96vw; max-height:86vh; border-radius:10px; display:block; }
    .modal-inner figcaption { color:#fff; text-align:center; margin-top:.5rem; font-size:.95rem; }
    .modal-close { position:absolute; top:.5rem; right:.5rem; min-height:44px; min-width:44px;
      background:rgba(0,0,0,.6); color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:10px; font-size:1.2rem; cursor:pointer; }

    .alert {
      margin-top:1rem; padding:.8rem 1rem; border-radius:12px;
      background:color-mix(in srgb, var(--bad) 14%, transparent); border:1px solid var(--bad);
    }
    /* Live re-route update banner (#3). */
    .update {
      margin:1rem 0; padding:.85rem 1rem; border-radius:12px; font-weight:600;
      background:color-mix(in srgb, var(--info) 18%, transparent); border:1px solid var(--info);
    }
    .update.good { background:color-mix(in srgb, var(--ok) 16%, transparent); border-color:var(--ok); }
    .update h3 { margin:0 0 .3rem; font-size:1rem; display:flex; gap:.5rem; align-items:center; }
    .update .what { font-weight:400; margin:.2rem 0 .6rem; }
    .update button { min-height:var(--tap); font-weight:700; color:var(--accent-ink); background:var(--accent);
      border:none; border-radius:10px; padding:.5rem .9rem; cursor:pointer; }
    /* A step whose instruction changed on the last re-route. */
    ol.steps > li.changed { border-left-color:var(--info); background:color-mix(in srgb, var(--info) 10%, transparent); }
    .changed-badge {
      display:inline-flex; gap:.3rem; align-items:center; margin-left:.4rem; vertical-align:middle;
      background:var(--info); color:var(--accent-ink); border-radius:999px; padding:.05rem .5rem; font-size:.68rem; font-weight:800;
      text-transform:uppercase; letter-spacing:.03em;
    }
    /* "Live" indicator: a labelled pill, never colour alone. */
    .live-pill { display:inline-flex; gap:.35rem; align-items:center; margin-left:.5rem;
      font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
      color:var(--ok); border:1px solid var(--ok); border-radius:999px; padding:.05rem .5rem;
      background:color-mix(in srgb, var(--ok) 12%, transparent); }
    .live-pill .pulse { width:.5rem; height:.5rem; border-radius:50%; background:currentColor; }
    @media (prefers-reduced-motion: no-preference) { .live-pill .pulse { animation:pulse 1.8s ease-in-out infinite; } }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
    /* Inline SVG icons: decorative (aria-hidden), inherit text colour, sized to
       the text. Meaning is always carried by an adjacent text label, never the
       icon alone. */
    .ico { width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:2;
      stroke-linecap:round; stroke-linejoin:round; vertical-align:-.18em; flex:0 0 auto; }
    .ico-lg { width:1.5rem; height:1.5rem; }
    .ico-fill { fill:currentColor; stroke:none; }
    .warnings { margin-top:1rem; padding:.8rem 1rem; border-radius:12px;
      background:color-mix(in srgb, var(--warn) 12%, transparent); border:1px solid var(--warn); }
    .warnings h3 { margin:0 0 .35rem; font-size:.92rem; }
    .warnings ul { margin:0; padding-left:1.2rem; }
    .muted { color:var(--muted); }
    .visually-hidden {
      position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
      clip:rect(0 0 0 0); white-space:nowrap; border:0;
    }
    footer { text-align:center; color:var(--muted); font-size:.82rem; padding:1.5rem 1rem 2.5rem; }
    footer a { color:var(--accent); }
    @media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; } }