:root {
    color-scheme: light dark;

    --page: #f5f5f1;
    --card: #ffffff;
    --text: #191b18;
    --muted: #6e716c;
    --line: #e2e4df;

    --green: #74966d;
    --green-dark: #456940;

    --amber: #956716;
    --amber-soft: #f6edd8;

    --red: #a34841;

    --shadow:
        0 1px 2px rgba(0, 0, 0, .04),
        0 5px 18px rgba(0, 0, 0, .05);
}


* {
    box-sizing: border-box;
}


html {
    -webkit-text-size-adjust: 100%;
}


body {
    margin: 0;

    min-height: 100vh;

    background: var(--page);
    color: var(--text);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.page {
    width: min(100%, 920px);

    margin: 0 auto;

    padding:
        env(safe-area-inset-top)
        16px
        calc(
            28px
            + env(safe-area-inset-bottom)
        );
}


.topbar {
    min-height: 74px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    border-bottom:
        1px solid var(--line);
}


.brand {
    font-size:
        clamp(25px, 7vw, 34px);

    font-weight: 650;

    letter-spacing: -.04em;
}


.weather {
    flex: none;

    color: var(--muted);

    font-size: 14px;

    font-weight: 550;
}


.bus-section {
    padding-top: 25px;
}


.section-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 14px;
}


.eyebrow {
    color: var(--green-dark);

    margin-bottom: 2px;

    font-size: 11px;

    font-weight: 750;

    letter-spacing: .09em;

    text-transform: uppercase;
}


h1 {
    margin: 0;

    font-size:
        clamp(28px, 8vw, 38px);

    line-height: 1.05;

    letter-spacing: -.035em;
}


.live-status {
    padding-bottom: 3px;

    color: var(--muted);

    font-size: 11px;

    text-align: right;
}


.stops {
    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;
}


.stop-card,
.loading-card {
    overflow: hidden;

    background: var(--card);

    border:
        1px solid var(--line);

    border-radius: 17px;

    box-shadow: var(--shadow);
}


.loading-card {
    padding: 24px 20px;

    color: var(--muted);

    font-size: 15px;
}


.stop-header {
    padding:
        17px 19px
        12px;
}


.stop-name-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;
}


.stop-name {
    margin: 0;

    font-size: 20px;

    font-weight: 700;

    letter-spacing: -.02em;
}


.stale-chip {
    flex: none;

    padding: 5px 8px;

    border-radius: 8px;

    background:
        var(--amber-soft);

    color: var(--amber);

    font-size: 10px;

    font-weight: 700;
}


.departures {
    margin: 0;
    padding: 0;

    list-style: none;
}


.departure {
    min-height: 70px;

    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items: center;

    gap: 12px;

    margin: 0 19px;

    padding: 12px 0;

    border-top:
        1px solid var(--line);
}


.line-badge {
    min-width: 46px;
    height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 9px;

    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-size: 20px;

    font-weight: 750;

    font-variant-numeric:
        tabular-nums;
}


.departure-main {
    min-width: 0;
}


.direction {
    overflow: hidden;

    font-size: 15px;

    font-weight: 630;

    line-height: 1.25;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.meta {
    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.3;
}


.time {
    min-width: 70px;

    color: var(--green-dark);

    font-size: 16px;

    font-weight: 720;

    text-align: right;

    white-space: nowrap;

    font-variant-numeric:
        tabular-nums;
}


.time.warning {
    color: var(--amber);
}


.time.cancelled {
    color: var(--red);
}


.delay {
    color: var(--amber);

    font-weight: 700;
}


.cancelled-text {
    color: var(--red);

    font-weight: 700;
}


.no-departures {
    margin: 0 19px;

    padding: 16px 0 19px;

    border-top:
        1px solid var(--line);

    color: var(--muted);

    font-size: 13px;
}


.footer {
    display: flex;

    flex-wrap: wrap;
    justify-content: center;

    gap: 6px;

    padding:
        23px 4px 8px;

    color: var(--muted);

    font-size: 10px;

    text-align: center;
}


@media (min-width: 760px) {

    .page {
        padding-left: 28px;
        padding-right: 28px;
    }

    .stops {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (
    prefers-color-scheme: dark
) {

    :root {
        --page: #121411;
        --card: #191c18;
        --text: #f0f2ed;
        --muted: #a2a69e;
        --line: #2c302a;

        --green: #668d61;
        --green-dark: #aacaa3;

        --amber: #e2b45d;
        --amber-soft: #392d17;

        --red: #ef938d;

        --shadow: none;
    }

}

/* SMEDJEGATAN LINE COLORS V0.3.1 START */

/*
 * Harmoniserade skärmfärger.
 *
 * Färgfamiljen följer fortfarande respektive
 * busslinjes visuella identitet, men nyanserna
 * är mjukare än tryck-/profilfärgerna.
 */

.line-badge.line-1 {
    background: #5998BD;
    color: #1b1b18;
}

.line-badge.line-2 {
    background: #6AA664;
    color: #1b1b18;
}

.line-badge.line-3 {
    background: #DD4E6C;
    color: #ffffff;
}

.line-badge.line-4 {
    background: #EB9255;
    color: #1b1b18;
}

.line-badge.line-5 {
    background: #8F5E52;
    color: #ffffff;
}

.line-badge.line-6 {
    background: #6AA664;
    color: #1b1b18;
}

.line-badge.line-7 {
    background: #B254A6;
    color: #ffffff;
}

.line-badge.line-8 {
    background: #79598B;
    color: #ffffff;
}

.line-badge.line-9 {
    background: #F78DCB;
    color: #1b1b18;
}

.line-badge.line-12,
.line-badge.line-14,
.line-badge.line-15 {
    background: #939191;
    color: #1b1b18;
}

/*
 * Regiontrafik:
 * dämpad grön som passar sidans övriga design.
 */
.line-badge.line-region {
    background: #6F9568;
    color: #ffffff;
}

.line-badge.line-other {
    background: #858A84;
    color: #ffffff;
}

/* SMEDJEGATAN LINE COLORS V0.3.1 END */


/* SMEDJEGATAN WEATHER V0.3 START */

.weather {
    min-width: 72px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 5px;

    color: var(--text);

    font-size: 16px;
    font-weight: 650;

    white-space: nowrap;

    font-variant-numeric:
        tabular-nums;
}

/* SMEDJEGATAN WEATHER V0.3 END */

/* SMEDJEGATAN RESTAURANTS V0.4 START */

.places-section {
    padding-top: 34px;
}

.places-heading h2 {
    margin: 0;

    font-size:
        clamp(27px, 7vw, 36px);

    line-height: 1.08;

    letter-spacing: -.03em;
}

.places {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.place-card {
    padding: 17px 19px;

    background: var(--card);

    border:
        1px solid var(--line);

    border-radius: 17px;

    box-shadow: var(--shadow);
}

.place-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
}

.place-title {
    min-width: 0;
}

.place-title > a {
    color: var(--text);

    font-size: 18px;
    font-weight: 700;

    letter-spacing: -.015em;

    text-decoration: none;
}

.place-title > a:hover {
    text-decoration: underline;
}

.place-address {
    margin-top: 5px;

    color: var(--muted);

    font-size: 13px;
}

.place-status {
    flex: none;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 1px;

    padding: 7px 10px;

    border-radius: 10px;

    text-align: right;

    white-space: nowrap;
}

.place-status strong {
    font-size: 13px;
}

.place-status span {
    font-size: 12px;
}

.place-status.open {
    background: #E8F5EE;
    color: #256B4B;
}

.place-status.closed {
    background: #F0F2F4;
    color: #626A73;
}

.place-source {
    margin-top: 12px;

    color: var(--muted);

    font-size: 10px;
}

.place-source a {
    color: inherit;
}

.place-warning {
    margin-top: 11px;

    padding: 7px 9px;

    border-radius: 8px;

    background: #FFF3D7;
    color: #865F12;

    font-size: 11px;
}


@media (min-width: 760px) {

    .places {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (
    prefers-color-scheme: dark
) {

    .place-status.open {
        background: #18392C;
        color: #8ED8B3;
    }

    .place-status.closed {
        background: #282D33;
        color: #B9C0C8;
    }

    .place-warning {
        background: #3D3219;
        color: #E8C46F;
    }

}

/* SMEDJEGATAN RESTAURANTS V0.4 END */

/* ==========================================================
   SMEDJEGATAN THEME V0.5 START
   ========================================================== */

:root {
    color-scheme: light;

    --page: #F8FAFC;
    --card: #FFFFFF;

    --text: #0F172A;
    --muted: #64748B;

    --line: #E2E8F0;

    /*
     * Legacy variable names are retained because
     * existing components already reference them.
     * They now represent the new blue palette.
     */
    --green: #3B82F6;
    --green-dark: #2563EB;

    --primary: #3B82F6;
    --accent: #22D3EE;

    --amber: #A16207;
    --amber-soft: #FFF7E6;

    --red: #B91C1C;

    --shadow:
        0 1px 2px rgba(15, 23, 42, .05),
        0 8px 24px rgba(15, 23, 42, .06);
}


:root[data-theme="light"] {
    color-scheme: light;

    --page: #F8FAFC;
    --card: #FFFFFF;

    --text: #0F172A;
    --muted: #64748B;

    --line: #E2E8F0;

    --green: #3B82F6;
    --green-dark: #2563EB;

    --primary: #3B82F6;
    --accent: #22D3EE;

    --amber: #A16207;
    --amber-soft: #FFF7E6;

    --red: #B91C1C;

    --shadow:
        0 1px 2px rgba(15, 23, 42, .05),
        0 8px 24px rgba(15, 23, 42, .06);
}


:root[data-theme="dark"] {
    color-scheme: dark;

    --page: #0B1220;
    --card: #111827;

    --text: #F1F5F9;
    --muted: #94A3B8;

    --line: #253247;

    --green: #60A5FA;
    --green-dark: #60A5FA;

    --primary: #60A5FA;
    --accent: #22D3EE;

    --amber: #F4C46A;
    --amber-soft: #352A16;

    --red: #FCA5A5;

    --shadow:
        0 1px 2px rgba(0, 0, 0, .18),
        0 10px 30px rgba(0, 0, 0, .18);
}


@media (
    prefers-color-scheme: dark
) {

    :root:not([data-theme]) {
        color-scheme: dark;

        --page: #0B1220;
        --card: #111827;

        --text: #F1F5F9;
        --muted: #94A3B8;

        --line: #253247;

        --green: #60A5FA;
        --green-dark: #60A5FA;

        --primary: #60A5FA;
        --accent: #22D3EE;

        --amber: #F4C46A;
        --amber-soft: #352A16;

        --red: #FCA5A5;

        --shadow:
            0 1px 2px rgba(0, 0, 0, .18),
            0 10px 30px rgba(0, 0, 0, .18);
    }

}


html,
body {
    background: var(--page);
}


body {
    transition:
        background-color .16s ease,
        color .16s ease;
}


.brand-tld {
    color: var(--accent);
}


.header-actions {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-left: auto;
}


.header-actions .weather {
    margin-left: 0;
}


.theme-toggle {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid var(--line);

    border-radius: 999px;

    background: var(--card);
    color: var(--text);

    box-shadow:
        0 1px 2px
        rgba(15, 23, 42, .05);

    cursor: pointer;

    font: inherit;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        border-color .15s ease,
        background-color .15s ease,
        transform .1s ease;
}


.theme-toggle:hover {
    border-color:
        var(--primary);
}


.theme-toggle:active {
    transform:
        scale(.95);
}


.theme-toggle:focus-visible {
    outline:
        2px solid var(--primary);

    outline-offset:
        2px;
}


.theme-toggle-icon {
    display: block;

    font-size: 16px;
    line-height: 1;
}


/*
 * Open/closed status now follows the cool palette rather
 * than the old moss-green design.
 */

.place-status.open {
    border:
        1px solid #BFDBFE;

    background:
        #EFF6FF;

    color:
        #1D4ED8;
}


.place-status.closed {
    border:
        1px solid #E2E8F0;

    background:
        #F1F5F9;

    color:
        #64748B;
}


.place-warning {
    border:
        1px solid #FDE68A;

    background:
        #FFF7E6;

    color:
        #92400E;
}


:root[data-theme="dark"]
.place-status.open {
    border-color:
        #1E4770;

    background:
        #10253D;

    color:
        #7DD3FC;
}


:root[data-theme="dark"]
.place-status.closed {
    border-color:
        #2B394D;

    background:
        #182233;

    color:
        #94A3B8;
}


:root[data-theme="dark"]
.place-warning {
    border-color:
        #604A1E;

    background:
        #352A16;

    color:
        #F4C46A;
}


@media (
    prefers-color-scheme: dark
) {

    :root:not([data-theme])
    .place-status.open {
        border-color:
            #1E4770;

        background:
            #10253D;

        color:
            #7DD3FC;
    }


    :root:not([data-theme])
    .place-status.closed {
        border-color:
            #2B394D;

        background:
            #182233;

        color:
            #94A3B8;
    }


    :root:not([data-theme])
    .place-warning {
        border-color:
            #604A1E;

        background:
            #352A16;

        color:
            #F4C46A;
    }

}


/*
 * Bus line-specific colours intentionally remain untouched.
 */


/* ==========================================================
   SMEDJEGATAN THEME V0.5 END
   ========================================================== */

/* ==========================================================
   SMEDJEGATAN RESTAURANT COMPACT V0.5.1 START
   ========================================================== */

.places {
    gap: 10px;
}

.place-card {
    padding: 14px 16px;
}

.place-top {
    gap: 10px;
}

.place-address {
    margin-top: 3px;
}

.place-status {
    padding: 6px 9px;
}

.place-source {
    margin-top: 8px;

    font-size: 9px;
    line-height: 1.3;

    opacity: .72;
}

.place-warning {
    margin-top: 8px;
}

/* ==========================================================
   SMEDJEGATAN RESTAURANT COMPACT V0.5.1 END
   ========================================================== */