/* THE DECK SHELL ON PAGES (Steven 2026-11-09 19:30 to 19:35). Houses, a
   room and the shop wear the deck's shell in place of the old top bar:
   the logo top left at the old bar's size and place (the header's 40px
   mark, 16px in, 12px down, its purple number on the right shoulder), a
   tap opens the drawer; Market bottom left and + bottom right as on the
   deck. Drawn by components/_deck_shell.html when the page sets
   deck_shell_page; wired by static/js/shell/deck-shell-pages.js. Every
   rule is scoped to a page that carries the mark ([data-ds-page-mark]),
   so the deck itself does not change. Placing and framing only. */

/* ---- the strip where the bar was --------------------------------------- */
/* the old bar's row stays as an empty strip of the page's own background,
   the bar's 64px, so the page sits exactly where it sat and nothing runs
   under the logo */
.app-shell--deck-shell > .ds:has(> [data-ds-page-mark]) {
    grid-area: topbar;
    height: calc(var(--size-16) + env(safe-area-inset-top, 0px));
    background: var(--surface-app);
}
.app-shell--deck-shell:has(> .ds > [data-ds-page-mark]) {
    /* pages are not cards: the discs sit in the window's corners */
    --ds-card-w: calc(100vw - 2 * var(--ds-slide-pad));
}

/* House identity shares the logo's top row, including when changing tabs. */
.ds-page-title {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
    left: calc(env(safe-area-inset-left, 0px) + var(--space-4) + var(--boh-rail-control-size, 40px) + var(--space-6));
    right: calc(env(safe-area-inset-right, 0px) + var(--space-4));
    z-index: var(--z-fab-above);
    height: var(--boh-rail-control-size, 40px);
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: 1;
    overflow: hidden;
}
/* A room has its own header in this same row. */
body.mobile-chat-open .ds-page-title { display: none; }

/* ---- 1. the logo ------------------------------------------------------- */
.ds-page-mark {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
    left: calc(env(safe-area-inset-left, 0px) + var(--space-4));
    z-index: var(--z-fab-above);      /* over a room's chat view and a house's tab bar, under panels */
    width: var(--boh-rail-control-size, 40px);
    height: var(--boh-rail-control-size, 40px);
}
/* the bar's black behind the yellow mark, as a round pocket */
.ds-page-mark::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--space-2));
    border-radius: var(--radius-full);
    background: var(--color-dark-900);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 4px 14px rgb(0 0 0 / 0.22);
    pointer-events: none;
}
.ds-page-mark > .ds-type {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.ds-page-mark > .ds-type::after {             /* the whole pocket takes the tap */
    content: "";
    position: absolute;
    inset: calc(-1 * var(--space-2));
    border-radius: var(--radius-full);
}
.ds-page-mark > .ds-type > .cf-mark { position: absolute; inset: 0; }
.ds-page-mark .ds-type__glyph { display: contents; }
.ds-page-mark .ds-type__glyph[hidden] { display: none; }
/* the mark and its number are the card frame's own piece (card-frame.css
   .cf-mark: the header's 40px logo, its 20px purple number on the shoulder) */

/* the discs ride over the page's own fixed bars too (a room's chat view,
   a house's tab bar, the shop's sheet), under the panels that open over a
   page */
.app-shell--deck-shell > .ds:has(> [data-ds-page-mark]) > .ds-fab { z-index: var(--z-fab-above); }

/* ---- 2. one + ---------------------------------------------------------- */
/* the page's own create button stands aside; the shell's + menu presses it */
.ds-page-has-create .app-shell--deck-shell .quick-create-fab,
.ds-page-has-create .app-shell--deck-shell .global-post-fab-surface { visibility: hidden; pointer-events: none; }
.ds-menu__row[hidden] { display: none; }

/* ---- 3. the bottom line ------------------------------------------------ */
/* on a page the content scrolls clear of the two discs: its last row ends
   above the bottom line's band (below), as a card's words end above its
   bottom row */
.app-shell--deck-shell:has(> .ds > [data-ds-page-mark]) .main-area__content {
    padding-bottom: calc(var(--ds-dock-bottom) + var(--ds-dock-h) + var(--ds-dock-in-b) + var(--space-4));
}
/* THE BOTTOM LINE'S BAND (finish sweep, Steven 2026-11-09: no words under
   Market or the + at rest, the shop's "Things agents have delivered", a
   plan step's icon on a want page, a shop row's Get this under the + on a
   wide screen): at every width the bottom line is a band of the page's own
   colour, as tall as the line and its margins, that the page scrolls under.
   The discs ride on it. A room keeps its message box line (it is the band
   there). */
@media screen {
    .app-shell--deck-shell > .ds:has(> [data-ds-page-mark])::before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: calc(var(--z-fab-above) - 1);
        height: calc(var(--ds-dock-bottom) + var(--ds-dock-h) + var(--ds-dock-in-b));
        background: var(--ds-page-band, var(--surface-app));
        box-shadow: 0 -1px 0 var(--border-default, rgb(0 0 0 / 0.08));
        pointer-events: none;
    }
    .ds-page-composer .app-shell--deck-shell > .ds:has(> [data-ds-page-mark])::before,
    /* a page that is one card (the share page, a product's card) keeps
       the card's own bottom row on the line, as on the deck */
    .share-card-page .app-shell--deck-shell > .ds:has(> [data-ds-page-mark])::before,
    .pdp-card-page .app-shell--deck-shell > .ds:has(> [data-ds-page-mark])::before { content: none; }
    /* over the shop's sheet as the discs are; drawn before them, so under them */
    body.drawer-layout .app-shell--deck-shell > .ds:has(> [data-ds-page-mark])::before { z-index: calc(var(--z-utility-overlay) + 1); }
    /* a house's tab bar sits on the line, over the band */
    .app-shell--deck-shell:has(> .ds > [data-ds-page-mark]) .house-mobile-bottom-nav { z-index: var(--z-fab-above); }
}
/* a room: Market, the message box, +, one height on one line; the box
   leaves room for a disc on each side (deck-shell-pages.js lines the
   discs up on it) */
.ds-page-composer .app-shell--deck-shell :is(.chat-input-wrapper, .mobile-chat-input-wrapper) {
    box-sizing: border-box;
    min-height: var(--ds-dock-h);
    margin-left: calc(var(--ds-dock-h) + var(--ds-dock-gap));
    margin-right: calc(var(--ds-dock-h) + var(--ds-dock-gap));
}
.ds-page-composer .app-shell--deck-shell .main-area__content { padding-bottom: 0; }
/* a room on a phone: the line runs edge to edge, so the box keeps room for
   its words between the two discs, at the discs' 48px */
@media (max-width: 767px) {
    .ds-page-composer .app-shell--deck-shell .mobile-chat-input-area { padding-left: var(--space-2); padding-right: var(--space-2); }
    .ds-page-composer .app-shell--deck-shell .mobile-chat-input-wrapper {
        gap: var(--space-1);
        padding: calc((var(--ds-dock-h) - 36px) / 2) var(--space-2);
    }
    .ds-page-composer .app-shell--deck-shell .mobile-chat-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* a house on a phone: Market, the house's tab bar, +, one height on one
   line (the bar keeps its own centring and its hide when a room opens) */
@media (max-width: 767px) {
    .app-shell--deck-shell:has(> .ds > [data-ds-page-mark]) .house-mobile-bottom-nav {
        bottom: var(--ds-dock-bottom);
        width: calc(100vw - 2 * (var(--ds-dock-side) + var(--ds-dock-h) + var(--ds-dock-gap)));
        height: var(--ds-dock-h);
    }
    .app-shell--deck-shell:has(> .ds > [data-ds-page-mark]) .house-mobile-bottom-nav__tabs {
        height: 100%;
        align-items: stretch;
    }
    /* Same capsule shape, inset evenly on all sides of the outer capsule. */
    .app-shell--deck-shell:has(> .ds > [data-ds-page-mark]) .house-mobile-bottom-nav__item {
        border-radius: inherit;
        min-height: 0;
    }
    /* between the two discs the tabs keep their words; the small drawings
       beside the words step aside so no word is cut */
    .app-shell--deck-shell:has(> .ds > [data-ds-page-mark]) .house-mobile-bottom-nav__item > :is(iconify-icon, svg) { display: none; }
    /* a room's own header (the back arrow, the room's name) starts right of the logo */
    .app-shell--deck-shell:has(> .ds > [data-ds-page-mark]) .mobile-chat-header {
        padding-left: calc(var(--space-4) + var(--boh-rail-control-size, 40px) + var(--space-2) + var(--space-3));
        min-height: calc(var(--size-16) + env(safe-area-inset-top, 0px));
    }
}

/* ---- the shop (a drawer page: its own dark bar, the Toll Bench name and
   its X) ------------------------------------------------------------------ */
/* no strip: the shop's own bar is the top line, and the logo (the bag with
   the heart) takes the bar's mark's place, the same 40px at the same spot;
   the logo and the discs ride over the shop's sheet, under anything that
   opens over the shop (an item's page) */
body.shop-page.drawer-layout .app-shell--deck-shell > .ds:has(> [data-ds-page-mark]) { height: 0; }
body.drawer-layout .ds-page-mark,
body.drawer-layout .app-shell--deck-shell > .ds:has(> [data-ds-page-mark]) > .ds-fab { z-index: calc(var(--z-utility-overlay) + 1); }
body.shop-page.drawer-layout .app-shell--deck-shell:has(> .ds > [data-ds-page-mark]) .drawer-container .shop-chrome__mark { visibility: hidden; }

/* ---- a want page and its step pages: the fail button --------------------
   It sat where the shell's + sits; it steps aside (still on the page, so
   its sheet and its confirm step are the same) and the + menu's "Fail this
   agent" row presses it (deck-shell-pages.js). */
.ds-page-has-fail #fail-dot { visibility: hidden !important; pointer-events: none !important; }

/* ---- a public page (feed/_market_header.html with the card layout) ------
   The shell stands where the header was, in the page's flow (.ds-market-host
   wraps it, so the shell's tokens reach it); the page's last row scrolls clear
   of the bottom line's band. */
.ds-market-host { display: block; }
@media screen {
    body:has(.ds-market-host) { padding-bottom: 112px; }   /* the band (about 84px) and a margin; the shell tokens live inside the host */
}

/* ---- a page's own bottom bar (the ready target's checkout, .sl-foot) ----
   It rides the bottom line: over the band, under the two discs, its button
   between them at their height (finish sweep 2026-11-09: "Get this" sat
   under the band and the discs). */
@media (max-width: 899px) {
    body:has(.app-shell--deck-shell > .ds > [data-ds-page-mark]) .sl-foot {
        /* over the band and level with the discs, but see-through and
           letting taps through outside its button, so the discs show and
           answer */
        z-index: calc(var(--z-utility-overlay) + 1);
        background: transparent;
        border-top: 0;
        box-shadow: none;
        pointer-events: none;
        padding-left: calc(var(--ds-dock-side, 18px) + var(--ds-dock-h, 48px) + var(--ds-dock-gap, 8px) - var(--space-2));
        padding-right: calc(var(--ds-dock-side, 18px) + var(--ds-dock-h, 48px) + var(--ds-dock-gap, 8px) - var(--space-2));
        padding-bottom: var(--ds-dock-bottom, 17.5px);
    }
    body:has(.app-shell--deck-shell > .ds > [data-ds-page-mark]) .sl-foot > * { pointer-events: auto; }
    body:has(.app-shell--deck-shell > .ds > [data-ds-page-mark]) .sl-foot .sl-foot__go {
        box-sizing: border-box;
        min-height: 0;
        height: var(--ds-dock-h, 48px);
    }
}
/* on a wide screen that bar sits in the middle, clear of the corner discs,
   and keeps its own look; the band stands aside there */
@media (min-width: 900px) {
    body:has(.sl-foot) .app-shell--deck-shell > .ds:has(> [data-ds-page-mark])::before { content: none; }
}