/*
 * The desk: PomorskieLIVE inside the window shell (js/desk.js). Loaded after app.css and shell.css.
 *
 * Layering. `.shell` has no z-index of its own, so everything below competes in the page's one
 * stacking context. The workspace (desktop + windows) is isolated at 1 so that the screens' own
 * z-indexes (map layers up to 7, sticky headers) stay inside their window. Above it:
 *   taskbar 150, its flyouts 151, Start menu 160, language suggestion 170,
 *   ride pill 180 / sheet 185, alight bar 190, alarm bar 200 (app.css),
 *   search overlay 1000, context menu / action-sheet backdrop 1100, action sheet 1101.
 * The shell's own 3000..4001 bands were written for a page with nothing else on it; here they would
 * put the taskbar over the ride bar and the alarm, which must never be hidden.
 */

.shell-workspace { z-index: 1; }
.shell-bar { z-index: 150; }
.shell-bar-flyout { z-index: 151; }
.shell-start-root { z-index: 160; }
.shell-context-menu,
.shell-sheet-backdrop { z-index: 1100; }
.shell-sheet { z-index: 1101; }

/* The screens live in windows now; the old viewport only docks them until the desk moves them. */
#app-viewport { display: none; }

/* ------------------------------ window bodies ------------------------------ */

.desk-body {
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* A screen inside a window is always "active": which windows are visible is the shell's business. */
.desk-body > .view-container {
    position: absolute;
    inset: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
}

/* The Tablice window: a search field above the favourites. The field stands on the favourites'
   own gradient (the body carries it and the screen is transparent over it): on the window body's
   `--bg` it was a near-black band between the title bar and the content, three tones stacked. */
.desk-body--toolbar {
    display: flex;
    flex-direction: column;
    background: var(--app-gradient);
}

.desk-body--toolbar > .view-container {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
    background: transparent;
}

/* Sized and edged like the shell's own fields (Start search), and inset by the screen's edge
   padding so it lines up with the cards below. */
.desk-search-field {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--view-edge-pad) var(--view-edge-pad) 0;
    padding: 0 12px;
    min-height: 40px;
    border: 1px solid var(--tint-14);
    border-radius: 6px;
    background: var(--tint-05);
    color: var(--text-sec);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: text;
}

.desk-search-field:hover { background: var(--tint-08); color: var(--text-main); }
.desk-search-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A finger needs 44 px; the phone's Start search is as tall. */
.shell-window-layer.is-narrow .desk-search-field {
    min-height: 44px;
    font-size: 15px;
}

.desk-search-glyph {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------ screens sized by their window ------------------------------ */

/* app.css sizes the screens with viewport @media, which was right while a screen filled the page.
   In a window the window decides: a 420 px board window on a 1440 px screen would otherwise get the
   desktop header (2.5rem stop name, wrapped over three lines). These blocks repeat the content
   rules of app.css's narrow-screen @media for the window body (`shell-win`, shell.css). On a phone
   the window is the screen, so both sets agree; only the header and search rules stay screen-wide.
   The edge padding follows the window too: `cqw` in a custom property resolves where it is used,
   i.e. against the nearest window body. */
.shell-window-body {
    --view-edge-pad: clamp(12px, 2.4cqw, 24px);
}

@container shell-win (max-width: 800px) {
    .favorites-grid {
        grid-template-columns: 1fr;
    }

    .board-main-header h2,
    .board-main-header .board-zone-line {
        --h1-exp: 1.8rem;
    }

    .line-num {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .dep-eta {
        font-size: 1.3rem;
    }

    .card-info h3 {
        font-size: 1.2rem;
    }
}

@container shell-win (max-width: 640px) {
    .delays-table th:nth-child(2),
    .delays-table td.delays-dest {
        max-width: 120px;
    }

    .delays-table th:nth-child(5),
    .delays-table td.delays-stop {
        max-width: 100px;
    }
}

/* 480, not app.css's 400: a board window is usually 400-520 px wide, and so are most phones (412),
   where the 24 px card padding left the destination eight characters. */
@container shell-win (max-width: 480px) {
    .view-container {
        --fav-card-min: 100%;
        --view-edge-pad: 12px;
    }

    .dep-card {
        padding: 14px 10px;
        gap: 0 8px;
        /* The badge is 44 px here; the 70 px column and the content's own 12 px sides took
           another 40 px from the destination, which then showed eight characters. */
        grid-template-columns: 44px minmax(0, 1fr) max-content;
    }

    .dep-content {
        padding: 0 2px;
    }

    .dashboard-header h2 {
        font-size: 1.35rem;
    }

    /* The zone overline shrinks with the name: at 1.8rem it wrapped "GDAŃSK • ZTM" on a 375 px
       phone and stood larger than the stop it names. */
    .board-main-header h2,
    .board-main-header .board-zone-line {
        --h1-exp: clamp(1.1rem, 6.2cqw, 1.55rem);
    }
}

/* ------------------------------ taskbar additions ------------------------------ */

.desk-start-logo {
    width: 22px;
    height: 22px;
}

.desk-bar-search {
    flex: none;
    width: 40px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
}

.desk-bar-search:hover { background: var(--shell-hover); }
.desk-bar-search:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.desk-bar-search-glyph {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.desk-tray {
    flex: none;
    display: flex;
    align-items: center;
}

.desk-tray .status-badge { padding: 4px 8px; }

.shell-bar.is-narrow .desk-tray .status-badge-text { display: none; }

.desk-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--shell-taskbar-h) + 16px);
    transform: translateX(-50%);
    z-index: 1300;
    max-width: min(92vw, 28rem);
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: var(--shell-shadow);
    font-size: 0.9rem;
}

/* ------------------------------ fixed bars clear of the taskbar ------------------------------ */

:root {
    --ride-edge: calc(max(16px, env(safe-area-inset-bottom, 0px)) + var(--shell-taskbar-h));
}

.alarm-bar,
.alight-bar { bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + var(--shell-taskbar-h)); }

.ride-sheet { bottom: var(--shell-taskbar-h); }

@media (min-width: 900px) {
    .ride-sheet {
        bottom: calc(3.6rem + var(--shell-taskbar-h));
        max-height: min(70vh, calc(100vh - 3.6rem - 5rem - var(--shell-taskbar-h)));
    }
}

/* The language suggestion was in the page flow above the header; the shell covers the page, so it
   sits just above the taskbar. */
.language-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--shell-taskbar-h);
    z-index: 170;
    border-bottom: 0;
    border-top: 1px solid var(--border);
}

/* ------------------------------ search overlay ------------------------------ */

.search-region {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.city-picker--search {
    max-width: 9.5rem;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* The overlay is the dim backdrop, `.search-panel` the content. On a phone the panel fills the screen as
   the old overlay did; above 768px it is a centred panel (the phone breakpoint of the shell). */
.search-panel {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.search-panel .search-results { min-height: 0; }

@media (min-width: 769px) {
    .search-overlay {
        align-items: center;
        padding-top: 10vh;
        background: rgba(2, 6, 23, 0.55);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .search-panel {
        flex: 0 1 auto;
        width: min(720px, 100%);
        max-height: 80vh;
        box-sizing: border-box;
        padding: 16px 20px 12px;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--bg-card);
        box-shadow: var(--shell-focus-shadow);
    }

    .search-panel .search-header { margin: 0 0 12px; }
    .search-panel .search-results { padding-bottom: 12px; }
}

@media (max-width: 600px) {
    .search-header { flex-wrap: wrap; margin: 12px auto; }
    .search-header .search-input { flex: 1 1 100%; padding: 14px 20px; }
}

/* The language link is for screen readers and crawlers; a keyboard user who tabs onto it sees it. */
.desk-language-link:focus-visible {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1300;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 14px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--accent);
}