/* ============================================================================
   GOLDPINE CONTRACT ROOM — MOBILE APP SHELL (≤820px)
   Loaded LAST on index.html so it wins the cascade over portal.css AND over
   SuperDoc's self-injected vendor stylesheet for every rule below.

   The phone Contract Room is a real app, not a squeezed desktop:
   - the whole page is a fixed-height flex column (the document never overflows)
   - workspace top bar = wordmark · save · Submit; round/status on line 2
   - a bottom TAB BAR (Document · Changes · Comments · Activity · More) is the
     spine — every button proxy-clicks the real control (portal-mobile.js)
   - the Changes/Comments/Activity sidebar becomes a bottom SHEET
   - Export / Upload Word / Share / trust info live in a "More" bottom sheet
   - the SuperDoc page fits the screen width; the toolbar scrolls
   - gate / receipt / terminal are full-screen app pages; modals are sheets
   Desktop never sees any of this — the shell elements are display:none outside
   the media query, everything else is scoped to it. Tokens only (--gp-*).
   ============================================================================ */

/* App-shell elements live in the DOM at every size — desktop hides them.
   (#modal-more is NOT here: it is a .modal-backdrop gated by the `hidden`
   attribute + [hidden]{display:none!important} in portal.css, and is only ever
   opened on a phone.) */
.gpm-tabbar,
.gpm-scrim { display: none; }

@media (max-width: 820px) {

  /* ══ APP FRAME — the document NEVER overflows the screen ══════════════════
     Body becomes a fixed-height flex column: the active view takes exactly the
     remaining height and (for gate/receipt/terminal) scrolls inside itself, so
     every bottom dock (tab bar, trust footer) lands on the true visible bottom
     above the browser + system chrome. #view-boot stays position:fixed. */
  html { overscroll-behavior-y: none; }
  body {
    height: 100vh; height: 100dvh; margin: 0; overflow: hidden;
    display: flex; flex-direction: column;
  }
  #view-gate, #view-submitted, #view-terminal {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  #view-workspace { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .trust-footer { flex: 0 0 auto; }
  .skip-link:focus { top: env(safe-area-inset-top, 0px); }

  /* ≥16px inputs kill the iOS focus auto-zoom ("page jumps to 150%") — the
     token base is 14px, which zooms. */
  .input-row input, .modal textarea, .modal input[type='text'] { font-size: 16px; }

  /* ══ WORKSPACE ═══════════════════════════════════════════════════════════ */
  .workspace { height: 100%; }

  /* ── Top app bar: wordmark · save · Submit  (round/status on row 2) ─────── */
  .letterhead {
    flex-wrap: wrap; align-content: flex-start; gap: var(--gp-sp-2);
    padding: calc(8px + env(safe-area-inset-top, 0px)) var(--gp-sp-3) 8px;
    position: relative; z-index: 2;
    /* Own its content height (both wrapped rows) and never be shrunk by the
       column — otherwise the wrapped round/status row overflows onto the
       toolbar/banner below. min-height:auto defeats portal.css's 56px floor. */
    flex: 0 0 auto; height: auto; min-height: auto;
  }
  .letterhead .wordmark { font-size: var(--gp-fs-sm); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .lh-divider { display: none; }
  .lh-doc {
    order: 3; flex-basis: 100%; gap: var(--gp-sp-2);
    overflow-x: auto; scrollbar-width: none;
  }
  .lh-doc::-webkit-scrollbar { display: none; }
  .lh-title { font-size: var(--gp-fs-sm); }
  .lh-actions { margin-left: auto; gap: var(--gp-sp-2); flex: 0 0 auto; }
  .save-pill { max-width: 42vw; overflow: hidden; }
  .save-pill #ws-save-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Export / Upload / Share move into the More sheet (still clickable via proxy,
     display:none does not block a programmatic .click()). Submit + save stay. */
  .lh-actions .menu-wrap,
  #ws-upload-btn,
  #ws-share-btn { display: none; }
  #ws-submit-btn { min-height: 40px; padding: 0 var(--gp-sp-4); }

  /* ── Admin door (Ben, from an ntfy link): one horizontally-scrolling strip —
     all six real buttons stay directly tappable, no proxies. ── */
  .admin-bar {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
    mask-image: linear-gradient(to right, #000 92%, transparent);
  }
  .admin-bar::-webkit-scrollbar { display: none; }
  .admin-bar .label { flex: 0 0 auto; }
  .admin-bar .btn { flex: 0 0 auto; min-height: 40px; }

  /* ── SuperDoc formatting toolbar: slim, scroll sideways. The comment tool
     lives here (selection→comment is the core gesture) so we keep it, not hide
     it; responsiveToContainer already collapses extras behind a ⋯. In viewing
     mode the row is empty → portal-mobile.js adds .gpm-empty to collapse it. ── */
  .ws-toolbar { min-height: 44px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ws-toolbar::-webkit-scrollbar { display: none; }
  .ws-toolbar.gpm-empty { display: none; }

  /* ── Canvas: the one scroller. Pull-to-refresh can't fire mid-edit. ── */
  .ws-main { position: relative; }
  .ws-canvas { padding: var(--gp-sp-2); overscroll-behavior: contain; }
  #sd-canvas { max-width: 100%; }

  /* ── Review sheet = the existing sidebar, docked to the bottom edge. ────── */
  .ws-sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 95;
    width: auto; height: min(86dvh, calc(100dvh - 56px)); max-height: none;
    border-left: 0; border-top: 2px solid var(--gp-gold);
    border-radius: 16px 16px 0 0; box-shadow: var(--gp-shadow-modal);
    transform: translateY(100%); transition: transform 0.24s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ws-sidebar.open { transform: translateY(0); }
  .ws-sidebar::before {
    content: ''; display: block; flex: 0 0 auto;
    width: 40px; height: 4px; border-radius: 999px;
    background: var(--gp-line); margin: 8px auto 2px;
  }
  .sb-tab { min-height: 48px; }
  .sb-panel { overscroll-behavior: contain; padding-bottom: var(--gp-sp-6); }
  @media (prefers-reduced-motion: reduce) { .ws-sidebar { transition: none; } }

  .gpm-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(16, 35, 30, 0.45); }
  .gpm-scrim.on { display: block; }

  /* ── Bottom tab bar — the app spine. In flow (flex:0 0 auto), pine band with
     a gold hairline: the same engraved-letterhead product, not a generic app. ── */
  .gpm-tabbar {
    display: flex; flex: 0 0 auto; z-index: 80;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    background: var(--gp-pine); border-top: 1px solid var(--gp-gold);
  }
  .gpm-tab {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: none; background: none; padding: 4px 0 2px; cursor: pointer;
    color: var(--gp-on-pine); border-radius: 10px; -webkit-tap-highlight-color: transparent;
  }
  .gpm-tab svg { width: 22px; height: 22px; flex: 0 0 auto; }
  .gpm-tab span {
    font-size: 10px; font-weight: 700; letter-spacing: 0.01em; line-height: 1;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gpm-tab:active { background: rgba(246, 242, 233, 0.1); }
  .gpm-tab.on { color: var(--gp-gold); }
  .gpm-tab-n {
    position: absolute; top: 0; left: calc(50% + 7px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--gp-gold); color: var(--gp-pine);
    font-size: 9px; font-weight: 800; line-height: 16px; text-align: center;
    font-style: normal; border: 1px solid var(--gp-pine); box-sizing: content-box;
  }
  /* Keyboard open → reclaim the tab bar's height (display:none, not translate). */
  body.gpm-kb .gpm-tabbar { display: none; }

  /* Workspace owns the bottom edge — the persistent trust footer yields to the
     tab bar here (its AGPL attribution rides in the More sheet instead). */
  body[data-gpm-view='workspace'] .trust-footer { display: none; }

  /* ══ GATE / RECEIPT / TERMINAL — full-screen app pages ═══════════════════ */
  .gate-wrap { min-height: 0; padding: var(--gp-sp-6) var(--gp-sp-4); }
  .result-wrap { min-height: 0; padding: var(--gp-sp-4); }
  .gate-card, .result-card {
    max-width: none; border-left: 0; border-right: 0; border-radius: 0;
    box-shadow: none; padding: var(--gp-sp-6) var(--gp-sp-4);
  }
  .result-actions { flex-direction: column; }
  .result-actions .btn { width: 100%; min-height: 48px; }
  .dl-group .result-actions { align-items: stretch; }

  /* Slim, single-line trust footer on the non-workspace views. */
  .trust-footer {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: max(var(--gp-sp-2), env(safe-area-inset-bottom, 0px));
  }
  .trust-footer::-webkit-scrollbar { display: none; }

  /* ══ MODALS → BOTTOM SHEETS ══════════════════════════════════════════════
     CSS-only: GP.openModal's focus-trap / Esc / backdrop-close still apply. */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    max-width: 100%; width: 100%; max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    padding: var(--gp-sp-5) var(--gp-sp-4) calc(var(--gp-sp-6) + env(safe-area-inset-bottom, 0px) + var(--gpm-kb, 0px));
    animation: gpmSheetUp 0.22s ease;
  }
  .modal::before {
    content: ''; display: block; width: 40px; height: 4px; border-radius: 999px;
    background: var(--gp-line); margin: 0 auto var(--gp-sp-3);
  }
  @keyframes gpmSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .modal { animation: none; } }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; min-height: 48px; }

  /* ── "More" sheet content (built by portal-mobile.js) ── */
  .gpm-more-list { display: flex; flex-direction: column; }
  .gpm-more-sec {
    font-family: var(--gp-font-display); font-variant: small-caps; letter-spacing: 0.06em;
    font-size: var(--gp-fs-sm); color: var(--gp-gold-ink);
    margin: var(--gp-sp-4) 0 var(--gp-sp-1); padding: 0 var(--gp-sp-1);
  }
  .gpm-more-item {
    display: flex; align-items: center; gap: var(--gp-sp-3); width: 100%;
    min-height: 48px; padding: var(--gp-sp-3) var(--gp-sp-1);
    border: none; border-bottom: 1px solid var(--gp-line-soft);
    background: none; text-align: left; cursor: pointer;
    font: inherit; font-size: var(--gp-fs-md); font-weight: 600; color: var(--gp-ink);
    text-decoration: none;
  }
  .gpm-more-item:last-child { border-bottom: none; }
  .gpm-more-item:not(.gpm-more-static):active { background: var(--gp-sheet-dim); }
  .gpm-more-static { cursor: default; color: var(--gp-muted); font-weight: 500; }
  .gpm-more-item svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--gp-gold-ink); }
  .gpm-more-item .gpm-more-val {
    margin-left: auto; font-family: var(--gp-font-mono);
    font-size: var(--gp-fs-xs); font-weight: 500; color: var(--gp-muted);
    max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gpm-more-item.gpm-more-link { color: var(--gp-gold-ink); font-weight: 600; }

  /* ══ TOASTS — clear the tab bar (and keyboard) ══════════════════════════ */
  .toast-region {
    width: min(480px, calc(100vw - 24px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  body[data-gpm-view='workspace'] .toast-region {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px) + var(--gpm-kb, 0px));
  }
}