:root {
    --navy: #003057;       /* GT navy */
    --gold: #B3A369;       /* GT gold */
    --nav-green: #0b6e4f;
    --text: #1f2328;
    --muted: #5f6368;
    --lit: #2e9d4f;
    --shortest: #80868b;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

html, body {
    height: 100%;
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--text);
    overflow: hidden;
}

#map {
    position: absolute;
    inset: 0;
}

/* Lucide line icons (the set at the top of index.html) */
.ico {
    flex: none;
    width: 1.2em;
    height: 1.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Overlays: which ones show depends on body[data-mode] ---- */
#top-stack, #nav-banner, #preview-card, #nav-bar {
    position: absolute;
    left: calc(12px + env(safe-area-inset-left));    /* clear of the notch and rounded corners */
    right: calc(12px + env(safe-area-inset-right));
    z-index: 2;
    display: none;
}

body[data-mode="idle"] #top-stack,
body[data-mode="preview"] #top-stack,
body[data-mode="preview"] #preview-card,
body[data-mode="nav"] #nav-banner,
body[data-mode="nav"] #nav-bar,
body[data-mode="arrived"] #nav-banner,
body[data-mode="arrived"] #nav-bar {
    display: flex;
}

/* ---- Top bar, chips and legend (idle / preview) ---- */
#top-stack {
    top: calc(12px + env(safe-area-inset-top));
    z-index: 3;   /* search suggestions drop over the safety buttons */
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

#top-bar {
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--navy);
    color: white;
    box-shadow: var(--shadow);
}

#top-bar h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.1rem;
    color: var(--gold);
}

.bar-logo {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

#top-bar p {
    margin: 0;
    font-size: 0.9rem;
}

/* ---- Building search (idle) ---- */
#search {
    position: relative;
    align-self: stretch;
}

#search .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

body[data-mode="preview"] #search {
    display: none;
}

#search-input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px 10px 46px;   /* room for the search icon */
    font: inherit;
    font-size: 16px;   /* 16px or more stops iOS zooming in on focus */
    border: none;
    border-radius: 999px;
    background: white;
    box-shadow: var(--shadow);
    appearance: none;
}

#suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 3;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    border-radius: 12px;
    background: white;
    box-shadow: var(--shadow);
}

#suggestions li {
    padding: 12px 16px;
    cursor: pointer;
}

#suggestions li:hover {
    background: #f1f3f4;
}

/* one row that scrolls sideways on narrow screens */
#chips {
    display: flex;
    align-self: stretch;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 2px 8px;   /* room for the chip shadows */
    margin-bottom: -6px;
}

#chips::-webkit-scrollbar {
    display: none;
}

button.chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.85rem;
    background: white;
    color: var(--text);
    box-shadow: var(--shadow);
}

#chip-lights .ico    { color: #f9ab00; }
#chip-callboxes .ico { color: #00a3e0; }
#chip-ada .ico       { color: #8e24aa; }

button.chip[aria-pressed="true"] {
    background: #e8f0fe;
    color: #174ea6;
    font-weight: 600;
}

/* ---- Map layers: a row of chips on wide screens, a menu (top-bar button) on phones ---- */
button.menu-toggle {
    display: none;
    margin-left: auto;
    padding: 6px;
    background: none;
    color: white;
}

button.menu-toggle .ico {
    width: 26px;
    height: 26px;
}

@media (max-width: 699px) {
    button.menu-toggle {
        display: inline-flex;
    }

    #chips {
        display: none;
    }

    body[data-menu="open"] #chips {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 6px 0;
        overflow: visible;
        border-radius: 12px;
        background: white;
        box-shadow: var(--shadow);
    }

    body[data-menu="open"] button.chip {
        justify-content: flex-start;
        gap: 12px;
        min-height: 48px;
        padding: 10px 16px;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--text);
        font-size: 1rem;
        font-weight: normal;
    }

    /* an on/off switch at the end of each row */
    body[data-menu="open"] button.chip::after {
        content: "";
        margin-left: auto;
        width: 40px;
        height: 22px;
        border-radius: 999px;
        background: radial-gradient(circle at 11px 50%, white 8px, transparent 9px) #dadce0;
    }

    body[data-menu="open"] button.chip[aria-pressed="true"]::after {
        background: radial-gradient(circle at 29px 50%, white 8px, transparent 9px) #1a73e8;
    }
}

/* map-symbol keys: match the circle / line colours in script.js */
.key {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.key.light        { background: #f9ab00; box-shadow: 0 0 0 3px rgba(251, 188, 4, 0.3); }
.key.light-broken { background: #9aa0a6; }

#legend {
    display: none;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

body[data-accessible="true"] #legend,
body[data-lights="true"] #legend {
    display: flex;
}

#legend > span {
    display: none;
    align-items: center;
    gap: 5px;
}

body[data-accessible="true"] #legend > .access-key,
body[data-lights="true"] #legend > .lights-key {
    display: inline-flex;
}

.key-line {
    width: 16px;
    height: 4px;
    border-radius: 2px;
}

.key-line.steps  { background: #d93025; }
.key-line.no     { background: #f29900; }
.key-line.closed { background: #3c4043; }

/* ---- Next-turn banner (nav) ---- */
#nav-banner {
    top: calc(12px + env(safe-area-inset-top));
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--nav-green);
    color: white;
    box-shadow: var(--shadow);
}

#turn-arrow {
    display: flex;
    justify-content: center;
    width: 48px;
}

#turn-arrow .ico {
    width: 44px;
    height: 44px;
    stroke-width: 2.5;
}

#turn-distance {
    font-size: 1.6rem;
    font-weight: 700;
}

#turn-text {
    font-size: 1.05rem;
    opacity: 0.95;
}

/* ---- Bottom sheets (preview / nav) ---- */
.sheet {
    bottom: calc(12px + env(safe-area-inset-bottom));   /* above the home bar */
    padding: 14px 16px;
    border-radius: 16px;
    background: white;
    box-shadow: var(--shadow);
}

#preview-card {
    flex-direction: column;
    gap: 10px;
    max-height: 60%;   /* a phone on its side: scroll the card rather than cover the map */
    overflow-y: auto;
}

.route-option {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -8px;
    padding: 6px 8px;
    border-radius: 12px;
    cursor: pointer;
}

/* the option Start will follow */
.route-option.selected {
    background: #e8f0fe;
    box-shadow: inset 0 0 0 2px #1a73e8;
}

.route-option strong {
    display: block;
    font-size: 1.1rem;
}

.route-option .detail {
    color: var(--muted);
    font-size: 0.9rem;
}

.route-option .warning {
    display: block;
    margin-top: 2px;
    color: #b06000;
    font-size: 0.85rem;
    font-weight: 600;
}

.route-option .warning .ico {
    width: 1em;
    height: 1em;
    margin-right: 4px;
    vertical-align: -0.15em;
}

.route-option .warning.ok {
    color: var(--lit);
}

.route-option .warning:empty {
    display: none;
}

.route-option > div {
    flex: 1;
}

.swatch {
    width: 6px;
    height: 36px;
    border-radius: 3px;
}

.safe .swatch     { background: var(--lit); }
.shortest .swatch { background: repeating-linear-gradient(var(--shortest) 0 6px, transparent 6px 10px); }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e6f4ea;
    color: var(--lit);
}

.tag.muted {
    background: #f1f3f4;
    color: var(--muted);
}

.tag.bus-tag {
    background: #fef7e0;
    color: #b06000;
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

#nav-bar {
    align-items: center;
    gap: 12px;
}

#nav-bar > div {
    flex: 1;
}

#nav-bar strong {
    display: block;
    font-size: 1.3rem;
    color: var(--nav-green);
}

#nav-bar span {
    color: var(--muted);
    font-size: 0.9rem;
}

/* ---- Buttons ---- */
button {
    font: inherit;
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
}

button.primary, button.secondary, button.danger, button.icon, button.floating, a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

button.primary   { flex: 2; background: #1a73e8; color: white; font-weight: 600; }
button.secondary { flex: 1; background: #f1f3f4; color: var(--text); }
button.danger    { background: #d93025; color: white; font-weight: 600; }
button.icon      { background: #f1f3f4; padding: 10px 12px; }

button.floating {
    position: absolute;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(100px + env(safe-area-inset-bottom));
    z-index: 2;
    background: white;
    color: #1a73e8;
    font-weight: 600;
    box-shadow: var(--shadow);
}

button[hidden] {
    display: none;
}

/* ---- Safety buttons: on screen in every mode, between the top bar and the bottom sheets ---- */
#safety {
    position: absolute;
    right: calc(12px + env(safe-area-inset-right));
    top: 45%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    transform: translateY(-50%);
}

/* compact labelled tiles, so they don't hide the map on a phone */
button.safety-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 64px;
    padding: 8px 4px;
    border-radius: 16px;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.15;
    box-shadow: var(--shadow);
}

.safety-btn .ico {
    width: 24px;
    height: 24px;
}

button.safety-btn.report { background: white; color: var(--navy); }
button.safety-btn.unsafe { background: #b06000; }
button.safety-btn.gtpd   { background: #d93025; }

/* ---- Pop-ups (emergency contact, after "I feel unsafe", call GTPD) ---- */
dialog {
    box-sizing: border-box;
    width: min(360px, calc(100vw - 32px));
    padding: 20px;
    border: none;
    border-radius: 16px;
    box-shadow: var(--shadow);
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

dialog h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

dialog p {
    margin: 0 0 16px;
    color: var(--muted);
}

dialog label {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
}

dialog input, .signin-card input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    font: inherit;
    font-size: 16px;   /* no iOS zoom on focus */
    border: 1px solid #dadce0;
    border-radius: 10px;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

button.link {
    background: none;
    color: #1a73e8;
}

a.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
}

a.button.danger {
    flex: 2;
    background: #d93025;
    color: white;
    font-weight: 600;
}

.account {
    margin: 16px 0 0;
    font-size: 0.85rem;
}

.account button.link {
    padding: 0;
}

/* ---- Sign-in screen: covers the map until you're signed in ---- */
#signin {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 48, 87, 0.88);   /* GT navy over the map */
}

#signin[hidden] {
    display: none;
}

.signin-card {
    box-sizing: border-box;
    width: min(380px, 100%);
    padding: 24px;
    border-radius: 16px;
    background: #fbf9ed;   /* the logo's own cream, so the logo blends in */
    box-shadow: var(--shadow);
}

.signin-card h1 {
    margin: 0 0 8px;
}

.signin-logo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
}

.signin-card p {
    margin: 0 0 16px;
    color: var(--muted);
}

.signin-card form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.signin-card form[hidden] {
    display: none;
}

.signin-card p.credit {
    font-size: 0.8rem;
    font-style: italic;
}

.signin-card label {
    font-weight: 600;
}

.signin-card .error {
    margin: 12px 0 0;
    color: #d93025;
    font-weight: 600;
}

.signin-card .error:empty {
    display: none;
}

/* ---- Crowd reports ---- */
/* on the map: dashed until a second person confirms, then solid red */
button.report-marker {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px dashed #5f6368;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #5f6368;
    box-shadow: var(--shadow);
}

button.report-marker .ico {
    width: 18px;
    height: 18px;
}

button.report-marker.confirmed {
    border: 2px solid #d93025;
    background: white;
    color: #d93025;
}

button.remove-report {
    display: block;
    margin-top: 6px;
    padding: 4px 0;
    font-size: 0.9rem;
}

/* the pin you drag when reporting */
.report-pin {
    color: #d93025;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
    cursor: grab;
}

.report-pin .ico {
    width: 42px;
    height: 42px;
    fill: white;
}

#report-bar-title, #still-here-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

#report-kinds button.secondary {
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 18px;
}

#report-bar {
    position: absolute;
    left: calc(12px + env(safe-area-inset-left));
    right: calc(12px + env(safe-area-inset-right));
    z-index: 4;   /* over the route card and nav bar while you place the pin */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#report-bar span {
    display: block;
    color: var(--muted);
    font-size: 0.9rem;
}

/* while navigating, just above the bottom bar */
#still-here {
    position: absolute;
    left: calc(12px + env(safe-area-inset-left));
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(100px + env(safe-area-inset-bottom));
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#report-bar[hidden], #still-here[hidden], #toast[hidden] {
    display: none;
}

/* short messages ("Thanks, reported…"), over the top bar for a few seconds */
#toast {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    right: calc(12px + env(safe-area-inset-right));
    z-index: 5;
    padding: 14px 16px;
    border-radius: 12px;
    background: #202124;
    color: white;
    font-weight: 600;
    box-shadow: var(--shadow);
}

/* ---- You-are-here marker ---- */
.you {
    width: 22px;
    height: 22px;
    position: relative;
}

.you .dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #1a73e8;
    border: 3px solid white;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* direction cone, shown while navigating */
.you .cone {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 34px solid rgba(26, 115, 232, 0.25);
    display: none;
}

body[data-mode="nav"] .you .cone {
    display: block;
}

/* ---- Live bus markers (border = route colour, set in script.js) ---- */
.bus-marker {
    width: 18px;
    height: 18px;
    border: 2px solid #5f6368;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.bus-marker .ico {
    width: 12px;
    height: 12px;
}