/*
 * viewport-compact.css -- vertical rhythm for the till.
 *
 * The B60 terminals run at roughly 1520x730. Every page in this app was laid
 * out on a ~1080px-tall desktop, so at 730px the fixed chrome eats the screen
 * before any content appears. Measured on the real pages at 1520x730:
 *
 *   Products   251px (34%) of page header + filter bar + count bar + column
 *              header before the first product row -- 6.5 rows of 48 visible
 *   Dashboard  the charts start at y=460; only the top 270px of one is on
 *              screen, and the four KPI cards above them spend 155px each on
 *              a label, a number and a delta
 *   POS        product cards are ~200px tall (a square image well plus text),
 *              so 5 columns x 2.5 rows of a 48-item menu are reachable
 *
 * This file is ONE `@media (max-height: 820px)` block that tightens that
 * chrome. Nothing here changes a colour, a font family, a component's
 * structure, or the layout at desktop height -- it only reclaims vertical
 * space, and only on short screens. It is loaded last so it wins on
 * specificity ties without needing !important.
 *
 * Why a separate file rather than edits spread through the page stylesheets:
 * this is a targeted pass at one hardware size, agreed as a first step ahead
 * of a full layout rework. Keeping it in one place means the rework can delete
 * this file wholesale and know exactly what it is reverting.
 *
 * Breakpoint note: 820px, not 730px. A browser at 730px of *viewport* is a
 * window somewhat taller than that once chrome is counted, and 820 also picks
 * up 768px-tall panels (the other till size in the field) without touching a
 * 900px+ laptop.
 *
 * Tokens only -- --ds-* from design-system.css. No new values.
 */

@media (max-height: 820px) {

    /* ── Page header ───────────────────────────────────────────────────────
       "Dashboard / Overview of your business", "Products / Manage menu
       items", "Settings / System configuration". The title earns its place;
       the subtitle restates the nav item you just clicked. It stays in the
       accessibility tree (clipped, not `display: none`) so nothing is lost to
       a screen reader -- it just stops costing 18px on every page. */
    .main-content .page-header,
    .main-content .ds-page-header {
        padding-block-start: var(--ds-space-2);
        padding-block-end: var(--ds-space-1);
    }

    .ds-page-header-title {
        font-size: var(--ds-text-xl);
    }

    .ds-page-header-subtitle,
    .main-content .page-subtitle {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* ── Shell gutters ─────────────────────────────────────────────────────
       The vertical gutter is a clamp on 1.5vh, which at 730px already lands
       near its 8px floor; the inline one stays generous because horizontal
       room is the thing this screen has plenty of. */
    .main-content {
        --ds-shell-gutter-block: 10px;
    }

    /* ── Cards ─────────────────────────────────────────────────────────────
       20px of padding on a card whose content is three short lines reads as
       padding, not as breathing room. 16px still clears the 12px minimum the
       type scale wants. */
    .ds-card,
    .ds-stat-card {
        padding: var(--ds-space-4);
    }

    .ds-stat-card {
        gap: var(--ds-space-1);
    }

    /* ── POS product grid ──────────────────────────────────────────────────
       The single biggest win on the busiest screen. A square image well on a
       ~145px column is 145px of picture under 55px of text; at 3:2 the item is
       still instantly recognisable and the card drops to ~150px, so a fourth
       row comes onto the screen. Cashier reach goes from ~12 items to ~20
       without scrolling. */
    .pos-product-card .product-img-well,
    .pos-product-card .product-monogram,
    .product-img-well.show-initials {
        aspect-ratio: 3 / 2;
    }

    .pos-product-card {
        contain-intrinsic-size: auto 150px;
    }

    /* 2px off each of the two text rows. The card is the tap target and it is
       146x156 after this -- the trim is the air under the price, not anything
       anyone has to hit. Four pixels a card is four pixels a row, and the menu
       is eight rows long. */
    .pos-product-card .product-name {
        padding: 6px 10px 2px;
    }

    .pos-product-card .product-price {
        padding: 0 52px 8px 10px;
    }

    /* Section heads between category runs: 10px of margin plus 6px of padding
       repeated down a scrolling menu adds up to a whole card's worth. */
    .pos-menu-section-head {
        margin-block-end: var(--ds-space-2);
    }

    /* The grid's own frame. pos.css already takes this to 12px at 800px tall;
       measured at 1520x730 the top and bottom pads are the last free 8px above
       the first row, and the 16px between category sections is 4px more at
       every section boundary -- six of them in a 48-item menu. The inline
       padding is left alone: horizontal room is what this screen has. */
    .pos-product-grid {
        padding-block: var(--ds-space-2);
        gap: var(--ds-space-3);
    }

    /* ── Settings ──────────────────────────────────────────────────────────
       The 15-entry nav rail is sized to the content panel beside it, so on a
       short screen the last entries ("Features", "Data") fall below the fold.
       The rail already scrolls; this stops it growing past the viewport in the
       first place, so the scroll actually reaches the end. */
    .settings-tab-rail {
        max-height: calc(100vh - 150px);
    }

    .settings-tab-btn {
        min-height: 38px;
        padding-block: var(--ds-space-1);
    }

    /* ── Table-shaped list pages ───────────────────────────────────────────
       Products/Inventory rows spend 65px on a 32px avatar and two short lines
       (12px of cell padding each side, on a 56px floor). 48px still clears the
       avatar and both lines, and puts two more rows on the screen -- on
       Products that is 6.5 visible rows of 48 going to ~9.

       Selectors match design-system.css exactly (`tbody td`, not `td`): the
       shorter form loses the specificity contest and silently does nothing. */
    .ds-table tbody td {
        padding-block: var(--ds-space-2);
        min-height: 0;
    }

    .ds-table thead th {
        padding-block: var(--ds-space-2);
    }

    /* ── Inventory ─────────────────────────────────────────────────────────
       Measured at 1520x730: the page gets 604px and the product table gets
       181 of them, three rows of forty-eight. The other 423 are chrome --
       a tab strip wrapped in a card (80px for a 46px row), four stat cards at
       111px each, a toolbar, and a bar whose entire content is "48 products".

       None of it is removed; it is just asked to stop spending desktop
       padding on a till. The stat cards keep their number and their label and
       lose the 40px icon tile that was setting their height. */
    /* Both of these are a row of tabs wrapped in a card: 80px and 84px of
       page for a 46px and a 50px control. */
    .inventory-page > .ds-card:first-child,
    .inventory-history-filters {
        padding-block: var(--ds-space-2);
    }

    .inventory-history-filters {
        margin-block-end: var(--ds-space-3);
    }

    .inventory-stat-grid {
        margin-block-end: var(--ds-space-3);
    }

    .inventory-stat-grid .ds-stat-card {
        padding-block: var(--ds-space-3);
    }

    .inventory-stat-grid .ds-icon-tile {
        width: 28px;
        height: 28px;
    }

    .inventory-stat-grid .ds-stat-card-top {
        min-height: 0;
    }

    /* "48 products" does not need 42px of its own. */
    .inventory-page .ds-card-head {
        padding-block: var(--ds-space-2);
    }

    .inventory-toolbar {
        margin-block-end: var(--ds-space-2);
    }

    /*
     * The row itself, which the cell-padding rule above could not reach.
     *
     * .ds-table tbody td gets its padding trimmed at the top of this block,
     * and on Inventory that bought nothing: inventory.css pins the row with an
     * explicit height of 56px, and a fixed height does not care what the cells
     * inside it are padded with. The 40px thumbnail then pushes the row past
     * even that, to a measured 65px.
     *
     * So the height is lifted here and the thumb comes down to match. 48px
     * still clears a 32px thumb with room, and stays above the 44px this file
     * holds targets to -- the row is tappable.
     *
     * Measured at 1520x730: 422px of chrome above the table leaves it 284px.
     * At 65px that is 4.4 rows of forty-eight products.
     */
    .inventory-table-wrap .ds-table tbody tr {
        height: 48px;
    }

    .inventory-thumb-well {
        width: 32px;
        height: 32px;
    }
}

/*
 * ── Form proximity ─────────────────────────────────────────────────────────
 *
 * Not height-gated: this is wrong at every size.
 *
 * A Settings field was 8px from its own label and ~11px from the next field's
 * label. Two gaps that close are not two groups -- the eye reads one
 * undifferentiated stack of labels and boxes, and "Business type" looks like
 * it belongs to the "Business name" input above it rather than to the select
 * below it. Proximity is the only thing grouping a label with its input here;
 * there is no box, rule, or background doing it.
 *
 * 18px between groups against 8px inside one is a 2.25:1 ratio, which reads as
 * grouped without adding a visible amount of height (the rows were already
 * ~11px apart).
 */
/* Owl selector rather than `display: flex; gap`, deliberately. Making the
   section a flex column stretches every direct child to full width, which
   turns "Save business profile" into a 1120px-wide bar -- a submit button
   should be as wide as its label. Margins leave the children's own widths
   alone. */
.settings-section > * + * {
    margin-block-start: 18px;
}

/* A heading and its own description are one unit; they get the tight gap, not
   the group gap. */
.settings-section-title {
    margin-block-end: 0;
}

.settings-section-desc {
    margin-block-end: 0;
}

.settings-section-title + .settings-section-desc {
    margin-block-start: var(--ds-space-1);
}

@media (max-height: 820px) {
    .settings-section > * + * {
        margin-block-start: var(--ds-space-3);
    }
}

/* ---------------------------------------------------------------- floor plan

   The editor is toolbar-above-canvas in a flex column, so every pixel the
   chrome takes comes straight off the canvas. Measured on a 658px-tall window:
   the editor area is 487px, the palette and toolbar take 160px of it, and the
   stage lands on its 320px minimum. Fitting a 1200x800 floor into 256px of
   usable height gives 32% zoom -- an 80px table draws 25px across, which is
   below a comfortable touch target and small enough that four tables stacked
   in one spot look like one table.

   Laying each palette item out as a row rather than a column takes them from
   ~70px tall to ~32px, which goes to the canvas. Nothing here changes what the
   palette does or how it reads at desktop height. */
@media (max-height: 820px) {
    .fp-palette-item {
        flex-direction: row;
        gap: var(--ds-space-2);
        min-width: 0;
        padding: var(--ds-space-1) var(--ds-space-2);
    }

    .fp-palette-shape {
        width: 22px;
        height: 18px;
    }

}

/* ------------------------------------------------------- POS order panel

   Measured on a real till at 1520x730 with a shift open. The order panel is
   614px and the item list -- the only part a cashier actually reads while
   ringing up -- gets 186px of it, about three rows. The other 428px is chrome:

     header   108px  (26 padding + a 32px row + a 40px meta row with 10 margin)
     footer   294px  (95 summary, 47+12 charge, 64+12 utility grid, 62 notes)

   None of it is wrong at desktop height. At 730px it is the difference between
   seeing three items and seeing five, and a cashier who cannot see the order
   cannot check it against what is on the counter.

   Every touch target stays at or above 44px: the utility tiles go 64 -> 52 and
   the charge button is not touched at all. This trims padding and margins, not
   anything anyone has to hit. */
@media (max-height: 820px) {
    .pos-order-header {
        padding-block: 10px 8px;
    }

    .pos-order-header-meta {
        margin-block-start: 6px;
    }

    .pos-order-summary {
        padding-block: 6px 6px;
    }

    /* The primary action keeps its full height -- it is the biggest, most
       frequent target on the screen. Only the gap above it closes up. */
    .pos-charge-btn {
        margin-block-start: 8px;
    }

    .pos-utility-grid {
        margin-block-start: 8px;
    }

    .pos-utility-tile {
        min-height: 52px;
        padding-block: 6px;
    }

    /* It used to hold a "+ Add Note" button that is never pressed, costing
       more height than a line of the order; trimming the padding was as far
       as that went while the button still had to live somewhere. The button
       is a utility tile now, so on an order with no note there is nothing in
       here at all and it can collapse outright -- measured on the till, that
       is the difference between four rows of the order and five. */
    .pos-order-notes {
        padding-block: 0;
    }

    .pos-order-notes.has-note,
    .pos-order-notes:has(> .pos-order-note-field:not([hidden])) {
        padding-block: 4px 6px;
    }

    /*
     * The order line itself, which is what "I want to see more items at a
     * time" is actually about.
     *
     * Measured at 1520x730 with the rest of this block already applied: the
     * panel gets 556px, the header takes 96 and the footer 200, leaving 257px
     * of list. At 68px a line that is 3.8 rows -- on the screen a cashier
     * builds every order in.
     *
     * The 68 is padding 16 + name row 16 + gap 2 + control row 32. The control
     * row is 32 because the edit and remove buttons are 32, and those are
     * already under the 44px this file holds every target to, so they are not
     * touched. What is trimmed is the padding, the margin between lines and
     * the gap between the name and its controls -- space, not anything anyone
     * has to hit.
     *
     * The two-row shape stays. The name having a full-width line of its own is
     * why a long product name is readable here at all; folding it in beside
     * the quantity would buy another row and cost the thing the row is for.
     */
    .pos-order-item {
        padding-block: 5px;
        margin-block: 1px;
        row-gap: 0;
    }
}