/* Colour tokens mirror the Android app's Material 3 theme (ui/theme/Color.kt). */
:root {
    --primary: #000A3D;
    --primary-container: #001A70;
    --on-primary: #FFFFFF;
    --on-primary-container: #FFFFFF;
    --secondary: #006097;
    --background: #FBF8FF;
    --surface: #FFFFFF;
    --surface-container: #EFEDF5;
    --surface-container-high: #E9E7EF;
    --on-surface: #1B1B21;
    --on-surface-variant: #454651;
    --outline: #757683;
    --outline-variant: #C5C5D3;
    --error: #7E001B;
    --shadow: rgba(0, 10, 61, .18);

    --price-deep-green: #004D40;
    --price-green: #2E7D32;
    --price-light-green: #689F38;
    --price-orange: #F57C00;
    --price-red: #D32F2F;

    --app-bar-height: 3.5rem;
    --radius: .75rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #B9C3FF;
        --primary-container: #001A70;
        --on-primary: #12277A;
        --on-primary-container: #D6DAFF;
        --secondary: #97CBFF;
        --background: #121318;
        --surface: #1B1B21;
        --surface-container: #1F1F25;
        --surface-container-high: #292A2F;
        --on-surface: #E3E1E9;
        --on-surface-variant: #C5C5D3;
        --outline: #8F909D;
        --outline-variant: #454651;
        --error: #FFB3B3;
        --shadow: rgba(0, 0, 0, .5);
    }
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    background: var(--background);
    color: var(--on-surface);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- app bar */

.app-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    /* Installed on iOS the page runs under the status bar and the home
       indicator, so every edge-anchored element pads by its safe-area inset.
       The insets are 0 in a normal browser tab, leaving the layout unchanged. */
    min-height: calc(var(--app-bar-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) calc(.75rem + env(safe-area-inset-right))
             0 calc(.75rem + env(safe-area-inset-left));
    background: var(--primary-container);
    color: #FFFFFF;
    box-shadow: 0 1px 4px var(--shadow);
    z-index: 3;
}

.app-bar__logo { border-radius: .375rem; flex: none; }

.app-bar__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .01em;
    flex: none;
}

.search {
    flex: 1 1 auto;
    max-width: 26rem;
    margin-left: auto;
    position: relative;
    display: flex;
}

.search__input {
    width: 100%;
    height: 2.25rem;
    padding: 0 2rem 0 .75rem;
    border: none;
    border-radius: 1.125rem;
    background: rgba(255, 255, 255, .16);
    color: #FFFFFF;
    font: inherit;
    font-size: .875rem;
}

.search__input::placeholder { color: rgba(255, 255, 255, .7); }
.search__input:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 1px; }
.search__input::-webkit-search-cancel-button { display: none; }

.search__clear {
    position: absolute;
    right: .25rem; top: 50%;
    transform: translateY(-50%);
    width: 1.75rem; height: 1.75rem;
    border: none; border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

/* ------------------------------------------------------------------ layout */

.layout {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.map { position: absolute; inset: 0; background: var(--surface-container); }

/* ------------------------------------------------------- no-map fallback */

.fallback {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 5.5rem .75rem calc(1rem + env(safe-area-inset-bottom));
    padding-left: calc(.75rem + env(safe-area-inset-left));
    padding-right: calc(.75rem + env(safe-area-inset-right));
    overflow-y: auto;
    list-style: none;
    background: var(--background);
    z-index: 1;
}

.fallback__item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .625rem .75rem;
    margin-bottom: .375rem;
    border: none;
    border-radius: var(--radius);
    background: var(--surface-container);
    color: var(--on-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fallback__item:hover { background: var(--surface-container-high); }
.fallback__logo { width: 1.75rem; height: 1.75rem; object-fit: contain; flex: none; }
.fallback__text { min-width: 0; }
.fallback__name { display: block; font-size: .875rem; font-weight: 600; }

.fallback__address {
    display: block;
    font-size: .75rem;
    color: var(--on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fallback__price {
    margin-left: auto;
    padding: .25rem .5rem;
    border-radius: .5rem;
    color: #FFFFFF;
    font-size: .875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- controls */

.brand-filter, .fuel-type-filter { position: relative; }

.brand-menu {
    position: absolute;
    bottom: calc(100% + .375rem);
    right: 0;
    width: 15rem;
    max-height: min(60vh, 24rem);
    overflow-y: auto;
    padding: .25rem;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 4px 16px var(--shadow);
}

.brand-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .4375rem .5rem;
    border: none; border-radius: .5rem;
    background: transparent;
    color: var(--on-surface);
    font: inherit;
    font-size: .8125rem;
    text-align: left;
    cursor: pointer;
}

.brand-option:hover { background: var(--surface-container); }
.brand-option[aria-selected="true"] { background: var(--surface-container-high); font-weight: 600; }
.brand-option img { width: 1.25rem; height: 1.25rem; object-fit: contain; flex: none; }
.brand-option__count { margin-left: auto; color: var(--on-surface-variant); font-size: .75rem; }

.fuel-type-menu {
    position: absolute;
    bottom: calc(100% + .375rem);
    right: 0;
    width: 10rem;
    max-height: min(60vh, 24rem);
    overflow-y: auto;
    padding: .25rem;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 4px 16px var(--shadow);
}

.fuel-type-option {
    display: block;
    width: 100%;
    padding: .4375rem .5rem;
    border: none; border-radius: .5rem;
    background: transparent;
    color: var(--on-surface);
    font: inherit;
    font-size: .8125rem;
    text-align: left;
    cursor: pointer;
}

.fuel-type-option:hover { background: var(--surface-container); }
.fuel-type-option[aria-selected="true"] { background: var(--surface-container-high); font-weight: 600; }

/* --------------------------------------------------------------- fab stack */

/* Mirrors the Android app's Scaffold FAB column: brand filter above the
   locate button, anchored to the bottom-right corner of the map. */
.fab-stack {
    position: absolute;
    right: calc(.75rem + env(safe-area-inset-right));
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .625rem;
    z-index: 2;
}

/* The detail panel anchors to the same corner, so hide the stack rather than
   let them overlap — matching the Android sheet covering the FABs. */
#detail:not([hidden]) ~ .fab-stack { display: none; }

.fab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-width: 3.5rem;
    height: 3.5rem;
    padding: 0 1rem;
    border: none;
    border-radius: 1.75rem;
    background: var(--surface);
    color: var(--on-surface);
    box-shadow: 0 2px 8px var(--shadow);
    font: inherit;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
}

.fab--primary {
    width: 3.5rem;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.fab--primary[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

/* Coloured like the locate FAB: mirrors FuelBrandSelectorFAB.kt and
   FuelTypeSelectorFAB.kt, which both default to primaryContainer/onPrimaryContainer. */
.fab--accent {
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.fab--square {
    min-width: 3rem;
    height: 3rem;
    padding: 0 .875rem;
    border-radius: .75rem;
    font-weight: 700;
}

/* ------------------------------------------------------------------ status */

.status {
    position: absolute;
    left: 50%; bottom: 1rem;
    transform: translateX(-50%);
    margin: 0;
    padding: .5rem .875rem;
    max-width: calc(100% - 2rem);
    border-radius: 1rem;
    background: var(--surface);
    color: var(--on-surface-variant);
    box-shadow: 0 2px 8px var(--shadow);
    font-size: .8125rem;
    text-align: center;
    z-index: 2;
}

.status:empty { display: none; }
.status[data-tone="error"] { color: var(--error); }

/* ------------------------------------------------------------------ marker */

.price-marker {
    display: flex;
    align-items: center;
    gap: .1875rem;
    padding: .1875rem .375rem;
    border: 1.5px solid #FFFFFF;
    border-radius: .5rem;
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    cursor: pointer;
    transform: translateY(-50%);
}

.price-marker--selected {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    z-index: 1;
}

.price-marker--cheapest::before {
    content: "★";
    font-size: .6875rem;
}

/* Brand logos are drawn for their own light backgrounds, so they need a white
   chip of their own to stay readable on top of the price colour. */
.price-marker__logo {
    flex: none;
    width: .875rem;
    height: .875rem;
    padding: .0625rem;
    border-radius: .1875rem;
    background: #FFFFFF;
    object-fit: contain;
}

/* ------------------------------------------------------------------ detail */

.detail {
    position: absolute;
    right: calc(.75rem + env(safe-area-inset-right));
    bottom: .75rem;
    width: min(22rem, calc(100% - 1.5rem));
    max-height: min(70%, 34rem);
    overflow-y: auto;
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 6px 24px var(--shadow);
    z-index: 3;
}

.detail__close {
    position: absolute;
    top: .5rem; right: .5rem;
    width: 2rem; height: 2rem;
    border: none; border-radius: 50%;
    background: var(--surface-container);
    color: var(--on-surface-variant);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.detail__header { display: flex; align-items: center; gap: .625rem; padding-right: 2rem; }
.detail__logo { width: 2.25rem; height: 2.25rem; object-fit: contain; flex: none; }
.detail__name { margin: 0; font-size: 1rem; font-weight: 600; }
.detail__brand { margin: .0625rem 0 0; font-size: .8125rem; color: var(--on-surface-variant); }

.detail__meta { margin: .75rem 0 0; font-size: .8125rem; color: var(--on-surface-variant); }
.detail__meta a { color: var(--secondary); }

.detail__actions { display: flex; gap: .5rem; margin-top: .75rem; }

.detail__action {
    flex: 1 1 0;
    padding: .5rem;
    border: 1px solid var(--outline-variant);
    border-radius: .5rem;
    background: transparent;
    color: var(--secondary);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.detail__action:hover { background: var(--surface-container); }

.detail__section-title {
    margin: 1rem 0 .375rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.price-list { display: grid; gap: .375rem; }

.price-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .625rem;
    border-radius: .5rem;
    background: var(--surface-container);
}

.price-row--selected { outline: 1.5px solid var(--primary); }
.price-row__type { font-size: .8125rem; font-weight: 600; }
.price-row__updated { margin-left: auto; font-size: .6875rem; color: var(--on-surface-variant); }

.price-row__value {
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.price-row__value small { font-size: .75rem; font-weight: 600; }

.hours-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.hours-table th { width: 3rem; text-align: left; font-weight: 500; color: var(--on-surface-variant); }
.hours-table td { text-align: right; font-variant-numeric: tabular-nums; }
.hours-table tr[data-today="true"] th, .hours-table tr[data-today="true"] td { font-weight: 700; color: var(--on-surface); }

/* ------------------------------------------------------------- fuel trend */

/* Mirrors FuelTrendWidget.kt: an elevated 24dp-radius pill on the surface
   colour, with a 24dp icon and bold label both tinted by the trend colour. */
.trend {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border: none;
    border-radius: 1.5rem;
    background: var(--surface);
    color: var(--trend-colour);
    box-shadow: 0 3px 12px var(--shadow);
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
}

.trend[hidden] { display: none; }
.trend svg { flex: none; }

/* Compose animates this in with fadeIn + slideInVertically. */
@media (prefers-reduced-motion: no-preference) {
    .trend { animation: trend-in .25s ease-out; }
}

@keyframes trend-in {
    from { opacity: 0; transform: translate(-50%, -.5rem); }
    to { opacity: 1; transform: translateX(-50%); }
}

.trend-dialog {
    width: min(28rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: none;
    border-radius: .75rem;
    /* Material 3 surfaceVariant; this palette's nearest token. */
    background: var(--surface-container-high);
    color: var(--on-surface);
    box-shadow: 0 8px 32px var(--shadow);
    overflow: hidden;
}

.trend-dialog::backdrop { background: rgba(0, 0, 0, .5); }

/* Only ever [open]: an unqualified display rule would beat the UA stylesheet's
   dialog:not([open]) { display: none } and leave the card on screen always. */
.trend-dialog[open] { display: flex; }

/* The 6dp full-height colour bar down the leading edge of the card. */
.trend-dialog__accent { flex: none; width: .375rem; background: var(--trend-colour); }
.trend-dialog__body { flex: 1 1 auto; padding: 1.25rem; min-width: 0; }

.trend-dialog__header { display: flex; align-items: center; gap: .75rem; }

.trend-dialog__badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    background: var(--trend-colour);
    color: #FFFFFF;
}

.trend-dialog__title {
    margin: 0;
    color: var(--trend-colour);
    font-size: 1.125rem;
    font-weight: 800;
}

/* The inner elevated card holding the three-bar chart. */
.trend-dialog__chart {
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: .5rem;
    background: var(--surface);
    box-shadow: 0 1px 4px var(--shadow);
}

.trend-dialog__labels, .trend-dialog__bars { display: flex; gap: .5rem; }
.trend-dialog__labels { justify-content: space-between; margin-bottom: .5rem; }
.trend-dialog__bars { align-items: flex-end; }

.trend-dialog__label {
    flex: 1 1 0;
    font-size: .875rem;
    font-weight: 700;
    color: var(--on-surface-variant);
}

/* Compose lays the labels out SpaceBetween, so the outer two hug the edges. */
.trend-dialog__label:nth-child(2) { text-align: center; }
.trend-dialog__label:last-child { text-align: right; }
.trend-dialog__label--active { color: var(--trend-colour); }

.trend-dialog__bar {
    flex: 1 1 0;
    height: .5rem;
    border-radius: .25rem;
    background: var(--surface-container-high);
}

.trend-dialog__bar--active { height: 1rem; background: var(--trend-colour); }

.trend-dialog__reasoning {
    margin: 1.25rem 0 0;
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--on-surface-variant);
}

.trend-dialog__reasoning strong { color: var(--on-surface); font-weight: 700; }

.trend-dialog__updated {
    margin: 1rem 0 0;
    font-size: .75rem;
    color: var(--on-surface-variant);
    opacity: .7;
}

.trend-dialog__close {
    display: block;
    margin: 1.25rem 0 0 auto;
    padding: .5rem 1rem;
    border: none;
    border-radius: .5rem;
    background: transparent;
    color: var(--secondary);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.trend-dialog__close:hover { background: var(--surface-container); }

/* ------------------------------------------------------------------ legend */

.legend {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem calc(.75rem + env(safe-area-inset-right))
             calc(.375rem + env(safe-area-inset-bottom)) calc(.75rem + env(safe-area-inset-left));
    background: var(--surface-container);
    color: var(--on-surface-variant);
    font-size: .6875rem;
}

.legend__content { display: contents; }
.legend__swatch { width: 1.25rem; height: .5rem; border-radius: .25rem; }
.legend a { color: var(--secondary); }

/* margin-left:auto pins it to the trailing edge, including when there is no
   price data and #legend-content is empty. */
.legend__privacy {
    margin-left: auto;
    padding-left: .625rem;
    white-space: nowrap;
    text-decoration: underline;
}

@media (max-width: 40rem) {
    .app-bar {
        flex-wrap: wrap;
        min-height: 0;
        padding: calc(.5rem + env(safe-area-inset-top)) calc(.625rem + env(safe-area-inset-right))
                 .5rem calc(.625rem + env(safe-area-inset-left));
    }
    .app-bar__title { font-size: 1rem; }
    .search { order: 3; flex-basis: 100%; max-width: none; margin: .5rem 0 0; }

    .detail {
        left: calc(.5rem + env(safe-area-inset-left));
        right: calc(.5rem + env(safe-area-inset-right));
        bottom: .5rem;
        width: auto;
        max-height: 62%;
    }

    .status { bottom: .5rem; }
    .legend { font-size: .625rem; }

    .fab-stack {
        right: calc(.5rem + env(safe-area-inset-right));
        bottom: calc(.5rem + env(safe-area-inset-bottom));
    }
}