/* © 2026 Thomas Oldroyd. Built for CO Home Improvements. */
/* =========================================================================
   DESKTOP LAYER — wide screens only (1100px and up).
   Everything here sits inside one media query, so a phone, an iPhone web app or a narrow window never sees any of it.
   Loaded AFTER each page's own styles so it can adjust them. Staff pages only (dashboard, job page, My day).
   ========================================================================= */
@media (min-width: 1100px) {

    /* ---------- Dashboard: a permanent menu down the left, a wide working area ---------- */
    /* a blurred header would trap a fixed menu inside itself, so on this page it is plain white */
    body[data-page="home"] > header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
    body[data-page="home"] #menuBtn { display: none; }
    body[data-page="home"] #menuPanel {
        display: flex; flex-direction: column; gap: 0.1rem;
        position: fixed; left: 0; top: 73px; bottom: 0; right: auto; width: 248px; z-index: 15;
        border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none;
        padding: 1rem 0.8rem; overflow-y: auto; background: var(--surface);
    }
    body[data-page="home"] #menuPanel a { padding: 0.6rem 0.75rem; font-size: 0.92rem; }
    body[data-page="home"] #menuPanel a:hover { background: var(--bg); color: var(--accent-deep); }
    body[data-page="home"] #signOutBtn { margin-top: auto; }
    /* collapsible side menu */
    body[data-page="home"] #sideToggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; padding: 0; }
    body[data-page="home"] #sideToggle svg { width: 22px; height: 22px; stroke: var(--accent-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; }
    body[data-page="home"] #sideToggle:hover { background: var(--bg); }
    body[data-page="home"].side-collapsed #menuPanel { display: none; }
    body[data-page="home"].side-collapsed .band, body[data-page="home"].side-collapsed main { margin-left: auto; margin-right: auto; }
    body[data-page="home"].side-collapsed .band-in { margin: 0 auto; }
    body[data-page="home"] #seasonScene { margin-left: 248px; }
    body[data-page="home"].side-collapsed #seasonScene { margin-left: 0; }
    body[data-page="home"] .band, body[data-page="home"] main { margin-left: 248px; }
    body[data-page="home"] .band-in { max-width: 1180px; margin: 0; padding: 1.8rem 2.5rem 1.9rem; }
    body[data-page="home"] main { max-width: 1180px; margin-right: auto; padding: 1.8rem 2.5rem 3rem; }
    body[data-page="home"] .tiles { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    body[data-page="home"] .tile { min-height: 10rem; }
    body[data-page="home"] .tile.primary { min-height: 7.5rem; }
    /* the lead list becomes a grid of cards instead of one long column */
    body[data-page="home"] #projectList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; align-items: start; }
    body[data-page="home"] #projectList .skeleton { margin: 0; }
    body[data-page="home"] #projectList > * { margin-bottom: 0; }

    /* ---------- Job page: two columns, with the action tiles across the top ---------- */
    body[data-page="job"] main#mainContent { max-width: 1280px; padding: 1.8rem 2.5rem 3rem; column-count: 2; column-gap: 1.6rem; }
    body[data-page="job"] main#mainContent > h1,
    body[data-page="job"] main#mainContent > .steps,
    body[data-page="job"] main#mainContent > h2,
    body[data-page="job"] main#mainContent > h2 + p { column-span: all; }
    body[data-page="job"] main#mainContent > h1 { font-size: 1.9rem; }
    body[data-page="job"] .steps { grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
    body[data-page="job"] .steps-h { grid-column: 1 / -1; }
    body[data-page="job"] .step { padding: 0.8rem 0.95rem; }
    /* a card never splits across the two columns */
    body[data-page="job"] main#mainContent > .card,
    body[data-page="job"] main#mainContent > div { break-inside: avoid; }
    body[data-page="job"] header { padding-left: 2.5rem; padding-right: 2.5rem; }

    /* ---------- My day ---------- */
    body[data-page="myday"] main { max-width: 1100px; padding: 1.8rem 2.5rem 3rem; }
    body[data-page="myday"] header { padding-left: 2.5rem; padding-right: 2.5rem; }

    /* ---------- Customer page (the Vault): wide hero, then the sections in two columns ---------- */
    /* The page switches #vaultContent on with an inline "display: flex", so it is laid out as centred, wrapping rows (not a grid).
       The hero runs the full width of the screen; everything under it sits in a centred 1240px area. */
    body[data-page="vault"] .hero-inner { max-width: 1240px; padding-left: 2.5rem; padding-right: 2.5rem; }
    body[data-page="vault"] .hero { min-height: min(78svh, 700px); }
    body[data-page="vault"] #vaultContent { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 2.5rem; max-width: none; margin: 0; padding: 0; align-items: flex-start; }
    body[data-page="vault"] #vaultContent > .cover, body[data-page="vault"] #vaultContent > .jump { flex: 0 0 100%; max-width: none; }
    body[data-page="vault"] #vaultContent > section:not(.cover) { flex: 0 0 min(calc(50% - 2.5rem), 600px); max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
    /* sections that need room, or are an action for the customer, take the whole row */
    body[data-page="vault"] #vaultContent > :is(#quoteSection, #optionsSection, #chatSection, #nextSection, #financeSection, #inspoSection, #photosSection, #progressSection, #valueSection, #faqSection, #contactSection, #fensaSection, #trustSection, #measuredSection, #sunSection, #regsSection, #glossarySection, .closing) { flex: 0 0 min(calc(100% - 5rem), 1240px); }
    body[data-page="vault"] #vaultContent h2 { font-size: 1.7rem; }

    /* ---------- Survey and quote: two columns of cards under a full-width title ---------- */
    body[data-page="survey"] main#mainContent, body[data-page="quote"] main#mainContent { max-width: 1180px; padding: 1.8rem 2.5rem 3rem; column-count: 2; column-gap: 1.6rem; }
    body[data-page="survey"] main#mainContent > h1, body[data-page="survey"] main#mainContent > .subhead,
    body[data-page="quote"] main#mainContent > h1, body[data-page="quote"] main#mainContent > .subhead { column-span: all; }
    body[data-page="survey"] main#mainContent > *, body[data-page="quote"] main#mainContent > * { break-inside: avoid; }

    /* ---------- Risk survey and appointment notes: one column (questions appear and disappear as you answer), just roomier ---------- */
    body[data-page="risk"] main, body[data-page="meeting"] main { max-width: 860px; padding-left: 2.5rem; padding-right: 2.5rem; }

    /* ---------- The rest of the staff pages ---------- */
    /* Simple one-column pages: the same content, just given a proper desktop width and a larger title. */
    body:is([data-page="bug-reports"], [data-page="case-studies"], [data-page="coaching"], [data-page="coaching-checklist"], [data-page="data-protection"], [data-page="design-annotations"], [data-page="import-udesign"], [data-page="links"], [data-page="pack-archive"], [data-page="photo-library"], [data-page="showcase"], [data-page="system-health"], [data-page="risk-dashboard"]) main { max-width: 920px; padding-left: 2.5rem; padding-right: 2.5rem; }
    body:is([data-page="bug-reports"], [data-page="case-studies"], [data-page="coaching"], [data-page="coaching-checklist"], [data-page="data-protection"], [data-page="design-annotations"], [data-page="import-udesign"], [data-page="links"], [data-page="pack-archive"], [data-page="photo-library"], [data-page="showcase"], [data-page="system-health"], [data-page="risk-dashboard"]) main > h1 { font-size: 1.9rem; }
    /* Pages that are a stack of separate cards: two columns, each card kept whole. */
    body[data-page="customer-content"] main, body[data-page="promotions"] main, body[data-page="team"] main, body[data-page="completion"] main, body[data-page="cribsheet"] main, body[data-page="manager"] main { max-width: 1180px; padding-left: 2.5rem; padding-right: 2.5rem; }
    body:is([data-page="customer-content"], [data-page="promotions"], [data-page="team"]) main > h1 { font-size: 1.9rem; }
    body[data-page="customer-content"] #form, body[data-page="promotions"] #content, body[data-page="team"] #content, body[data-page="completion"] #sections { column-count: 2; column-gap: 1.6rem; }
    body[data-page="customer-content"] #form > *, body[data-page="promotions"] #content > *, body[data-page="team"] #content > *, body[data-page="completion"] #sections > * { break-inside: avoid; }
    body[data-page="cribsheet"] main { column-count: 2; column-gap: 1.6rem; }
    body[data-page="cribsheet"] main > * { break-inside: avoid; }
    body[data-page="cribsheet"] main > h1, body[data-page="cribsheet"] main > .banner, body[data-page="cribsheet"] main > .toolbar { column-span: all; }
    body[data-page="completion"] main > h1, body[data-page="completion"] main > .sub, body[data-page="completion"] main > .banner { margin-bottom: 0.8rem; }
}