/* =============================================================================
   fh-scroll-chrome.css v1.2.0  —  Auto-hiding app chrome ("focus mode")
   -----------------------------------------------------------------------------
   Driven by fh-scroll-chrome.js, which toggles:
     #gp-fh-modal-overlay.gp-fh-chrome-hidden   → bars hidden
     #gp-fh-modal-overlay.gp-fh-chrome-anim     → animate this toggle only
     html.gp-fh-chrome-hidden                   → hide site header (phones)
   and sets --gp-fh-mh-h (modal header height), --gp-fh-vtop / --gp-fh-vh
   (visible viewport), --gp-bgt-tb-h (budget toolbar height) and
   --gp-exp-mb-h (Split Expenses month bar height).
   v1.1.0  Pinned toolbars for Loans, Committee and Split Expenses.
   v1.2.0  Menu pill sits above bottom banners (--gp-fh-fab-lift, set by JS).

   Layers while scrolled:
     ┌ sticky app toolbar (month + view)    ← always visible
     ├ sticky sub-view toolbar (Recurring)  ← always visible
     └ list of items                        ← gets the whole screen
   ============================================================================= */

:root {
  --gp-fh-chrome-ease: cubic-bezier(.2, .8, .2, 1);
  --gp-fh-chrome-ms: .26s;
}

.gp-fh-modal-overlay .gp-fh-modal { position: relative; }

/* ── 1. House-name bar + House-apps tab bar slide up ───────────────────── */
#gp-fh-modal-overlay .gp-fh-modal > .gp-fh-modal-header {
  transition:
    margin-top var(--gp-fh-chrome-ms) var(--gp-fh-chrome-ease),
    opacity .18s ease,
    visibility 0s linear 0s;
}
#gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-fh-modal > .gp-fh-modal-header {
  margin-top: calc(-1 * var(--gp-fh-mh-h, 120px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    margin-top var(--gp-fh-chrome-ms) var(--gp-fh-chrome-ease),
    opacity .18s ease .06s,
    visibility 0s linear var(--gp-fh-chrome-ms);
}

/* Pinned toolbars get a soft shadow once they are the top edge */
#gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-bgt-toolbar,
#gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-rec-toolbar,
#gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-dt-toolbar,
#gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-pa-toolbar,
#gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-hc-toolbar,
#gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-kd-toolbar,
#gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-ln-toolbar,
#gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-cm-toolbar,
#gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-cm-backbar,
#gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-exp-stabs {
  box-shadow: 0 6px 12px -8px rgba(15, 23, 42, .18);
}

/* ── 2. "Menu" pill — brings the bars back in place ───────────────────── */
.gp-fh-chrome-fab {
  position: absolute;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom) + var(--gp-fh-fab-lift, 0px));
  z-index: 20;
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 14px 0 12px;
  border: 0; border-radius: 999px;
  background: rgba(15, 23, 42, .88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px -8px rgba(15, 23, 42, .45);
  cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(.96);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--gp-fh-chrome-ease), background .15s, bottom .25s var(--gp-fh-chrome-ease);
}
.gp-fh-chrome-fab i { font-size: 13px; opacity: .9; }
.gp-fh-chrome-fab:hover { background: #0f172a; }
.gp-fh-chrome-fab:focus-visible { outline: 3px solid rgba(99, 102, 241, .55); outline-offset: 2px; }
#gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-fh-chrome-fab {
  opacity: 1; transform: none; pointer-events: auto;
  transition-delay: .12s;
}

/* ── 3. Phones: also hide the site header (Menu / Logout) ─────────────── */
@media (max-width:768px), (max-height:500px) and (orientation:landscape) {

  /* Modal grows to the very top of the visible viewport */
  #gp-fh-modal-overlay.gp-fh-chrome-hidden {
    top: var(--gp-fh-vtop, 0px) !important;
    height: var(--gp-fh-vh, 100dvh);
  }
  #gp-fh-modal-overlay.gp-fh-chrome-anim {
    transition:
      top var(--gp-fh-chrome-ms) var(--gp-fh-chrome-ease),
      height var(--gp-fh-chrome-ms) var(--gp-fh-chrome-ease);
  }
  /* Keep pinned toolbars clear of the notch / status bar */
  #gp-fh-modal-overlay.gp-fh-chrome-hidden .gp-fh-modal { padding-top: env(safe-area-inset-top); }

  /* Site header: hide only after the modal has slid over it, show at once */
  html #gp-page-header,
  html #masthead,
  html .site-header { transition: visibility 0s linear 0s; }
  html.gp-fh-chrome-hidden #gp-page-header,
  html.gp-fh-chrome-hidden #masthead,
  html.gp-fh-chrome-hidden .site-header {
    visibility: hidden;
    transition: visibility 0s linear var(--gp-fh-chrome-ms);
  }

  /* ── 4. Keep each app's own controls pinned ── */

  /* Budget: month + view stays on top (sticky since v12.1); Recurring
     sub-nav (Summary / Manage Heads / Monthly Entries / Daily Logs) now
     pins right beneath it as one compact row */
  #gp-fh-tab-budget .gp-bgt-toolbar { z-index: 6; }
  #gp-bgt-content:has(> .gp-rec-panel) { padding-top: 0; padding-left: 0; padding-right: 0; }
  #gp-bgt-content > .gp-rec-panel .gp-rec-content { padding: 12px; }
  #gp-bgt-content .gp-rec-toolbar {
    position: sticky;
    top: var(--gp-bgt-tb-h, 52px);
    z-index: 5;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
  }
  #gp-bgt-content .gp-rec-toolbar-left { flex: 1 1 auto; min-width: 0; gap: 8px; }
  #gp-bgt-content .gp-rec-toolbar-left > label {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: #94a3b8; white-space: nowrap;
  }
  #gp-bgt-content .gp-rec-view-sel { flex: 1; width: 100%; min-width: 0; padding: 7px 10px; }
  #gp-bgt-content .gp-rec-toolbar-right { flex-shrink: 0; }

  /* Dates / Photos / Content: one scroll surface per tab, toolbar pinned
     (same pattern as Budget) so hiding the bars really gives the list room */
  #gp-fh-tab-dates, #gp-fh-tab-photos, #gp-fh-tab-content {
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .gp-dt-panel, .gp-pa-panel, .gp-hc-panel { min-height: 0; }
  .gp-dt-body, .gp-hc-list, .gp-pa-albums-grid, .gp-pa-photo-grid {
    max-height: none; overflow: visible;
    padding-bottom: max(72px, calc(56px + env(safe-area-inset-bottom)));  /* room for the Menu pill */
  }
  .gp-dt-toolbar, .gp-pa-toolbar, .gp-hc-toolbar, .gp-kd-toolbar {
    position: sticky; top: 0; z-index: 5;
  }

  /* Leave room so the Menu pill never covers the last row */
  #gp-bgt-content.gp-bgt-content { padding-bottom: max(72px, calc(56px + env(safe-area-inset-bottom))); }
}

/* ── 5. Loans, Committee, Split Expenses (v1.1.0) ─────────────────────────
   These panels are padded cards (16px 20px) whose toolbars had no
   background, so they could not be pinned. On phones:
     - the panel padding becomes 12px and the toolbar bleeds edge-to-edge
       (negative margins) with the same grey bar style as Budget / Dates;
     - the toolbar is one compact row: view/filter picker + primary action;
     - inner lists drop their fixed max-height, so the TAB is the single
       scroll surface and the list really gets the space the bars free up.
   ------------------------------------------------------------------------- */
@media (max-width:768px), (max-height:500px) and (orientation:landscape) {

  #gp-fh-tab-loans, #gp-fh-tab-committee, #gp-fh-tab-expenses {
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #gp-fh-tab-loans .gp-ln-panel,
  #gp-fh-tab-committee .gp-cm-panel,
  #gp-fh-tab-expenses .gp-exp-panel {
    padding: 12px 12px max(72px, calc(56px + env(safe-area-inset-bottom)));  /* room for the Menu pill */
  }

  /* Shared pinned-bar look */
  #gp-fh-tab-loans .gp-ln-toolbar,
  #gp-fh-tab-committee .gp-cm-toolbar,
  #gp-fh-tab-committee .gp-cm-backbar,
  #gp-fh-tab-expenses .gp-exp-month-bar {
    position: sticky; top: 0; z-index: 5;
    margin: -12px -12px 12px;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
  }

  /* Loans: [ Dashboard ▾ ] [ + New Request ] */
  #gp-fh-tab-loans .gp-ln-toolbar {
    flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px;
  }
  #gp-fh-tab-loans .gp-ln-toolbar-left { flex: 1 1 auto; min-width: 0; }
  #gp-fh-tab-loans .gp-ln-view-sel { width: 100%; min-width: 0; }
  #gp-fh-tab-loans .gp-ln-toolbar-right { flex-shrink: 0; }
  #gp-fh-tab-loans .gp-ln-toolbar-right .gp-btn { white-space: nowrap; }
  #gp-fh-tab-loans .gp-ln-items-list { max-height: none; overflow: visible; }

  /* Committee list: [ All ▾ ] [ + New Committee ] */
  #gp-fh-tab-committee .gp-cm-toolbar {
    flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px;
  }
  #gp-fh-tab-committee .gp-cm-toolbar-left { flex: 1 1 auto; min-width: 0; }
  #gp-fh-tab-committee .gp-cm-toolbar-left select { width: 100%; min-width: 0; }
  #gp-fh-tab-committee .gp-cm-toolbar > .gp-btn { flex-shrink: 0; white-space: nowrap; }
  /* Committee detail: the "← Back" row pins the same way
     (.gp-cm-backbar is added by fh-scroll-chrome.js; :has() is the fallback) */
  #gp-cm-content > div:has(> #gp-cm-back-btn) {
    position: sticky; top: 0; z-index: 5;
    margin: -12px -12px 12px !important;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
  }

  /* Split Expenses: Month bar pinned, summary cards scroll away,
     sub-tabs (Expenses / Settle up / By category) pin under the month bar */
  #gp-fh-tab-expenses .gp-exp-month-bar { gap: 8px; }
  #gp-fh-tab-expenses .gp-exp-month-bar input[type="month"] {
    flex: 1; min-width: 0; padding: 8px 10px; font-weight: 600;
  }
  #gp-fh-tab-expenses .gp-exp-stabs {
    position: sticky;
    top: var(--gp-exp-mb-h, 52px);
    z-index: 4;
    margin: 0 -12px 12px;
    padding: 0 12px;
    background: #fff;
    overflow-x: auto; scrollbar-width: none;
  }
  #gp-fh-tab-expenses .gp-exp-stabs::-webkit-scrollbar { display: none; }
  #gp-fh-tab-expenses .gp-exp-stab { flex: 1 0 auto; white-space: nowrap; padding: 10px 12px; }
  #gp-fh-tab-expenses .gp-exp-items-list { max-height: none; overflow: visible; }
}

/* ── Accessibility: no motion if the user asked for less ───────────────── */
@media (prefers-reduced-motion: reduce) {
  #gp-fh-modal-overlay .gp-fh-modal > .gp-fh-modal-header,
  #gp-fh-modal-overlay.gp-fh-chrome-anim,
  .gp-fh-chrome-fab { transition: none !important; }
}