/* OurHQ — phone layer (Fab5.1)
   ==========================================================================
   Everything here lives inside the phone media query. On a desktop this file
   is inert; the resting state of every phone-only element (bottom bar, More
   sheet, install offer) is declared in app.css as `display: none`, so an
   element with no styling can never become a desktop change.

   The phone condition is two clauses:

     @media (max-width: 820px), (max-height: 500px) and (pointer: coarse)

   Width alone misses a phone in LANDSCAPE -- 844px wide reads as a desktop.
   The second clause catches it by what it is: a short viewport with a coarse
   pointer, which is false on a desktop even at 460px tall and false on a
   touchscreen laptop, whose primary pointer is still the trackpad.

   Three floors, applied everywhere: 12px text, 16px fields (below that iOS
   zooms the page on focus), 44px tap targets.
   ========================================================================== */

@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {

  /* ------------------------------------------------------------- shell --
     No sidebar; the six destinations move to the bottom bar. */
  .sidenav { display: none; }
  .app-shell { display: block; }

  .topbar { height: 56px; padding: 0 0.85rem; gap: 0.6rem; }
  .topbar-brand { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .topbar-crumb a, .topbar-crumb > svg { display: none; }
  .topbar-crumb strong { font-size: 1.02rem; }
  .topbar-actions { gap: 0.4rem; }
  .topbar-search {
    min-width: 0; width: 40px; height: 40px; padding: 0;
    justify-content: center;
  }
  .topbar-search span, .topbar-search .kbd { display: none; }
  .topbar-actions .btn-sm { min-height: 40px; padding: 0 0.8rem; }
  .menu-list { position: fixed; left: 0.6rem; right: 0.6rem; top: 62px; min-width: 0; }

  /* -------------------------------------------------------- bottom bar --
     Five destinations, thumb height, the home-indicator inset honoured. */
  .mobilenav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: color-mix(in srgb, var(--surface-2) 94%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @supports not (background: color-mix(in srgb, red 50%, blue)) {
    .mobilenav { background: var(--surface-2); }
  }
  .mobilenav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 7px 2px 6px;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 540;
    letter-spacing: -0.005em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .mobilenav a:hover { text-decoration: none; }
  .mobilenav svg { width: 22px; height: 22px; }
  .mobilenav a.is-current { color: var(--violet-hi); }
  .mobilenav a.is-current::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--violet);
  }
  .mobilenav a:active { background: var(--surface-3); }

  /* Room at the foot of every page so the last row is not under the bar. */
  body.page-app { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* A fixed bar covers whatever the browser scrolls to; tell it those strips
     are spoken for, so a focused field never lands under the bar. */
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
         scroll-padding-top: 64px; }

  /* --------------------------------------------------------- the sheet --
     "More": everything that did not earn a bottom-bar slot, plus the theme
     control and Sign out. Slides up from the bottom, dismissed by the
     backdrop, the ✕, or Escape. */
  .sheet-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 90;
    background: rgba(6, 9, 15, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .sheet-backdrop[hidden] { display: none; }
  .sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    padding: 0.5rem 0.9rem calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow);
    animation: sheetUp 0.22s ease;
    overscroll-behavior: contain;
  }
  .sheet[hidden] { display: none; }
  @keyframes sheetUp { from { transform: translateY(30px); opacity: 0.6; } to { transform: none; opacity: 1; } }
  .sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0.35rem auto 0.75rem; }
  .sheet-user { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0.25rem 0.9rem; border-bottom: 1px solid var(--line); }
  .sheet-user > div { flex: 1; min-width: 0; }
  .sheet-user-name { font-weight: 640; }
  .sheet-user-mail { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sheet-list { display: flex; flex-direction: column; padding: 0.5rem 0; }
  .sheet-list a, .sheet-list button {
    display: flex; align-items: center; gap: 0.8rem;
    min-height: 50px; padding: 0.6rem 0.5rem;
    border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text);
    font: inherit; font-size: 1rem; text-align: left; cursor: pointer;
    width: 100%;
  }
  .sheet-list a:hover, .sheet-list button:hover { background: var(--surface-3); text-decoration: none; }
  .sheet-list a.is-current { color: var(--violet-hi); }
  .sheet-list svg { width: 20px; height: 20px; color: var(--text-muted); }
  .sheet-list a.is-current svg { color: var(--violet-hi); }
  .sheet-list span { flex: 1; }
  .sheet-list .sheet-chev { width: 16px; height: 16px; opacity: 0.5; }
  .sheet-foot { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
  .theme-seg-wide { width: 100%; }
  .theme-seg-wide button { flex: 1; width: auto; height: 40px; gap: 0.4rem; font: inherit; font-size: 13px; font-weight: 560; }
  .theme-seg-wide button svg { width: 16px; height: 16px; }
  body.sheet-open { overflow: hidden; }

  /* --------------------------------------------------------- page shell --
     Narrower gutters: 1.75rem of padding on a 390px screen spends 13% of the
     width on nothing. */
  .shell, .shell-wide, .shell-narrow { padding: 1rem 0.9rem 3rem; }
  .page-head { margin-bottom: 1rem; }
  .page-head h1, .greeting h1 { font-size: 1.35rem; }
  .greeting { margin-bottom: 1rem; }
  .card, .card-wide, .card-auth { padding: 1.1rem 0.95rem; }
  .card-title { font-size: 1.05rem; }
  .section-head { margin-top: 1.25rem; }
  .quick-actions { width: 100%; }
  .quick-actions .btn { flex: 1 1 calc(50% - 0.5rem); }

  /* ------------------------------------------------------------- fields --
     16px exactly: the rule that stops iOS zooming on focus. Named as an
     exclusion rather than a list of types: an <input> with no type attribute
     is a text field and would slip past `input[type="text"]`. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  select, textarea, .control {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea { min-height: 88px; }
  select { padding-right: 2rem; background-position: right 0.7rem center; }
  .palette-input input { min-height: 44px; }

  /* ------------------------------------------------------------ buttons --
     44px is the smallest thing a finger hits reliably. */
  .btn { min-height: 44px; padding-left: 1rem; padding-right: 1rem; }
  .alert { padding-right: 2.9rem; }
  .alert-dismiss { width: 40px; height: 40px; right: 0.25rem; top: 0.25rem; }
  .card-head a.small, .section-head a.small, .empty a:not(.btn) {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .btn-sm { min-height: 40px; font-size: 0.86rem; padding: 0.5rem 0.85rem; }
  .icon-btn { width: 44px; height: 44px; }
  .row-gap, .row-between { flex-wrap: wrap; }
  .row-between > * { min-width: 0; }
  .row-gap .btn { flex: 1 1 auto; }

  /* ---------------------------------------------------------- home page --
     Numbers two across, cards one per row. */
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .kpi { padding: 0.8rem 0.9rem 0.7rem; }
  .kpi-value { font-size: 1.28rem; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .tool-card { padding: 1rem; }
  .tool-card h2 { font-size: 1.02rem; }
  .tool-icon { width: 38px; height: 38px; margin-bottom: 0.7rem; }
  .attn-list li { flex-wrap: wrap; }
  .attn-list .btn { margin-left: calc(9px + 0.85rem); }

  /* ------------------------------------------------------------- tables --
     Wide tables scroll inside their own box rather than widening the page. */
  .table-scroll, .table-wrap, .card > table.data, .subform > table.data {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  table.data { font-size: 0.85rem; }
  table.data th, table.data td { padding: 0.6rem 0.55rem; }

  /* Saved custom invoices: fixed desktop widths become one readable block. */
  #saved table.data th:nth-child(2), #saved table.data td:nth-child(2),
  #saved table.data th:nth-child(3), #saved table.data td:nth-child(3),
  #saved table.data th:nth-child(4), #saved table.data td:nth-child(4) { width: auto; padding-right: 0.5rem; }
  #saved table.data th:nth-child(4), #saved table.data td:nth-child(4) { display: none; }
  #saved table.data td:last-child { white-space: normal; }
  #saved table.data td:last-child form { margin: 0.2rem 0 0 0.35rem; }
  #saved summary { padding: 0.7rem 0; min-height: 44px; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

  /* ------------------------------------------------------------- forms --
     Side-by-side label/field pairs stack. */
  .form-row, .field-row, .split { grid-template-columns: 1fr; }
  .inline-form { display: block; }
  .sidenav-tools .inline-form, .sheet-foot .inline-form { display: flex; }
  .filters { flex-wrap: wrap; gap: 0.5rem; }
  .filters input[type="search"] { flex: 1 1 100%; min-width: 0; }
  .filters select { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }
  .filters .btn { flex: 1 1 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 0.75rem; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { min-height: 40px; flex: 0 0 auto; }
  .period-tabs, .page-toc, .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .period-tabs a, .page-toc a { flex: 0 0 auto; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .stat { padding: 0.9rem 1rem; }
  .stat-value { font-size: 1.35rem; }

  /* A grid or flex item will not shrink below its min-content width unless
     it is told it may; a <select> with one long option otherwise sets the
     width of the whole page. */
  .stack > *, .card > *, .card-wide > *, .subform > *, .field, .field > * { min-width: 0; }
  select, .control, input, textarea { max-width: 100%; }
  select, .control { width: 100%; }
  .deliv-field, .deliv-field .control, .control-money { width: 100%; min-width: 0; }
  .deliv-form .btn { width: 100%; }
  code, .mono, .lira-opt code { overflow-wrap: anywhere; }
  .checkbox-text, label { overflow-wrap: anywhere; }

  /* --------------------------------------------------------- typography --
     Every size below 12px in app.css, restated at 12px and nothing else.
     Matching each original selector can only raise. */
  .kpi-label, .kpi-note, .kpi-delta, .stat-label, .stat-note, .pill,
  .status, .sync, .tag, .badge, table.data th, .cell-sub, .side-title,
  .side-count, .chip .n, .checkbox-text small, .foot-note, .reveal,
  .err-box, .log-list, .stage-track .when, .tool-stat, .attn-body .small,
  .palette-group, .palette-foot, .palette-item .p-sub, .menu-label, .kbd,
  .deliv-field label, table.invoice-list td:first-child .mono,
  button.status.is-clickable, .muted-cell { font-size: 12px; }
  .status-lg, .sync-lg { font-size: 0.85rem; }

  /* ------------------------------------------------------------ targets --
     A row you tap to open an invoice should not be the height of its text. */
  .tabs a, .tabs button, .filters .btn, .period-tabs a { min-height: 44px; }
  .tabs a, .tabs button, .period-tabs a { display: inline-flex; align-items: center; }
  table.data td a:not(.btn) { display: inline-flex; align-items: center; min-height: 40px; }
  .side-list a { min-height: 44px; align-items: center; }
  .page-toc a { min-height: 40px; display: inline-flex; align-items: center; }

  /* ------------------------------------------------------- invoice list --
     Below 640px the table becomes a list of cards: number and total on the
     first line, customer and the status pill (the one control you tap) on
     the second, date and Shopify state underneath. Delivered-by survives as a
     chip under the name when it is the courier, because that one costs money. */
  .phone-only { display: inline-flex; margin: 0.2rem 0 0; }
  table.invoice-list, table.invoice-list tbody { display: block; width: 100%; }
  table.invoice-list thead { display: none; }
  table.invoice-list tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "num total" "cust status" "date sync";
    gap: 3px 0.75rem;
    align-items: center;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--line);
  }
  table.invoice-list tbody tr:last-child { border-bottom: 0; }
  table.invoice-list td { display: block; padding: 0; border: 0; min-width: 0; }
  table.invoice-list td.c-num { grid-area: num; }
  table.invoice-list td.c-num .mono { font-size: 12px; white-space: nowrap; }
  table.invoice-list td.c-total { grid-area: total; text-align: right; font-weight: 680; font-size: 1rem; }
  table.invoice-list td.c-cust { grid-area: cust; font-weight: 560; overflow-wrap: anywhere; }
  table.invoice-list td.c-status { grid-area: status; text-align: right; }
  table.invoice-list td.c-date { grid-area: date; }
  table.invoice-list td.c-sync { grid-area: sync; text-align: right; }
  table.invoice-list td.c-deliv { display: none; }
  table.invoice-list .status { white-space: normal; line-height: 1.25; text-align: center; }
  /* The number is the way into the invoice: a full-height target, with the
     card's padding trimmed so the row does not grow with it. */
  table.invoice-list td.c-num a { min-height: 40px; }
  table.invoice-list tr { padding-top: 0.35rem; }
  table.invoice-list tbody tr:hover { background: transparent; }

  /* Stock on paper vs on hand: the headers may wrap so all three numbers fit. */
  table.stock-table th, table.stock-table th.num { white-space: normal; }

  /* ------------------------------------------------------------- feel --
     text-size-adjust: iOS inflates text in landscape on its own initiative.
     touch-action: manipulation removes the ~300ms double-tap wait.
     tap-highlight + :active: a pressed state that appears at once. */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  a, button, .btn, .chip, summary, label, [role="button"],
  input[type="checkbox"], input[type="radio"], select {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active, button:active, .tool-card:active, .chip:active, .kpi:active { filter: brightness(1.15); }
  .tool-card:active, a.kpi:active { transform: scale(0.985); }
  .tool-card, a.kpi { transition: transform .08s ease; }

  .modal, .sidebar, .lira-panel, .sheet { overscroll-behavior: contain; }

  /* Notched handsets in landscape put the camera cutout in the side gutter. */
  .topbar, .shell, .shell-wide, .shell-narrow {
    padding-left: max(0.9rem, env(safe-area-inset-left));
    padding-right: max(0.9rem, env(safe-area-inset-right));
  }
  .mobilenav, .bottomnav {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* ----------------------------------------------------------- palette -- */
  .palette-backdrop { padding: 0.6rem; align-items: stretch; }
  .palette { max-height: 78vh; }

  /* --------------------------------------------------- install the app --
     Sits above the bottom bar, not over it. */
  .pwa-install {
    display: flex;
    position: fixed;
    left: 8px; right: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 85;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .pwa-install-body { flex: 1 1 190px; min-width: 0; }
  .pwa-install-body > strong { display: block; font-size: 0.95rem; }
  .pwa-install-body > span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
  .pwa-install-body span strong { font-weight: 650; color: var(--text); }
  .pwa-install-actions { display: flex; gap: 8px; flex: 0 0 auto; }
  .pwa-install .btn { min-height: 40px; }
  .pwa-share { color: var(--violet-hi); font-size: 14px; }
  body.pwa-offering .lira-fab { bottom: calc(200px + env(safe-area-inset-bottom, 0px)); transition: bottom .15s ease; }

  /* --------------------------------------------------------------- misc */
  .page-head .row-between { align-items: flex-start; }
  .muted { font-size: 0.86rem; }
  .input-group .reveal, button.reveal { min-height: 44px; padding: 0 0.85rem; }

  /* The narrowest phones: the "New" button keeps its icon and loses its word. */
  @media (max-width: 380px) {
    .topbar-actions .btn-sm span { display: none; }
    .topbar-actions .btn-sm { padding: 0 0.6rem; }
  }
}

/* Installed as an app there is no browser chrome to scroll away, so the bar
   can sit tight against the bottom of the screen. */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
}

/* ------------------------------------------------------------- landscape --
   Sideways, the screen is 390px tall; the chrome gets thinner and the bar's
   labels go -- five icons in a row are recognisable once you have used them. */
@media (max-height: 500px) and (pointer: coarse) {
  .mobilenav a { min-height: 42px; padding: 5px 2px; gap: 1px; }
  .mobilenav a span { display: none; }
  .mobilenav svg { width: 22px; height: 22px; }
  body.page-app { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); scroll-padding-top: 52px; }
  .topbar { height: 48px; }
  .topbar-brand img { width: 26px; height: 26px; }
  .page-head { margin-bottom: 0.75rem; }
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}