/* ═══════════════════════════════════════════════════════════════════════════
   RMQ CENTRAL STYLE SHEET — wide screens.                  (Robert, 2026-09-27)

   Loaded AFTER a page's own styles. Every rule sits behind a min-width, so a
   phone never sees any of it: the phone layout is exactly what it was.

       768px   iPad portrait         pages widen, card lists go two-up
       1100px  iPad landscape, desktop   the Menu becomes a sidebar, list | detail

   A page opts a block into a layout with a data-rmq-* attribute. The attribute
   changes nothing on a phone.

       data-rmq-wide          the page's .container: widens
       data-rmq-wide="form"   a page that is one form: widens to a comfortable reading width
       data-rmq-page          the page's .container: widens, and is a grid its cells sit in
       data-rmq-cell          a child that takes one grid column (filters, search)
       data-rmq-cell="wide"   the child that takes the wide first column on desktop
       data-rmq-cards         a list of cards: becomes a grid
       data-rmq-split         with data-rmq-cards: the open card becomes a detail pane
       data-rmq-sidebar       the Menu drawer: becomes a permanent sidebar
       data-rmq-sidebar-only-phone   Menu button, ✕, overlay: hidden while the sidebar shows
       data-rmq-has-sidebar   on <body> of a page that has a sidebar
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    [data-rmq-wide],
    [data-rmq-page] {
        max-width: 1080px;
        padding-left: 32px;
        padding-right: 32px;
    }

    /* a page that is one form: wider than a phone, never a form stretched across a monitor */
    [data-rmq-wide="form"] {
        max-width: 760px;
    }

    [data-rmq-page] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 12px;
        align-content: start;
    }

    [data-rmq-page] > * {
        grid-column: 1 / -1;
    }

    [data-rmq-page] > [data-rmq-cell] {
        grid-column: auto;
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    [data-rmq-page] > [data-rmq-cell="wide"] {
        grid-column: 1 / -1;
    }

    /* page scripts set display inline on their lists, so the layout has to outrank that */
    [data-rmq-cards] {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
        gap: 14px;
        align-items: start;
    }

    [data-rmq-cards][hidden],
    [data-rmq-cards][style*="display: none"],
    [data-rmq-cards][style*="display:none"] {
        display: none !important;
    }

    [data-rmq-cards] > * {
        margin: 0 !important;
    }

    [data-rmq-cards] > .expanded {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1100px) {
    [data-rmq-wide]:not([data-rmq-wide="form"]),
    [data-rmq-page] {
        max-width: 1320px;
    }

    [data-rmq-page] {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    [data-rmq-page] > [data-rmq-cell="wide"] {
        grid-column: 1;
    }

    /* the Menu becomes a permanent sidebar */
    [data-rmq-sidebar] {
        right: auto !important;
        left: 0 !important;
        width: 264px !important;
        max-width: none !important;
        transform: none !important;
        transition: none !important;
        border-left: 0 !important;
        border-right: 1px solid var(--line-12);
        z-index: 5 !important;
    }

    [data-rmq-sidebar-only-phone] {
        display: none !important;
    }

    body[data-rmq-has-sidebar] {
        padding-left: 264px;
    }
}

/* list | detail: the open card becomes a pane on the right, the list stays on the left */
@supports selector(:has(*)) {
    @media (min-width: 1100px) {
        [data-rmq-cards][data-rmq-split]:has(> .expanded) {
            display: block !important;
            position: relative;
            padding-right: calc(100% - 400px);
        }

        [data-rmq-cards][data-rmq-split]:has(> .expanded) > * {
            margin-bottom: 12px !important;
        }

        [data-rmq-cards][data-rmq-split]:has(> .expanded) > .expanded {
            position: absolute;
            top: 0;
            right: 0;
            width: calc(100% - 424px);
            margin: 0 !important;
            box-shadow: 0 10px 40px rgb(var(--shadow-rgb) / 0.28);
        }
    }

    @media (min-width: 1500px) {
        [data-rmq-cards][data-rmq-split]:has(> .expanded) {
            padding-right: calc(100% - 460px);
        }

        [data-rmq-cards][data-rmq-split]:has(> .expanded) > .expanded {
            width: calc(100% - 484px);
        }
    }
}

/* A page that carries the Menu only for its sidebar (it has no Menu button of its own):
   below sidebar width the Menu is simply not there. */
@media (max-width: 1099.98px) {
    body[data-rmq-menu="auto"] > .menu-drawer,
    body[data-rmq-menu="auto"] > .menu-drawer-overlay {
        display: none;
    }
}

/* ── Stage: a page as a workspace on a wide screen (Robert, 2026-10-04) ──────
   list | the open thing | a pane, each column scrolling inside itself; the page
   has nothing to scroll (but is never locked). The page marks its parts:
     [data-rmq-stage]            the stage; it gets .rmq-open (something is open: columns, else the
                                 list fills it as a grid), .rmq-acting (a pane is open),
                                 .rmq-working (an action runs), .rmq-rail (list collapsed)
     [data-rmq-col="list"]       the list column: [data-rmq-handle] button,
                                 [data-rmq-rail-label], and [data-rmq-list] (the scroller)
     [data-rmq-col="detail"]     the open thing
     [data-rmq-titlebar]         the title row: title, business, [data-rmq-nav-slot] at the right
     [data-rmq-phone-only] / [data-rmq-desktop-only]   shown on one side of 1100px only
     [data-rmq-stub]             the list's stand-in for the card that moved into the detail column
   The page's script sets --rmq-stage-top (the stage's top once content shows).
   Below 1100px none of this applies: the phone keeps its single column. */
[data-rmq-handle], [data-rmq-rail-label], [data-rmq-desktop-only] { display: none; }
@media (min-width: 1100px) {
    [data-rmq-phone-only] { display: none !important; }
    [data-rmq-desktop-only] { display: block; }

    /* the app header on ONE line (Service's header.app-header: the strip and the brand together) */
    header.app-header { grid-template-columns: 1fr auto 1fr !important; grid-template-areas: "left brand right" !important;
                        row-gap: 0 !important; margin-bottom: 14px !important; padding-bottom: 10px !important; }
    header.app-header .logo { font-size: 1.35rem; }

    [data-rmq-titlebar] { display: flex; align-items: center; gap: 14px; }
    [data-rmq-titlebar] .rmq-title { margin: 0; font-size: 1.4rem; }
    [data-rmq-titlebar] .rmq-under { margin: 0; }
    [data-rmq-nav-slot] { margin-left: auto; }
    [data-rmq-nav-slot] > nav { margin: 0 !important; padding-bottom: 0 !important; }

    [data-rmq-stage] { display: flex; gap: 20px; align-items: stretch; height: calc(100vh - var(--rmq-stage-top, 320px) - 26px); min-height: 420px; }
    [data-rmq-col="list"] { position: relative; width: 460px; flex: 0 0 460px; margin-right: 18px; transition: width .25s ease-out, flex-basis .25s ease-out; }
    [data-rmq-stage].rmq-acting > [data-rmq-col="list"], [data-rmq-stage].rmq-working > [data-rmq-col="list"] { width: 300px; flex-basis: 300px; }
    [data-rmq-stage].rmq-rail > [data-rmq-col="list"] { width: 44px; flex-basis: 44px; }
    [data-rmq-stage].rmq-rail > [data-rmq-col="list"] > [data-rmq-list] { visibility: hidden; }
    /* max-height, never height: a fixed-height grid or flex column squashes its cards */
    [data-rmq-col="list"] > [data-rmq-list] { height: auto; max-height: 100%; margin-top: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; grid-template-columns: minmax(0, 1fr) !important; }
    [data-rmq-col="detail"] { flex: 1 1 0; min-width: 0; height: 100%; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
    /* the open thing keeps a reading width: a card stretched across a wide screen is mostly blank (Robert, 2026-10-04) */
    [data-rmq-col="detail"] > * { margin: 0 0 12px; max-width: var(--rmq-detail-max, 640px); animation: rmq-stage-in .25s ease-out; }
    @keyframes rmq-stage-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
    [data-rmq-list]::-webkit-scrollbar, [data-rmq-col="detail"]::-webkit-scrollbar { width: 6px; }
    [data-rmq-list]::-webkit-scrollbar-thumb, [data-rmq-col="detail"]::-webkit-scrollbar-thumb { background: var(--line-20); border-radius: 3px; }
    [data-rmq-stub] { border-color: rgb(var(--teal-rgb) / 0.6) !important; box-shadow: 0 0 0 1px rgb(var(--teal-rgb) / 0.25); cursor: pointer; }
    /* landing, nothing open (the stage without .rmq-open): the list fills the stage as the cards grid, like the
       calendar's month; the detail column and the handle only appear once something is open (Robert, 2026-10-04) */
    [data-rmq-stage]:not(.rmq-open) > [data-rmq-col="list"] { width: auto; flex: 1 1 auto; margin-right: 0; }
    [data-rmq-stage]:not(.rmq-open) > [data-rmq-col="list"] > [data-rmq-list] { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important; gap: 14px; }
    [data-rmq-stage]:not(.rmq-open) > [data-rmq-col="detail"], [data-rmq-stage]:not(.rmq-open) [data-rmq-handle] { display: none; }
    /* the handle: collapses the list to a rail so the open thing (or the POS) takes the width */
    [data-rmq-handle] { display: flex; position: absolute; top: 0; right: -39px; z-index: 5; width: 34px; height: 34px; border-radius: 50%;
                        align-items: center; justify-content: center; background: var(--bg-2); border: 1px solid var(--line-30); color: var(--text);
                        cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0 0 2px; box-shadow: 0 2px 8px rgb(var(--shadow-rgb) / .3); }
    [data-rmq-handle]:hover { border-color: var(--teal); color: var(--teal); }
    [data-rmq-stage].rmq-rail [data-rmq-handle] { right: 5px; }
    [data-rmq-stage].rmq-rail [data-rmq-rail-label] { display: block; position: absolute; top: 48px; left: 0; right: 0; text-align: center; writing-mode: vertical-rl; transform: rotate(180deg);
                                                       color: var(--gray-a0); font-weight: 700; letter-spacing: .5px; font-size: .8rem; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { [data-rmq-col="list"], [data-rmq-col="detail"] > * { transition: none !important; animation: none !important; } }