/* =====================================================================
   Phone and small-tablet layer.

   Shared by every deliverable so one fix reaches all of them. Loaded last,
   so it overrides the page's own rules without needing !important.

   These documents were built for a desktop rail-plus-canvas layout. On a
   phone three things broke, and they are structural rather than cosmetic:

     1. CSS Grid's `1fr` is `minmax(auto, 1fr)`, and `auto` floors at the
        column's MIN-CONTENT width. So a collapsed one-column grid still
        could not shrink below its widest child, and the page sat at a fixed
        484-572px however narrow the screen was.
     2. `.headgrid` kept a `clamp(300px, 26vw, 520px)` second column at every
        width, forcing 428px on its own.
     3. The document footer identity line and the quote tables are single
        unbreakable rows.

   Everything here is `screen` scoped. The print layout is unchanged: these
   documents are also print artifacts and a max-width rule can otherwise
   match a narrow paper size.
   ===================================================================== */

/* ---- Universal safety, all widths ---------------------------------- */
@media screen {
    /* Media must never be the thing that widens a page. max-width alone is
       not enough: as a flex or grid item an image keeps `min-width: auto`,
       which floors the track at the file's INTRINSIC width. One 2200px-wide
       logo was holding the Terms page open on its own. */
    img, svg, canvas, video { max-width: 100%; height: auto; min-width: 0; }
    /* Long unbroken strings (URLs, ABNs, model codes) wrap rather than push. */
    body { overflow-wrap: break-word; }
}

@media screen and (max-width: 860px) {

    /* ---- 1. Let every collapsed grid actually shrink ----------------
       minmax(0, 1fr) removes the min-content floor described above. This is
       the single rule that unsticks the whole layout. */
    .shell { grid-template-columns: minmax(0, 1fr) !important; }
    .shell > *,
    #rail, #result, .wrap, .sheet { min-width: 0; max-width: 100%; }

    .headgrid,
    .grid2, .tiles, .scen, .cgrid, .wk-cols,
    .hero .htop,
    /* Terms: a hard 300px contents sidebar beside the body column. */
    .wrap {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* ---- 2. Reclaim the horizontal padding a phone cannot spare ------ */
    #result { padding-left: 16px !important; padding-right: 16px !important; }
    #rail { padding: 20px 16px 28px !important; height: auto !important; position: static !important; }
    .hero .htop { padding: 20px 16px !important; gap: 18px !important; }
    .wrap { padding-left: 16px !important; padding-right: 16px !important; }

    /* ---- 3. Rows that must be allowed to wrap ------------------------ */
    /* NOTE: .docfoot is a CLASS, not an id. An earlier #docfoot rule here
       silently matched nothing, which is why the footer kept forcing 548px. */
    .docfoot .df-inner,
    .reqband, .brand, .qhead { flex-wrap: wrap; }
    .docfoot .df-inner { gap: 12px 16px; }
    /* flex-basis 460px + a hard 300px floor cannot fit any phone. */
    .docfoot .df-left { min-width: 0 !important; flex: 1 1 auto !important; }
    /* The contact block is a GRID, not a flex row: repeat(2, minmax(220px,
       max-content)) plus a 44px gap = 484px of hard floor, which is why
       flex-wrap did nothing here. Stack it. */
    .docfoot .df-contacts { grid-template-columns: minmax(0, 1fr) !important; gap: 6px 0 !important; }
    .docfoot .df-contacts .dfc,
    .docfoot .df-links { min-width: 0 !important; }

    /* ---- 3c. Quote: grids the page's own 980px breakpoint missed -------- */
    .batcard { grid-template-columns: minmax(0, 1fr) !important; }
    .batcard .bspecs,
    .qsign .signgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .qlinks, .qtop { grid-template-columns: minmax(0, 1fr) !important; }
    /* A nowrap tagline cannot be allowed to set the page width. */
    .qh-tag { white-space: normal !important; }

    /* ---- 3b. Desktop page furniture carries 84px/48px side padding ---- */
    .docfoot .df-inner,
    .topbar .tb-inner,
    .lede,
    #sheet,
    .qhead,
    /* Terms: main carries 84px each side. Its own breakpoint only reaches
       down to 32px and does not fire on the narrowest phones at all. */
    .wrap main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .wrap main { max-width: 100% !important; }

    /* ---- 4. Wide tables scroll INSIDE themselves ---------------------
       The page body must never scroll sideways; a wide table may. .pgtable
       is excluded: it is the print pagination wrapper and is already
       display:block on screen, so touching it would break the page map.
       #deck is excluded below: its slides are a fixed 1123px canvas scaled
       as a whole, so a table inside one is never wider than the viewport
       and must keep its normal column layout — reflowing it dropped the
       <tfoot> total row out of alignment with the columns above it. */
    table:not(.pgtable) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table:not(.pgtable) > thead { display: table; width: 100%; }
    table:not(.pgtable) > tbody { display: table; width: 100%; }
    table:not(.pgtable) > tfoot { display: table; width: 100%; }

    /* Deck slides: undo the reflow entirely — they scale, they don't wrap. */
    #deck table { display: table !important; width: 100% !important; overflow: visible !important; }
    #deck table > thead { display: table-header-group !important; }
    #deck table > tbody { display: table-row-group !important; }
    #deck table > tfoot { display: table-footer-group !important; }
    #deck table > * > tr { display: table-row !important; }
    #deck table > * > tr > * { display: table-cell !important; }

    /* ---- 5. Touch targets and typography ----------------------------- */
    input, select, button, textarea {
        max-width: 100%;
        /* 16px stops iOS Safari zooming the viewport on focus, which is the
           other classic "it broke on my phone". */
        font-size: 16px;
    }
    .bandbtns { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Status sits bottom-right, clear of the notch and of any content. */
    #sizingStatus { bottom: 10px; right: 10px; top: auto; left: auto; max-width: calc(100vw - 20px); }
}

/* Very narrow phones (Galaxy Fold outer screen, 280px) need one more step.
   Below ~340px a few residual items inside the Terms body — inline money
   spans, footnote `small` runs inside comparison cells — still exceed the
   content box by a few dozen pixels. Rather than hunt each one and risk
   breaking the print layout, the document body becomes its own scroll
   container: wide content scrolls inside `main`, and the PAGE never scrolls
   sideways. Nothing is hidden or clipped. */
@media screen and (max-width: 340px) {
    #result { padding-left: 12px !important; padding-right: 12px !important; }
    .tiles, .scen { gap: 10px !important; }
    .wrap main { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* =====================================================================
   Input drawer  —  calculator · quote · deck

   Below 1080px the always-on input rail (#rail / the deck's #panel) has
   nowhere to sit beside the content, so it becomes a slide-over drawer:
   mobile-drawer.js adds a floating button, a backdrop and an in-drawer
   "Done" bar; the visual side lives here. The content behind stays live,
   so you open the drawer, change a field, watch the result update, and
   close. With JS off the rail just stacks (rules above still collapse
   the grid) — the drawer is the nicer path, not the only one.
   ===================================================================== */
/* Both are created by the script but only ever shown below 1080px — hide
   them at desktop width (and in print) where the rail is a normal column. */
.mdrawer-fab,
.mdrawer-close { display: none; }

@media screen and (max-width: 1080px) {

    /* ---- the rail, now a drawer ----
       Slid with `left`, NOT `transform`: a transform on the drawer would make
       it the containing block for every position:fixed inside it (the crane
       lookup modal, tooltips), trapping them in the ~360px drawer box instead
       of letting them cover the screen. `left` keeps the viewport as their
       reference. */
    #rail, #panel {
        position: fixed !important;
        top: 0 !important; bottom: 0 !important;
        right: auto !important;
        left: calc(-1 * min(90vw, 380px)) !important;
        height: auto !important;
        width: min(90vw, 380px) !important;
        max-width: none !important;
        display: block !important;   /* the deck hides #panel below 820 otherwise */
        padding: 18px 16px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 9998;
        transition: left .28s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 8px 0 44px rgba(0, 0, 0, .4);
        overscroll-behavior: contain;
    }
    body.mdrawer-open #rail,
    body.mdrawer-open #panel { left: 0 !important; }

    /* ---- content takes the width the rail used to ---- */
    .shell { display: block !important; }
    #result, #sheet {
        padding-left: 16px !important; padding-right: 16px !important;
        max-width: none !important;
    }
    #deck { margin-left: 0 !important; }
    .grip, #panelGrip { display: none !important; }

    /* Save Working Copy downloads a pricing-bearing HTML file and needs the
       offline engine bundled — not a phone job. Hidden in the drawer; the rep
       does this from a desktop. Print / Save as PDF stays available. */
    #saveWorkingWrap { display: none !important; }

    /* ---- backdrop ---- */
    .mdrawer-scrim {
        position: fixed; inset: 0; z-index: 9997;
        background: rgba(6, 20, 34, .5);
        opacity: 0; pointer-events: none;
        transition: opacity .28s;
    }
    body.mdrawer-open .mdrawer-scrim { opacity: 1; pointer-events: auto; }
    body.mdrawer-open { overflow: hidden; }
    body.mdrawer-open #deck { overflow: hidden; }

    /* ---- floating open button ---- */
    .mdrawer-fab {
        display: inline-flex; align-items: center; gap: 8px;
        position: fixed; z-index: 9996;
        right: 16px; bottom: 16px;
        padding: 13px 18px;
        border: 0; border-radius: 999px;
        background: #06283c; color: #fff;
        font: 700 .9rem/1 'Roboto', 'Segoe UI', system-ui, sans-serif;
        letter-spacing: .02em;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
        cursor: pointer;
    }
    .mdrawer-fab:active { transform: translateY(1px); }
    body.mdrawer-open .mdrawer-fab { opacity: 0; pointer-events: none; }

    /* ---- close tab ----
       A small arrow handle at the drawer's right edge, vertically centred —
       tap to slide the drawer away. It's a <body> child (not inside the
       drawer) so it stays pinned to the viewport while the drawer scrolls,
       and it fades in/out with the open state. left = drawer width minus the
       handle, so it hugs the inner side of that edge. */
    .mdrawer-close {
        display: flex; align-items: center; justify-content: center;
        position: fixed;
        top: 50%; margin-top: -26px;
        left: calc(min(90vw, 380px) - 30px);
        width: 30px; height: 52px;
        z-index: 9999;
        padding: 0; border: 0;
        border-radius: 10px 0 0 10px;
        background: rgba(255, 255, 255, .18);
        color: #fff;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        opacity: 0; pointer-events: none;
        transform: translateX(-16px);
        transition: opacity .18s, transform .28s cubic-bezier(.4, 0, .2, 1);
    }
    body.mdrawer-open .mdrawer-close {
        opacity: 1; pointer-events: auto;
        transform: translateX(0);
    }
    .mdrawer-close:active { background: rgba(255, 255, 255, .3); }
}

@media screen and (max-width: 1080px) and (prefers-reduced-motion: reduce) {
    .mdrawer-close { transition: opacity .18s; }
}

@media screen and (max-width: 1080px) and (prefers-reduced-motion: reduce) {
    #rail, #panel, .mdrawer-scrim, .mdrawer-fab { transition: none; }
}

/* ---- In-field activity indicator -------------------------------------
   Shown inside the field being edited while a recalculation is in flight.
   Brand navy, 1.5px ring, no fill: it reads as activity rather than as a
   control, and it never covers the value because it sits in the field's
   right padding.

   Motion is the whole point here, so the reduced-motion fallback is a
   static ring rather than nothing at all: the user still sees that the
   field is busy, it simply does not spin. */
#tesFieldSpin {
    position: fixed;
    width: 14px; height: 14px;
    border: 1.5px solid rgba(9, 102, 151, 0.22);
    border-top-color: #096697;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9997;
    animation: tesSpin 0.6s linear infinite;
}
/* On the dark navy input rail the navy ring is invisible. The class is set
   from the field's own computed background, not from a guess about which
   page or panel it sits in. */
#tesFieldSpin.on-dark {
    border-color: rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
}
@keyframes tesSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    #tesFieldSpin { animation: none; border-top-color: rgba(9, 102, 151, 0.55); }
    #tesFieldSpin.on-dark { border-top-color: rgba(255, 255, 255, 0.75); }
}

@media print { #tesFieldSpin { display: none !important; } }

/* ---- Numeric fields ---------------------------------------------------
   The browser's native number stepper is removed across all four documents.

   On the CALCULATOR it was actively breaking the layout: those inputs carry a
   unit ("kW") absolutely positioned at right: 11px, and the stepper renders in
   exactly the same place and wins, so the unit sat underneath the arrows and
   could not be read.

   The DECK and the QUOTE put their units in the label instead, so nothing was
   hidden there — but a stepper on "Hire term (months)" or "Diesel $/L" is not
   how anyone enters those, and leaving them on two documents and off a third
   just looks unfinished. Keyboard up/down still works on a focused field, so
   no capability is lost anywhere. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}