/* ---------- Kaiwhai Office on a phone (Rohan, 2 Oct 2026) ----------
   "a design for the mobile view so that it is easily usable". At 760px and
   narrower: a slim top bar, the main pages along the bottom in reach of a
   thumb, and everything else under More (mobile.js).
   9 Oct 2026 (Rohan: smaller fields, easier to get around, Proposals, Quotes
   and Confirmations all at the bottom, a Home that is not mostly scrolling):
   the bottom bar is Home, Clients, Proposals, Quotes, Confirmations; the top
   bar has More (the menu, left), a back arrow on records, Search and + New;
   Home shows the greeting, search and its two lists; fields are tighter.
   The sidebar and the open-tabs strip are not shown on a phone. Show mode and
   show accounts still see New lead only: the bottom bar hides with the rest.
   Wider windows are untouched: none of the new parts show there. */
.topbar-brand, .mnav, .mnav-sheet, .m-fold-btn, .fu-cardbar { display: none; }
.m-top-btn, .m-back { display: none; }

@media (max-width: 760px) {
  :root { --mnav-h: 62px; }
  html { scroll-padding-top: calc(var(--topbar-h) + 1rem + env(safe-area-inset-top)); }

  /* the shell */
  .sidebar, .tabstrip, .topbar-nav { display: none; }
  .topbar {
    gap: 10px;
    min-height: calc(52px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  }
  .topbar-brand {
    display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
    min-height: 44px; color: var(--text); text-decoration: none; font: 600 15px/1.2 var(--font);
  }
  .topbar-brand .sidebar-logo { width: 30px; height: 30px; }
  .topbar-brand-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body[data-showmode="on"] .topbar-brand { display: none; }
  /* the top bar's buttons: More (left), Search and + New (right, before Show mode) */
  .m-top-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: none;
    color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .m-top-btn svg { width: 22px; height: 22px; }
  .m-top-btn:active { background: rgba(255,255,255,.06); }
  .m-top-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .m-top-btn[aria-expanded="true"] { color: var(--acc-text); }
  #m-menu { margin-left: -8px; }
  .topbar { gap: 4px; }
  .topbar-show { margin-left: 4px; }
  /* room for the buttons: the logo alone on a narrow phone; on a record, the back arrow instead */
  @media (max-width: 440px) { .topbar-brand-t { display: none; } }
  .m-back {
    display: inline-flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; min-height: 40px;
    color: var(--text); font: 500 15px/1 var(--font); text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .m-back svg { flex: none; width: 22px; height: 22px; }
  .m-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-back[hidden], body.m-has-back .topbar-brand { display: none; }
  body[data-showmode="on"] :is(.m-top-btn, .m-back), body[data-role="show"] :is(.m-top-btn, .m-back) { display: none; }
  .topbar-show { min-height: 38px; }
  main {
    padding: 18px max(16px, env(safe-area-inset-right)) calc(var(--mnav-h) + 32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  /* the bottom bar */
  .mnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 5px max(4px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
    border-top: 1px solid var(--border);
  }
  .mnav-a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; min-height: 52px; padding: 4px 0; border: 0; border-radius: 12px; background: none;
    color: var(--text2); font: 500 10.5px/1.1 var(--font); text-decoration: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mnav-a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mnav-a svg { width: 24px; height: 24px; }
  .mnav-a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .mnav-a:active { background: rgba(255,255,255,.06); }
  body[data-sec="home"] .mnav-a[data-m="home"],
  body[data-sec="followup"] .mnav-a[data-m="followup"],
  body[data-sec="proposals"] .mnav-a[data-m="proposals"],
  body[data-sec="quotes"] .mnav-a[data-m="quotes"],
  body[data-sec="confirmations"] .mnav-a[data-m="confirmations"],
  body[data-sec="templates"] #m-menu, body[data-sec="pricelists"] #m-menu,
  body[data-sec="calendar"] #m-menu, body[data-sec="activity"] #m-menu,
  body[data-sec="emails"] #m-menu, body[data-sec="texts"] #m-menu, body[data-sec="messages"] #m-menu,
  body[data-sec="settings"] #m-menu { color: var(--acc-text); } /* the gold for words: deeper in light mode */

  /* More, Search and + New: panels that drop from the top bar, which stays clear above them.
     mobile.js sets --m-sheet-top to the bar's real bottom edge as a panel opens: the
     "No connection" line pushes the bar down, and would hide a panel's first lines */
  .mnav-sheet:not([hidden]) {
    position: fixed; inset: 0; z-index: 49;
    display: flex; align-items: flex-start;
    padding-top: var(--m-sheet-top, calc(52px + env(safe-area-inset-top)));
    background: rgba(0,0,0,.45);
  }
  .mnav-panel {
    width: 100%; max-height: calc(100dvh - var(--m-sheet-top, 52px) - var(--mnav-h) - 24px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
    background: var(--float-bg); border-bottom: 1px solid var(--border); border-radius: 0 0 18px 18px;
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(16px) saturate(1.1); /* the page behind must not show through the words */
    backdrop-filter: blur(16px) saturate(1.1);
  }
  .mnav-panel button[data-new] {
    display: flex; align-items: center; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 10px;
    background: none; color: var(--text); font: 400 16px/1.2 var(--font); text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-panel button[data-new]:active { background: rgba(255,255,255,.06); }
  #m-q { margin: 6px 0 2px; }
  #m-results { position: static; margin-top: 8px; box-shadow: none; }
  #m-results:empty { display: none; }
  .mnav-group { padding: 12px 12px 4px; font: 500 10.5px/1.3 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--text3); }
  .mnav-panel a {
    display: flex; align-items: center; min-height: 46px; padding: 0 12px; border-radius: 10px;
    color: var(--text); font: 400 16px/1.2 var(--font); text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .mnav-panel a:active { background: rgba(255,255,255,.06); }
  .mnav-panel a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  body[data-sec="templates"] .mnav-panel a[data-m="templates"],
  body[data-sec="pricelists"] .mnav-panel a[data-m="pricelists"],
  body[data-sec="calendar"] .mnav-panel a[data-m="calendar"],
  body[data-sec="activity"] .mnav-panel a[data-m="activity"],
  body[data-sec="messages"] .mnav-panel a[data-m="messages"],
  body[data-sec="emails"] .mnav-panel a[data-m="emails"],
  body[data-sec="texts"] .mnav-panel a[data-m="texts"],
  body[data-sec="settings"] .mnav-panel a[data-m="settings"] { font-weight: 700; color: var(--acc-text); }
  .mnav-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 12px 12px 2px; border-top: 1px solid var(--border); }
  .mnav-user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text2); }
  .mnav-signout {
    flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--quiet-line); border-radius: 999px;
    background: none; color: var(--text); font: 500 14px/1 var(--font); cursor: pointer;
  }

  /* show mode and show accounts: New lead only, so no bottom bar either */
  body[data-showmode="on"] .mnav, body[data-role="show"] .mnav,
  body[data-showmode="on"] .mnav-sheet, body[data-role="show"] .mnav-sheet { display: none; }
  body[data-showmode="on"] main, body[data-role="show"] main { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

  /* tighter fields, labels and headings; a field's text stays 16px, which stops
     the iPhone zooming the page when it is tapped */
  input, textarea, select { min-height: 38px; padding: 7px 12px; font-size: 16px; }
  select { padding-right: 32px; }
  label { margin: 12px 0 4px; }
  main h2 { font-size: 26px; }
  .panel { padding: 14px 14px 12px; }

  /* Home on a phone: the greeting, search and the two lists that need someone
     (Rohan chose "lists only"); the map, pipeline, hunts, the year ahead and
     activity stay on a wider window, and + New in the top bar starts things */
  #view-home :is(.home-start, .home-band-head, .home-portal, .home-stack-r, .home-lower) { display: none; }
  #view-home .home-band { margin-top: 14px; padding: 0; background: none; box-shadow: none; }
  #view-home .home-bento { display: block; }
  #view-home .home-stack-l { margin: 0; }
  #view-home .home-stack-l .panel + .panel { margin-top: 12px; }

  /* the message at the bottom clears the bar */
  #toast { bottom: calc(var(--mnav-h) + 14px + env(safe-area-inset-bottom)); }

  /* a long page introduction folds to two lines, with "Show more" (mobile.js) */
  .m-fold:not(.m-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .m-fold-btn {
    display: inline-flex; align-items: center; min-height: 36px; margin: -6px 0 6px; padding: 0;
    border: 0; background: none; color: var(--text); font: 500 14px/1 var(--font);
    text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; cursor: pointer;
  }

  /* ---------- Clients to Follow Up as cards (Rohan, 2 Oct 2026: "go ahead with the client cards") ----------
     The same sheet, the same cells and the same saving (followup.js); on a
     phone each client's cells stack into a card. Folded, a card shows who
     added the client, the name, the status, the dates that are set and the
     notes. A tap opens it (the sheet's own open row): every field, each with
     its column's name, ready to type in. Call, Text and Quick info sit at its
     foot. Column set-up (rename, drag, the date ⋯) stays on a wider window. */
  .fu-scroll { overflow: visible; background: none; border: 0; box-shadow: none; }
  #fu-grid { grid-template-columns: minmax(0, 1fr) auto !important; grid-auto-flow: row dense; min-width: 0 !important; }
  #fu-grid .fu-head { display: none; }
  #fu-grid .fu-cell {
    grid-column: 1 / -1; padding: 0 16px; border: 0;
    border-left: 1px solid var(--hair); border-right: 1px solid var(--hair);
    background: var(--tile); color: var(--band-text);
  }
  #fu-grid .fu-who {
    grid-column: 1; display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 0 0 16px;
    border-top: 1px solid var(--hair); border-right: 0; border-radius: var(--radius) 0 0 0;
  }
  #fu-grid .fu-actions {
    grid-column: 2; position: static; margin-top: 14px; padding: 6px 8px 0 0; justify-content: flex-end;
    border-top: 1px solid var(--hair); border-left: 0; border-radius: 0 var(--radius) 0 0; box-shadow: none;
  }
  #fu-grid .fu-dots { min-width: 44px; min-height: 44px; font-size: 20px; }
  #fu-grid .fu-cardbar {
    display: flex; gap: 8px; padding: 8px 16px 14px; border-bottom: 1px solid var(--hair);
    border-radius: 0 0 var(--radius) var(--radius);
  }
  #fu-grid .fu-card-btn { flex: 1 1 0; min-height: 42px; padding: 0 8px; font-size: 14px; }

  /* folded: only the cells that say who this is and where things stand */
  #fu-grid .fu-cell[data-col]:not(.fu-open):not(.fu-c-name):not(.fu-status-cell):not(.fu-c-notes):not(.fu-date) { display: none; }
  #fu-grid .fu-date:not(.fu-open):has(.fu-date-none) { display: none; }
  #fu-grid .fu-cell:not(.fu-open) :is(textarea, select, .fu-date-show, .fu-date-quick) { pointer-events: none; }
  #fu-grid .fu-cell:not(.fu-open) .dict-btn { display: none; }
  #fu-grid .fu-c-name textarea { padding: 6px 0 2px; font: 600 18px/1.3 var(--font-head); min-height: 0; }
  #fu-grid .fu-cell:not(.fu-open) textarea { padding-left: 0; padding-right: 0; min-height: 0; }
  #fu-grid .fu-status-cell:not(.fu-open) { padding-top: 6px; padding-bottom: 4px; }
  #fu-grid .fu-status-cell:not(.fu-open) select { width: auto; max-width: 100%; min-height: 34px; font-size: 14px; }
  #fu-grid .fu-date { padding-top: 6px; padding-bottom: 2px; }

  /* every field names its column: folded dates always, everything once open */
  #fu-grid .fu-date[data-label]::before,
  #fu-grid .fu-open[data-label]::before {
    content: attr(data-label); display: block; margin: 10px 0 4px;
    font: 600 10.5px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--band-text2);
  }
  /* a folded date is one line: its name, the day, and how long until or since */
  #fu-grid .fu-date:not(.fu-open) { display: flex; align-items: baseline; gap: 8px; padding-top: 4px; padding-bottom: 4px; }
  #fu-grid .fu-date:not(.fu-open)::before { flex: 0 0 auto; margin: 0; }
  #fu-grid .fu-date:not(.fu-open) .fu-date-show { width: auto; flex: 0 0 auto; }
  #fu-grid .fu-date:not(.fu-open) .fu-date-line { flex: 1 1 auto; min-width: 0; margin: 0; }
  #fu-grid .fu-open textarea { padding: 10px 12px; background: var(--well); box-shadow: var(--well-shadow); border-radius: var(--radius-ctl); }
  #fu-grid .fu-open.fu-c-name textarea { font: 600 18px/1.3 var(--font-head); }
  #fu-grid .fu-open.fu-date .fu-date-show { min-height: 40px; font-size: 16px; }
  #fu-grid .fu-open .fu-date-quicks { display: flex; }
  #fu-grid .fu-open .fu-date-line { height: auto; }
}