/* ════════════════════════════════════════════════════════════════════
   phone-polish.css — Push 39
   Universal phone-only chrome layered on top of each surface's own
   inline styles. Pages that already have a hamburger drawer
   (/dispatch.html) get the same look; pages that don't get a clean
   injection via phone-drawer.js + this stylesheet.

   Phone breakpoint: <900px (matches existing .phone-only/.desktop-only
   conventions across the portal).
   ════════════════════════════════════════════════════════════════════ */

/* Bigger, friendlier back-arrow on phone — the script in
   /assets/scripts/back-arrow.js mounts a small 24x24 chevron next
   to the logo. On phone, bump the tap target so Flynn (and any
   client on phone) can actually hit it. */
@media (max-width:899px){
  .ikag-back-arrow{
    width:36px !important;
    height:36px !important;
    margin-right:4px !important;
    background:rgba(255,255,255,0.10) !important;
    color:rgba(255,255,255,0.92) !important;
  }
  .ikag-back-arrow svg{
    width:18px !important;
    height:18px !important;
  }
  /* Light-surface variant for pages with white/cream topbars */
  .nav-logo .ikag-back-arrow,
  .topbar-link .ikag-back-arrow,
  .brand .ikag-back-arrow{
    background:rgba(27,42,74,0.08) !important;
    color:var(--ink, #1B2A4A) !important;
  }
}

/* ───── Hamburger button (top-right, phone only) ──────────────────────
   Skipped by phone-drawer.js when a page already provides its own
   .menu-btn (e.g. /dispatch.html). Otherwise the script injects this
   button and wires it to the drawer. */
.ikag-menu-btn{
  /* Placement is the corner dock's job now (top-right, PAGE_FUNCTION) — it
     used to hard-code t12/r12 and collide with the "viewing as" chip. z-index
     kept: the dock sets none, so this keeps its original stacking. */
  /* position:relative is REQUIRED, not cosmetic: z-index only applies to a
     POSITIONED element. Docked children are flex children, so without this
     the z-index below silently does nothing and the element paints in
     document order — i.e. behind things (Flynn, Jul 19: "the hamburger menu
     is behind things"). Layout is unaffected; the dock still places it. */
  position:relative;
  /* 9500, not the old 140. Pages carry their own chrome at 200/300/900/1200+,
     so at 140 this sat UNDER the hero on most surfaces and you had to scroll
     the page to reach it (Flynn, Jul 19). 9500 clears page chrome while
     staying below the things that genuinely belong on top: the working-record
     tooltip (9999) and the gate toast (99700). The dock inherits this. */
  z-index:9500;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(27,42,74,0.10);
  color:var(--ink, #1B2A4A);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 2px rgba(27,42,74,0.04), 0 6px 18px rgba(27,42,74,0.05);
  transition:border-color .2s ease, color .2s ease;
  padding:0;
}
.ikag-menu-btn:hover{
  border-color:var(--copper, #b87333);
  color:var(--copper, #b87333);
}
.ikag-menu-btn svg{
  width:22px;
  height:22px;
}
@media (max-width:899px){
  .ikag-menu-btn{display:inline-flex}
}
/* Hide the floating menu button while a full-screen slider/overlay is open,
   so it doesn't sit on top of the slider/modal header. Only matches when one
   of those is actually open, so other pages are unaffected. */
body:has(.slider.open) .ikag-menu-btn,
body:has(.catm-overlay.open) .ikag-menu-btn,
body:has(.tron-overlay.open) .ikag-menu-btn,
body:has(.qa-overlay.open) .ikag-menu-btn{display:none !important}

/* ───── Slide-in drawer (universal injection) ─────────────────────────
   Right-side drawer, mirrors the pattern in /dispatch.html's hamburger
   drawer so the visual language is identical. Injection lives in
   phone-drawer.js. */
.ikag-drawer-scrim{
  position:fixed;
  inset:0;
  background:rgba(27,42,74,0.50);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s cubic-bezier(.2,.7,.2,1);
  z-index:9510;   /* was 150 — kept above .ikag-menu-btn (9500) */
}
.ikag-drawer-scrim.is-open{opacity:1;pointer-events:auto}

.ikag-drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:300px;
  max-width:86vw;
  background:var(--surface, #FFFFFF);
  box-shadow:-6px 0 24px rgba(27,42,74,0.25);
  z-index:9511;   /* was 151 — drawer above its own scrim */
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
  display:none;
  flex-direction:column;
  padding:calc(20px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.ikag-drawer.is-open{transform:translateX(0)}
@media (max-width:899px){
  .ikag-drawer{display:flex}
}

.ikag-drawer-head{
  padding:6px 22px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(27,42,74,0.10);
  margin-bottom:8px;
  text-decoration:none;
  color:inherit;
  transition:background .15s ease;
}
.ikag-drawer-head:hover{background:rgba(200,117,51,0.04)}
.ikag-drawer-head .mark{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--ink, #1B2A4A);
  color:var(--paper, #FAF7F2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;
  font-size:18px;
  font-weight:500;
  position:relative;
  flex-shrink:0;
}
.ikag-drawer-head .mark::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:1px solid var(--copper, #b87333);
  opacity:.7;
}
.ikag-drawer-head .meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.ikag-drawer-head .meta .t{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:500;
  font-size:17px;
  color:var(--ink, #1B2A4A);
  line-height:1.1;
}
.ikag-drawer-head .meta .s{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--copper, #b87333);
  font-weight:600;
}

.ikag-drawer-section{padding:6px 0 8px}
.ikag-drawer-section .lbl{
  font-size:9.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--charcoal, #4a4a4a);
  font-weight:700;
  padding:8px 22px 6px;
}
/* Push 53: clickable section label (e.g. iKAGbook$ that opens
   the /ikagbooks.html landing). Same typography as .lbl but
   interactive — copper hover + underline cue. */
.ikag-drawer-section .lbl-link{
  display:block;
  text-decoration:none;
  transition:color .15s ease;
}
.ikag-drawer-section .lbl-link:hover,
.ikag-drawer-section .lbl-link:focus{
  color:var(--copper, #b87333);
}
.ikag-drawer-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 22px;
  color:var(--ink, #1B2A4A);
  text-decoration:none;
  font-family:'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size:14.5px;
  font-weight:500;
  transition:background .12s ease, color .12s ease;
}
.ikag-drawer-link:hover,
.ikag-drawer-link:focus{
  background:rgba(200,117,51,0.06);
  color:var(--copper, #b87333);
}
.ikag-drawer-link.is-active{
  color:var(--copper, #b87333);
  background:rgba(200,117,51,0.08);
}
.ikag-drawer-link .g{
  width:28px;
  height:28px;
  border-radius:7px;
  background:rgba(27,42,74,0.06);
  color:rgba(27,42,74,0.70);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;
  font-size:15px;
  font-weight:500;
  flex-shrink:0;
}
.ikag-drawer-link:hover .g,
.ikag-drawer-link.is-active .g{
  background:rgba(200,117,51,0.14);
  color:var(--copper, #b87333);
}

.ikag-drawer-foot{
  margin-top:auto;
  padding:14px 22px 0;
  border-top:1px solid rgba(27,42,74,0.10);
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;
  font-size:11.5px;
  color:var(--charcoal, #4a4a4a);
  line-height:1.5;
}

/* ───── Tighter heros on phone ────────────────────────────────────────
   Most admin pages set their own @media (max-width:768px) hero rules.
   These are an extra polish pass at the 480-px-and-down end where the
   existing rules still leave too much vertical chrome. */
@media (max-width:520px){
  .fin-hero-L h1,
  .page-hero h1,
  .winery-hero h1,
  .pp-hero h1{
    font-size:24px !important;
    line-height:1.05 !important;
  }
  .fin-hero-inner,
  .hero-inner,
  .pp-hero-inner{
    padding-top:18px !important;
    padding-bottom:16px !important;
  }
}

/* Phone-only: never scrollbar-gutter (avoids horizontal padding shift) */
@media (max-width:899px){
  html{scrollbar-gutter:auto !important}
}

/* Phone-only: list rows should be 44pt+ tap targets */
@media (max-width:899px){
  .feed-row,
  .ii-card,
  .ag-row,
  .ag-card{
    min-height:60px;
  }
}

/* ───── Push 51 — phone brand-row (replaces hidden chrome) ───────────
   Lifted from /dispatch.html's .brand-row pattern. The 4 admin pages
   hide their desktop hero on phone (Push 41 phone-hide-chrome) — this
   gives them a tighter editorial replacement: big navy tile with the
   page letter (C / I / $ / F), italic Playfair title, italic sub.

   Hidden on desktop (>=900px) — desktop keeps its own .page-hero /
   .fin-hero render.

   Drop-in pattern:
     <div class="ph-brand"><div class="g">F</div>
       <div class="t"><h1>Financial <span class="em">Overview</span></h1>
         <div class="s">Revenue, spend, what's about to move.</div>
       </div>
     </div>
*/
.ph-brand{display:none}
@media (max-width:899px){
  body.phone-hide-chrome .ph-brand{
    display:flex;
    align-items:flex-end;
    gap:14px;
    padding:calc(20px + env(safe-area-inset-top)) 18px 8px;
    margin:0 auto;
    max-width:760px;
  }
}
.ph-brand .g{
  width:48px;height:48px;border-radius:12px;
  background:var(--ink, #1B2A4A);color:var(--paper, #FAF7F2);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;font-size:26px;font-weight:500;
  position:relative;flex-shrink:0;
}
.ph-brand .g::after{
  content:"";position:absolute;inset:-3px;border-radius:15px;
  border:1px solid var(--copper, #b87333);opacity:.65;
}
.ph-brand .t{
  display:flex;flex-direction:column;gap:3px;min-width:0;padding-bottom:2px;
}
.ph-brand .t h1{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:500;font-size:30px;line-height:1.02;letter-spacing:-.012em;
  color:var(--ink, #1B2A4A);margin:0;
}
.ph-brand .t h1 .em{
  font-style:italic;color:var(--copper, #b87333);
}
.ph-brand .t .s{
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;font-size:13px;color:var(--charcoal, #4a4a4a);
  line-height:1.4;
}
@media (max-width:520px){
  .ph-brand .g{width:44px;height:44px;font-size:23px;border-radius:11px}
  .ph-brand .t h1{font-size:26px}
  .ph-brand .t .s{font-size:12.5px}
}

/* ───── Push 41 — body.phone-hide-chrome ──────────────────────────────
   Opt-in via <body class="phone-hide-chrome">. Hides the portal-nav top
   bar AND the page-hero / fin-hero banner on phone. The hamburger drawer
   (top-right) replaces both for navigation. Matches /dispatch.html's
   pattern where portal-nav + page-hero are .desktop-only.

   Applied to: financials.html, contracts.html, invoices.html,
   expenses.html (the 4 admin landing pages Flynn flagged).

   Page content remains untouched — section headers inside <main> still
   identify which surface the user is on. */
@media (max-width:899px){
  body.phone-hide-chrome .portal-nav,
  body.phone-hide-chrome .page-hero,
  body.phone-hide-chrome .fin-hero{
    display:none !important;
  }
  /* Trim the now-orphaned top padding so content lands at a sensible
     phone-safe height. */
  body.phone-hide-chrome .page-main,
  body.phone-hide-chrome main{
    padding-top:calc(20px + env(safe-area-inset-top)) !important;
  }
}