/* ══════════════════════════════════════════════════════════════════════
   The phone layer — loaded last, everything scoped to ≤860px.

   Design brain: ClickUp mobile. Thumb-zone-first: a five-slot bottom bar
   with a raised ＋ in the middle; everything that isn't a daily surface
   lives behind a left drawer; dialogs become bottom sheets; boards snap
   horizontally one column at a time; touch targets ≥44px;inputs at 16px
   so iOS never zoom-jumps. Safe-area insets respected throughout.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px){

  /* ── the drawer: the sidebar comes back as an off-canvas panel ────── */
  aside {
    display: flex !important; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
    width: min(78vw, 320px);
    background: var(--panel); border-right: 1px solid var(--line);
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
    overflow-y: auto;
    transform: translateX(-106%);
    transition: transform var(--v2-mid) var(--v2-ease);
    box-shadow: none;
  }
  body.drawer-open aside { transform: none; box-shadow: 24px 0 60px rgba(20,20,43,.18); }
  #mnav-ov {
    position: fixed; inset: 0; z-index: 69; background: rgba(20,20,43,.38);
    opacity: 0; pointer-events: none; transition: opacity var(--v2-mid);
  }
  body.drawer-open #mnav-ov { opacity: 1; pointer-events: auto; }
  aside .navitem { padding: var(--v2-s3) var(--v2-s3); font-size: var(--fs-entity); }
  aside .navitem.sub { padding: var(--v2-s2) var(--v2-s3); }

  #mnav-menu {
    border: 0; background: none; font-size: 26px; padding: var(--v2-s1h) var(--v2-s3) var(--v2-s1h) var(--v2-s1); min-width: 44px; min-height: 44px;
    color: var(--ink); line-height: 1; flex: none;
  }
  .top .utility { display: flex; align-items: center; gap: var(--v2-s1h); }
  .top .utility .usearch { flex: 1; min-width: 0; }

  /* ── the bottom bar: four destinations + the raised ＋ ─────────────── */
  nav.bottom { align-items: end; }
  nav.bottom .qadd {
    position: relative; top: -16px; margin: 0 auto;
    width: 56px; height: 56px; border-radius: 50% !important;
    /* White on the 45% teal measures 2.46:1. accent-ink is the same hue at
       29% and measures 5.43 — the same call as the desktop primary button. */
    background: var(--v2-accent-ink) !important; color:var(--v2-bg) !important;
    font-size: var(--fs-display) !important; font-weight: 400; line-height: 1;
    padding: 0 !important; border: 4px solid var(--panel) !important;
    box-shadow: 0 8px 24px var(--v2-accent-glow);
  }
  nav.bottom .qadd i { display: none; }
  .fab { display: none !important; }   /* replaced by the center ＋ */

  /* ── the quick-create sheet ───────────────────────────────────────── */
  #qsheet { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
  #qsheet .qs-bk { position: absolute; inset: 0; background: rgba(20,20,43,.42); opacity: 0; transition: opacity var(--v2-mid); }
  #qsheet .qs-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--panel); border-radius: var(--rad-overlay) var(--rad-overlay) 0 0;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform var(--v2-slow) var(--v2-ease);
    box-shadow: 0 -18px 60px rgba(20,20,43,.25);
  }
  /* A closed sheet was slid off-screen with a transform and NOTHING ELSE, so
     its five buttons stayed focusable and stayed in the accessibility tree.
     `pointer-events:none` stops the mouse and does nothing for the keyboard:
     tabbing through the phone layout walked into an invisible panel and the
     focus ring vanished off the bottom of the screen, five times in a row,
     with no way to tell where focus had gone. A screen reader read the whole
     Create menu out as ordinary page content.

     visibility:hidden is the one property that does all three — unfocusable,
     out of the a11y tree, and still animatable, because it flips at the END
     of a transition out and the START of a transition in, which is exactly
     when the sheet should become reachable. transform alone hides a thing
     from the eye and from nothing else. */
  #qsheet .qs-panel { visibility: hidden; transition: transform var(--v2-slow) cubic-bezier(.32,.72,.34,1), visibility 0s linear var(--v2-slow); }
  #qsheet.open { pointer-events: auto; }
  #qsheet.open .qs-bk { opacity: 1; }
  #qsheet.open .qs-panel { transform: none; visibility: visible; transition-delay: 0s; }
  .qs-grab { width: 40px; height: 4px; border-radius: var(--rad-full); background: var(--line); margin: var(--v2-s1h) auto var(--v2-s3); }
  .qs-t { display: block; font-size: var(--fs-title); margin: 0 0 var(--v2-s2) var(--v2-s0); }
  .qs-row {
    display: flex; align-items: center; gap: var(--v2-s3); width: 100%;
    border: 0; background: none; padding: var(--v2-s3) var(--v2-s1h); text-align: left;
    border-radius: var(--rad-surface); font: inherit;
  }
  .qs-row:active { background: var(--accent-soft); }
  .qs-row i { font-style: normal; font-size: var(--fs-say); width: 40px; height: 40px; flex: 0 0 40px;
    display: grid; place-items: center; background: var(--line2); border-radius: var(--rad-surface); }
  .qs-row span { display: flex; flex-direction: column; }
  .qs-row b { font-size: var(--fs-entity); }
  .qs-row small { color: var(--sub); font-size: var(--fs-sm); }

  /* ── dialogs become bottom sheets ─────────────────────────────────── */
  dialog {
    position: fixed !important; margin: 0 !important;
    top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: var(--rad-overlay) var(--rad-overlay) 0 0 !important; border: 0 !important;
    max-height: 88dvh; overflow-y: auto;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -18px 60px rgba(20,20,43,.3);
  }
  dialog::backdrop { background: rgba(20,20,43,.42); }
  .pd-modal {
    position: fixed !important; inset: auto 0 0 0 !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: var(--rad-overlay) var(--rad-overlay) 0 0 !important;
    max-height: 90dvh; overflow-y: auto;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    transform: none !important;
  }

  /* ── touch targets and iOS zoom prevention ────────────────────────── */
  /* ── P2b · the one size that does NOT go on the scale ───────────────
     iOS Safari auto-zooms a focused field whose font-size is under 16px and
     never zooms back out. 16px here is not a type decision, it is the fix for
     that, and putting it on --fs-entity (15px) would reintroduce the bug on
     every form in the app. Left as a literal, on purpose. */
  input, select, textarea { font-size: var(--v2-t-title) !important; }
  .pd-btn, .cc-keyedit button, .cfa-actions button, .top .acts button, .top .actions button {
    min-height: 42px;
  }

  /* ── GovCon desk ──────────────────────────────────────────────────── */
  .pd-board { scroll-snap-type: x mandatory; padding-bottom: var(--v2-s2); }
  .pd-col { scroll-snap-align: center; }
  .v2-factstrip { display: flex !important; overflow-x: auto; gap: var(--v2-s2);
    grid-template-columns: none !important; -webkit-overflow-scrolling: touch; }
  .v2-factstrip .v2-fbox { flex: 0 0 auto; min-width: 150px; }
  .pd-dtabs, .cfa-tabs, .pd-dh .pd-dtabs { overflow-x: auto; flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pd-dtabs::-webkit-scrollbar, .cfa-tabs::-webkit-scrollbar { display: none; }
  .pd-dtabs button, .cfa-tabs button { white-space: nowrap; }
  .pd-dh-r { flex-wrap: wrap; gap: var(--v2-s1h); }
  .pd-srclist, .v2-table, .pd-subtable, .bm-list { overflow-x: auto; }

  /* ── CFA desk ─────────────────────────────────────────────────────── */
  .cfa-head { flex-direction: column; align-items: stretch; }
  .cfa-actions { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; padding-bottom: var(--v2-s0); scrollbar-width: none; }
  .cfa-actions::-webkit-scrollbar { display: none; }
  .cfa-actions button { white-space: nowrap; flex: 0 0 auto; }
  .cfa-rh { flex-wrap: wrap; row-gap: var(--v2-s1); }
  .cfa-concept { white-space: normal; flex-basis: 100%; order: 5; }
  .cfa-body { overflow-x: visible; }
  .cfa-cal, .cfa-calhead { min-width: 640px; }
  .cfa-caltabwrap, .cfa-body:has(.cfa-cal) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cfa-kanban { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; }
  .cfa-kcol { flex: 0 0 80vw; scroll-snap-align: center; }
  .cfa-evcal { grid-template-columns:minmax(0,1fr); }
  .cfa-stylegrid { grid-template-columns:minmax(0,1fr); }
  .cfa-assetrow { row-gap: var(--v2-s2); }

  /* ── Money ────────────────────────────────────────────────────────── */
  .bg-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Integrations ─────────────────────────────────────────────────── */
  .intg-h { flex-direction: column; }
  .intg-uses { justify-content: flex-start; }
  .intg-spend { min-width: 0; width: 100%; }
  .cc-keyedit { flex-wrap: wrap; }
  .cc-keyedit input { flex-basis: 100%; }
}@media (max-width: 860px){
  /* ── GovCon subnav: tabs were crushed to one letter beside the action
       buttons. Tabs now own a full-width scrolling row;actions get their
       own row beneath. Nothing overlaps,everything reachable. ─────────── */
  .pd-navrow{ flex-wrap: wrap; gap: var(--v2-s0); }.pd-navrow .pd-subtabs{ flex: 1 1 100%; order: 1; display: flex;
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }.pd-navrow .pd-subtabs::-webkit-scrollbar{ display: none; }.pd-navrow .pd-subtabs button{ white-space: nowrap; flex: 0 0 auto; }.pd-navrow .pd-subtabs-r{ order: 2; flex: 1 1 100%; display: flex; gap: var(--v2-s1h);
    overflow-x: auto; padding: var(--v2-s1h) 0 var(--v2-s2); -webkit-overflow-scrolling: touch; scrollbar-width: none; }.pd-navrow .pd-subtabs-r::-webkit-scrollbar{ display: none; }.pd-navrow .pd-subtabs-r .pd-btn{ white-space: nowrap; flex: 0 0 auto; }/* ── swipe visuals ─────────────────────────────────────────────────── */.card[data-task]{ touch-action: pan-y; will-change: transform; }.swipe-armed-r{ background: var(--v2-ok-soft) !important; box-shadow: inset 4px 0 0 var(--v2-ok); }.swipe-armed-l{ background: var(--v2-line2) !important; box-shadow: inset -4px 0 0 var(--v2-sub); }
}@media (max-width: 860px){
  /* ── Sourcing rows as cards: the full title and the place, nothing
       crushed. Agency and set-aside step back — they're in the intake
       preview anyway;the Intake button stays. ───────────────────────── */
  .pd-srclist{ overflow-x: visible; }



/* agency   */
/* set-aside */
/* place */


}@media (max-width: 860px){/* the Intake button hover-reveals on desktop — phones have no hover */

}

/* The phone Create sheet is built at phone width;widening the window must not leave it on the page unstyled. */
@media (min-width: 861px){ #qsheet { display: none !important; } }/* The hamburger is a phone control only. */@media (min-width: 861px){#mnav-menu{ display: none; } }/* ── Phone shell, HighLevel-app style (public/mobile.js) ───────────────────
   A floating frosted tab bar with the active tab in a soft pill, an Apps page
   of tinted rounded-square icons, ＋ as a floating button. */@media (max-width: 860px){nav.bottom{
    left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    border-radius: 26px; padding: var(--v2-s1h) !important; gap: var(--v2-s0); align-items: stretch !important;
    background: color-mix(in srgb, var(--panel) 82%, transparent) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
    box-shadow: 0 10px 30px rgba(15, 20, 40, .18); z-index: 60;
  }nav.bottom button{ display: flex; flex-direction: column; align-items: center; gap: var(--v2-s0); border-radius: 20px;
    padding: var(--v2-s1h) var(--v2-s0) var(--v2-s1h) !important; font-size: var(--v2-t-label) !important; font-weight: 600; color: var(--sub); min-width: 0; }nav.bottom button i{ margin: 0 !important; line-height: 0; }nav.bottom button i svg{ width: 23px; height: 23px; }nav.bottom button span{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }nav.bottom button.on{ background: color-mix(in srgb, var(--v2-accent) 16%, transparent); color: var(--v2-accent-ink); }main,.main,#main{ padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; }#ma-fab{ position: fixed; left: 16px; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 55;
    width: 52px; height: 52px; border-radius: 16px; border: 0; background: var(--v2-accent-ink); color: var(--v2-bg);
    font-size: 26px; line-height: 1; box-shadow: 0 8px 22px var(--v2-accent-glow); }body.drawer-open #ma-fab{ display: none; }/* Apps / Search page */#mapps{ position: fixed; inset: 0; z-index: 58; overflow-y: auto; background: var(--v2-bg);
    padding: calc(14px + env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom));
    font-family: -apple-system, BlinkMacSystemFont, var(--v2-sans); }#mapps .ma-head h1{ margin: var(--v2-s1h) var(--v2-s0) var(--v2-s3); font: 700 32px/1.1 -apple-system, BlinkMacSystemFont, var(--v2-display); color: var(--v2-ink); }#mapps .ma-search{ display: flex; align-items: center; gap: var(--v2-s2); background: var(--v2-line2); border-radius: 14px; padding: var(--v2-s2) var(--v2-s3); margin-bottom: var(--v2-s3); color: var(--v2-sub); }#mapps .ma-search svg{ width: 18px; height: 18px; }#mapps .ma-search input{ flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 var(--v2-t-title) -apple-system, BlinkMacSystemFont, var(--v2-sans); color: var(--v2-ink); }#mapps .ma-card{ background: var(--v2-panel); border: 1px solid var(--v2-line); border-radius: 22px; padding: var(--v2-s4) var(--v2-s3) var(--v2-s3); margin-bottom: var(--v2-s3); }#mapps .ma-card h2{ margin: 0 var(--v2-s1) var(--v2-s3); font: 600 var(--v2-t-entity) -apple-system, BlinkMacSystemFont, var(--v2-sans); color: var(--v2-ink); }#mapps .ma-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v2-s4) var(--v2-s1h); }#mapps .ma-app{ display: flex; flex-direction: column; align-items: center; gap: var(--v2-s1h); border: 0; background: none; padding: 0; cursor: pointer;
    font: 500 var(--v2-t-small)/1.2 -apple-system, BlinkMacSystemFont, var(--v2-sans); color: var(--v2-ink); text-align: center; }#mapps .ma-app:active{ opacity: .7; }#mapps .ma-ic{ width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--t,#0ea5a4);
    background: linear-gradient(160deg, color-mix(in srgb, var(--t,#0ea5a4) 16%, transparent), color-mix(in srgb, var(--t,#0ea5a4) 26%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t,#0ea5a4) 22%, transparent); }#mapps .ma-ic svg{ width: 28px; height: 28px; }#mapps .ma-none{ grid-column: 1 / -1; color: var(--v2-sub); text-align: center; font-size: var(--v2-t-entity); margin: var(--v2-s2) 0; }
}