/* CineBase — main stylesheet */
/* webhook-deploy-test: v3.7.2 */

:root {
  /* -- Dark theme (default) -----------------------------
     v2026.05.27+ b134: refined palette with a subtle cool
     undertone (instead of pure neutral grey). The slight
     blue cast gives the warm amber accent harmonic contrast
     — sunset over a cool sky, rather than a street sign on
     cement. Surface gradients + inset top-highlights + a
     multi-layer depth-shadow ramp suggest light from above
     without resorting to faux 3D.

     Old palette retained as a comment so any future tuning
     has a baseline to compare against:
       --bg:#0a0a0c; --surface:#1a1b1f; --surface2:#23252a;
       --surface3:#2e3036; --surface-hi:#2a2c32;
       --border:#34363c; --border2:#44474e; --border3:#5a5d65;
       --text:#fafafc; --text2:#c4c6cc; --text3:#80838c; */
  --bg:#0a0b10;
  --surface:#181b24;
  --surface2:#222632;
  --surface3:#2d3142;
  --surface-hi:#262a36;     /* elevated cards / hover */
  --border:#2f3340;
  --border2:#41465a;
  --border3:#5b6076;

  --text:#f4f6fa;
  --text2:#bdc1cf;
  --text3:#7a7e90;

  --accent:#f5a623;
  --accent2:#e86c2c;
  --accent-dim:rgba(245,166,35,.14);
  --accent-soft:rgba(245,166,35,.07);     /* tinted tint for subtle wash */
  --accent-rim:rgba(245,166,35,.32);      /* edge glow around accent surfaces */

  --green:#3ec96e;
  --green-dim:rgba(62,201,110,.14);
  --red:#ff5050;
  --red-dim:rgba(255,80,80,.14);
  /* --amber: 'soon' / overdue-warning state. Referenced in the
     All Jobs accent palette (.aj-card-accent.soon, .jt-accent.soon),
     the Status colours key, dashboard today/warn states, activity
     'out' icons, expense-import diag pill, etc. Was previously
     referenced without ever being declared — most usages worked by
     accident because they paired the colour with an explicit
     rgba(245,158,11,...) background. The 0.85rem swatch in the All
     Jobs colour key made the missing-variable case visible since
     it had no rgba backstop. Value matches Tailwind amber-500. */
  --amber:#f59e0b;
  --amber-dim:rgba(245,158,11,.14);

  /* Surface gradients — applied to .dash-card / .phase-tab / panel
     headers for subtle top-down depth ("light from above"). */
  --surface-grad:linear-gradient(180deg, var(--surface-hi) 0%, var(--surface) 100%);
  --surface2-grad:linear-gradient(180deg, var(--surface3) 0%, var(--surface2) 100%);

  /* Inset top-edge highlight — paired with the surface gradient
     to give surfaces a 1px "lip of light" at the top, like real
     materials catching ambient light. */
  --surface-rim:rgba(255,255,255,.04);
  --surface-rim-strong:rgba(255,255,255,.07);

  /* Layered depth shadows — replace flat single-layer with
     multi-layer for refined elevation. depth-1 is the everyday
     card; depth-2 is for raised cards and dropdowns; depth-3 is
     for floating overlays. */
  --depth-1:0 1px 2px rgba(0,0,0,.45);
  --depth-2:0 1px 3px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.28);
  --depth-3:0 1px 3px rgba(0,0,0,.45), 0 8px 30px rgba(0,0,0,.36);

  --ui:'CineBaseIcons','Inter',system-ui,sans-serif;
  --mono:'CineBaseIcons','JetBrains Mono',monospace;

  --header-h:56px;
  --bnav-h:64px;
  --page-max:1200px;

  --rail-bg:#06070b;
  --header-bg:linear-gradient(180deg,#282b3a 0%,#181b24 100%);
  --header-border:#2f3340;
  --shadow-sm:0 1px 4px rgba(0,0,0,.6);
  --shadow-md:0 4px 18px rgba(0,0,0,.7);
  --shadow-lg:0 12px 40px rgba(0,0,0,.8);
}

/* -- Light theme ------------------------------------
   v2026.05.27+ b134: subtle cool-cream undertone for
   sophistication. Surfaces lifted to a soft white with a
   barely-there blue cast; borders warmer to anchor cards.
   The same gradient + rim + depth tokens are mirrored here
   in inverse so any element that opts in to them works in
   both themes. */
html.light {
  --bg:#edeef2;
  --surface:#ffffff;
  --surface2:#f3f5f9;
  --surface3:#e6e9ef;
  --surface-hi:#fafbfd;
  --border:#cfd2dc;
  --border2:#a7acba;
  --border3:#7c818e;

  --text:#0a0c12;
  --text2:#3a3e48;
  --text3:#70748a;

  --accent:#c97509;
  --accent2:#b03d18;
  --accent-dim:rgba(201,117,9,.10);
  --accent-soft:rgba(201,117,9,.06);
  --accent-rim:rgba(201,117,9,.28);

  --green:#137534;
  --green-dim:rgba(19,117,52,.10);
  --red:#b8201e;
  --red-dim:rgba(184,32,30,.10);
  /* Tailwind amber-600 — darker than the dark-theme amber-500 for
     sufficient contrast on white surfaces. Existing literal-colour
     usages (#d97706 at lines 6619, 11784, 12100, 12104) already use
     this shade for light-mode warning text — keep it consistent. */
  --amber:#d97706;
  --amber-dim:rgba(217,119,6,.10);

  --surface-grad:linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
  --surface2-grad:linear-gradient(180deg, #fafbfd 0%, #eff1f6 100%);
  --surface-rim:rgba(255,255,255,.7);
  --surface-rim-strong:rgba(255,255,255,.9);

  --depth-1:0 1px 2px rgba(15,20,30,.06);
  --depth-2:0 1px 3px rgba(15,20,30,.08), 0 4px 14px rgba(15,20,30,.10);
  --depth-3:0 1px 3px rgba(15,20,30,.10), 0 8px 28px rgba(15,20,30,.14);

  --rail-bg:#dde0e6;
  --header-bg:linear-gradient(180deg,#ffffff 0%,#eef0f5 100%);
  --header-border:#cfd2dc;
  --shadow-sm:0 1px 3px rgba(15,20,30,.08);
  --shadow-md:0 4px 14px rgba(15,20,30,.12);
  --shadow-lg:0 12px 32px rgba(15,20,30,.16);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}
body{
  /* Background uses a soft radial halo overlaid on the base bg.
     Adds atmosphere — the page feels like there's an ambient light
     source rather than a flat colour fill. The halo is positioned
     where the user's eye lands first (top-centre) and fades to
     transparent so the rest of the page reads clean. Pure CSS,
     pure GPU; no flicker, no performance cost. */
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%,
      color-mix(in oklch, var(--accent-soft), transparent 50%) 0%,
      transparent 70%),
    var(--bg);
  color:var(--text);
  font-family:var(--ui);font-size:16px;line-height:1.55;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
/* Scrollbars (b768)
   ------------------------------------------------------------------
   The old 5px bar put a hard 5px line immediately beside whatever it
   was scrolling — text, table cells, modal fields — so it read as part
   of the content and pulled the eye. The thumb is still 5px of visible
   pixels, but it now lives inside a 14px channel and is pushed to the
   far outside edge of it, leaving ~7px of clear space between the bar
   and anything it sits next to.

   How: the thumb keeps a transparent border and background-clip
   padding-box, so the border is a gap rather than paint. An asymmetric
   border (fat on the content side, thin on the outer side) is what
   pushes the visible sliver outward instead of centring it.

   scrollbar-gutter:stable reserves the channel whether or not the bar
   is showing, so content doesn't shift sideways the moment a list gets
   long enough to scroll.

   Firefox gets scrollbar-width:thin + colours; it has no equivalent
   control over inset, which is a graceful degradation rather than a
   bug. Note it must be scoped to Firefox: from Chrome 121 the standard
   `scrollbar-width` property takes precedence and switches OFF every
   ::-webkit-scrollbar rule below, so a global `*{scrollbar-width:thin}`
   silently deletes all of this styling. Verified — it blanked the bars
   entirely in a headless Chrome render. @supports(-moz-appearance)
   keeps it Firefox-only. */
@supports (-moz-appearance:none){
  *{ scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
}
/* (b835) html never scrolls (overflow:hidden above) — the reserved
   gutter just left a 14px dead strip down the right of every page. */
html{ scrollbar-gutter:auto; }

::-webkit-scrollbar{ width:14px; height:14px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--border2);
  background-clip:padding-box;          /* border becomes a gap, not paint */
  border:solid transparent;
  border-width:3px 2px 3px 7px;         /* 7px clear on the content side */
  border-radius:9px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--border3); background-clip:padding-box; }
::-webkit-scrollbar-corner{ background:transparent; }

/* Horizontal bars need the gap on top (the content side) instead. */
::-webkit-scrollbar-thumb:horizontal{ border-width:7px 3px 2px 3px; }

/* -- HEADER -- */
header{
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
  box-shadow:var(--shadow-sm);
  padding:0 1.25rem;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:200;
  position:relative;
}
/* (v2026.07+) Chrome polish: a soft accent hairline along the bottom
   edge gives the bar a finished look without shouting. */
header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent 5%,var(--accent) 50%,transparent 95%);
  opacity:.28;pointer-events:none;
}
/* (b576) Header wordmark. Was a bare uppercase string + grey <em>;
   now a lockup: an accent rule, the mark, and a small descriptor
   stacked under it. It's a button (goes home) but must not look or
   behave like one — no fill, no border, no focus jump. */
.logo{
  display:inline-flex;align-items:center;gap:.6rem;
  background:none;border:none;padding:0;margin:0;
  cursor:pointer;font-family:var(--ui);text-align:left;
  flex-shrink:0;
  transition:opacity .12s;
}
.logo:hover{opacity:.82;}
.logo:active{opacity:.65;}
.logo-bar{
  width:3px;height:26px;border-radius:3px;flex-shrink:0;
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
}
.logo-txt{display:flex;flex-direction:column;justify-content:center;gap:.12rem;line-height:1;}
.logo-txt:not(:has(.logo-sub)) .logo-mark{font-size:1.2rem;}
.logo-mark{
  font-weight:800;font-size:1.12rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text);
}
.logo-sub{
  font-weight:600;font-style:normal;font-size:.6rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--text3);
}
@media (max-width:820px){
  .logo-sub{display:none;}
  .logo-bar{height:20px;}
}
.hdr-right{display:flex;align-items:center;gap:.6rem;}
/* (v2026.07+) Segmented tab rail: the nav reads as one designed
   control — a recessed rounded container the tab pills sit in. */
.hdr-tabs{
  display:flex;gap:.2rem;align-items:center;
  background:rgba(0,0,0,.22);
  border:1px solid var(--surface-rim-strong);
  border-radius:12px;padding:.24rem .28rem;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25);
  /* (b734) Between the desktop layout and the 700px bottom-nav
     handoff, the rail had no shrink strategy — tabs just clipped.
     Now: the rail may shrink and scrolls internally as a last
     resort; tabs themselves never squash. */
  flex:0 1 auto; min-width:0; overflow-x:auto;
  scrollbar-width:none;
}
.hdr-tabs::-webkit-scrollbar{ display:none; }
.nav-tab{ flex:0 0 auto; }
html.light .hdr-tabs{background:var(--surface2);border-color:var(--border);box-shadow:inset 0 1px 2px rgba(0,0,0,.06);}
.nav-tab{
  font-family:var(--ui);font-size:.92rem;font-weight:550;
  padding:.34rem .85rem;background:transparent;
  border:1px solid transparent;border-radius:8px;
  color:var(--text2);cursor:pointer;transition:all .12s;letter-spacing:.005em;
  display:inline-flex;align-items:center;
}
/* (v2026.07+) Small icon before each tab label. Slightly muted so the
   text stays primary; full strength on the active pill. */
.nav-tab-ico{
  font-size:.82em;margin-right:.38rem;opacity:.75;line-height:1;
  filter:saturate(.75);
  display:inline-flex;align-items:center;
}
/* (b734) Mid-band (bottom nav takes over below 700): drop tab labels
   to icon-only so all items stay visible without scrolling. font-size
   0 hides the bare text node (labels aren't wrapped in a span); the
   icon and badge restore their own sizes. */
@media (max-width:1040px) and (min-width:701px){
  .nav-tab{ font-size:0; padding:.4rem .55rem; }
  .nav-tab-ico{ margin-right:0; font-size:15px; }
  .nav-tab .nav-inbox-badge{ font-size:.64rem; margin-left:.25rem; }
}
.nav-tab.active .nav-tab-ico{opacity:1;filter:none;}
.nav-tab.active{
  background:var(--accent);color:#fff;font-weight:650;
  box-shadow:0 2px 10px rgba(245,166,35,.32);
}
.nav-tab:hover:not(.active){background:var(--surface2);color:var(--text);border-color:var(--border);}

/* (v2026.07+) Header "More" overflow dropdown — secondary nav
   destinations (Contacts, Tasks, Scripts, Diagrams, Tools, Users)
   live here so the top bar stays Home/Jobs/Finances/Gear. Items are
   plain .nav-tab buttons so the active-state matcher keeps working;
   this block just re-lays them out vertically inside the panel. */
.hdr-more{position:relative;display:inline-flex;}
.hdr-more-caret{font-size:.65rem;opacity:.7;margin-left:.3rem;}
.hdr-more-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:170px;
  background:var(--surface);border:1px solid var(--border2);border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);padding:.35rem;z-index:600;
  display:flex;flex-direction:column;gap:.15rem;
}
.hdr-more-menu[hidden]{display:none;}
.hdr-more-menu .nav-tab{display:flex;width:100%;text-align:left;}
/* Light the More pill when the active view lives inside it. */
.hdr-more:has(.hdr-more-menu .nav-tab.active) .hdr-more-btn{
  background:var(--accent);color:#fff;font-weight:650;
  box-shadow:0 2px 10px rgba(245,166,35,.32);
}

/* (v2026.07+) Header quick-search — a button dressed as an input.
   Clicking (or "/") opens the global lookup modal, which searches
   jobs, gear, contacts and tasks. Hidden on phones (the mobile home
   screen has its own Find Item entry point). */

/* (b671) Header feedback button — accent-outlined so it reads as an
   invitation, not another nav tab. Text collapses on narrow widths;
   fully hidden on phones (the user-menu entry covers mobile). */
.hdr-feedback{
  display:flex;align-items:center;gap:.35rem;flex-shrink:0;
  font-size:.78rem;font-weight:700;color:var(--accent);
  background:rgba(245,166,35,.10);border:1px solid rgba(245,166,35,.45);
  border-radius:999px;padding:.3rem .75rem;cursor:pointer;
  transition:background .12s ease, transform .12s ease;
}
.hdr-feedback:hover{background:rgba(245,166,35,.2);transform:translateY(-1px);}
html.light .hdr-feedback{background:rgba(245,166,35,.14);}
.hdr-feedback-ico{font-size:.85rem;line-height:1;}
@media (max-width: 1100px){ .hdr-feedback-txt{display:none;} .hdr-feedback{padding:.3rem .5rem;} }
@media (max-width: 760px){ .hdr-feedback{display:none;} }

/* (b833) Search sits in its own centred header slot now the tabs
   are gone — wide, tall, first thing the eye lands on. */
.hdr-mid{flex:1;display:flex;justify-content:center;min-width:0;padding:0 1.5rem;}
.hdr-search{
  display:inline-flex;align-items:center;gap:.6rem;
  width:100%;max-width:640px;min-width:0;height:38px;padding:0 .9rem 0 .8rem;
  background:rgba(0,0,0,.26);border:1px solid var(--surface-rim-strong);
  border-radius:10px;cursor:pointer;
  font-family:var(--ui);font-size:.95rem;color:var(--text3);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25);
  transition:border-color .12s, color .12s, box-shadow .12s;
}
.hdr-search:hover{box-shadow:inset 0 1px 3px rgba(0,0,0,.25),0 0 0 3px var(--accent-dim);}
.hdr-search:focus-visible{outline:none;border-color:var(--accent);}
html.light .hdr-search{background:var(--surface2);border-color:var(--border);}
.hdr-search:hover{border-color:var(--border3);color:var(--text2);}
.hdr-search-ico{font-size:.85em;opacity:.8;filter:saturate(.6);}
.hdr-search-txt{flex:1;text-align:left;}
.hdr-search-kbd{
  font-family:var(--mono);font-size:.72rem;line-height:1;
  padding:.14rem .32rem;border-radius:4px;
  border:1px solid var(--border2);color:var(--text3);opacity:.8;
}
@media (max-width:900px){.hdr-mid{padding:0 .8rem;} .hdr-search-kbd{display:none;}}
@media (max-width:760px){.hdr-mid{flex:0 0 auto;padding:0 .5rem;} .hdr-search{width:38px;padding:0;justify-content:center;} .hdr-search-txt{display:none;}}

/* (v2026.07+) Header user menu — theme/chat/help/settings/lock
   consolidated behind the identity pill. Hidden entirely while
   signed out (the pill is :empty then). */
.hdr-user{position:relative;display:inline-flex;align-items:center;}
.hdr-user-btn{
  display:inline-flex;align-items:center;gap:.3rem;
  background:none;border:none;cursor:pointer;padding:0;
}
.hdr-user-btn:has(.user-pill:empty){display:none;}
.hdr-user-btn:hover .user-pill{border-color:var(--border3);}
.hdr-user-caret{font-size:.65rem;color:var(--text3);}
.hdr-user-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:185px;
  background:var(--surface);border:1px solid var(--border2);border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);padding:.35rem;z-index:600;
}
.hdr-user-menu[hidden]{display:none;}
.hdr-user-item{
  display:flex;align-items:center;gap:.55rem;width:100%;
  background:none;border:none;cursor:pointer;
  padding:.5rem .55rem;border-radius:6px;
  font-family:var(--ui);font-size:.88rem;color:var(--text);text-align:left;
}
.hdr-user-item:hover{background:var(--surface2);}
.hdr-user-ico{width:1.3em;text-align:center;font-size:1rem;line-height:1;}
/* (b683) The menu holds <button>s and now one <a> (Contact CineBase).
   Anchors don't inherit the button reset, so pin the two properties
   that differ — everything else comes from .hdr-user-item. */
a.hdr-user-item{text-decoration:none;box-sizing:border-box;}
/* Menu labels stay on one line; the menu grows to fit instead. Two
   items ("Get your own CineBase", "Contact CineBase") were wrapping
   against the 185px min-width and reading as two entries. */
.hdr-user-item{white-space:nowrap;}
/* (b562) Inline Lucide SVGs in the header — same stroke style as the
   mobile bottom nav; currentColor follows tab/menu text colour. */
.nav-tab-ico svg{width:14px;height:14px;display:block;}
.hdr-search-ico{display:inline-flex;align-items:center;}
.hdr-search-ico svg{width:17px;height:17px;display:block;}
.hdr-user-ico{display:inline-flex;align-items:center;justify-content:center;}
.hdr-user-ico svg{width:15px;height:15px;display:block;}
/* (b563) .gi — sprite-based line icons swapped in for emoji at
   runtime; 1em tracks surrounding text size, currentColor tracks
   its colour. */
.gi{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;}

/* -- LAYOUT -- */
.app-body{display:flex;flex:1;overflow:hidden;}
.view{display:none;flex:1;overflow:hidden;}
.view.active{display:flex;}

/* Views that stack content vertically get flex-direction:column */
#view-home,#view-calendar,#view-contacts,#view-users,#view-inventory,#view-borrow,#view-settings,#view-tasks{
  flex-direction:column;
}

/* Content panes — fill their column, scroll internally.
   Every top-level view shares the same outer container width
   (--page-max) and horizontal padding so the page rhythm stays
   consistent as the user moves between views. Form-shaped views
   (Settings, Users, Borrow form) constrain their inner column
   further but keep the same outer rhythm. */
#view-home{overflow-y:auto;}
#calendar-content,#contacts-content,
#users-content,#borrow-admin-content,#tasks-content{
  flex:1;overflow-y:auto;
}
#home-content,
#calendar-content,
#contacts-content,
#users-content,
#borrow-admin-content{
  padding:1.5rem 1.8rem;
  max-width:var(--page-max);width:100%;margin:0 auto;flex:1;
}
/* Calendar is data-dense and benefits from a slightly tighter top */
#calendar-content{ padding:.6rem 1.8rem 1.5rem; }

/* ══════════════════════════════════════════════════════════
   JOB PANEL HEADER & DAY TABS
   ══════════════════════════════════════════════════════════ */

/* Job header — shown at top of main panel when job selected */
.job-panel-header{
  flex-shrink:0;
  padding:.7rem 1.3rem .55rem;
}
.jph-inner{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;overflow:hidden;
}
/* Elements that animate in/out — use max-height+opacity so transition works */
.jph-actions,
.jph-contacts-row,
.day-tabs-row,
.jph-meta,
.stats-bar,
.gear-controls{
  max-height:200px;opacity:1;overflow:hidden;
  transition:max-height .28s ease, opacity .22s ease, padding .22s ease;
}

/* ── Compact mode — triggered when gear list scrolls >40px ── */
.jph-inner.jph-compact .jph-top{ padding:.3rem .75rem;transition:padding .25s ease; }
.jph-inner.jph-compact .jph-meta{ max-height:0;opacity:0;margin:0; }
.jph-inner.jph-compact .jph-actions{ max-height:0;opacity:0; }
.jph-inner.jph-compact .jph-contacts-row{ max-height:0;opacity:0;padding-top:0;padding-bottom:0; }
.jph-inner.jph-compact .day-tabs-row{ max-height:0;opacity:0;padding-top:0;padding-bottom:0; }
.jph-inner.jph-compact .jph-job-name{ font-size:.88rem; }

/* Outer wrapper padding transition */
.job-panel-header{ transition:padding .25s ease; }
.job-panel-header.jph-wrap-compact{ padding:.3rem .85rem .25rem; }

/* Gear card: collapse stats bar and gear controls */
.gear-card-wrap{ transition:padding .25s ease; }
.gear-card-wrap.gear-compact{ padding:.2rem .85rem .35rem; }
.gear-card-wrap.gear-compact .stats-bar{ max-height:0;opacity:0;padding-top:0;padding-bottom:0; }
.gear-card-wrap.gear-compact .gear-controls{ max-height:0;opacity:0;padding-top:0;padding-bottom:0; }
.jph-top{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem .85rem;
}
.jph-title-block{flex:1;min-width:0;}
.jph-job-name{
  font-size:1.7rem;font-weight:750;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1;
  letter-spacing:-.022em;
}
.jph-meta{
  font-size:.8rem;color:var(--text3);margin-top:.2rem;
  display:flex;gap:.3rem .7rem;flex-wrap:wrap;align-items:center;
}
.jph-meta > span{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.12rem 0;
}
.jph-meta-icon{
  font-size:.78rem;opacity:.55;flex-shrink:0;
}
.jph-meta strong{color:var(--text);font-weight:600;}
.jph-meta .jph-meta-div{
  width:3px;height:3px;border-radius:50%;background:var(--text3);opacity:.4;flex-shrink:0;
}

/* Contact pills row in job header */
.jph-contacts-row{
  display:flex;flex-wrap:wrap;gap:.4rem;
  padding:.45rem 1rem .55rem;
  border-top:1px solid var(--border);
}
.jph-contact-pill{
  display:inline-flex;align-items:center;gap:0;
  border-radius:14px;overflow:hidden;
  border:1px solid var(--border);
  font-size:.76rem;font-weight:500;
  background:var(--surface2);
  transition:border-color .1s;
}
.jph-contact-pill:hover{border-color:var(--border3);}
/* (b292) Job header linked-script chip. */
.jph-script-row{
  display:flex;flex-wrap:wrap;gap:.4rem;
  padding:.4rem 1rem .5rem;
  border-top:1px solid var(--border);
}
.jph-script-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--accent);background:var(--accent-dim);color:var(--accent);
  border-radius:14px;padding:.15rem .65rem;
  font-size:.78rem;font-weight:600;cursor:pointer;transition:filter .12s;
  max-width:100%;
}
.jph-script-chip:hover{filter:brightness(1.08);}
.jph-script-chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch;}
/* (b292) Script card in the job Plan phase. */
.jscr-card-body{ padding:.2rem .95rem 1rem; }
.jscr-title{ font-size:1rem;font-weight:650;color:var(--text);margin-bottom:.4rem;word-break:break-word; }
.jscr-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.75rem; }
.jscr-meta-chip{
  font-size:.72rem;font-weight:600;color:var(--text3);
  background:var(--surface3);border:1px solid var(--border);border-radius:8px;padding:.08rem .45rem;
  font-variant-numeric:tabular-nums;
}
.jscr-actions{ display:flex;flex-wrap:wrap;gap:.45rem; }
/* (b292) Link-a-script picker. */
.job-script-pick-list{ display:flex;flex-direction:column;gap:.35rem; }
.job-script-pick-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .7rem;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);cursor:pointer;transition:border-color .1s,background .1s;
}
.job-script-pick-row:hover{ border-color:var(--accent);background:var(--accent-dim); }
.job-script-pick-row .jsp-main{ flex:1;min-width:0; }
.job-script-pick-row .jsp-title{ font-weight:600;font-size:.88rem;color:var(--text);word-break:break-word; }
.job-script-pick-row .jsp-author{ font-size:.76rem;color:var(--text3); }
.jph-pill-email{
  padding:.25rem .45rem;
  background:var(--accent);color:#fff;
  font-size:.7rem;line-height:1;
}
.jph-pill-name{
  padding:.25rem .55rem;color:var(--text);
}
.jph-pill-role{
  padding:.25rem .55rem .25rem .4rem;
  color:var(--text3);
  font-size:.7rem;font-weight:500;
  border-left:1px solid var(--border);
}

/* Job action buttons row — grouped by purpose */
.jph-actions{
  display:flex;gap:.35rem;align-items:center;flex-shrink:0;flex-wrap:wrap;
  padding-top:.15rem;
}
.jph-actions-group{
  display:inline-flex;gap:.2rem;
  padding:.15rem;background:var(--surface2);
  border:1px solid var(--border);border-radius:8px;
}
.jph-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:6px;color:var(--text2);font-family:var(--ui);font-size:.8rem;font-weight:500;
  padding:.38rem .75rem;cursor:pointer;white-space:nowrap;transition:all .12s;
}
.jph-btn:hover{background:var(--surface3);border-color:var(--border3);color:var(--text);}
.jph-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(245,166,35,.25);}
.jph-btn.primary:hover{background:var(--accent);filter:brightness(1.08);}
.jph-btn.danger{color:var(--red);}
.jph-btn.danger:hover{background:rgba(224,72,72,.08);border-color:rgba(224,72,72,.35);}
.jph-btn-grouped{
  background:transparent;border:none;border-radius:5px;
}
.jph-btn-grouped:hover{background:var(--surface);}
.jph-btn-icon{font-size:.95rem;}

/* Day tabs row */
.day-tabs-row{
  display:flex;align-items:center;
  border-top:1px solid var(--border);
  overflow-x:auto;padding:.4rem 1rem;
  gap:.25rem;
}
.day-tabs-row::-webkit-scrollbar{display:none;}
/* Day-context wrap — same horizontal padding as .gear-card-wrap and
   .day-info-wrap so the three cards stack as a single column of
   matching rounded surfaces. */
.dc-wrap{
  padding:.55rem 1.3rem 0;
  flex-shrink:0;
}
.day-context-bar{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.75rem 1rem;
  border:1px solid var(--border);border-radius:9px;
  background:var(--surface2);flex-shrink:0;min-height:54px;
}
/* ── Day context bar ─────────────────────────────────────────
   Inline-editable: day name, location, and date are all clickable
   inputs styled to read as text. No native input chrome until you
   hover (dashed underline) or focus (accent underline). */
.dcb-date-group{
  display:flex;align-items:center;gap:.45rem;flex-shrink:0;
  position:relative;cursor:pointer;
}
.dcb-weather{display:flex;justify-content:center;flex-shrink:0;}
.dcb-datebox{
  width:46px;border-radius:6px;padding:.3rem 0;text-align:center;
  background:var(--surface);border:1px solid var(--border);flex-shrink:0;
  transition:border-color .12s,background .12s;
}
.dcb-date-group:hover .dcb-datebox{border-color:var(--border2);background:var(--surface2);}
.dcb-date-group:focus-within .dcb-datebox{border-color:var(--accent);}
.dcb-datebox-mo{font-size:.62rem;font-weight:700;text-transform:uppercase;color:var(--text3);letter-spacing:.05em;}
.dcb-datebox-d{font-size:1.15rem;font-weight:700;color:var(--text);line-height:1;margin-top:.1rem;}
.dcb-datebox-empty{
  background:transparent;border-style:dashed;
}
.dcb-datebox-empty .dcb-datebox-d{color:var(--text3);}
.dcb-wday{font-size:.78rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;}
/* The actual date input is invisible but lives inside the date
   group as the showPicker() target. pointer-events:none stops it
   from capturing clicks itself — the wrapper's onclick calls
   showPicker() explicitly, which works reliably across re-renders
   where the implicit label-association approach did not. */
.dcb-date-input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;padding:0;margin:0;
  pointer-events:none;
  font:inherit;color:transparent;background:transparent;
}

.dcb-text{display:flex;flex-direction:column;gap:.18rem;min-width:0;flex:1;}

/* Day name — large, bold, prominent. Inline input version of
   the static .dcb-title span. */
.dcb-title{
  font-size:1.4rem;font-weight:750;color:var(--text);
  letter-spacing:-.018em;line-height:1.2;
}
.dcb-title.dcb-empty{color:var(--text3);font-weight:400;font-size:1.05rem;}
.dcb-title-input{
  font-family:var(--ui);font-size:1.4rem;font-weight:750;color:var(--text);
  letter-spacing:-.018em;line-height:1.2;
  background:transparent;border:none;outline:none;
  border-bottom:1px dashed transparent;
  padding:0 0 1px;margin:0;
  width:100%;min-width:0;
  transition:border-color .12s;
}
.dcb-title-input:hover{border-bottom-color:var(--border2);}
.dcb-title-input:focus{border-bottom-color:var(--accent);}
.dcb-title-input::placeholder{color:var(--text3);font-weight:400;}

/* Location — smaller secondary line with a 📍 prefix. */
.dcb-location-row{
  display:flex;align-items:center;gap:.3rem;font-size:.88rem;
  color:var(--text2);min-width:0;
}
.dcb-location-icon{font-size:.85rem;flex-shrink:0;opacity:.85;}
.dcb-location-input{
  font-family:var(--ui);font-size:.88rem;color:var(--text2);
  background:transparent;border:none;outline:none;
  border-bottom:1px dashed transparent;
  padding:0 0 1px;margin:0;
  flex:1;min-width:0;line-height:1.3;
  transition:border-color .12s,color .12s;
}
.dcb-location-input:hover{border-bottom-color:var(--border2);color:var(--text);}
.dcb-location-input:focus{border-bottom-color:var(--accent);color:var(--text);}
.dcb-location-input::placeholder{color:var(--text3);}
.dcb-parent-note{
  font-size:.78rem;color:var(--text3);font-style:italic;flex-shrink:0;
}

/* Old non-editable .dcb-location (used by satellite parent-note
   fallback) kept for back-compat in case other call sites still
   render it. */
.dcb-location{font-size:.78rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dcb-meta{font-size:.78rem;color:var(--text3);}

/* ── Day Info card ─────────────────────────────────────────────
   Compact card sitting between the day context bar and the gear
   card, holding per-day metadata that doesn't fit on the context
   bar itself: call time, wrap time, personal-vehicle km. Visual
   shell mirrors .gear-card-wrap / .gear-card so the page reads as
   a single column of consistent rounded surfaces. Designed to take
   additional fields later (lunch, MOS time, weather call, etc.)
   without restructuring — each "field" is a self-contained
   .dic-field element, separated by .dic-sep dividers. */
.day-info-wrap{
  padding:.55rem 1.3rem 0;
  flex-shrink:0;
}
.day-info-card{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;
  padding:.55rem .9rem;
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  font-family:var(--ui);
}
.dic-field{
  display:flex;align-items:center;gap:.55rem;flex-shrink:0;
}
.dic-icon{font-size:1rem;opacity:.85;line-height:1;}
.dic-stack{display:flex;flex-direction:column;gap:.05rem;min-width:0;}
.dic-label{
  font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text3);line-height:1;
  cursor:pointer;
}
.dic-input{
  background:transparent;border:none;
  color:var(--text);font-family:var(--ui);
  font-size:.92rem;font-variant-numeric:tabular-nums;
  padding:.08rem 0;margin:0;line-height:1.2;
  border-bottom:1px dashed transparent;
  transition:border-color .12s,background .12s;
}
.dic-input:hover{border-bottom-color:var(--border2);}
.dic-input:focus{
  outline:none;border-bottom-color:var(--accent);
}
.dic-time{width:108px;}
.dic-km{width:46px;text-align:right;}
.dic-km-row{display:flex;align-items:center;gap:.3rem;}
/* (b499) Travel + Shoot tick in the Day Info card. Sits in the same
   .dic-stack slot as the km row so the card's baseline grid holds. */
.dic-travel-row{
  display:flex;align-items:center;gap:.35rem;
  cursor:pointer;user-select:none;
  color:var(--text2);font-size:.8rem;
  font-family:var(--ui);white-space:nowrap;
}
.dic-travel-row input{width:auto;margin:0;cursor:pointer;}
.dic-travel-row:hover{color:var(--text);}
.dic-unit{
  color:var(--text3);font-size:.72rem;
  font-family:var(--ui);letter-spacing:.02em;
}
/* Hide the native number-input spinner — we provide our own
   +/- buttons (.dic-step) for a consistent look across browsers
   and a bigger click target for touch. */
.dic-km::-webkit-outer-spin-button,
.dic-km::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.dic-km{ -moz-appearance:textfield; appearance:textfield; }
.dic-step{
  width:22px;height:22px;line-height:1;padding:0;margin:0;
  font-size:.95rem;font-weight:600;
  color:var(--text2);background:var(--surface);
  border:1px solid var(--border);border-radius:5px;
  cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s,border-color .12s;
  user-select:none;
}
.dic-step:hover{
  background:var(--surface3);color:var(--text);border-color:var(--border2);
}
.dic-step:active{
  background:var(--accent);color:#fff;border-color:var(--accent);
}

/* (2026.05.19+b59) Calc-from-home-base button. Same sizing as
   the +/- steppers but tinted cyan to read as a distinct action
   (a network call, not a local increment). Lives at the end of
   the km row, after the unit label. */
.dic-step.dic-km-calc{
  margin-left:.25rem;
  color:#0891b2;border-color:rgba(8,145,178,.4);
}
.dic-step.dic-km-calc:hover{
  background:rgba(8,145,178,.14);color:#0891b2;border-color:#0891b2;
}
.dic-step.dic-km-calc:disabled{
  opacity:.6;cursor:wait;
}

.dic-sep{
  width:1px;height:28px;background:var(--border);flex-shrink:0;
}
/* Save indicator — pinned to the right of the row.
   Subtle: appears on save, fades back to nothing. */
.dic-status{
  margin-left:auto;font-size:.7rem;letter-spacing:.04em;
  color:transparent;transition:color .15s;line-height:1;
  flex-shrink:0;
}
.dic-status.is-saving{color:var(--text3);}
.dic-status.is-ok    {color:var(--green);}
.dic-status.is-err   {color:var(--red);}

/* Hide the time-input picker icon clutter — keeps the field
   reading as a value, not a form widget. */
.dic-time::-webkit-calendar-picker-indicator{
  opacity:.35;cursor:pointer;
}
.dic-time::-webkit-calendar-picker-indicator:hover{opacity:.7;}

@media (max-width:640px){
  .day-info-wrap{padding:.4rem .85rem 0;}
  .day-info-card{gap:.85rem;padding:.5rem .75rem;}
  .dic-sep{display:none;}
  .dic-status{margin-left:0;width:100%;text-align:right;order:99;}
}

/* ────────────────────────────────────────────────────────────
   CARD HANDOFFS (v2026.05.17+)
   Per-day section showing outstanding media-card handoffs and
   a button to record a new one. Sits between .day-info-card
   and the gear card. Visual weight is intentionally light —
   it's a tracker, not the main event — but lifted enough that
   outstanding cards register at a glance.
   ──────────────────────────────────────────────────────────── */
.ch-card-wrap{
  padding:.45rem 1.3rem 0;
  flex-shrink:0;
}
.ch-card{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;
  padding:.55rem .9rem;
  display:flex;flex-direction:column;gap:.45rem;
  font-family:var(--ui);
}
.ch-card-head{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
}
.ch-card-title{
  font-size:.78rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--text2);
  display:inline-flex;align-items:center;gap:.45rem;line-height:1;
}
.ch-card-icon{font-size:.95rem;opacity:.9;}
.ch-card-count{
  font-size:.78rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--amber, #c97a17);
  background:rgba(245,166,35,.12);
  border:1px solid rgba(245,166,35,.3);
  border-radius:11px;padding:.12rem .55rem;line-height:1.3;
}
.ch-card-count-empty{
  color:var(--text3);background:transparent;border-color:transparent;
  font-weight:500;
}
.ch-card-spacer{flex:1;}
.ch-card-list{
  display:flex;flex-direction:column;gap:.3rem;
  border-top:1px dashed var(--border);padding-top:.45rem;
}
.ch-row{
  display:flex;align-items:center;gap:.65rem;
  padding:.4rem .55rem;border-radius:6px;
  background:var(--surface);border:1px solid var(--border);
  cursor:pointer;transition:background .12s,border-color .12s;
}
.ch-row:hover{background:var(--surface3);border-color:var(--border2);}
.ch-row-icon{font-size:1.05rem;line-height:1;flex-shrink:0;}
.ch-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;}
.ch-row-title{
  font-size:.88rem;font-weight:600;color:var(--text);line-height:1.25;
}
.ch-row-labels{
  font-family:var(--mono);font-weight:500;
  color:var(--text2);font-size:.82rem;
}
.ch-row-sub{
  font-size:.74rem;color:var(--text3);line-height:1.3;
}
@media (max-width:640px){
  .ch-card-wrap{padding:.35rem .85rem 0;}
  .ch-card{padding:.5rem .75rem;}
  .ch-card-head{gap:.5rem;}
  .ch-card-title{font-size:.72rem;}
}

.day-tab{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.32rem .75rem;border-radius:6px;
  font-size:.82rem;font-family:var(--ui);font-weight:500;white-space:nowrap;
  cursor:pointer;transition:all .1s;flex-shrink:0;
  background:none;border:1px solid transparent;color:var(--text2);
}
.day-tab:hover{background:var(--surface2);color:var(--text);border-color:var(--border);}
.day-tab.active{
  background:linear-gradient(180deg,
    color-mix(in oklch, var(--accent), white 7%) 0%,
    var(--accent) 100%);
  border-color:var(--accent);
  color:#fff;font-weight:600;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 1px 4px var(--accent-rim);
}
.day-tab.overdue{color:var(--red);}
.day-tab.overdue.active{background:var(--red);border-color:var(--red);color:#fff;}
.day-tab-out{font-size:.68rem;font-family:var(--mono);color:var(--red);margin-left:.1rem;}
/* Compact date suffix shown inside each day tab next to the label —
 * e.g. "Day 1  Wed May 22". Lives in the same line as the label,
 * smaller + dimmer so it's a glanceable reference, not the primary
 * read. On active tabs (accent bg) it gets a translucent white so
 * it stays legible. On overdue tabs the parent .overdue class
 * already paints the whole tab red, so we just inherit a dimmed red. */
.day-tab-date{
  font-size:.68rem;font-family:var(--mono);font-weight:500;
  color:var(--text3);margin-left:.1rem;letter-spacing:.01em;
}
.day-tab.active .day-tab-date{ color:rgba(255,255,255,.78); }
.day-tab.overdue .day-tab-date{ color:rgba(224,72,72,.75); }
.day-tab.overdue.active .day-tab-date{ color:rgba(255,255,255,.78); }
.day-tab-edit{
  font-size:.72rem;opacity:.7;margin-left:.3rem;
  padding:.05rem .2rem;border-radius:3px;
  transition:opacity .1s,background .1s;
}
.day-tab-edit:hover{opacity:1;background:rgba(255,255,255,.2);}
.day-tab-num{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;font-family:var(--mono);font-weight:700;
  background:var(--accent-dim);color:var(--accent);
  border-radius:4px;padding:.1rem .35rem;
  margin-right:.2rem;flex-shrink:0;min-width:1.5em;
}
.day-tab.active .day-tab-num{background:rgba(255,255,255,.25);color:#fff;}
.day-tab.overdue .day-tab-num{background:rgba(224,72,72,.12);color:var(--red);}
.day-tab.overdue.active .day-tab-num{background:rgba(255,255,255,.2);color:#fff;}
.day-tab-add{
  background:none;border:1px dashed var(--border3);border-radius:5px;
  color:var(--text3);font-size:.82rem;padding:.3rem .6rem;
  cursor:pointer;transition:all .1s;flex-shrink:0;
}
.day-tab-add:hover{border-color:var(--accent);color:var(--accent);}

/* Dashboard (Overview) tab — pinned leftmost, visually distinct from day tabs */
.day-tab.overview{
  background:var(--surface2);border-color:var(--border2);
  color:var(--text2);font-weight:600;
  display:inline-flex;align-items:center;gap:.35rem;
  margin-right:.4rem;
  position:sticky;left:0;z-index:2;
}
.day-tab.overview::after{
  content:'';display:block;width:1px;height:14px;
  background:var(--border2);margin-left:.4rem;
}
.day-tab.overview.active{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.day-tab.overview.active::after{background:rgba(255,255,255,.3);}
.day-tab-ov-icon{font-size:.95rem;line-height:1;}

/* Travel day — full-size tab in main row, coral */
.day-tab.travel-tab{
  color:#c03838;
}
.day-tab.travel-tab:hover{color:#c03838;border-color:#e05848;background:rgba(240,90,80,.08);}
.day-tab.travel-tab.active{
  background:#e05848;border-color:#e05848;color:#fff;
  box-shadow:0 1px 3px rgba(224,88,72,.3);
}
.day-tab.travel-tab.overdue{color:var(--red);}
.day-tab.travel-tab.overdue.active{background:var(--red);border-color:var(--red);}

/* Standalone Prep / Wrap tabs (v4.85.0+) — same shape and treatment as
   travel-tab, recoloured to the existing prep/wrap palette. As of
   v4.86.0 every prep/wrap day uses this style regardless of whether
   it's attached to a shoot day, since sub-tab grouping was removed
   in favour of a flat by-date row. */
.day-tab.prep-tab{
  color:var(--cal-prep, #20b8a0);
}
.day-tab.prep-tab:hover{
  color:var(--cal-prep, #20b8a0);
  border-color:var(--cal-prep, #20b8a0);
  background:rgba(32,190,160,.08);
}
.day-tab.prep-tab.active{
  background:var(--cal-prep, #20b8a0);
  border-color:var(--cal-prep, #20b8a0);
  color:#fff;
  box-shadow:0 1px 3px rgba(32,190,160,.3);
}
.day-tab.prep-tab.overdue{color:var(--red);}
.day-tab.prep-tab.overdue.active{background:var(--red);border-color:var(--red);}

.day-tab.wrap-tab{
  color:var(--cal-wrap, #9060d8);
}
.day-tab.wrap-tab:hover{
  color:var(--cal-wrap, #9060d8);
  border-color:var(--cal-wrap, #9060d8);
  background:rgba(160,100,220,.08);
}
.day-tab.wrap-tab.active{
  background:var(--cal-wrap, #9060d8);
  border-color:var(--cal-wrap, #9060d8);
  color:#fff;
  box-shadow:0 1px 3px rgba(160,100,220,.3);
}
.day-tab.wrap-tab.overdue{color:var(--red);}
.day-tab.wrap-tab.overdue.active{background:var(--red);border-color:var(--red);}

/* (b871) Post Production day tab — same treatment, post palette. */
.day-tab.post-tab{
  color:var(--cal-post, #4a7de8);
}
.day-tab.post-tab:hover{
  color:var(--cal-post, #4a7de8);
  border-color:var(--cal-post, #4a7de8);
  background:rgba(74,125,232,.08);
}
.day-tab.post-tab.active{
  background:var(--cal-post, #4a7de8);
  border-color:var(--cal-post, #4a7de8);
  color:#fff;
  box-shadow:0 1px 3px rgba(74,125,232,.3);
}
.day-tab.post-tab.overdue{color:var(--red);}
.day-tab.post-tab.overdue.active{background:var(--red);border-color:var(--red);}


.day-type-btns{display:flex;gap:.4rem;flex-wrap:wrap;}
.day-type-btn{
  padding:.32rem .7rem;border-radius:6px;font-size:.82rem;font-family:var(--ui);
  font-weight:500;cursor:pointer;transition:all .12s;
  background:var(--surface2);border:1px solid var(--border2);color:var(--text2);
}
.day-type-btn:hover{border-color:var(--accent);color:var(--accent);}
.day-type-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}

/* (v5.xx+) Add Day modal — quick-pick location chips: this job's
   previously-used day locations, one tap to reuse. */
.md-loc-suggest{ display:flex; flex-direction:column; gap:.55rem; margin:-.15rem 0 .65rem; }
.md-loc-group{ display:flex; flex-direction:column; gap:.32rem; }
.md-loc-group-label{
  font-size:.68rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--text3); display:flex; align-items:center; gap:.3rem;
}
.md-loc-chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.md-loc-chip{
  max-width:100%; padding:.26rem .62rem; border-radius:999px;
  font-size:.78rem; font-family:var(--ui); font-weight:500; cursor:pointer;
  transition:all .12s; background:var(--surface2); border:1px solid var(--border2);
  color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.md-loc-chip:hover{ border-color:var(--accent); color:var(--accent); }
.md-loc-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

/* Day-tab type icon — used by prep/wrap/travel tabs in the main row.
   Sub-tab grouping (.day-tab.sat, .day-tab-group, .day-tab-sats) was
   removed in v4.86.0 in favour of a flat row of full-size tabs for
   every day type, sorted by date. */
.day-tab-type-icon{font-size:.7rem;}

/* Type badge shown in day context bar */
.dcb-type-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:600;padding:.15rem .45rem;border-radius:4px;
  background:var(--surface2);border:1px solid var(--border2);color:var(--text2);
  margin-left:.4rem;
}
.dcb-type-badge.type-prep{background:rgba(32,190,160,.1);border-color:rgba(32,190,160,.3);color:#178878;}
.dcb-type-badge.type-wrap{background:rgba(160,100,220,.1);border-color:rgba(160,100,220,.3);color:#7040b8;}
.dcb-type-badge.type-travel{background:rgba(240,90,80,.1);border-color:rgba(240,90,80,.3);color:#c03838;}
.dcb-type-badge.type-post{background:rgba(74,125,232,.1);border-color:rgba(74,125,232,.3);color:#3a63c0;}   /* (b871) */

/* Satellite day context bar — compact single-line */
.dcb-text-sat{gap:.18rem;}
.dcb-sat-row{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap;}
.dcb-sat-chip{
  display:inline-flex;align-items:center;gap:.2rem;flex-shrink:0;
  font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  padding:.12rem .4rem;border-radius:4px;border:1px solid currentColor;
  opacity:.85;
}
.dcb-sat-label{font-size:.95rem;font-weight:600;letter-spacing:-.01em;}

/* Gear panel: satellite day message */
.sat-row-readonly td { opacity: .75; }
.sat-row-readonly:hover { background: none !important; cursor: default; }
/* Read-only qty — no +/- buttons, just the value centred like a normal qval */
.qctrl-ro { display:inline-flex;align-items:center;justify-content:center;min-width:2rem; }

/* Satellite day row in job overview timeline */
.dash-day-row.dash-day-sat {
  border-left: 3px solid var(--sat-accent, var(--border2));
  opacity: .9;
}
.dash-day-row.dash-day-sat .dash-day-box {
  opacity: .7;
}
.dash-sat-type-chip {
  display:inline-flex;align-items:center;gap:.2rem;
  font-size:.72rem;font-weight:600;margin-right:.4rem;
}

.sat-day-notice{
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1rem;border-radius:6px;margin:.5rem 0 .75rem;
  background:var(--surface2);border:1px solid var(--border2);
  border-left:3px solid var(--sat-accent, var(--border2));
  color:var(--text2);font-size:.88rem;
}
.sat-day-notice-icon{font-size:1.4rem;flex-shrink:0;}
.sat-day-notice a{color:var(--accent);cursor:pointer;text-decoration:underline;font-weight:500;}
.sat-notice-goto{flex-shrink:0;white-space:nowrap;font-size:.75rem;padding:.25rem .6rem;}

/* Dashboard view container (replaces stats-bar + gear content when active).
   Scrolls inside its own column; inner content is centered to the
   shared page width so it aligns with All Jobs / Inventory / Home. */
.dash-scroll{
  flex:1;overflow:auto;padding:1rem 1.25rem 2rem;
  display:flex;flex-direction:column;gap:1rem;
}
.dash-scroll > *{
  max-width:var(--page-max);width:100%;margin-left:auto;margin-right:auto;
}
.dash-grid{display:grid;gap:1rem;}
.dash-grid-2{grid-template-columns:1fr 1fr;}
.dash-grid-3{grid-template-columns:2fr 1fr;}
/* Three equal columns. Used by the financial trio (Invoices,
   Expenses, Profitability) on the Job Dashboard so the user can
   see all three side-by-side at a glance. (v4.78.0+) */
.dash-grid-3eq{grid-template-columns:1fr 1fr 1fr;}
/* Vertical stack used inside a dash-grid cell so two .dash-cards can
   share a single column (e.g. Invoices over Expenses next to Timeline,
   Damage over Activity next to Gear Master). Mirrors the grid's gap so
   horizontal+vertical rhythm match. (v4.44.0) */
.dash-stack{display:flex;flex-direction:column;gap:1rem;min-width:0;}
@media(max-width:900px){.dash-grid-2,.dash-grid-3,.dash-grid-3eq{grid-template-columns:1fr;}}

/* Card shell — reused across dashboard sections. v2026.05.27+ b134:
   uses --surface-grad for a subtle top-down gradient, an inset 1px
   top highlight (--surface-rim) to suggest light catching the upper
   edge, and the depth-1 multi-layer shadow. Adds elevation cues
   without resorting to faux 3D. */
.dash-card{
  background:var(--surface-grad);
  border:1px solid var(--border);border-radius:12px;
  padding:1.15rem 1.25rem;
  box-shadow:inset 0 1px 0 var(--surface-rim), var(--depth-1);
}
.dash-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-bottom:.85rem;
}
.dash-card-title{
  display:flex;align-items:center;gap:.55rem;
  font-size:1.05rem;font-weight:700;color:var(--text);letter-spacing:-.012em;
}
.dash-card-icon{font-size:1.1rem;line-height:1;opacity:.9;}
.dash-card-count{
  font-size:.78rem;font-family:var(--mono);
  background:var(--surface2);color:var(--text2);
  padding:.18rem .55rem;border-radius:10px;border:1px solid var(--border);
}
.dash-card-sub{font-size:.85rem;color:var(--text2);font-weight:400;margin-top:.2rem;}

/* ── Projected Income card body (v4.53.0+).
   Three-column rows: label · detail (e.g. "2 × $850") · amount.
   The Total row uses the same grid but bumps font-weight + adds a
   top border so it reads as a footer without needing a separate
   layout. Empty/zero state gets a centered soft prompt that nudges
   the user to the Edit button. */
.dash-pi-list{
  display:flex; flex-direction:column;
}
.dash-pi-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:baseline; gap:.75rem;
  padding:.5rem .15rem;
  font-size:.88rem;
  border-bottom:1px dashed var(--border);
}
.dash-pi-row:last-child{ border-bottom:none; }
.dash-pi-lbl{ color:var(--text); font-weight:500; }
.dash-pi-detail{
  color:var(--text3); font-size:.8rem;
  font-variant-numeric:tabular-nums;
}
.dash-pi-amt{
  color:var(--text); font-variant-numeric:tabular-nums;
  font-family:var(--mono); font-size:.88rem;
  min-width:5rem; text-align:right;
}
.dash-pi-total{
  border-top:1px solid var(--border); border-bottom:none;
  margin-top:.15rem; padding-top:.65rem;
  font-weight:700;
}
.dash-pi-total .dash-pi-amt{ font-weight:700; font-size:.95rem; }
.dash-pi-empty{
  padding:1rem;font-size:.85rem;color:var(--text3);text-align:center;
}
.dash-pi-empty span{ color:var(--text3); }

/* Summary strip — top overview stats */
.dash-sum-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;
}
.dash-sum-cell{
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  padding:.85rem 1rem;
}
.dash-sum-label{font-size:.72rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
.dash-sum-value{font-size:1.7rem;font-weight:750;color:var(--text);font-family:var(--mono);margin-top:.25rem;line-height:1.05;letter-spacing:-.02em;}
.dash-sum-sub{font-size:.78rem;color:var(--text2);margin-top:.2rem;}
.dash-sum-value.pos{color:var(--green);}
.dash-sum-value.warn{color:var(--amber);}
.dash-sum-value.alert{color:var(--red);}

/* Timeline of days */
.dash-timeline{display:flex;flex-direction:column;gap:.45rem;}
.dash-day-row{
  display:grid;grid-template-columns:56px 1fr auto;gap:.85rem;align-items:center;
  padding:.6rem .75rem;border:1px solid var(--border);border-radius:8px;
  background:var(--surface2);cursor:pointer;transition:all .1s;
}
.dash-day-row:hover{border-color:var(--accent);transform:translateX(2px);}
.dash-day-row.is-today{border-color:var(--amber);background:rgba(245,158,11,.05);}
.dash-day-row.is-past{opacity:.78;}
.dash-day-row.is-overdue{border-color:var(--red);background:rgba(224,72,72,.05);}
.dash-day-box{
  width:56px;border-radius:6px;padding:.3rem 0;text-align:center;
  background:var(--surface);border:1px solid var(--border);
}
.dash-day-box-mo{font-size:.62rem;font-weight:700;text-transform:uppercase;color:var(--text3);letter-spacing:.05em;}
.dash-day-box-d{font-size:1.1rem;font-weight:700;color:var(--text);line-height:1;margin-top:.1rem;}
.dash-day-row.is-today .dash-day-box{background:var(--amber);border-color:var(--amber);}
.dash-day-row.is-today .dash-day-box-mo,
.dash-day-row.is-today .dash-day-box-d{color:#fff;}
.dash-day-row.is-overdue .dash-day-box{background:var(--red);border-color:var(--red);}
.dash-day-row.is-overdue .dash-day-box-mo,
.dash-day-row.is-overdue .dash-day-box-d{color:#fff;}

.dash-day-main{min-width:0;}
.dash-day-label{font-size:.92rem;font-weight:600;color:var(--text);}
.dash-day-meta{font-size:.76rem;color:var(--text3);display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.15rem;}
.dash-day-meta .sep{color:var(--border2);}

/* In/Out bar — shows status breakdown for each day */
.dash-bar{
  height:5px;border-radius:3px;background:var(--surface);overflow:hidden;
  display:flex;margin-top:.35rem;
}
.dash-bar-seg{height:100%;}
.dash-bar-in{background:var(--green);}
.dash-bar-out{background:var(--red);}
.dash-bar-dmg{background:var(--amber);}

.dash-day-stats{
  display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;
  font-family:var(--mono);font-size:.8rem;
}
.dash-day-stats-qty{color:var(--text);font-weight:600;}
.dash-day-stats-val{color:var(--text3);font-size:.72rem;}
.dash-day-stats-badge{
  font-size:.65rem;font-weight:700;padding:.1rem .4rem;border-radius:10px;
  text-transform:uppercase;letter-spacing:.04em;
}
.dash-day-stats-badge.today{background:var(--amber);color:#fff;}.dash-day-stats-badge.overdue{background:var(--red);color:#fff;}
.dash-day-stats-badge.upcoming{background:var(--surface);color:var(--text3);border:1px solid var(--border);}

/* Inline edit button on day cards in the dashboard timeline. Opens
   the existing edit-day modal for label/date/location changes
   without requiring the user to drill into the day first. */
.dash-day-edit-btn{
  background:transparent;border:1px solid transparent;color:var(--text3);
  font:inherit;font-size:.85rem;padding:.2rem .45rem;border-radius:4px;
  cursor:pointer;transition:all .12s;line-height:1;
}
.dash-day-row:hover .dash-day-edit-btn{ color:var(--text2);border-color:var(--border); }
.dash-day-edit-btn:hover{ background:var(--surface3);color:var(--accent) !important;border-color:var(--accent) !important; }

/* Gear master list — all items used across the job */
.dash-gear-list{display:flex;flex-direction:column;gap:.3rem;}
.dash-gear-row{
  display:grid;grid-template-columns:1fr auto;gap:.65rem;align-items:center;
  padding:.45rem .65rem;border-radius:6px;
  transition:background .1s;
}
.dash-gear-row:hover{background:var(--surface2);}
.dash-gear-row + .dash-gear-row{border-top:1px solid var(--border);}
.dash-gear-info{min-width:0;}
.dash-gear-name{font-size:.88rem;font-weight:500;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-gear-cat{font-size:.68rem;color:var(--text3);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-gear-qty{font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;}
.dash-gear-day-link{color:var(--accent);cursor:pointer;text-decoration:none;}
.dash-gear-day-link:hover{text-decoration:underline;}
.dash-gear-sort{display:flex;gap:.3rem;}
.dash-gear-sort-btn{
  background:var(--surface2);border:1px solid var(--border);border-radius:5px;
  color:var(--text2);font-size:.74rem;padding:.2rem .55rem;cursor:pointer;
  transition:all .1s;
}
.dash-gear-sort-btn:hover{color:var(--text);border-color:var(--border2);}
.dash-gear-sort-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}

/* Damage incidents */
.dash-damage-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:.65rem;align-items:center;
  padding:.55rem .7rem;border:1px solid rgba(224,72,72,.25);
  background:rgba(224,72,72,.06);border-radius:7px;
}
.dash-damage-row + .dash-damage-row{margin-top:.35rem;}
.dash-damage-icon{font-size:1.1rem;}
.dash-damage-name{font-size:.88rem;font-weight:600;color:var(--text);}
.dash-damage-meta{font-size:.74rem;color:var(--text3);margin-top:.1rem;}
.dash-damage-day{
  font-size:.72rem;font-family:var(--mono);color:var(--red);font-weight:600;
  padding:.15rem .5rem;border-radius:8px;
  background:rgba(224,72,72,.12);border:1px solid rgba(224,72,72,.3);
  cursor:pointer;
}
.dash-damage-day:hover{background:var(--red);color:#fff;}

/* Activity timeline — per-job filtered log */
.dash-act-feed{display:flex;flex-direction:column;gap:.1rem;}
.dash-act-group{margin-bottom:.5rem;}
.dash-act-group:last-child{margin-bottom:0;}
.dash-act-date-rule{
  display:flex;align-items:center;gap:.6rem;
  margin:.55rem 0 .4rem;
}
.dash-act-date-rule::before,.dash-act-date-rule::after{
  content:'';flex:1;height:1px;background:var(--border);
}
.dash-act-date-rule span{
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text3);white-space:nowrap;
}
.dash-act-row{
  display:grid;grid-template-columns:26px 1fr;gap:.55rem;align-items:start;
  padding:.32rem .2rem;border-radius:6px;transition:background .1s;
}
.dash-act-row:hover{background:var(--surface2);}
.dash-act-icon{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;flex-shrink:0;margin-top:.05rem;
  border:1px solid transparent;
}
.act-icon-add    {background:rgba(88,196,104,.15);color:var(--green);border-color:rgba(88,196,104,.3);}
.act-icon-del    {background:rgba(224,72,72,.12);color:var(--red);border-color:rgba(224,72,72,.25);}
.act-icon-edit   {background:rgba(99,155,235,.12);color:var(--accent);border-color:rgba(99,155,235,.25);}
.act-icon-out    {background:rgba(245,158,11,.12);color:var(--amber);border-color:rgba(245,158,11,.25);}
.act-icon-in     {background:rgba(88,196,104,.12);color:var(--green);border-color:rgba(88,196,104,.25);}
.act-icon-warn   {background:rgba(224,72,72,.12);color:var(--red);border-color:rgba(224,72,72,.25);}
.act-icon-default{background:var(--surface2);color:var(--text3);border-color:var(--border);}
.dash-act-body{min-width:0;}
.dash-act-desc{font-size:.8rem;color:var(--text2);line-height:1.4;overflow-wrap:break-word;}
.dash-act-desc strong{color:var(--text);font-weight:600;}
.dash-act-time{font-size:.68rem;font-family:var(--mono);color:var(--text3);margin-top:.15rem;}

/* Collapsed multi-item rows (e.g. a 40-item load-out rolled into one
   summary). The expand button stretches across the row, and the
   sublist drops below with one indented entry per original log line. */
.dash-act-expand-btn{
  background:none;border:0;padding:0;margin:0;
  display:flex;align-items:center;gap:.4rem;
  width:100%;text-align:left;cursor:pointer;color:inherit;
  font:inherit;
}
.dash-act-expand-arrow{
  font-size:.7rem;color:var(--text3);
  transition:transform .15s ease;flex-shrink:0;
}
.dash-act-expand-arrow.is-open{transform:rotate(90deg);}
.dash-act-sublist{
  margin-top:.25rem;padding-left:.55rem;
  border-left:2px solid var(--border);
  display:flex;flex-direction:column;gap:.2rem;
}
.dash-act-sub{
  display:flex;align-items:baseline;gap:.5rem;
  font-size:.74rem;color:var(--text2);line-height:1.35;
}
.dash-act-sub-desc{flex:1;min-width:0;overflow-wrap:break-word;}
.dash-act-sub-time{
  font-family:var(--mono);font-size:.64rem;color:var(--text3);
  flex-shrink:0;
}

/* Empty state — reusable */
.dash-empty{
  text-align:center;padding:1.5rem .5rem;color:var(--text3);
  font-size:.88rem;
}
.dash-empty-icon{font-size:2rem;opacity:.5;margin-bottom:.3rem;}
.dash-empty-celebrate{color:var(--green);}

/* Dashboard-specific mobile tweaks */
@media(max-width:700px){
  .dash-scroll{padding:.75rem;}
  .dash-card{padding:.75rem .85rem;}
  .dash-sum-grid{grid-template-columns:repeat(2,1fr);}
  .dash-day-row{grid-template-columns:48px 1fr;gap:.6rem;}
  .dash-day-stats{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center;margin-top:.3rem;}

}

/* Redesigned controls bar */
.gear-controls{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-bottom:1px solid var(--border);
  flex-shrink:0;flex-wrap:wrap;
}
.gc-actions{display:flex;gap:.3rem;align-items:center;}
.gc-sep{width:1px;height:18px;background:var(--border2);flex-shrink:0;margin:0 .2rem;}
.gc-label{font-size:.74rem;color:var(--text3);white-space:nowrap;}

/* -- RESIZE HANDLES -- */
.resize-handle{
  width:5px;flex-shrink:0;cursor:col-resize;
  background:transparent;position:relative;z-index:10;
  transition:background .15s;
}
.resize-handle:hover,.resize-handle.dragging{background:var(--accent);}
/* Left-border handles sit between panels */
.resize-handle-left{border-left:1px solid var(--border);}
.resize-handle-right{border-right:1px solid var(--border);}

/* -- RAILS -- */
.rail{
  width:210px;background:var(--rail-bg);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;
}
.rail-head{
  padding:.7rem 1rem .65rem;border-bottom:1px solid var(--border);
  background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  gap:.5rem;
}
.rail-head .rail-head-label{
  font-size:1.05rem;font-weight:700;color:var(--text);
  letter-spacing:-.012em;
}
.rail-search{
  width:100%;background:var(--surface2);border:none;border-bottom:1px solid var(--border);
  color:var(--text);font-family:var(--ui);font-size:.95rem;
  padding:.65rem 1rem;outline:none;flex-shrink:0;
  transition:background .1s;
}
.rail-search:focus{background:var(--surface3);}
.rail-search::placeholder{color:var(--text3);}
.rail-sort{
  display:flex;border-bottom:1px solid var(--border);flex-shrink:0;
  background:var(--surface);
}
.rsort-btn{
  flex:1;background:none;border:none;border-right:1px solid var(--border);
  color:var(--text2);font-family:var(--ui);font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  padding:.5rem .35rem;cursor:pointer;transition:all .1s;text-align:center;
}
.rsort-btn:last-child{border-right:none;}
.rsort-btn.active{color:var(--accent);background:var(--accent-dim);}
.rsort-btn:hover:not(.active){background:var(--surface2);color:var(--text);}
/* Inventory sort/search bar — see detailed rules further below */
.rail-label{font-size:.82rem;font-weight:400;color:var(--text3);} /* legacy — superseded by .rail-head-label */
.rail-body{flex:1;overflow-y:auto;}


/* -- REDESIGNED JOBS FLOW (Phase 1) -------------------------
   Hides the three-column layout in favour of a single-column,
   wizard-style flow: All Jobs grid → Job Overview → Day Detail.
   The rails (#job-rail, #day-rail) and resize handles are hidden;
   the main panel takes the full width.                          */
#view-jobs.solo-job-view #job-rail,
#view-jobs.solo-job-view #day-rail,
#view-jobs.solo-job-view #rh-job,
#view-jobs.solo-job-view #rh-day{
  display:none !important;
}
#view-jobs.solo-job-view .main-panel{
  max-width:var(--page-max);margin:0 auto;min-width:0;
}
/* Mobile picker drawers also hidden on the new layout — they were
   the touch-friendly equivalent of the rails, no longer needed. */
#view-jobs.solo-job-view #m-mobile-picker,
#view-jobs.solo-job-view #m-mobile-day-drawer{
  display:none !important;
}

/* (v5.29.0+) Jobs sub-tabs layout. view-jobs is now a column flex
   to stack the sub-tab nav above its content area. Each
   .jobs-subview is a row flex that holds the original
   rails-and-main-panel layout. The Estimates sub-view replaces the
   rails entirely with a single scroll container. */
#view-jobs{ flex-direction:column; }
.jobs-tabs-wrap{
  flex-shrink:0;
  width:100%;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding:.55rem .8rem;
  display:flex;justify-content:center;
}
.jobs-tabs{
  display:flex;gap:.2rem;padding:.22rem;
  margin:0;
  background:var(--surface2);border:1px solid var(--border);border-radius:9px;
  max-width:340px;
}
.jobs-tab{
  flex:1 1 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.45rem 1rem;
  background:transparent;border:none;border-radius:7px;
  color:var(--text3);cursor:pointer;
  font-family:var(--ui);font-size:.84rem;font-weight:500;letter-spacing:.005em;
  white-space:nowrap;
  transition:color .12s, background .12s, box-shadow .12s;
}
.jobs-tab:hover:not(.active){ color:var(--text); background:var(--surface); }
.jobs-tab.active{
  background:var(--accent); color:#fff; font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.jobs-tab-icon{ font-size:1rem; line-height:1; }
.jobs-subview{
  display:flex;flex:1;min-height:0;overflow:hidden;
}
.jobs-subview[style*="display:none"]{ display:none !important; }
.jobs-estimates-wrap{
  flex:1; overflow-y:auto; display:flex; flex-direction:column;
}
.jobs-estimates-inner{
  flex:1; max-width:var(--page-max); width:100%; margin:0 auto;
  padding:1.4rem; min-width:0;
}
@media (max-width:640px){
  .jobs-tabs-wrap{ padding:.5rem .6rem; }
  .jobs-tab{ padding:.45rem .8rem; font-size:.8rem; }
  .jobs-estimates-inner{ padding:.9rem; }
}

/* ── Compact job header — back button + name + actions in one row ── */
.jph-back{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:6px;flex-shrink:0;
  background:var(--surface);border:1px solid var(--border2);
  color:var(--text2);font-size:1.2rem;font-weight:700;line-height:1;
  cursor:pointer;transition:all .12s;
}
.jph-back:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.jph-back-arrow{line-height:1;position:relative;top:-1px;}
.jph-name-row{
  display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;min-width:0;
}
.jph-job-name{
  font-size:1.15rem;font-weight:750;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.018em;line-height:1.2;
}
.jph-archived-badge{
  font-size:.68rem;color:var(--text3);background:var(--surface);
  padding:.1rem .35rem;border-radius:3px;border:1px solid var(--border2);
  flex-shrink:0;
}

/* -- ALL JOBS GRID — landing view when no job selected. */
.aj-shell{
  flex:1;overflow-y:auto;padding:1.4rem 1.6rem 4rem;
}
.aj-shell-inner{ max-width:var(--page-max);margin:0 auto; }
/* ══════════════════════════════════════════════════════════
   PAGE HEADER — standard look-and-feel for every top-level
   view (Inventory, All Jobs, All Invoices, Users, Directory,
   Rental Requests, Settings, Truck, Invoice Dashboard).
   Originally introduced as .aj-head* on the All Jobs grid;
   generalised + renamed in v4.22.0 once it was clear every
   page wanted the same hero layout. The Home view keeps its
   bigger .home-greeting hero, and Calendar keeps its bespoke
   nav-bar — those are intentionally different.
   ══════════════════════════════════════════════════════════ */
.page-head{
  display:flex;flex-direction:column;gap:.55rem;
  margin-bottom:1.5rem;
}
.page-head-row{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
}
.page-head-row.primary{ gap:.85rem; }
.page-head-row.controls{
  padding:.55rem .65rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:9px;
}
@media (min-width:980px){
  .page-head-row{ flex-wrap:nowrap; }
  .page-head-row .aj-search{ min-width:180px; }
}
@media (max-width:700px){
  .page-head-row.controls{ padding:.5rem .55rem; }
}
.page-head-title{
  font-size:1.75rem;font-weight:750;color:var(--text);
  letter-spacing:-.022em;line-height:1.1;
}
.page-head-count{
  font-size:.85rem;color:var(--text2);font-weight:500;
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:.2rem .65rem;
  white-space:nowrap;
}
.page-head-sub{
  font-size:.92rem;color:var(--text2);line-height:1.4;
}
.page-head-spacer{ flex:1; }
@media (max-width:640px){
  .page-head-title{ font-size:1.45rem; }
}
.search-wrap{position:relative;display:flex;align-items:center;flex-shrink:1;}
.search-wrap .aj-search{width:260px;min-width:140px;padding-right:2rem;}
.search-clear-btn{
  position:absolute;right:.5rem;
  display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:var(--border3);color:var(--text3);
  border:none;cursor:pointer;font-size:.62rem;line-height:1;
  transition:background .1s,color .1s;flex-shrink:0;
}
.search-clear-btn:hover{background:var(--text3);color:var(--bg);}
.aj-search{
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--text);font:inherit;font-size:.95rem;
  padding:.55rem .85rem;border-radius:8px;width:260px;min-width:140px;flex-shrink:1;
  transition:border-color .12s, background .12s;
}
.aj-search:focus{ outline:none;border-color:var(--accent);background:var(--surface3);box-shadow:0 0 0 3px var(--accent-dim); }
.aj-sort-bar{
  display:flex;gap:.3rem;align-items:center;
  font-size:.74rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;
  margin-left:.5rem;
}
.aj-sort-btn{
  background:none;border:1px solid var(--border);border-radius:4px;
  color:var(--text3);font:inherit;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  padding:.3rem .55rem;cursor:pointer;
  transition:all .1s;
}
.aj-sort-btn.active{ color:var(--accent);border-color:var(--accent);background:var(--accent-dim); }
.aj-sort-btn:hover:not(.active){ color:var(--text);border-color:var(--border2); }

/* Jobs billing-lifecycle filter (b168+) — flat outlined chips that
   match .aj-sort-btn, with a soft count bubble. */
.jbf-chips{ display:flex;gap:.3rem;align-items:center;flex-wrap:wrap;padding:.15rem 0 .1rem; }
.jbf-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:1px solid var(--border);border-radius:7px;
  color:var(--text2);font:inherit;font-size:.78rem;font-weight:500;
  padding:.26rem .6rem;cursor:pointer;transition:all .1s;
}
.jbf-chip:hover:not(.active){ color:var(--text);border-color:var(--border2); }
.jbf-chip.active{ color:var(--accent);border-color:var(--accent);background:var(--accent-dim);font-weight:600; }
.jbf-chip-n{
  font-size:.7rem;font-weight:600;color:var(--text3);
  background:var(--surface2);border-radius:5px;padding:0 .34rem;min-width:1.15rem;
  text-align:center;line-height:1.45;
}
.jbf-chip.active .jbf-chip-n{ color:var(--accent);background:var(--accent-dim); }

/* Per-job billing badge — soft tinted pill, same language as the
   app's status chips (no garish solid fills). */
.jbs-badge{
  display:inline-flex;align-items:center;flex:0 0 auto;
  font-size:.62rem;font-weight:600;letter-spacing:.01em;
  padding:.04rem .36rem;border-radius:5px;white-space:nowrap;vertical-align:middle;line-height:1.5;
}
/* Name + billing badge share one line in the jobs table. */
.jt-name-row{ display:flex;align-items:center;gap:.4rem;min-width:0; }
.jt-name-row .jt-name{ min-width:0; }
.jbs-badge.jbs-to_invoice{ color:var(--amber);background:var(--amber-dim); }
.jbs-badge.jbs-awaiting{ color:var(--red);background:var(--red-dim); }
.jbs-badge.jbs-paid{ color:var(--green);background:var(--green-dim); }
.jbs-badge.jbs-free{ color:var(--text3);background:var(--surface2);border:1px solid var(--border); }

.aj-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:1rem;
}

/* -- REDESIGNED JOB CARD (status accent + date box) ----------
       Visual structure:
       ┌-------------------------------------┐
       │ ▌ NAME             ⬆ N out          │ ← status accent bar
       │ ▌ Production · Director              │
       │ ▌                                   │
       │ ▌ ┌------┐ Next shoot               │
       │ ▌ │ APR  │ Day 2 — Vancouver         │
       │ ▌ │  29  │ in 3 days                 │
       │ ▌ └------┘                          │
       │ ▌                                   │
       │ ▌ Apr 28 → May 3 · 5 shoot days     │
       └-------------------------------------┘                      */
.aj-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;
  padding:1.1rem 1.2rem 1.1rem 1.5rem;   /* extra left for accent bar */
  cursor:pointer;
  transition:border-color .14s, transform .08s, box-shadow .14s, background .14s;
  display:flex;flex-direction:column;
  position:relative;
  overflow:hidden;
}
/* Status accent bar (left edge). Color set per-card via inline style
   on the bar element so we can keep the .aj-card class neutral. */
.aj-card-accent{
  position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--border2);
}
.aj-card-accent.live    { background:var(--red); }
.aj-card-accent.soon    { background:var(--amber); }
.aj-card-accent.future  { background:var(--green); }
.aj-card-accent.overdue { background:var(--red); }
.aj-card-accent.idle    { background:var(--border2); }

/* Color key / legend at the bottom of the All Jobs view (both the
   card grid and the table layout). Five swatches matching the
   .aj-card-accent / .jt-accent palette so the user can decode what
   each colour means without hovering individual rows. Quiet by
   design — no card, no border, just a thin row of pills sitting
   below the content like a footnote. */
.aj-color-key{
  display:flex; flex-wrap:wrap;
  align-items:center; gap:.4rem 1rem;
  padding:1rem .25rem .25rem;
  font-size:.72rem; color:var(--text3);
  letter-spacing:.01em;
}
.aj-color-key-label{
  font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text3);
  margin-right:.2rem;
}
.aj-color-key-item{
  display:inline-flex; align-items:center; gap:.4rem;
  white-space:nowrap;
}
.aj-color-key-swatch{
  display:inline-block;
  width:.85rem; height:.85rem;
  border-radius:3px;
  background:var(--border2);
  flex-shrink:0;
}
/* Match the card-accent palette exactly so the user's mental model
   carries cleanly from the card stripes / table cells to the key.
   live and overdue both red on purpose (they share a colour in the
   UI) — the key lists them separately so the two distinct meanings
   are explained. */
.aj-color-key-swatch.live   { background:var(--red); }
.aj-color-key-swatch.soon   { background:var(--amber); }
.aj-color-key-swatch.future { background:var(--green); }
.aj-color-key-swatch.overdue{ background:var(--red); }
.aj-color-key-swatch.idle   { background:var(--border2); }

/* Narrow viewports: the legend wraps to multiple lines and the
   "Status colours:" label slides above the items. */
@media (max-width:540px){
  .aj-color-key{
    gap:.35rem .8rem;
    font-size:.68rem;
  }
  .aj-color-key-label{ flex-basis:100%; margin-bottom:.1rem; }
}

.aj-card:hover{
  border-color:var(--accent);
  background:var(--surface-hi);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.aj-card.archived{ opacity:.55; background:var(--surface2); }

/* -- Header: name + alert badges -- */
.aj-card-head{
  display:flex;align-items:flex-start;gap:.6rem;
  margin-bottom:.2rem;
}
.aj-card-name{
  flex:1;min-width:0;
  font-size:1.2rem;font-weight:700;color:var(--text);
  letter-spacing:-.018em;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  word-break:break-word;
}
.aj-card-alert{
  flex-shrink:0;font-size:.7rem;font-weight:600;
  padding:.2rem .5rem;border-radius:10px;font-family:var(--mono);
  display:inline-flex;align-items:center;gap:.25rem;
  white-space:nowrap;
}
.aj-card-alert.out      { background:rgba(239,68,68,.15);color:var(--red); }
.aj-card-alert.live     { background:var(--red);color:#fff; }
.aj-card-alert.soon     { background:rgba(217,119,6,.18);color:#d77706; }
.aj-card-arch-pill{
  font-size:.62rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text3);background:var(--surface3);
  padding:.1rem .35rem;border-radius:3px;flex-shrink:0;
}

/* -- Sub-header: production company + director -- */
.aj-card-sub{
  font-size:.92rem;color:var(--text2);
  margin-bottom:.85rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aj-card-sub strong{ color:var(--text);font-weight:600; }

/* -- Next-shoot block: calendar-box + label/location + countdown -- */
.aj-card-next{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .65rem;background:var(--surface2);border-radius:6px;
  margin-bottom:.55rem;
}
.aj-card-next.empty{
  color:var(--text3);font-style:italic;font-size:.82rem;
  justify-content:center;text-align:center;
}
.aj-card-datebox{
  flex-shrink:0;width:48px;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  text-align:center;overflow:hidden;
  display:flex;flex-direction:column;
}
.aj-card-datebox-mo{
  background:var(--accent);color:#fff;font-size:.62rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:.15rem 0;
  font-family:var(--mono);
}
.aj-card-datebox-mo.live{ background:var(--red); }
.aj-card-datebox-mo.soon{ background:#d77706; }
.aj-card-datebox-mo.future{ background:var(--green); }
.aj-card-datebox-mo.idle{ background:var(--border3);color:var(--text2); }
.aj-card-datebox-d{
  font-size:1.4rem;font-weight:700;color:var(--text);line-height:1.05;
  padding:.2rem 0 .25rem;font-family:var(--mono);
}
.aj-card-next-info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:.1rem;
}
.aj-card-next-label{
  font-size:.86rem;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aj-card-next-loc{
  font-size:.76rem;color:var(--text3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aj-card-next-when{
  font-size:.74rem;color:var(--text2);font-family:var(--mono);
}
.aj-card-next-when.live   { color:var(--red);font-weight:600; }
.aj-card-next-when.soon   { color:#d77706;font-weight:600; }
.aj-card-next-when.overdue{ color:var(--red);font-weight:600; }

/* -- Footer: date range + day count + out count -- */
.aj-card-foot{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.74rem;color:var(--text3);
  padding-top:.45rem;border-top:1px solid var(--border);
  font-family:var(--mono);
  gap:.5rem;flex-wrap:wrap;
}
.aj-card-foot-range{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.aj-card-foot-count{ flex-shrink:0; }

/* -- Empty state (unchanged behaviour, keep grid-spanning) -- */
.aj-card-empty{
  padding:3rem 1rem;text-align:center;color:var(--text3);
  background:var(--surface2);border-radius:8px;border:1px dashed var(--border);
  grid-column:1/-1;
}
.aj-card-empty .aj-empty-title{
  font-size:1rem;font-weight:600;color:var(--text2);margin-bottom:.4rem;
}

.aj-sort-group{
  display:flex;align-items:center;gap:.3rem;
  padding:.15rem .35rem;background:var(--surface2);
  border:1px solid var(--border);border-radius:6px;
}

.aj-view-toggle{
  display:flex;background:var(--surface2);border:1px solid var(--border2);
  border-radius:6px;overflow:hidden;flex-shrink:0;
}
.aj-view-btn{
  background:none;border:none;border-right:1px solid var(--border2);
  cursor:pointer;padding:.4rem .55rem;color:var(--text3);
  display:flex;align-items:center;
  font-size:.74rem;font-weight:500;font-family:var(--ui);
  transition:all .12s;white-space:nowrap;
}
.aj-view-btn:last-child{border-right:none;}
.aj-view-btn:hover{color:var(--text2);background:var(--surface3);}
.aj-view-btn.active{background:var(--surface3);color:var(--accent);}

.aj-list{
  display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:8px;overflow:hidden;
  margin-top:0;
}
.aj-list-row{
  display:grid;
  grid-template-columns:4px 1fr auto auto auto auto auto auto;
  align-items:center;gap:0 .8rem;
  padding:.65rem 1rem;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .1s;
}
.aj-list-row:last-child{border-bottom:none;}
.aj-list-row:hover{background:var(--surface2);}
.aj-list-row.archived{opacity:.5;}
.aj-list-accent{width:4px;height:2rem;border-radius:2px;flex-shrink:0;}
.aj-list-accent.live   {background:var(--red);}
.aj-list-accent.soon   {background:#d77706;}
.aj-list-accent.future {background:var(--green);}
.aj-list-accent.overdue{background:var(--red);}
.aj-list-accent.idle   {background:var(--border3);}
.aj-list-name{font-size:.92rem;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aj-list-sub{font-size:.78rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aj-list-date{font-size:.78rem;color:var(--text3);font-family:var(--mono);white-space:nowrap;}
.aj-list-when{font-size:.75rem;font-weight:600;white-space:nowrap;}
.aj-list-when.live   {color:var(--red);}
.aj-list-when.soon   {color:#d77706;}
.aj-list-when.overdue{color:var(--red);}
.aj-list-when.future {color:var(--green);}
.aj-list-when.idle   {color:var(--text3);font-weight:400;}
.aj-list-days{font-size:.73rem;color:var(--text3);font-family:var(--mono);background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:.1rem .4rem;white-space:nowrap;}
.aj-list-out{font-size:.73rem;color:var(--red);font-family:var(--mono);background:rgba(240,72,72,.1);border:1px solid rgba(240,72,72,.3);border-radius:6px;padding:.1rem .4rem;white-space:nowrap;}
.aj-list-arch{font-size:.68rem;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:.1rem .35rem;white-space:nowrap;}

/* ══════════════════════════════════════════════════════════
   ALL JOBS TABLE (.jt-*)  — primary view as of v4.87.0.
   Sortable column headers, sticky header, status accent stripe
   in a leftmost cell, responsive column hiding (lg/md/sm).
   Models the dir-table / invo-table conventions but with
   job-specific cells (status accent, next-shoot pair, days +
   undated marker, out pill).
   ══════════════════════════════════════════════════════════ */
.jt-wrap{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:9px;
  overflow-x:auto;
  margin-top:0;
}
.jt-table{
  width:100%;border-collapse:collapse;
  font-size:.88rem;
  font-variant-numeric:tabular-nums;
}
.jt-table thead th{
  text-align:left;padding:.65rem .8rem;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text3);font-weight:600;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1;
  white-space:nowrap;
}
.jt-th-sort{
  cursor:pointer;user-select:none;
  transition:color .12s, background .12s;
}
.jt-th-sort:hover{ color:var(--text2);background:var(--surface3); }
.jt-th-sort.active{ color:var(--accent); }
.jt-th-arrow{
  display:inline-block;margin-left:.3rem;font-size:.7em;
  visibility:hidden;
}
.jt-th-sort.active .jt-th-arrow{ visibility:visible; }
.jt-th-num{ text-align:right; }
.jt-th-num .jt-th-arrow{ margin-left:.25rem; }
.jt-th-accent{
  width:6px;padding:0 !important;
  background:var(--surface2);
}

.jt-table tbody td{
  padding:.6rem .8rem;
  border-bottom:1px solid var(--border);
  color:var(--text2);
  vertical-align:middle;
}
.jt-table tbody tr:last-child td{ border-bottom:none; }
.jt-row{
  cursor:pointer;
  transition:background .1s;
}
.jt-row:hover{ background:var(--surface2); }
.jt-row.archived{ opacity:.55; }
.jt-row.archived:hover{ opacity:.75; }

/* Status accent — a thin coloured stripe in the leftmost cell.
   Uses a full-height block with a small left margin so it sits
   inset from the table edge and reads as a row indicator. */
.jt-td-accent{ width:6px;padding:0 !important; }
.jt-accent{
  width:3px;height:1.9rem;border-radius:0 2px 2px 0;
}
.jt-accent.live   { background:var(--red); }
.jt-accent.soon   { background:#d77706; }
.jt-accent.future { background:var(--green); }
.jt-accent.overdue{ background:var(--red); }
.jt-accent.idle   { background:var(--border3); }

/* Name + archived pill */
.jt-td-name{
  color:var(--text);
  vertical-align:middle;
  min-width:0;max-width:22rem;
}
.jt-name-stack{
  display:flex;flex-direction:column;
  min-width:0;
}
.jt-name{
  font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;
}
/* The company sub-line under the name only shows when the
   standalone Company column is hidden (very narrow viewports);
   on wider screens the column is the source of truth. */
.jt-name-sub{
  display:none;
  font-size:.74rem;font-weight:500;color:var(--text3);
  margin-top:.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;
}
.jt-arch-pill{
  flex-shrink:0;
  font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text3);background:var(--surface3);
  border:1px solid var(--border);border-radius:4px;
  padding:.08rem .35rem;
}

.jt-td-co{
  color:var(--text2);
  max-width:14rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.jt-td-director{
  color:var(--text3);font-size:.84rem;
  max-width:11rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Next-shoot cell — date as primary, relative when as smaller
   colour-coded chip alongside. */
.jt-td-next{ white-space:nowrap; }
.jt-next-date{
  font-weight:550;color:var(--text);
  margin-right:.5rem;
}
.jt-next-when{
  font-size:.74rem;font-weight:600;
  padding:.08rem .42rem;border-radius:5px;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text3);
}
.jt-next-when.live   { background:var(--red);            color:#fff;     border-color:transparent; }
.jt-next-when.soon   { background:rgba(217,119,6,.18);   color:#d77706;  border-color:rgba(217,119,6,.4); }
.jt-next-when.overdue{ background:rgba(239,68,68,.15);   color:var(--red); border-color:rgba(239,68,68,.4); }
.jt-next-when.future { background:rgba(34,197,94,.10);   color:var(--green); border-color:rgba(34,197,94,.3); }
.jt-next-when.idle   { background:var(--surface2);       color:var(--text3); }

.jt-td-last{
  color:var(--text3);font-size:.84rem;
  white-space:nowrap;
}

/* Right-aligned numeric cells (Days, Out) */
.jt-td-num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  width:5.5rem;
}
.jt-days-num{ color:var(--text2);font-weight:550; }
.jt-days-undated{
  display:inline-block;margin-left:.3rem;
  font-size:.7rem;color:var(--text3);
  background:var(--surface2);border:1px solid var(--border);border-radius:4px;
  padding:.02rem .3rem;
  font-weight:500;
}
.jt-dim{ color:var(--text3); }

/* Bottom of the table: round the last row's bottom corners so
   the accent cell doesn't poke out of the rounded wrap. */
.jt-table tbody:last-child tr:last-child .jt-td-accent{ border-radius:0 0 0 9px; }

/* Column widths via <colgroup>. Explicit `<col>` widths are the
   most reliable way to drive table-layout:fixed since they
   bypass the per-cell width inference and cooperate with
   display:none / hidden cells. The .jt-cell-{x}-hide classes
   that hide thead/tbody cells also collapse the matching col
   to width:0 so the remaining columns share the full width
   without phantom slots. */
.jt-col-accent  { width:8px; }
.jt-col-name    { width:auto; }       /* Name absorbs remainder */
.jt-col-co      { width:14rem; }
.jt-col-director{ width:9rem; }
.jt-col-next    { width:9.5rem; }
.jt-col-last    { width:5rem; }
.jt-col-days    { width:5rem; }
/* When a col carries one of the responsive-hide classes and
   that class fires (display:none on cells), force the col to
   zero so the layout doesn't reserve a phantom column slot.
   We use 0px width instead of display:none on the col itself
   because Chromium's table-layout engine still allocates space
   to display:none cols. */
.jt-col-co.jt-cell-xs-hide,
.jt-col-director.jt-cell-lg-hide,
.jt-col-last.jt-cell-md-hide,
@media (max-width:1100px){
  .jt-col-director.jt-cell-lg-hide{ width:0 !important; }
}
@media (max-width:880px) {
  .jt-col-last.jt-cell-md-hide,
  .jt-col-co                    { width:11rem; }
  .jt-col-name                  { width:15rem; }
}
@media (max-width:480px) {
  .jt-col-co.jt-cell-xs-hide    { width:0 !important; }
  /* Smaller fixed cols so Name absorbs more remainder */
  .jt-col-next                  { width:5.8rem; }
  .jt-col-days                  { width:3rem; }
  /* Force a minimum width on Name; auto can resolve to min-content
     (~the first word width) when other cols are explicit, leaving
     Name oddly squashed even though there's leftover space. */
  .jt-col-name                  { width:50%; }
}


/* ── Group headers ────────────────────────────────────────
   Each bucket renders as its own <tbody> with a header <tr>
   spanning every column. The row uses bigger padding and a
   contrasting background so it reads as a section divider
   rather than a job row. The accent dot picks up the group's
   colour to anchor the eye while scanning. */
.jt-group-head td{
  padding:.85rem 1rem .55rem 1rem;
  background:var(--surface2);
  border-top:2px solid var(--border);
  border-bottom:1px solid var(--border);
  cursor:default;
}
/* The first group's top border is redundant with the table's
   own top edge / wrap border — drop it for a cleaner seam. */
.jt-group:first-of-type .jt-group-head td{ border-top:none; }
/* Group rows aren't job rows; cancel the row hover affordance. */
.jt-group-head:hover td{ background:var(--surface2); }
.jt-group-dot{
  display:inline-block;
  width:.55rem;height:.55rem;border-radius:50%;
  background:var(--text3);
  margin-right:.55rem;
  vertical-align:middle;
  position:relative;top:-1px;
}
.jt-group-label{
  font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text2);
  vertical-align:middle;
}
.jt-group-count{
  display:inline-block;
  font-size:.7rem;font-weight:600;
  margin-left:.55rem;
  color:var(--text3);
  background:var(--surface3);
  border:1px solid var(--border);
  border-radius:5px;
  padding:.06rem .42rem;
  vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
/* Per-phase colour cues for the lifecycle buckets. Shoot pops in
   accent (where attention lands during production); the earlier
   phases ramp up to it and the later ones cool back down. */
.jt-group-plan     .jt-group-dot  { background:var(--text3);opacity:.7; }
.jt-group-schedule .jt-group-dot  { background:var(--accent);opacity:.55; }
.jt-group-gear     .jt-group-dot  { background:var(--amber); }
.jt-group-shoot    .jt-group-dot  { background:var(--accent); }
.jt-group-shoot    .jt-group-label{ color:var(--accent); }
.jt-group-wrap     .jt-group-dot  { background:var(--green);opacity:.75; }
.jt-group-archived .jt-group-dot  { background:var(--text3);opacity:.4; }

/* ── Responsive column hiding ─────────────────────────────
   Four tiers, in line with dir-table conventions:
     lg-hide → ≤1100  drops Director (still 7 visible cols)
     md-hide → ≤880   drops Last day (still 6 visible cols)
     sm-hide → ≤640   drops Out      (still 5 visible cols)
     xs-hide → ≤480   drops Company  (4 visible; company sub-
                                      line shows in the Name cell)
   The essentials (status, name, next shoot, days) stay visible
   at every width. */
@media (max-width:1100px){ .jt-cell-lg-hide{ display:none !important; } }
@media (max-width:880px) {
  .jt-cell-md-hide{ display:none !important; }
  /* Tighten the wide cells once we drop down to ~5 columns so
     the remaining content actually fits within the viewport
     instead of pushing Days off-screen via overflow scroll. */
  .jt-td-name{ max-width:15rem; }
  .jt-td-co{ max-width:11rem; }
}
@media (max-width:640px) {
  .jt-cell-sm-hide{ display:none !important; }
  .jt-table{ font-size:.84rem; }
  .jt-table thead th,.jt-table tbody td{ padding:.5rem .55rem; }
  .jt-td-name{ max-width:14rem; }
  .jt-td-co{ max-width:9rem; }
  .jt-next-date{ margin-right:.35rem; }
  .jt-next-when{ font-size:.7rem;padding:.05rem .35rem; }
  .jt-arch-pill{ font-size:.6rem;padding:.04rem .3rem; }
}
@media (max-width:480px){
  .jt-cell-xs-hide{ display:none !important; }
  /* Surface the company on the Name cell now that the column
     itself is gone. Sub-line under the name keeps the info one
     glance away without forcing a horizontal scroll. */
  .jt-name-sub{ display:block; }
  /* table-layout:fixed lets the table honour explicit column
     widths instead of expanding to fit the longest content.
     Without this the Name cell stretches indefinitely on small
     viewports and pushes Next shoot / Days off-screen. */
  .jt-table{ table-layout:fixed;width:100%; }
  .jt-table thead th,.jt-table tbody td{ padding:.45rem .4rem; }
  .jt-th-accent,.jt-td-accent{ width:8px !important; }
  .jt-td-num,.jt-th-num{ width:3.1rem !important; }
  /* Next shoot column needs room for the date + when pill. */
  .jt-td-next,.jt-table thead th:nth-of-type(4){ width:6.4rem !important; }
  .jt-td-name{ max-width:none; }
  .jt-name-stack{ overflow:hidden; }
  .jt-name,.jt-name-sub{ display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .jt-next-date{ display:block;margin-right:0; }
  .jt-next-when{ display:inline-block;margin-top:.12rem; }
  .jt-table{ font-size:.82rem; }
}

.aj-sort-group-label{
  font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;
  padding:0 .25rem;
}
.aj-sort-dir{
  background:var(--surface);border:1px solid var(--border);border-radius:4px;
  color:var(--text2);font:inherit;font-size:.74rem;
  padding:.25rem .45rem;cursor:pointer;
  transition:all .1s;
  font-family:var(--mono);
}
.aj-sort-dir:hover{ background:var(--surface3);color:var(--accent);border-color:var(--accent); }
.aj-sort-dir.disabled{ opacity:.4;cursor:not-allowed; }

/* -- JOB SHELL — wraps the in-job pages (overview / day detail) so
       the existing renderJobDashboard + gear panels get a max-width
       and centred padding without modifying their internals.    */
.job-shell{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
}
.job-shell-body{
  flex:1;overflow-y:auto;
}

/* -- EMPTY-STATE CTAs that lead the wizard sequence forward.
       Pure presentational — the JS renders them where appropriate. */
.wiz-cta{
  margin:1.4rem auto;max-width:540px;
  background:var(--surface);border:1px dashed var(--border2);
  border-radius:10px;padding:1.6rem 1.4rem;
  text-align:center;
}
.wiz-cta-icon{
  font-size:2rem;margin-bottom:.4rem;
}
.wiz-cta-title{
  font-size:1.05rem;font-weight:600;color:var(--text);
  margin-bottom:.3rem;
}
.wiz-cta-desc{
  font-size:.85rem;color:var(--text3);
  margin-bottom:.9rem;line-height:1.5;
}
.wiz-cta-actions{ display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap; }

/* -- DAY SWITCHER — replaces the days rail when on a day detail.
       Compact dropdown + inline tabs for quick switching. */
.day-switcher{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  padding:.5rem 1.2rem;background:var(--surface2);
  border-bottom:1px solid var(--border);
  font-size:.82rem;
}
.day-switcher-label{
  color:var(--text3);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.06em;
  margin-right:.3rem;
}
.day-tab-pill{
  background:var(--surface);border:1px solid var(--border);
  color:var(--text2);font:inherit;font-size:.78rem;
  padding:.3rem .6rem;border-radius:4px;cursor:pointer;
  transition:all .1s;white-space:nowrap;
}
.day-tab-pill.active{
  border-color:var(--accent);color:var(--accent);background:var(--accent-dim);
}
.day-tab-pill:hover:not(.active){ background:var(--surface3);color:var(--text); }
.day-tab-pill.add{ color:var(--text3);border-style:dashed; }
.day-tab-pill.add:hover{ color:var(--accent);border-color:var(--accent); }


.rail-item{
  padding:.7rem .85rem;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .1s,border-left-color .1s;position:relative;
  border-left:3px solid transparent;
}
.rail-item:hover{background:var(--surface2);}
.rail-item.active{
  background:var(--accent-dim);border-left-color:var(--accent);
}
.rail-item.active .ri-name{color:var(--accent);}
.ri-name{
  font-weight:650;font-size:.92rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;
  color:var(--text);
}
.ri-meta{
  font-size:.74rem;color:var(--text3);margin-top:.2rem;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Job date range badge */
.ri-job-date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:42px;flex-shrink:0;
  border:1.5px solid var(--border2);border-radius:7px;
  background:var(--bg);padding:.2rem .15rem;text-align:center;gap:0;
}
.ri-job-date-top{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;line-height:1.1;}
.ri-job-date-main{font-size:1.05rem;font-weight:800;line-height:1.1;margin:.05rem 0;}
.ri-job-date-bot{font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;line-height:1.1;}
.ri-job-date-range{gap:0;padding:.15rem .12rem;justify-content:space-between;}
.ri-job-date-block{display:flex;flex-direction:column;align-items:center;gap:.05rem;}
.ri-jdb-day{font-size:.95rem;font-weight:800;line-height:1;}
.ri-jdb-mon{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1;}
.ri-job-date-arrow{font-size:.6rem;line-height:1;opacity:.5;}
.ri-job-daycnt{
  font-size:.64rem;font-weight:700;font-family:var(--mono);
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:8px;padding:.1rem .35rem;flex-shrink:0;color:var(--text3);
  align-self:flex-start;margin-top:.1rem;white-space:nowrap;
}
.ri-actions{
  display:flex;gap:.25rem;align-items:center;
  margin-top:.4rem;opacity:0;transition:opacity .12s;height:0;overflow:hidden;
}
.rail-item:hover .ri-actions{opacity:1;height:auto;overflow:visible;}
.ri-btn{
  background:none;border:none;cursor:pointer;font-size:.78rem;
  padding:.25rem .35rem;border-radius:4px;color:var(--text3);transition:all .1s;
}
.ri-btn:hover{background:var(--surface3);color:var(--text);}
.ri-btn.danger:hover{background:var(--red);color:#fff;}
.rail-empty{padding:1rem;font-size:.85rem;color:var(--text3);}

/* -- MAIN PANEL -- */
.main-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.placeholder{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;color:var(--text3);font-size:.9rem;
}
.placeholder .icon{font-size:2.5rem;opacity:.25;}

/* topbar */
.topbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:.6rem 1.1rem;display:flex;align-items:center;gap:.6rem;flex-shrink:0;flex-wrap:wrap;
}
.topbar-title{
  font-weight:400;font-size:1.05rem;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-title small{color:var(--text3);font-weight:400;font-size:.88rem;}

/* Gear card — pill wrapper for stats-bar + controls + gear list,
   matching the jph-inner pill style */
.gear-card-wrap{
  padding:.55rem 1.3rem .7rem;
}
.gear-card{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;
}
/* Day-body scroll container — everything below the fixed job header
   (context bar, day-info, media-cards, gear card) scrolls here so the
   gear list gets the full remaining height. The flex chain
   (#gear-content → .day-scroll) gives it a bounded height to scroll. */
.day-scroll{
  flex:1;min-height:0;overflow-y:auto;
}
/* Gear toolbar — pinned to the top of .day-scroll so Add / search /
   filter stay reachable while the per-day chrome above scrolls away.
   Intermediate ancestors (.gear-card, .gear-card-wrap) must NOT create
   their own scroll/overflow context or the sticky breaks. */
.gear-toolbar-sticky{
  /* (b843) z-index 6, one above the sticky category headers
     (.gtable td.cat-section-td, z-index:5). At equal z the table's
     later DOM position painted the cat headers over this toolbar's
     stacking context — and the ⋯ menu is position:fixed INSIDE that
     context, so its own z-index:1500 couldn't escape: the dropdown
     rendered underneath every category header it crossed. The cat
     headers stick inside .gear-scroll, which starts below this
     toolbar, so the two never actually overlap on screen — raising
     this is purely to lift the menu's context. */
  position:sticky;top:0;z-index:6;
  background:var(--surface2);
  border-radius:9px 9px 0 0;
}

/* stats bar */
.stats-bar{
  display:flex;border-bottom:1px solid var(--border);
  flex-shrink:0;overflow-x:auto;padding:.2rem .5rem;gap:.2rem;
}
.stats-bar::-webkit-scrollbar{display:none;}
.stat{
  flex:1;min-width:88px;padding:.55rem .7rem;
  border:1px solid transparent;border-radius:8px;text-align:center;
  transition:background .1s;
}
.stat + .stat{margin-left:0;}
.stat.is-alert{background:rgba(224,72,72,.05);border-color:rgba(224,72,72,.18);}
.stat.is-warn {background:rgba(240,160,32,.05);border-color:rgba(240,160,32,.18);}
.stat-n{font-size:1.35rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.stat-l{font-size:.7rem;color:var(--text3);margin-top:.25rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.col-green{color:var(--green);}
.col-red{color:var(--red);}
.col-amber{color:var(--accent);}

/* controls */
.controls{
  padding:.5rem 1rem;display:flex;gap:.45rem;align-items:center;
  flex-shrink:0;border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap;
}
.search{
  flex:1;min-width:100px;background:var(--bg);border:1px solid var(--border2);
  border-radius:6px;color:var(--text);font-family:var(--ui);font-size:.88rem;
  padding:.4rem .75rem;outline:none;transition:border-color .1s;
}
.search:focus{border-color:var(--accent);}
.search::placeholder{color:var(--text3);}
.ftabs{display:flex;gap:.2rem;}
.ftab{
  font-family:var(--ui);font-size:.88rem;font-weight:400;
  padding:.35rem .7rem;background:transparent;border:1px solid var(--border2);
  border-radius:5px;color:var(--text3);cursor:pointer;transition:all .1s;
}
.ftab.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:400;}
.ftab:hover:not(.active){background:var(--surface2);color:var(--text);}

/* gear scroll — now a passive content wrapper; scrolling is handled by
   the parent .day-scroll. Kept for print-CSS targeting + JS hooks. */
.gear-scroll{}
.ph{display:none;padding:1rem 0 1.2rem;border-bottom:2px solid #000;margin-bottom:1rem;}
.ph h1{font-size:1.6rem;font-weight:600;}
.ph p{font-size:.9rem;color:#444;margin-top:.2rem;}

/* category section heading */
.cat-section-head{
  padding:.35rem 1rem;display:flex;align-items:center;gap:.55rem;
  width:100%;font-size:.76rem;font-weight:700;color:#fff;
  text-transform:uppercase;letter-spacing:.07em;
  box-sizing:border-box;
}
/* Sticky lives on the td, not the inner div */
.gtable td.cat-section-td{
  position:sticky;top:0;z-index:5;padding:0;
  border-bottom:1px solid var(--border);
}
.cat-count{font-size:.72rem;color:rgba(255,255,255,.75);font-weight:500;margin-left:auto;font-family:var(--mono);}
.cat-val{font-family:var(--mono);font-size:.78rem;color:var(--text2);margin-left:auto;}

/* gear table */
.gtable{width:100%;border-collapse:collapse;}
.gtable thead th{
  font-size:.82rem;font-weight:400;color:var(--text3);
  padding:.5rem .85rem;text-align:left;
  border-bottom:1px solid var(--border2);background:var(--surface);white-space:nowrap;
}
.gtable tbody tr{border-bottom:1px solid var(--border);transition:background .07s;}
.gtable tbody tr:hover{background:var(--surface2);}
.gtable tbody tr.sel{background:var(--accent-dim);}
.gtable tbody tr.out-row{border-left:3px solid rgba(224,72,72,.55);}
.gtable tbody tr.in-row{border-left:3px solid transparent;}
.gtable td{padding:.42rem .65rem;font-size:.95rem;vertical-align:middle;}
td.tc{width:30px;}
td.tc input{cursor:pointer;accent-color:var(--accent);width:15px;height:15px;}
td.tn{font-weight:400;font-size:.92rem;}
td.tn .notes{font-family:var(--mono);font-size:.78rem;color:var(--text3);margin-top:.05rem;font-weight:400;}
.qctrl{display:flex;align-items:center;gap:.3rem;}
.qbtn{
  background:var(--surface3);border:1px solid var(--border2);color:var(--text2);
  width:26px;height:26px;cursor:pointer;font-size:1rem;border-radius:4px;
  display:flex;align-items:center;justify-content:center;transition:background .08s;flex-shrink:0;
}
.qbtn:hover{background:var(--border2);color:var(--text);}
.qbtn:disabled,.qbtn[aria-disabled="true"]{
  opacity:.32;cursor:not-allowed;pointer-events:none;
}
.qval{font-family:var(--mono);font-size:.85rem;min-width:26px;text-align:center;}
td.tv{font-family:var(--mono);font-size:.84rem;color:var(--text3);}
.sbadge{
  font-family:var(--mono);font-size:.76rem;font-weight:400;
  padding:.18rem .5rem;white-space:nowrap;border-radius:4px;
}
.sbadge.in{background:var(--green-dim);color:var(--green);border:1px solid rgba(72,184,92,.35);}
.sbadge.out{background:var(--red-dim);color:var(--red);border:1px solid rgba(224,72,72,.35);}

/* Segmented IN|OUT toggle — replaces the old badge + Out/In button
   pair on the Job Day gear list. One control, click anywhere to
   flip; active side is colored, inactive side is dimmed. Removes
   the "which is the status / which is the button" ambiguity. */
.io-toggle{
  display:inline-flex;border:1px solid var(--border2);border-radius:5px;
  overflow:hidden;cursor:pointer;user-select:none;background:var(--surface2);
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.06em;
  vertical-align:middle;transition:border-color .1s,box-shadow .1s;
}
.io-toggle:hover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(245,166,35,.12);}
.io-toggle:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(245,166,35,.3);}
.io-seg{
  padding:.24rem .55rem;color:var(--text3);
  transition:background .1s,color .1s;
}
.io-toggle[data-status="in"]  .io-seg.io-in{background:var(--green-dim);color:var(--green);}
.io-toggle[data-status="out"] .io-seg.io-out{background:var(--red-dim);color:var(--red);}
@media (max-width:700px){
  .io-toggle{font-size:.72rem;}
  .io-seg{padding:.28rem .6rem;}
}
td.ta{white-space:nowrap;padding:.32rem .5rem!important;}
td.ta .btn+.btn{margin-left:.25rem;}
.empty{padding:2.5rem;text-align:center;font-size:.9rem;color:var(--text3);line-height:1.7;}

/* bulk bar */
.bulk-bar{
  background:var(--accent);color:#fff;padding:.5rem 1rem;
  display:flex;align-items:center;gap:.55rem;flex-shrink:0;flex-wrap:wrap;
  font-weight:500;font-size:.9rem;
}
.bulk-bar .sp{flex:1;}

/* right panel */
.right-panel{
  width:265px;background:var(--surface);border-left:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;
  transition:width .15s ease;
}
.right-panel.rp-hidden{width:0!important;border-left:none;}
.right-panel.rp-hidden *{visibility:hidden;}
.rp-sec{display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
.rp-sec.grow{flex:1;min-height:0;}
.rp-sec.grow.rp-open{overflow:hidden;}
.rp-head{
  font-size:.82rem;font-weight:400;color:var(--text2);
  padding:.6rem 1rem;border-bottom:1px solid var(--border);
  background:var(--surface2);flex-shrink:0;
  display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;user-select:none;transition:background .1s;
}
.rp-head:hover{background:var(--surface3);}
.rp-head-left{display:flex;align-items:center;gap:.5rem;}
.rp-chev{font-size:.7rem;color:var(--text3);transition:transform .18s;display:inline-block;}
.rp-sec.rp-open > .rp-head .rp-chev{transform:rotate(180deg);}
.rp-body{padding:.85rem;display:none;}
.rp-sec.rp-open > .rp-body{display:block;}
.rp-scroll{flex:1;overflow-y:auto;display:none;}
.rp-sec.rp-open > .rp-scroll{display:block;}
/* asset ID suggestion */
.asset-suggest{
  display:none;margin-top:.3rem;
}
.asset-suggest.visible{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.asset-chip{
  font-family:var(--mono);font-size:.75rem;
  background:var(--accent-dim);border:1px solid rgba(240,160,32,.35);
  color:var(--accent);border-radius:4px;padding:.15rem .45rem;
  cursor:pointer;transition:all .1s;
}
.asset-chip:hover{background:var(--accent);color:#fff;}
.asset-suggest-label{font-size:.74rem;color:var(--text3);}

/* Live duplicate validation message + input state (v4.41.3+).
   .asset-id-validate sits between the input and the suggest chip
   strip; empty when valid (silent success). .dup applies to both
   the validation div and the input itself for the red-border
   treatment. */
.asset-id-validate{
  font-size:.74rem;line-height:1.3;margin-top:.25rem;
  min-height:0;color:var(--text3);
}
.asset-id-validate.dup{
  color:#dc2626;font-weight:500;
}
input.dup{
  border-color:#dc2626 !important;
  background:rgba(220,38,38,.06);
}
input.dup:focus{
  outline-color:#dc2626;
  box-shadow:0 0 0 2px rgba(220,38,38,.15);
}
/* Modal primary button visually flagged as disabled when the
   asset-ID dup state says so. We don't actually set the disabled
   attribute (the click handler does the final guard) — this is
   purely a visual signal that submitting won't work. */
.modal-foot .btn-accent.disabled{
  opacity:.55;cursor:not-allowed;
}

/* forms */
.fg{margin-bottom:.65rem;}
.fg label{
  display:block;font-size:.84rem;font-weight:400;
  color:var(--text2);margin-bottom:.25rem;
}
.fg input,.fg select,.fg textarea{
  width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:5px;
  color:var(--text);font-family:var(--ui);font-size:.95rem;
  padding:.44rem .72rem;outline:none;transition:border-color .1s;resize:none;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent);}
.fg input::placeholder,.fg textarea::placeholder{color:var(--text3);}
.fg select option{background:var(--surface2);}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;}

/* New-job modal: suggested contacts panel (v5.65.0+).
   Surfaces below the Production Co. input when the typed company
   matches a known production_companies row. Each row is a labelled
   checkbox so taps anywhere on the row toggle it (good on mobile).
   Source badges differentiate canonical CRM links from
   work-history links so the user can size up trust at a glance. */
.mj-sc-panel{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:7px;
  padding:.5rem .6rem;
  margin:-.2rem 0 .65rem;
  max-height:240px;
  overflow-y:auto;
}
.mj-sc-loading,.mj-sc-empty{
  font-size:.78rem;color:var(--text3);padding:.3rem .1rem;
}
.mj-sc-head{
  display:flex;align-items:baseline;gap:.5rem;
  margin-bottom:.35rem;
  padding-bottom:.3rem;border-bottom:1px solid var(--border);
}
.mj-sc-title{
  font-size:.74rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text2);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mj-sc-count{
  font-family:var(--mono);font-size:.7rem;color:var(--accent);
}
.mj-sc-list{display:flex;flex-direction:column;gap:.1rem;}
.mj-sc-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:.5rem;
  padding:.3rem .35rem;border-radius:5px;cursor:pointer;
  transition:background .1s;
}
.mj-sc-row:hover{background:var(--surface3);}
.mj-sc-row.is-checked{background:rgba(99,155,235,.08);}
.mj-sc-row input[type=checkbox]{margin:0;cursor:pointer;}
.mj-sc-name{
  font-size:.86rem;color:var(--text);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mj-sc-sub{
  font-size:.72rem;color:var(--text3);
  white-space:nowrap;text-align:right;
}
.mj-sc-badge{
  font-size:.65rem;font-weight:600;
  padding:.12rem .42rem;border-radius:9px;white-space:nowrap;
  border:1px solid transparent;
}
.mj-sc-badge-both{
  background:rgba(245,158,11,.12);color:var(--amber);
  border-color:rgba(245,158,11,.25);
}
.mj-sc-badge-co{
  background:rgba(99,155,235,.12);color:var(--accent);
  border-color:rgba(99,155,235,.25);
}
.mj-sc-badge-hist{
  background:var(--surface3);color:var(--text2);
  border-color:var(--border2);
}

/* ════════════════════════════════════════════════════════════
   NEW JOB WIZARD (b905)

   Four steps in a wide modal: a scrolling body on the left, a
   persistent "So far" summary on the right, step rail on top and
   navigation pinned to the bottom. The summary column is where the
   company → contacts → dates relationship becomes visible while
   you're still filling the form; it's the first thing to go on
   narrow screens, where the body carries everything on its own.

   Deliberately shares no classes with the renter portal's .rp-wiz
   (grip.css, portal section) even though the two look like cousins
   — the portal is a public surface with its own type scale, and a
   restyle there shouldn't silently redraw an internal tool.
   ════════════════════════════════════════════════════════════ */
.modal.nj-modal{
  width:900px;max-width:96vw;max-height:88vh;
  padding:0;overflow:hidden;display:flex;flex-direction:column;
}
#nj-host{display:flex;flex-direction:column;min-height:0;flex:1;}

/* ── Head + step rail ── */
.nj-head{
  padding:1.05rem 1.4rem .85rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
}
.nj-head-title{
  font-size:1.02rem;font-weight:700;color:var(--text);letter-spacing:-.01em;
  flex:0 0 auto;
}
.nj-steps{display:flex;align-items:center;flex:1;min-width:0;}
.nj-step{
  display:flex;align-items:center;gap:.4rem;flex:0 0 auto;
  border-radius:20px;padding:.15rem .2rem;
}
.nj-step-dot{
  width:23px;height:23px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:.73rem;font-weight:700;border:1.5px solid var(--border2);
  background:var(--surface2);color:var(--text3);transition:all .18s;
}
.nj-step-label{font-size:.76rem;font-weight:600;color:var(--text3);white-space:nowrap;}
.nj-step-bar{flex:1;height:1.5px;min-width:14px;background:var(--border2);margin:0 .5rem;transition:background .18s;}
.nj-step-bar.done{background:var(--accent);}
.nj-step-current .nj-step-dot{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);box-shadow:0 0 0 3px var(--accent-dim);}
.nj-step-current .nj-step-label{color:var(--accent);}
.nj-step-done .nj-step-dot{border-color:var(--accent);background:var(--accent);color:#fff;}
.nj-step-done .nj-step-label{color:var(--text2);}
.nj-step-done{cursor:pointer;}
.nj-step-done:hover{background:var(--surface2);}
.nj-step-done:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ── Two-column body ── */
.nj-cols{display:grid;grid-template-columns:1fr 244px;min-height:0;flex:1;}
.nj-body{padding:1.25rem 1.4rem 1.5rem;overflow-y:auto;min-height:0;overscroll-behavior:contain;}
.nj-side{
  border-left:1px solid var(--border);background:var(--surface2);
  padding:1.1rem 1rem;overflow-y:auto;min-height:0;overscroll-behavior:contain;
}
.nj-side-head{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text3);margin-bottom:.7rem;
}
.nj-side-empty{font-size:.78rem;color:var(--text3);line-height:1.5;}
.nj-si-row{display:flex;flex-direction:column;gap:.1rem;margin-bottom:.75rem;}
.nj-si-k{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);}
.nj-si-v{font-size:.85rem;color:var(--text);font-weight:500;line-height:1.35;word-break:break-word;}
.nj-si-v small{display:block;font-size:.72rem;color:var(--text3);font-weight:400;margin-top:.1rem;}
.nj-si-new{font-style:normal;font-size:.68rem;color:var(--accent);font-weight:600;}

/* ── Foot ── */
.nj-foot{
  padding:.8rem 1.4rem;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:.5rem;background:var(--surface);
}
.nj-foot-spacer{flex:1;}
.nj-skip{font-size:.8rem;}

/* ── Step content ── */
.nj-step-head{margin-bottom:1.15rem;}
.nj-step-head h2{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:var(--text);margin:0 0 .3rem;}
.nj-step-head p{font-size:.86rem;color:var(--text2);margin:0;line-height:1.5;}

.nj-field{margin-bottom:1.05rem;}
.nj-field-tight{margin-bottom:.7rem;}
.nj-field>label{
  display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap;
  font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:.35rem;
}
.nj-field input[type=text],.nj-field input[type=date],.nj-field input[type=email],
.nj-field input[type=tel],.nj-field input[type=number],.nj-field select,.nj-field textarea,
.nj-co-pick input{
  width:100%;box-sizing:border-box;padding:.55rem .7rem;
  background:var(--bg);border:1px solid var(--border2);border-radius:8px;
  font-size:.92rem;color:var(--text);font-family:inherit;
  transition:border-color .12s,box-shadow .12s;
}
.nj-field input:focus,.nj-field select:focus,.nj-field textarea:focus,.nj-co-pick input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);
}
.nj-field textarea{resize:vertical;min-height:4.4rem;}
.nj-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;}
.nj-req{color:var(--red);font-weight:700;}
.nj-opt{font-weight:400;color:var(--text3);font-size:.75rem;}
.nj-help{font-size:.74rem;color:var(--text3);margin-top:.3rem;line-height:1.45;}
.nj-badge{
  display:inline-block;margin-left:.4rem;font-size:.63rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  padding:.1rem .34rem;border-radius:4px;
  background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-rim);
}

/* ── Company picker ── */
.nj-co-results{
  margin-top:.4rem;border:1px solid var(--border);border-radius:8px;
  background:var(--surface2);overflow:hidden;max-height:230px;overflow-y:auto;
}
.nj-co-row{
  display:flex;align-items:baseline;gap:.6rem;width:100%;text-align:left;
  padding:.5rem .7rem;background:transparent;border:0;border-bottom:1px solid var(--border);
  cursor:pointer;font-family:inherit;transition:background .1s;
}
.nj-co-row:last-child{border-bottom:0;}
.nj-co-row:hover,.nj-co-row:focus-visible{background:var(--surface3);outline:none;}
.nj-co-name{font-size:.88rem;font-weight:600;color:var(--text);flex:0 0 auto;}
.nj-co-sub{font-size:.73rem;color:var(--text3);flex:1;min-width:0;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nj-co-new .nj-co-name{color:var(--accent);}
.nj-co-empty{font-size:.78rem;color:var(--text3);padding:.6rem .7rem;}
.nj-co-card{
  display:flex;align-items:center;gap:.8rem;
  padding:.7rem .85rem;border:1px solid var(--accent-rim);border-radius:9px;
  background:var(--accent-dim);
}
.nj-co-card-main{flex:1;min-width:0;}
.nj-co-card-name{font-size:.95rem;font-weight:600;color:var(--text);}
.nj-co-card-sub{font-size:.75rem;color:var(--text2);margin-top:.12rem;line-height:1.4;}

/* ── Schedule ── */
.nj-checks{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:-.3rem 0 1.05rem;}
.nj-check{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--text2);cursor:pointer;}
.nj-check input{margin:0;cursor:pointer;}
.nj-preview{
  border:1px solid var(--border);border-radius:9px;background:var(--surface2);
  padding:.75rem .85rem;
}
.nj-preview-head{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);margin-bottom:.55rem;
}
.nj-preview-empty{font-size:.8rem;color:var(--text3);line-height:1.5;}

/* One row per planned day, each carrying the day-type control inline.
   The buttons are the app's own .day-type-btn (Add Day / Edit Day) at
   a tighter scale, so a restyle there carries through here and a
   shoot day looks the same wherever you meet one. */
.nj-body .conflict-banner{margin:.6rem 0 1.05rem;font-size:.81rem;}
.nj-preview-head{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;}
.nj-setall{
  display:flex;align-items:center;gap:.22rem;flex-wrap:wrap;
  margin-left:auto;font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text3);
}
.nj-setall-btn{
  background:transparent;border:1px solid transparent;border-radius:5px;
  color:var(--text3);font-family:var(--ui);font-size:.72rem;font-weight:500;
  text-transform:none;letter-spacing:0;padding:.12rem .34rem;cursor:pointer;transition:all .12s;
}
.nj-setall-btn:hover{background:var(--surface3);border-color:var(--border2);color:var(--text);}
.nj-setall-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

.nj-day-rows{display:flex;flex-direction:column;gap:.25rem;max-height:290px;overflow-y:auto;overscroll-behavior:contain;}
.nj-day-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.3rem .45rem;border-radius:6px;background:var(--surface);
  border:1px solid var(--border);
}
.nj-day-when{display:flex;flex-direction:column;gap:.02rem;flex:1;min-width:88px;}
.nj-day-label{font-size:.8rem;font-weight:600;color:var(--text);line-height:1.2;}
.nj-day-date{font-size:.71rem;color:var(--text3);line-height:1.2;white-space:nowrap;}
.nj-dt{display:flex;gap:.18rem;flex:0 0 auto;}
.nj-dt .day-type-btn{padding:.2rem .42rem;font-size:.72rem;border-radius:5px;}
.nj-dt-sel,.nj-setall-sel{display:none;}   /* mobile-only; see the narrow-screen block */
.nj-day-travel-slot{flex:0 0 26px;display:flex;justify-content:center;}
.nj-day-travel{
  width:24px;height:24px;border-radius:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;
  background:var(--surface2);border:1px solid var(--border2);color:var(--text3);
  transition:all .12s;
}
.nj-day-travel:hover{border-color:var(--accent);color:var(--accent);}
.nj-day-travel.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}
.nj-day-travel:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

/* ── Crew ── */
.nj-crew-sel{margin-bottom:1rem;}
.nj-crew-sel-head{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);margin-bottom:.4rem;
}
.nj-crew-row{
  display:grid;grid-template-columns:1fr 190px auto;align-items:center;gap:.5rem;
  padding:.4rem .55rem;border-radius:7px;background:var(--surface2);
  border:1px solid var(--border);margin-bottom:.3rem;
}
.nj-crew-name{font-size:.87rem;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nj-crew-role{
  width:100%;box-sizing:border-box;padding:.3rem .5rem;
  background:var(--bg);border:1px solid var(--border2);border-radius:6px;
  font-size:.8rem;color:var(--text);font-family:inherit;
}
.nj-crew-role:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim);}
.nj-crew-x{
  background:transparent;border:0;color:var(--text3);cursor:pointer;
  font-size:.85rem;padding:.2rem .35rem;border-radius:5px;line-height:1;
}
.nj-crew-x:hover{background:var(--surface3);color:var(--red);}
.nj-crew-list{
  border:1px solid var(--border);border-radius:9px;background:var(--surface2);
  max-height:260px;overflow-y:auto;overscroll-behavior:contain;margin-bottom:.8rem;
}
.nj-pick-row{
  display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  padding:.45rem .7rem;background:transparent;border:0;border-bottom:1px solid var(--border);
  cursor:pointer;font-family:inherit;transition:background .1s;
}
.nj-pick-row:last-child{border-bottom:0;}
.nj-pick-row:hover,.nj-pick-row:focus-visible{background:var(--surface3);outline:none;}
.nj-pick-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem;}
.nj-pick-name{font-size:.86rem;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nj-pick-sub{font-size:.72rem;color:var(--text3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nj-pick-add{color:var(--text3);font-size:.95rem;flex:0 0 auto;}
.nj-pick-row:hover .nj-pick-add{color:var(--accent);}
.nj-sc-badge{
  font-size:.64rem;font-weight:600;padding:.12rem .42rem;border-radius:9px;
  white-space:nowrap;border:1px solid transparent;flex:0 0 auto;
}
.nj-sc-both{background:rgba(245,158,11,.12);color:var(--amber);border-color:rgba(245,158,11,.25);}
.nj-sc-co{background:rgba(99,155,235,.12);color:var(--accent);border-color:rgba(99,155,235,.25);}
.nj-sc-hist{background:var(--surface3);color:var(--text2);border-color:var(--border2);}
.nj-add-new{
  background:transparent;border:1px dashed var(--border2);border-radius:8px;
  color:var(--text2);font-family:inherit;font-size:.83rem;font-weight:500;
  padding:.5rem .8rem;width:100%;cursor:pointer;transition:all .12s;
}
.nj-add-new:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}
.nj-newcrew-form{
  border:1px solid var(--border2);border-radius:9px;background:var(--surface2);
  padding:.85rem .9rem;
}
.nj-newcrew-head{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);margin-bottom:.6rem;
}
.nj-newcrew-foot{display:flex;justify-content:flex-end;gap:.45rem;margin-top:.6rem;}

/* ── Review ── */
.nj-review{
  border:1px solid var(--border);border-radius:9px;background:var(--surface2);
  padding:.3rem .85rem;margin-bottom:1.15rem;
}
.nj-rev-row{
  display:flex;align-items:baseline;gap:.9rem;
  padding:.5rem 0;border-bottom:1px solid var(--border);
}
.nj-rev-row:last-child{border-bottom:0;}
.nj-rev-k{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text3);flex:0 0 72px;
}
.nj-rev-v{font-size:.88rem;color:var(--text);flex:1;min-width:0;}
.nj-rev-v em{color:var(--text3);font-style:normal;}
.nj-rev-sub{color:var(--text3);font-size:.78rem;}

/* Tight-turnaround note. Deliberately quieter than .conflict-banner:
   a clash says "these dates are already spoken for", this says "you
   get no rest between these two" — worth knowing, usually known. */
.nj-turnaround{
  margin:.6rem 0 .2rem;padding:.6rem .8rem;border-radius:8px;
  border:1px solid var(--border2);border-left:3px solid var(--amber);
  background:var(--surface2);
}
.nj-turnaround-head{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);margin-bottom:.3rem;
}
.nj-turnaround-list{margin:0;padding:0 0 0 1rem;font-size:.81rem;color:var(--text2);line-height:1.5;}
.nj-turnaround-list strong{color:var(--text);font-weight:600;}
.nj-turnaround-list li + li{margin-top:.3rem;}
/* A turnaround that also crosses locations is the one that actually
   bites — no clash, no double booking, just no way to get there. */
.nj-turnaround.severe{border-left-color:var(--red);background:rgba(220,38,38,.07);}
.nj-turnaround.severe .nj-turnaround-head{color:var(--red);}
.nj-turnaround-list li.nj-turn-severe{color:var(--text);}
.nj-turn-fix{
  display:block;margin-top:.3rem;padding:.24rem .55rem;border-radius:6px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border2);color:var(--text2);
  font-family:var(--ui);font-size:.76rem;font-weight:500;transition:all .12s;
}
.nj-turn-fix:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}
.nj-turn-fix:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.nj-turnaround-ask{margin-top:.45rem;font-size:.75rem;color:var(--text3);}
.nj-si-warn .nj-si-k{color:var(--amber);}
.nj-bill-modes{display:flex;gap:.35rem;margin-bottom:.6rem;}
.nj-bill-mode{
  flex:1;padding:.4rem .6rem;border:1px solid var(--border2);border-radius:7px;
  background:var(--surface2);color:var(--text2);font-family:inherit;
  font-size:.82rem;font-weight:500;cursor:pointer;transition:all .12s;
}
.nj-bill-mode:hover{border-color:var(--border3);color:var(--text);}
.nj-bill-mode.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:600;}
.nj-bill-row{display:flex;align-items:center;gap:.45rem;margin-bottom:.4rem;}
.nj-bill-lbl{font-size:.8rem;color:var(--text2);flex:0 0 76px;}
.nj-bill-rate{flex:1;min-width:0;}
.nj-bill-count{width:74px;flex:0 0 auto;}
.nj-bill-flat-label{flex:1;min-width:0;}
.nj-bill-row input{
  box-sizing:border-box;padding:.4rem .55rem;
  background:var(--bg);border:1px solid var(--border2);border-radius:6px;
  font-size:.85rem;color:var(--text);font-family:inherit;
}
.nj-bill-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim);}
.nj-bill-x{color:var(--text3);font-size:.8rem;}
.nj-bill-units{font-size:.76rem;color:var(--text3);flex:0 0 32px;}
.nj-bill-total{
  font-family:var(--mono);font-size:.82rem;color:var(--accent);
  text-align:right;margin-top:.3rem;min-height:1.1em;
}

/* ── Narrow screens ───────────────────────────────────────────
   A four-step form is the wrong thing to run in a 460px card on a
   phone, so below 760px the wizard stops being a dialog and becomes
   the screen: full bleed, head and foot pinned, only the step body
   scrolling. That buys back the vertical room the step rail and the
   nav bar cost.

   The rest is tap targets. Everything interactive goes to a 44px
   minimum, the five day-type pills hand over to a native select, and
   every text input goes to 16px — under that, iOS Safari zooms the
   page on focus, which is most of what "fiddly" feels like: you tap
   a date, the viewport lurches, and you're panning to find the next
   field. The summary column folds away entirely; the conflict and
   turnaround warnings it counts are already inline on the steps that
   raise them. */
@media(max-width:760px){
  #m-new-job{align-items:stretch;justify-content:stretch;}
  .modal.nj-modal{
    width:100%;max-width:100%;
    height:100vh;height:100dvh;max-height:100dvh;
    border:0;border-radius:0;box-shadow:none;
  }
  .nj-cols{grid-template-columns:1fr;}
  .nj-side{display:none;}

  /* The floating close button lands top-right over the head, so keep
     the rail clear of it rather than letting the X sit on a step. */
  .nj-head{gap:.55rem;padding:.85rem 3.4rem .7rem 1rem;}
  .nj-head-title{width:100%;font-size:1.06rem;}
  .nj-steps{width:100%;}
  .nj-step-dot{width:27px;height:27px;font-size:.78rem;}
  .nj-step-label{font-size:.7rem;}
  .nj-step-bar{margin:0 .3rem;min-width:8px;}

  .nj-body{padding:1.05rem 1rem 1.6rem;}
  .nj-step-head{margin-bottom:.95rem;}
  .nj-step-head h2{font-size:1.2rem;}
  .nj-field-grid{grid-template-columns:1fr;}

  /* 16px everywhere a caret can land — anything smaller triggers
     iOS's zoom-on-focus. */
  .nj-field input[type=text],.nj-field input[type=date],.nj-field input[type=email],
  .nj-field input[type=tel],.nj-field input[type=number],.nj-field select,
  .nj-field textarea,.nj-co-pick input,.nj-crew-role,.nj-bill-row input{
    font-size:16px;padding:.62rem .7rem;
  }
  .nj-field>label{font-size:.86rem;}

  /* Pick lists: full-width rows at a thumb-sized height. */
  .nj-co-row,.nj-pick-row{padding:.7rem;min-height:48px;}
  .nj-co-row{flex-direction:column;align-items:flex-start;gap:.15rem;}
  .nj-co-sub{text-align:left;font-size:.76rem;}
  .nj-co-results{max-height:none;}
  .nj-crew-list{max-height:46vh;}
  .nj-add-new{padding:.7rem .8rem;font-size:.88rem;}
  .nj-crew-row{grid-template-columns:1fr auto;padding:.5rem;}
  .nj-crew-role{grid-column:1 / -1;}
  .nj-crew-x{font-size:1rem;padding:.4rem .5rem;}
  .nj-newcrew-foot .btn{min-height:40px;}

  /* Checkboxes need a target, not a glyph. */
  .nj-checks{gap:.1rem .9rem;margin-bottom:.9rem;}
  .nj-check{min-height:44px;font-size:.88rem;gap:.55rem;}
  .nj-check input{width:20px;height:20px;}

  /* Day rows: the five pills hand over to the native picker. */
  .nj-day-rows{max-height:none;gap:.35rem;}
  .nj-day-row{padding:.4rem .5rem;gap:.5rem;}
  .nj-day-when{flex:1 1 auto;min-width:0;}
  .nj-day-label{font-size:.85rem;}
  .nj-day-date{font-size:.76rem;}
  .nj-dt{display:none;}
  .nj-dt-sel{
    display:block;flex:0 0 auto;max-width:44%;min-height:44px;
    padding:.4rem 1.6rem .4rem .55rem;border-radius:7px;
    background:var(--bg);border:1px solid var(--border2);color:var(--text);
    font-family:inherit;font-size:16px;
  }
  .nj-day-travel-slot{flex:0 0 44px;}
  .nj-day-travel{width:44px;height:44px;font-size:1rem;}

  /* "Set all" becomes one picker rather than five small pills. */
  .nj-preview-head{flex-direction:column;align-items:stretch;gap:.5rem;}
  .nj-setall{margin-left:0;width:100%;}
  .nj-setall-lbl,.nj-setall-btn{display:none;}
  .nj-setall-sel{
    display:block;width:100%;min-height:44px;
    padding:.5rem .7rem;border-radius:7px;
    background:var(--bg);border:1px solid var(--border2);color:var(--text);
    font-family:inherit;font-size:16px;
  }

  /* Review: the rate card's rate × count line can't hold one row. */
  .nj-bill-mode{min-height:44px;font-size:.86rem;}
  .nj-bill-row{flex-wrap:wrap;gap:.35rem .45rem;}
  .nj-bill-lbl{flex:1 0 100%;font-size:.78rem;}
  .nj-bill-rate{flex:1 1 40%;}
  .nj-bill-count{width:84px;}
  .nj-rev-row{flex-direction:column;gap:.15rem;}
  .nj-rev-k{flex:none;}
  .nj-turn-fix{min-height:40px;width:100%;text-align:left;}

  /* Nav stays put while the body scrolls; Next takes the space so
     the primary action is the easy one to hit with a thumb. */
  .nj-foot{padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));}
  /* Drop the spacer so Next actually takes the slack rather than
     splitting it with an empty div. */
  .nj-foot-spacer{display:none;}
  .nj-foot .btn{min-height:44px;padding:.5rem .9rem;}
  .nj-foot .btn-accent{flex:1;}
  .nj-skip{font-size:.78rem;padding:.5rem .5rem;}
}

/* Below ~400px the step labels stop fitting beside the dots. */
@media(max-width:400px){
  .nj-step-label{display:none;}
  .nj-step-bar{min-width:14px;}
  .nj-dt-sel{max-width:50%;}
}

/* buttons */
.btn{
  font-family:var(--ui);font-weight:500;font-size:.88rem;
  padding:.42rem .9rem;border:1px solid var(--border2);border-radius:7px;
  cursor:pointer;transition:all .12s;
  display:inline-flex;align-items:center;gap:.28rem;white-space:nowrap;
  background:var(--surface2);color:var(--text2);
}
.btn:hover{background:var(--surface3);color:var(--text);border-color:var(--border3);}
.btn-block{width:100%;justify-content:center;}
.btn-accent{
  background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;
  box-shadow:0 2px 8px rgba(245,166,35,.22);
}
.btn-accent:hover{filter:brightness(1.08);box-shadow:0 3px 12px rgba(245,166,35,.35);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text3);}
.btn-ghost:hover{background:var(--surface2);color:var(--text);border-color:var(--border);}
.btn-out{background:var(--accent2);color:#fff;border-color:var(--accent2);}
.btn-out:hover{filter:brightness(1.1);}
.btn-in{background:var(--green);color:#fff;border-color:var(--green);font-weight:600;}
.btn-in:hover{filter:brightness(1.1);}
.btn-danger{background:var(--red-dim);border-color:rgba(240,72,72,.4);color:var(--red);font-weight:600;}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red);}
.btn-sm{font-size:.79rem;padding:.29rem .62rem;}
.btn-xs{font-size:.72rem;padding:.2rem .46rem;}

/* log */
.log-entry{padding:.55rem 1rem;border-bottom:1px solid var(--border);display:flex;gap:.55rem;}
.log-t{font-family:var(--mono);font-size:.76rem;color:var(--text3);white-space:nowrap;padding-top:.1rem;}
.log-tx{font-size:.92rem;line-height:1.5;color:var(--text2);}
.tag-out{color:var(--red);font-weight:500;}
.tag-in{color:var(--green);font-weight:500;}

/* cat dots & badges */
.cat-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.cat-badge{font-size:.75rem;padding:.1rem .45rem;border-radius:4px;border:1px solid;white-space:nowrap;}

/* -- INVENTORY -- */
/* -- INVENTORY (redesigned) -----------------------------
   Single-column layout matching the All Jobs grid pattern:
   header bar → category chips → summary strip → tight row list.
   Drops the 200px-wide left rail in favor of horizontal chips
   that only show non-empty categories.                          */
.inv-shell{
  flex:1;min-height:0;overflow-y:auto;
  background:var(--bg);
}
.inv-shell-inner{
  max-width:var(--page-max);width:100%;margin:0 auto;padding:0 1.4rem 1rem;
}

/* Header — uses .aj-head/.aj-search/.aj-sort-group from the All
   Jobs grid so the visual rhythm matches across views. Sticky to the
   top of the scrolling .inv-shell so search + sub-tabs stay reachable
   while the list scrolls as one page (b199+). */
.inv-head{
  display:flex;flex-direction:column;gap:.7rem;
  margin-bottom:.85rem;
  position:sticky;top:0;z-index:6;
  background:var(--bg);padding:1rem 0 .55rem;
}

/* Category chip strip — single horizontally-scrollable row (b199+)
   so a large category set stays one tidy line instead of wrapping
   into a tall block. */
.inv-cat-chips{
  display:flex;gap:.35rem;flex-wrap:nowrap;overflow-x:auto;
  margin-bottom:.6rem;align-items:center;
  padding-bottom:.25rem;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.inv-cat-chips::-webkit-scrollbar{height:6px;}
.inv-cat-chips::-webkit-scrollbar-thumb{background:var(--border3);border-radius:3px;}
.inv-cat-chips::-webkit-scrollbar-track{background:transparent;}
.inv-cat-chip{
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text2);font:inherit;font-size:.78rem;
  padding:.3rem .65rem;border-radius:14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;flex-shrink:0;
  transition:all .1s;white-space:nowrap;
}
.inv-cat-chip:hover{ background:var(--surface3);color:var(--text);border-color:var(--border3); }
.inv-cat-chip.active{
  background:var(--accent-dim);border-color:var(--accent);color:var(--accent);
  font-weight:600;
}
.inv-cat-chip .inv-cat-chip-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.inv-cat-chip .inv-cat-chip-n{
  font-family:var(--mono);font-size:.7rem;color:var(--text3);
  padding:.05rem .35rem;background:var(--bg);border-radius:8px;
  min-width:1.4em;text-align:center;
}
.inv-cat-chip.active .inv-cat-chip-n{
  background:var(--accent);color:#fff;
}

/* Summary stats — same content as before but tighter. */
.inv-summary{
  display:flex;align-items:center;gap:1.2rem;
  padding:.55rem .85rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:6px;
  flex-shrink:0;flex-wrap:wrap;
  margin-bottom:.6rem;
}
.inv-summary-stat{display:flex;align-items:baseline;gap:.45rem;}
.inv-summary-val{
  font-size:1rem;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1;
}
.inv-summary-lbl{
  font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);
}
.inv-summary-div{
  width:1px;height:18px;background:var(--border);align-self:center;
}

/* Inline sort selector inside summary strip — card view only */
.inv-sum-sort-wrap{
  margin-left:auto;display:flex;align-items:center;gap:.25rem;
}
.inv-sum-sort-lbl{
  font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text3);margin-right:.2rem;
}
.inv-sum-sort{
  background:none;border:1px solid transparent;border-radius:4px;
  color:var(--text3);font:inherit;font-size:.7rem;
  padding:.25rem .5rem;cursor:pointer;
  transition:all .1s;
  white-space:nowrap;
}
.inv-sum-sort:hover:not(.active){color:var(--text);border-color:var(--border2);}
.inv-sum-sort.active{color:var(--accent);border-color:var(--accent);background:var(--accent-dim);}

/* ── Inventory bulk selection (b651) ─────────────────────────────
   The docked action bar between the list and the footer, plus the
   per-row/card selection decorations. Checkboxes are flex children
   in list rows and package-member rows (both flex layouts); on
   cards the check floats top-right (cards are position:relative). */
.inv-selbar{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .75rem;margin-top:.5rem;
  background:var(--surface);border:1px solid var(--accent);
  border-radius:8px;flex-shrink:0;
  box-shadow:0 2px 14px rgba(0,0,0,.28);
}
.inv-selcount{
  font-size:.8rem;font-weight:600;color:var(--text);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.inv-item.inv-selmode,.inv-list-row.inv-selmode,.inv-pkg-card-member.inv-selmode{cursor:pointer;}
.inv-sel-check{
  flex-shrink:0;width:17px;height:17px;border-radius:5px;
  border:1.5px solid var(--border3);background:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:700;line-height:1;color:#fff;
  align-self:center;
  transition:background .1s,border-color .1s;
}
.inv-sel-check-card{
  position:absolute;top:.5rem;right:.5rem;z-index:2;
}
.inv-item.inv-sel .inv-sel-check,
.inv-list-row.inv-sel .inv-sel-check,
.inv-pkg-card-member.inv-sel .inv-sel-check{
  background:var(--accent);border-color:var(--accent);
}
.inv-item.inv-sel,
.inv-list-row.inv-sel,
.inv-pkg-card-member.inv-sel{
  outline:1.5px solid var(--accent);outline-offset:-1.5px;
  background:var(--accent-dim);
}

/* List container — card grid layout */
.inv-list-wrap{
  display:flex;flex-direction:column;
}
.inv-footer-host{
  /* Fixed slot at the bottom of the inventory panel, outside the
     scrollable list. Holds renderViewFooter()'s version line. The
     footer template provides its own top border + 3rem margin-top,
     so this host just needs horizontal padding to match the panel.
     flex-shrink:0 keeps it from being squashed when the list is
     long. */
  flex-shrink:0;
  padding:0 .25rem 1rem;
}
.inv-scroll{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:min-content;
  gap:.6rem;
  align-content:start;
  padding:.25rem 0 .5rem;
}

/* ── INVENTORY CARDS (compact) ──────────────────────────── */
.inv-item{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:7px;overflow:hidden;
  display:flex;flex-direction:row;align-items:stretch;
  cursor:pointer;position:relative;
  transition:border-color .1s,background .1s,box-shadow .1s;
  min-height:0;
}
.inv-item:hover{
  background:var(--surface2);border-color:var(--border3);
  box-shadow:0 1px 8px rgba(0,0,0,.12);
}
.inv-item.inv-row-flash{ animation:inv-row-flash 1.4s ease-out; }
@keyframes inv-row-flash{
  0%  { border-color:rgba(245,166,35,.8);box-shadow:0 0 0 2px rgba(245,166,35,.3); }
  100%{ border-color:var(--border2);box-shadow:none; }
}

/* Left colour bar */
.inv-item-dot{
  width:3px;flex-shrink:0;align-self:stretch;
  border-radius:0;display:block;
}

/* Card body */
.inv-card-body{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:.18rem;
  padding:.5rem .65rem .45rem .6rem;
}
.inv-card-top{
  display:flex;align-items:baseline;gap:.4rem;min-width:0;
}
.inv-item-name{
  font-size:.84rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:0 1 auto;min-width:0;line-height:1.3;
}
/* .inv-card-val retired in b116 — value no longer renders in
   the card top row. Inline value (when sort=value) uses
   .inv-item-val-inline in the meta strip instead. The CSS rule
   is kept harmlessly absent so any external reference (skin
   overrides, etc.) just falls through with no styling. */
.inv-card-meta{
  display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;min-height:.9rem;
}
.inv-card-notes{
  font-size:.69rem;color:var(--text3);font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Delete button moved to the edit-item modal foot (see m-inv-edit).
   Used to live in-row as a corner ✕; that affordance was retired so
   the list rows stay click-anywhere-to-open without an easy
   misclick into a destructive action. */

/* View toggle */
.inv-view-toggle{display:flex;gap:.2rem;align-items:center;}
.inv-view-btn{
  background:none;border:1px solid var(--border);border-radius:4px;
  color:var(--text3);font-size:.9rem;line-height:1;
  padding:.28rem .42rem;cursor:pointer;transition:all .1s;
}
.inv-view-btn.active{color:var(--accent);border-color:var(--accent);background:var(--accent-dim);}
.inv-view-btn:hover:not(.active){color:var(--text);border-color:var(--border2);}

/* ── INVENTORY LIST VIEW (table) ────────────────────────── */
.inv-scroll.inv-list-view{
  grid-template-columns:1fr;
  grid-auto-rows:min-content;
  gap:0;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:8px;
  overflow:hidden;
  /* override grid display */
  display:flex;flex-direction:column;
}
/* Column widths — name flex, category fixed.
   (b116+) Value column dropped — totals live in the summary strip.
   (b117+) Qty column dropped — qty>1 now renders as a ×N chip
   inside the meta cluster. List view is now just identity (name +
   meta) and category. Sorts by qty/value still work from the sort
   bar above the panel. */
.inv-list-header,
.inv-list-row{
  display:grid;
  grid-template-columns: 1fr 130px;
  align-items:center;
}
.inv-list-header{
  position:sticky;top:0;z-index:3;
  background:var(--bg);border-bottom:1px solid var(--border2);
  padding:0;flex-shrink:0;
}
.inv-th{
  padding:.4rem .65rem;
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);cursor:pointer;user-select:none;
  white-space:nowrap;
  transition:color .1s;
}
.inv-th:hover{color:var(--text2);}
.inv-th.active{color:var(--accent);}
.inv-th:last-child{text-align:right;}

.inv-list-body{flex:1;overflow-y:auto;min-height:0;}
.inv-list-row{
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .08s;
  position:relative;
}
.inv-list-row:last-child{border-bottom:none;}
.inv-list-row:hover{background:var(--surface2);}

.inv-lr-name{
  display:flex;align-items:center;gap:.4rem;
  padding:.42rem .65rem;min-width:0;overflow:hidden;
}
/* (b118+) The label no longer grows — it sizes to its content
   (with ellipsis when the row is too narrow). The qty chip
   following it then sits IMMEDIATELY after the name text rather
   than at the right edge of the cell, which is what makes the
   qty read as part of the name ("Apple Box ×3") rather than as
   another meta chip. The meta cluster after them gets pushed to
   the right by margin-left:auto so name+qty stay grouped on the
   left while the chip cluster sits on the right of the cell. */
.inv-lr-label{
  font-size:.84rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:0 1 auto;min-width:0;line-height:1.25;
}
/* (b116+) The chip stack that follows the label inside the name
   cell — Asset ID, OUT/BOOKED/COND badges, tag strip, optional
   inline value. Flex-shrink:0 ensures chips don't shrink even
   when the label is long; instead the label's ellipsis kicks in.
   The whole stack is align-center so chips at different intrinsic
   heights still sit on the same baseline. flex-wrap:wrap means a
   tag-heavy item lets badges fall to a second line rather than
   horizontally overflowing the row — the row just grows in
   height, which the grid template handles via align-items:center
   on the cat cell.
   (b118+) margin-left:auto pushes the cluster to the right edge
   of the cell so name+qty stay grouped on the left. */
.inv-lr-meta{
  display:inline-flex;align-items:center;gap:.3rem;
  flex-shrink:0;flex-wrap:wrap;row-gap:.25rem;
  margin-left:auto;
}
.inv-lr-cat{
  padding:.42rem .65rem;
  text-align:center;
  display:flex;align-items:center;justify-content:center;
}
.inv-lr-cat-pill{
  display:inline-block;
  font-size:.68rem;font-weight:600;
  letter-spacing:.02em;
  padding:.18rem .6rem;border-radius:10px;
  white-space:nowrap;
  background:color-mix(in srgb, var(--cat-color) 14%, transparent);
  color:var(--cat-color);
  border:1px solid color-mix(in srgb, var(--cat-color) 40%, transparent);
}
/* .inv-lr-qty retired in b117 — qty column was removed from the
   list grid. Per-row qty renders as the existing
   .inv-item-qty-chip inside the meta cluster instead. The CSS
   rule is dropped (vs. the .inv-lr-val/.inv-card-val deprecation
   notes elsewhere) because nothing external is documented to
   target these names. */
/* .inv-lr-val retired in b116 — value column was removed from the
   always-visible list grid. Inline value (when sort=value) uses
   .inv-item-val-inline inside the name cell instead. */

/* .inv-list-footer was retired in v4.10.1 — the footer now lives in
   #inv-footer (.inv-footer-host) outside the scrollable list area. */

.iom-section-label{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--text3);padding:.7rem 1.4rem .35rem;
}
.iom-card{
  margin:0 .75rem .5rem;border-radius:10px;
  border:1px solid var(--border2);background:var(--surface);
  cursor:pointer;transition:background .12s,border-color .12s;overflow:hidden;
}
.iom-card:hover{background:var(--surface2);border-color:var(--border3);}
.iom-card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem .9rem .55rem;gap:.5rem;
}
.iom-card-title{font-size:.88rem;font-weight:700;color:var(--text);line-height:1.3;}
.iom-card-org{font-weight:400;color:var(--text3);}
.iom-card-meta{font-size:.74rem;color:var(--text3);margin-top:.1rem;}
.iom-card-arrow{color:var(--text3);font-size:1.1rem;flex-shrink:0;transition:transform .12s;}
.iom-card:hover .iom-card-arrow{transform:translateX(2px);}
.iom-card-items{
  border-top:1px solid var(--border);
  padding:.4rem .9rem .55rem;display:flex;flex-direction:column;gap:.25rem;
}
.iom-item{display:flex;align-items:center;gap:.45rem;font-size:.8rem;padding:.1rem 0;}
.iom-item-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.iom-item-name{flex:1;color:var(--text2);}
.iom-item-chip{
  font-size:.68rem;background:var(--surface2);color:var(--text3);
  border:1px solid var(--border);border-radius:4px;padding:.05rem .3rem;
  white-space:nowrap;
}
.iom-day-chip{color:var(--text2);}
.iom-item-qty{font-size:.72rem;color:var(--text3);}
.iom-item-val{font-size:.72rem;font-family:var(--mono);color:var(--text3);margin-left:auto;}
.iom-overdue-tag{
  display:inline-block;font-size:.62rem;font-weight:700;
  background:var(--red-dim);color:var(--red);
  border:1px solid rgba(240,72,72,.3);border-radius:4px;
  padding:.05rem .35rem;vertical-align:middle;margin-left:.35rem;
}
/* Gear Out tab (b196+) — chrome around the reused iom-* cards. */
.go-head{
  padding:.7rem 1.4rem .25rem;
  max-width:var(--page-max);width:100%;margin:0 auto;
}
.go-summary{
  font-size:.82rem;color:var(--text2);margin-top:.2rem;
}
.go-summary strong{color:var(--text);font-weight:700;}
.go-body{
  padding:.35rem 1.4rem 2rem;
  max-width:var(--page-max);width:100%;margin:0 auto;
}
.go-empty{
  padding:3.5rem 1.4rem;text-align:center;color:var(--text2);font-size:.9rem;
}
.go-empty-icon{
  font-size:2rem;margin-bottom:.55rem;color:var(--green);
}
/* Out → back dates as stacked "big date" blocks, matching the home
   schedule timeline's month-over-day date column (b198+). */
.go-dates{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  margin:.45rem 0 .3rem;
}
.go-datebox{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:46px;padding:.35rem .45rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  text-align:center;
}
.go-datebox-lbl{
  font-size:.52rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text3);line-height:1;margin-bottom:.24rem;
}
.go-datebox-mo{
  font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text2);line-height:1;margin-bottom:.16rem;
}
.go-datebox-num{
  font-size:1.4rem;font-weight:800;color:var(--text);line-height:1;
  font-variant-numeric:tabular-nums;
}
.go-datebox-arrow{display:flex;align-items:center;color:var(--text3);font-size:1.05rem;}
.go-datebox-over{background:var(--red-dim);border-color:rgba(240,72,72,.35);}
.go-datebox-over .go-datebox-num{color:var(--red);}
.go-datebox-over .go-datebox-lbl{color:var(--red);}
.go-datebox-today{background:rgba(240,160,32,.08);border-color:rgba(240,160,32,.35);}
.go-datebox-today .go-datebox-num{color:var(--accent);}
.go-datebox-today .go-datebox-lbl{color:var(--accent);}
.go-rel{
  font-size:.68rem;font-weight:600;color:var(--text3);
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:5px;padding:.1rem .45rem;margin-left:.1rem;align-self:center;
}
.go-rel-soon{color:var(--accent);background:rgba(240,160,32,.12);border-color:rgba(240,160,32,.3);}
.go-rel-over{color:var(--red);background:var(--red-dim);border-color:rgba(240,72,72,.3);}
.inv-item-out-badge{
  font-size:.62rem;font-weight:800;letter-spacing:.06em;
  background:rgba(240,160,32,.18);color:var(--accent);
  border:1px solid rgba(240,160,32,.4);
  border-radius:4px;padding:.1rem .35rem;
  line-height:1.2;
  display:inline-flex;align-items:center;
  vertical-align:middle;flex-shrink:0;
}
/* BOOKED badge (b115+) — sibling to .inv-item-out-badge.
   Uses the blue family so it visually distinguishes "scheduled
   to be needed" from OUT (amber, currently out). Tooltip on hover
   gives the full booking source + date for desktop users; mobile
   tap-to-detail will surface the same info via the item drawer. */
.inv-item-booked-badge{
  font-size:.62rem;font-weight:800;letter-spacing:.06em;
  background:rgba(100,140,255,.14);color:#7090e8;
  border:1px solid rgba(100,140,255,.3);
  border-radius:4px;padding:.1rem .35rem;
  line-height:1.2;
  display:inline-flex;align-items:center;
  vertical-align:middle;flex-shrink:0;
  white-space:nowrap;
}
/* Asset ID chip (b116+) — small mono pill so the ID recedes
   rather than competing with the item name. Previously this
   class had no rules, so the ID inherited the row's font size
   and weight and read like part of the name. */
.inv-item-id{
  font-family:var(--mono);
  font-size:.65rem;font-weight:500;
  color:var(--text3);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:4px;padding:.08rem .35rem;
  letter-spacing:.02em;line-height:1.2;
  display:inline-flex;align-items:center;
  vertical-align:middle;flex-shrink:0;
  white-space:nowrap;
}
/* Inline muted value (b116+) — surfaces in card / list rows
   ONLY when sort=value. The summary strip at the top of the
   panel still shows total value; per-row value would crowd
   every scan otherwise. */
.inv-item-val-inline{
  font-family:var(--mono);
  font-size:.7rem;font-weight:600;
  color:var(--text3);
  letter-spacing:.02em;line-height:1.2;
  flex-shrink:0;white-space:nowrap;
  margin-left:.2rem;
}
/* Card-only category label (b116+) — only rendered when the cat
   filter is 'All' so cards across categories carry their identity.
   Same chip family as the asset ID but slightly tinted so it
   doesn't read as identical metadata. */
.inv-item-cat-label{
  font-size:.65rem;font-weight:600;letter-spacing:.04em;
  color:var(--text3);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:4px;padding:.1rem .4rem;
  line-height:1.2;
  display:inline-flex;align-items:center;
  vertical-align:middle;flex-shrink:0;
  white-space:nowrap;
}
.inv-item-maxqty-chip{
  font-size:.62rem;font-weight:700;letter-spacing:.04em;
  background:rgba(100,140,255,.12);color:#7090e8;
  border:1px solid rgba(100,140,255,.3);
  border-radius:4px;padding:.1rem .35rem;
  line-height:1.2;
  display:inline-flex;align-items:center;
  vertical-align:middle;flex-shrink:0;
  white-space:nowrap;
}
.avail-badge{
  font-size:.7rem;font-weight:600;border-radius:4px;
  padding:.06rem .35rem;margin-left:.3rem;white-space:nowrap;
}
.avail-ok{background:rgba(62,201,110,.12);color:var(--green);border:1px solid rgba(62,201,110,.3);}
.avail-partial{background:rgba(240,160,32,.12);color:var(--accent);border:1px solid rgba(240,160,32,.3);}
.avail-none{background:var(--red-dim);color:var(--red);border:1px solid rgba(240,72,72,.3);}
.inv-item-cond{
  font-size:.62rem;font-weight:700;letter-spacing:.06em;
  padding:.1rem .35rem;border-radius:4px;
  font-family:var(--mono);text-transform:uppercase;
  line-height:1.2;
  background:rgba(220,150,40,.12);color:var(--accent);
  border:1px solid rgba(220,150,40,.3);
  display:inline-flex;align-items:center;
  vertical-align:middle;flex-shrink:0;
}
.inv-item-cond.Damaged{
  background:rgba(239,68,68,.18);color:var(--red);
  border-color:rgba(239,68,68,.4);
}
.inv-item-qty-chip{
  font-family:var(--mono);font-size:.75rem;color:var(--text3);
  flex-shrink:0;
}
.inv-item-val{
  font-family:var(--mono);font-size:.82rem;font-weight:700;
  color:var(--text);font-variant-numeric:tabular-nums;
  margin-left:auto;flex-shrink:0;
}

/* Package headers in the inventory list (b121+) — replaces b120's
   collapsible chevron'd pkg rows. Packages now ALWAYS show their
   members; the header is a prominent section banner that sits
   above its members, with strong visual contrast against item
   rows so the package boundary is unmistakable. Clicking the
   header jumps to the package editor (manage contents).

   Visual treatment:
   - Loud accent-tinted background so the header pops against
     item rows
   - Larger font (.95rem vs .84rem for items), bolder weight
   - Generous vertical padding so the header reads as a section
     start, not another row
   - Left accent stripe (3px) that extends DOWN into the member
     rows — visually ties the kit together as one unit

   Three render contexts share the .inv-pkg-header class; the
   list/card/mobile variants tweak padding/font as needed. */

/* Shared chrome */
.inv-pkg-header{
  display:flex;align-items:center;gap:.55rem;
  padding:.7rem .85rem;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 14%, var(--surface2)) 0,
    color-mix(in srgb, var(--accent) 6%, var(--surface2)) 100%);
  border-left:3px solid var(--accent);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:filter .1s;
  position:relative;
}
.inv-pkg-header:hover{
  filter:brightness(1.06);
}
.inv-pkg-icon{
  font-size:1.05rem;
  flex-shrink:0;
}
.inv-pkg-header-name{
  flex:1;min-width:0;
  font-size:.95rem;font-weight:700;
  color:var(--text);
  letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.inv-pkg-count{
  font-family:var(--mono);
  font-size:.72rem;font-weight:600;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 16%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius:10px;
  padding:.12rem .55rem;
  white-space:nowrap;
  flex-shrink:0;
  letter-spacing:.02em;
}
/* (b122+) Shared-badge cluster in the package header — sits
   between the name (which flex-grows) and the count pill on the
   right. flex-shrink:0 so badges don't shrink against long names;
   when names are too long the name's ellipsis kicks in first. */
.inv-pkg-header-badges,
.mi-pkg-header-badges{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  flex-shrink:0;
}

/* ── List view — header + member rows ─────────────────────── */
.inv-list-body .inv-pkg-header{
  border-bottom:1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}
/* Member rows are visually inset under their package — left
   accent stripe via ::before so it doesn't compress the grid
   widths, plus extra left padding on the name cell so the label
   sits past the stripe with a clear indent. The stripe carries
   the visual line down from the header's left accent border so
   the kit reads as one continuous unit. */
.inv-list-row.inv-pkg-member{
  position:relative;
}
.inv-list-row.inv-pkg-member::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--accent);
  opacity:.45;
}
.inv-list-row.inv-pkg-member .inv-lr-name{
  padding-left:1.7rem;
}

/* ── Card view — package card spans grid, header inside ───── */
.inv-item.inv-pkg-card{
  grid-column:1 / -1;
  background:var(--surface2);
  border:1px solid color-mix(in srgb, var(--accent) 25%, var(--border2));
  overflow:hidden;
  cursor:default;
}
.inv-item.inv-pkg-card:hover{
  background:var(--surface2);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border2));
}
.inv-pkg-card-dot{
  background:var(--accent);
  opacity:.7;
  width:5px;
}
/* Card body in pkg context — header at top, members beneath, no
   side padding so the header bleeds to the card edges. */
.inv-item.inv-pkg-card .inv-card-body{
  padding:0;
}
/* When the header sits inside a card, tone down its left border
   (the card already has its own border + dot stripe) to avoid
   double-stripe. */
.inv-pkg-header-card{
  border-left:none;
  padding:.65rem .85rem;
}
.inv-pkg-card-members{
  padding:.35rem .65rem .55rem;
  display:flex;flex-direction:column;gap:.1rem;
  position:relative;
}
.inv-pkg-card-member{
  display:flex;align-items:center;gap:.45rem;
  padding:.4rem .35rem .4rem 1.55rem;
  position:relative;
  cursor:pointer;
  border-radius:4px;
  min-width:0;
}
.inv-pkg-card-member:hover{
  background:var(--surface);
}
.inv-pkg-card-member::before{
  content:'';
  position:absolute;
  left:.55rem;top:0;bottom:0;
  width:2px;
  background:var(--accent);
  opacity:.45;
}
.inv-pkg-member-dot{
  width:8px;height:8px;border-radius:50%;
  flex-shrink:0;
}
.inv-pkg-member-name{
  flex:0 1 auto;min-width:0;
  font-size:.82rem;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--text);
}
.inv-pkg-member-badges{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:.25rem;
  flex-shrink:0;
}

/* ── Mobile — header + indented member rows ──────────────── */
.mi-pkg-header{
  display:flex;align-items:center;gap:.6rem;
  padding:.75rem .85rem;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 14%, var(--surface2)) 0,
    color-mix(in srgb, var(--accent) 6%, var(--surface2)) 100%);
  border-left:3px solid var(--accent);
  border-radius:8px 8px 0 0;
  margin-top:.45rem;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mi-pkg-header:active{
  filter:brightness(.95);
}
.mi-pkg-header-icon{
  font-size:1.1rem;
  flex-shrink:0;
}
.mi-pkg-header-name{
  flex:1;min-width:0;
  font-size:.98rem;font-weight:700;
  color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mi-pkg-count{
  font-family:var(--mono);
  font-size:.72rem;font-weight:600;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 16%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius:10px;
  padding:.12rem .5rem;
  flex-shrink:0;
}
/* (b708) Collapsible kit chrome */
.mi-pkg-chev{
  flex-shrink:0;
  font-size:1.15rem;line-height:1;
  color:var(--accent);
  opacity:.75;
  transform:rotate(0deg);
  transition:transform .15s;
  width:.9rem;text-align:center;
}
.mi-pkg-header.mi-pkg-open .mi-pkg-chev{
  transform:rotate(90deg);
}
.mi-pkg-header.mi-pkg-closed{
  /* Closed kits are standalone cards — round all corners and give
     them the same breathing room as item rows. */
  border-radius:8px;
  margin-bottom:.05rem;
}
.mi-pkg-edit{
  flex-shrink:0;
  background:transparent;
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color:var(--accent);
  font-size:.85rem;line-height:1;
  padding:.35rem .5rem;
  border-radius:7px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mi-pkg-edit:active{
  background:color-mix(in srgb, var(--accent) 15%, transparent);
}
.mi-row.mi-pkg-member{
  position:relative;
}
.mi-row.mi-pkg-member::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--accent);
  opacity:.45;
  z-index:1;
  pointer-events:none;
}
.mi-row.mi-pkg-member .mi-row-body{
  padding-left:1.2rem;
}

/* Empty state */
.inv-empty{
  padding:3rem 1rem;text-align:center;color:var(--text3);
}
.inv-empty-icon{font-size:2.2rem;opacity:.5;margin-bottom:.5rem;}

/* modals */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:600;animation:fi .12s;
  /* Keyboard inset (b911). The BOX stays the full screen on purpose —
     `backdrop-filter` makes .overlay the containing block for its
     position:fixed descendants (the phone sheets, the floating ✕), and
     both are positioned assuming full-screen coordinates. Reserving the
     keyboard's height as padding instead shrinks only the *content* box,
     so `align-items:center` centres a modal in the strip the user can
     actually see without moving anyone's origin. --kb is published by
     _vvApply() in grip-app.js and is 0 with no keyboard, which is the
     old behaviour exactly. */
  padding-bottom:var(--kb, 0px);
  /* Ride the keyboard rather than snapping to it. */
  transition:padding-bottom .22s var(--ease-out, ease-out);
}
@keyframes fi{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface);border:1px solid var(--border2);border-radius:12px;
  box-shadow:var(--shadow-lg);
  padding:1.5rem;width:460px;max-width:96vw;overflow-y:auto;animation:su .16s;
  /* 88vh as before, but never taller than the strip the user can
     actually see — otherwise a keyboard-shrunk overlay centres a
     too-tall modal and clips it off both ends (b911). */
  max-height:min(88vh, calc(var(--vvh, 100vh) - 2rem));
  /* Prevent wheel/touch scroll from chaining to the page underneath
     when the user reaches the modal's scroll bounds. Without this,
     reaching the bottom of a long prep list or scrolling on a body
     content section that fits-in-view sends scroll events to the
     gear list behind the overlay. */
  overscroll-behavior:contain;
}
.modal.wide{width:600px;}

/* ────────────────────────────────────────────────────────────
   Floating modal close button

   Sits at the top-right corner of every modal, half-outside the
   modal's edge for the "stuck onto" look in the spec. Positioning
   is set in JS (top/left in viewport coords) so modals with
   overflow:hidden — most of them, for border-radius clipping —
   can't crop the button. The button itself uses position:fixed.

   Opt-out: add data-no-close="1" to the .overlay if a particular
   modal shouldn't get an X (none currently use this — kept as an
   escape hatch). */
.modal-x{
  position:fixed;
  width:30px;height:30px;
  display:none;             /* JS flips to flex when the modal is shown */
  align-items:center;justify-content:center;
  background:var(--surface);
  /* Border + icon use the same --border2 that draws the modal
     outline itself, so the close button reads as part of the same
     drawing rather than a high-contrast interactive flag. Hover
     state bumps to --text2 so the interaction is still legible. */
  border:1.5px solid var(--border2);
  border-radius:50%;
  color:var(--border2);     /* SVG stroke inherits via currentColor */
  padding:0;
  cursor:pointer;
  z-index:10000;            /* above modal content + backdrop */
  box-shadow:var(--shadow-md, 0 2px 8px rgba(0,0,0,.18));
  transition:transform .1s, background .12s, color .12s, border-color .12s;
  user-select:none;
}
.modal-x svg{
  /* Icon size is ~40% of the button diameter — proportions match the
     reference. width/height in pixels (not %), so the icon stays at
     the same visual weight regardless of font-size inheritance. */
  width:12px; height:12px;
  display:block;
  pointer-events:none;       /* clicks on the SVG bubble to the button */
}
.modal-x:hover{
  background:var(--surface2);
  border-color:var(--text2);
  color:var(--text2);
  transform:scale(1.06);
}
.modal-x:active{ transform:scale(.96); }
.modal-x:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* Slightly smaller + closer to the edge on small viewports so the
   button doesn't hang awkwardly off a near-full-width modal. */
@media (max-width:640px){
  /* b676: was 26px with a border-grey icon — too easy to miss on a
     phone. 40px hits the recommended touch-target size; icon and
     ring step up to text colours so it reads as a button. */
  .modal-x{
    width:40px; height:40px;
    color:var(--text);
    border-color:var(--border3);
    background:var(--surface2);
    box-shadow:0 3px 12px rgba(0,0,0,.32);
  }
  .modal-x svg{ width:15px; height:15px; }
}

/* The various detail modals previously had an inline ✕ inside their
   header bar (.cd-header > .td-close, .modal-head > .modal-close).
   With the floating ✕ now global across every modal, those inline
   ones become redundant visual weight — hide them. The header's
   flex layout collapses the gap automatically. */
.modal .td-close,
.modal .modal-close{ display:none; }

/* Historical note (v5.33.1+):
   The two-column .modal.wide-grid / .me-grid / .me-col-left/right
   layout used to live here. It was retired when the five edit
   modals (contact / company / job / rental / inventory) switched
   to the .modal-tabbed pattern below, which gives each auxiliary
   panel the full modal width when active rather than cramming
   three panels into a narrow right column. Removing the dead
   rules to keep the stylesheet honest; rule definitions live in
   git history at v5.33.0 if a third-party modal ever needs the
   pattern back. */

/* ────────────────────────────────────────────────────────────
   Tabbed modal layout (v5.33.0+)

   Replaces the wide two-column .me-grid for edit modals where
   the right column was cramming three independently complex
   panels (Tags / Documents / Activity) into ~340px. With tabs
   each pane gets the full modal width so the picker, doc list,
   and activity feed have room to breathe; the modal can also be
   narrower since it's no longer trying to be two columns.

   Active tab: bottom-border underline in the accent colour (lighter
   weight than the .nav-tab pill style, since modal tabs are
   subordinate to the modal title). Count badge sits at the right
   of each tab label; absent when count is zero.

   Add mode: tabs that need an entity id (tags/docs/activity) get
   the [hidden] attribute toggled, so a fresh entity-less modal
   shows just Details until the user has saved once.
   ──────────────────────────────────────────────────────────── */

.modal.modal-tabbed{
  width: 720px;
  max-width: 96vw;
}

.modal-tabs{
  display: flex;
  align-items: stretch;
  gap: .15rem;
  border-bottom: 1px solid var(--border);
  margin: 0 0 1.1rem;
  /* Negative margin lets the active tab's underline coincide with
     the strip's bottom border, no double line. */
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.modal-tabs::-webkit-scrollbar{ display:none; }

.modal-tab{
  position: relative;
  padding: .58rem .85rem .65rem;
  background: transparent;
  border: 0;
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--ui);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .005em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.modal-tab:hover{ color: var(--text); }
.modal-tab.active{
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.modal-tab[hidden]{ display: none; }

.modal-tab-icon{
  font-size: 1rem;
  line-height: 1;
}

.modal-tab-count{
  background: var(--surface3);
  color: var(--text3);
  padding: 1px 7px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  min-width: 1rem;
  text-align: center;
  line-height: 1.35;
}
.modal-tab.active .modal-tab-count{
  background: var(--accent-dim);
  color: var(--accent);
}
/* Per-tab unread state (v5.33.0+): a tab gets .has-unread when its
   panel updates while a different tab is active. Cleared on click.
   Currently only wired for Activity (new note from elsewhere); the
   hook is generic so tags/docs can opt in later. */
.modal-tab.has-unread:not(.active) .modal-tab-count{
  background: var(--accent);
  color: #fff;
}

.modal-tab-panes{
  /* No layout of its own — children manage their own spacing. */
}
.modal-tab-pane{ display: none; }
.modal-tab-pane.active{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
}
.modal-tab-pane.active > *{ margin: 0; }

/* The Details pane often has form rows that flow naturally; no
   special grid. Other panes wrap a tag-panel / doc-panel /
   crm-activity-section whose internal headers we hide since the
   tab label IS the heading. */
.modal-tab-pane .tag-panel-head,
.modal-tab-pane .doc-panel-head,
.modal-tab-pane .crm-activity-head{
  display: none;
}

/* Panels inside a tab pane shouldn't carry their standalone
   margins / borders — the pane provides the framing. */
.modal-tab-pane > .tag-panel,
.modal-tab-pane > .doc-panel,
.modal-tab-pane > .crm-activity-section{
  margin-top: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

/* Bound the activity list so a long timeline doesn't push the
   modal taller than viewport. Inner list scrolls instead. */
.modal-tab-pane .crm-activity-list{
  max-height: 380px;
  overflow-y: auto;
}

@media (max-width: 600px){
  .modal.modal-tabbed{ width: 96vw; }
  .modal-tab{
    padding: .55rem .7rem .6rem;
    font-size: .85rem;
  }
  .modal-tab-pane .crm-activity-list{
    max-height: none;
  }
}

@keyframes su{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.modal-title{font-weight:700;font-size:1.15rem;margin-bottom:1.1rem;color:var(--text);}
.modal-foot{display:flex;flex-wrap:wrap;gap:.5rem;row-gap:.55rem;justify-content:flex-end;margin-top:1.1rem;padding-top:.85rem;border-top:1px solid var(--border);}
.modal-sub{font-size:.82rem;font-weight:400;color:var(--text3);border-bottom:1px solid var(--border);padding-bottom:.35rem;margin:.8rem 0 .6rem;}

/* ────────────────────────────────────────────────────────────
   Expense editor modal — 2-column grid layout (v4.65.0+)

   Form was getting too tall at 900px max-width with everything
   stacked vertically — scrolled on most screens. Now a wider
   1080px modal with the form split into two columns:

   LEFT  (transaction): Date+Vendor, Description, Amount+Tax,
                        Tax-included toggle, Tax type, Total
   RIGHT (assignment) : Category+Job, Account+Payment, Receipt,
                        Notes (grows to fill slack)

   Both columns flow independently. Footer spans full width.
   Collapses to single column below 768px viewport — keeps
   iPhone usable without horizontal compromise.
   ──────────────────────────────────────────────────────────── */
.exm-modal{
  /* Override .modal's 460px base + max-width:96vw cap. The
     1080px target gives ~510px per column after grid gap, plenty
     for 2-up frow children inside each column. */
  width:1080px;
  max-width:96vw;
}
.exm-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  /* No row gap; column gap is the visual divider. Each .exm-col
     manages its own internal vertical rhythm via flex gap. */
  gap: 0 1.85rem;
}
.exm-col{
  display:flex;
  flex-direction:column;
  gap: .75rem;
  /* min-width:0 lets flex/grid children shrink past their
     content's natural width — without this, long select option
     text could blow out the column. */
  min-width:0;
}
/* Children of .exm-col reset their default block margins; the
   flex gap is the single source of vertical spacing. */
.exm-col > .fg,
.exm-col > .frow,
.exm-col > .ex-incl-tax,
.exm-col > .ex-total-line{
  margin: 0;
}
/* The right column has fewer items than the left, so the Notes
   textarea grows to consume the remaining vertical space —
   keeps the two columns visually balanced and gives the user
   plenty of room for a memo. */
.exm-notes-fg{
  flex: 1 1 auto;
  display:flex;
  flex-direction:column;
}
.exm-notes-fg textarea{
  flex: 1 1 auto;
  resize:vertical;
  min-height: 80px;
}

/* Mobile: stack columns. 768px catches iPad portrait + below. */
@media (max-width: 768px){
  .exm-grid{
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .exm-notes-fg{
    flex: 0 0 auto;
  }
  .exm-notes-fg textarea{
    min-height: 60px;
    flex: 0 0 auto;
  }
}

/* ── Modal sticky-title bar with close button (v4.64.0+) ───────
   Wraps the title and a top-right "×" close button. Uses sticky
   positioning so the close button stays visible while the user
   scrolls a tall modal — no need to scroll back to the bottom
   Cancel button to dismiss. Negative margins escape the modal's
   1.5rem padding so the bar spans the full modal width when it
   sticks; matching padding inside re-creates the original layout
   so the bar's content lines up with the modal's other rows.
   ─────────────────────────────────────────────────────────── */
.modal-title-bar{
  position:sticky;
  top:-1.5rem;            /* counter the modal's 1.5rem padding-top */
  margin:-1.5rem -1.5rem 1.1rem;
  padding:1.5rem 1.5rem .85rem;
  background:var(--surface);
  z-index:5;
  border-radius:12px 12px 0 0;
  display:flex;align-items:center;gap:.75rem;
  border-bottom:1px solid var(--border);
}
.modal-title-bar .modal-title{
  margin-bottom:0;        /* the bar's padding handles vertical spacing */
  flex:1 1 auto;
  min-width:0;            /* allow ellipsis if title overflows */
}
.modal-close{
  flex-shrink:0;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  cursor:pointer;
  font-size:1.45rem;line-height:1;
  color:var(--text3);
  padding:0;
  transition:background .12s, color .12s, border-color .12s;
}
.modal-close:hover{
  background:var(--surface2);
  color:var(--text);
}
.modal-close:focus-visible{
  outline:none;
  border-color:var(--accent);
  color:var(--text);
}

.inv-picker{border:1px solid var(--border2);border-radius:6px;max-height:320px;overflow-y:auto;}
/* Conflict indicators */
.inv-picker-item.has-conflict{background:rgba(240,72,72,.04);}
.inv-picker-item.has-conflict:hover{background:rgba(240,72,72,.08);}
.inv-picker-item.has-conflict.picked{background:rgba(240,72,72,.09);}
.conflict-badge{
  display:inline-flex;align-items:center;
  font-size:.65rem;font-weight:700;font-family:var(--mono);
  padding:.08rem .35rem;border-radius:3px;margin-left:.4rem;vertical-align:middle;
  white-space:nowrap;
}
.conflict-out{background:var(--red-dim);color:var(--red);border:1px solid rgba(240,72,72,.35);}
.conflict-booked{background:rgba(245,166,35,.12);color:var(--accent);border:1px solid rgba(245,166,35,.3);}
.conflict-detail{
  display:block;font-size:.7rem;color:var(--red);margin-top:.1rem;
  font-style:italic;
}
.inv-picker-cat{
  padding:.4rem .85rem;background:var(--surface2);font-size:.78rem;font-weight:500;
  color:var(--text3);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.5rem;position:sticky;top:0;z-index:2;
}
.inv-picker-item{
  padding:.55rem .85rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.65rem;cursor:pointer;transition:background .07s;
}
.inv-picker-item:hover{background:var(--surface2);}
.inv-picker-item.picked{background:var(--accent-dim);}
.inv-picker-item input[type=checkbox]{accent-color:var(--accent);cursor:pointer;width:15px;height:15px;flex-shrink:0;}
.inv-picker-name{font-weight:500;font-size:.92rem;}
.inv-picker-sub{font-size:.78rem;color:var(--text3);margin-top:.04rem;}
.inv-picker-qty{font-family:var(--mono);font-size:.8rem;color:var(--text2);display:flex;align-items:center;gap:.3rem;flex-shrink:0;}

/* (v5.66.0+) Inv-picker "regulars" banner. Appears at the top of
   the inv-picker when the active job's company has a kit of items
   it's known for, drawn from past job_contacts→gear history. */
.inv-picker-usuals{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem .85rem;
  background:rgba(245,158,11,.08);
  border-bottom:1px solid rgba(245,158,11,.2);
}
.ipu-icon{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,158,11,.16);color:var(--amber);
  font-size:1rem;font-weight:700;flex-shrink:0;
}
.ipu-body{flex:1;min-width:0;}
.ipu-title{font-size:.86rem;font-weight:600;color:var(--text);}
.ipu-sub{font-size:.72rem;color:var(--text3);margin-top:.1rem;}

/* (v5.70.0+) Conflict-count chip inside the regulars banner title.
   Quietly warns when some 'usuals' are booked/out elsewhere so the
   user knows the bulk-add button won't grab everything. */
.ipu-conflict{
  display:inline-block;
  font-size:.62rem;font-weight:600;
  color:#c44; background:rgba(220,80,80,.1);
  border:1px solid rgba(220,80,80,.25);
  padding:.05rem .4rem;border-radius:8px;
  margin-left:.45rem;vertical-align:.1em;line-height:1.3;
  letter-spacing:.02em;
}

/* Tiny ★ badge inline on item rows that are part of the company's
   regulars. Reuses inv-picker-item.is-regular for the row tinge. */
.inv-picker-item.is-regular{position:relative;}
.regular-badge{
  display:inline-block;font-size:.68rem;font-weight:700;color:var(--amber);
  padding:.05rem .35rem;border-radius:8px;
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.25);
  margin-left:.35rem;line-height:1;vertical-align:.05em;
}

/* ── Gear packages (v5.76.0+) ──────────────────────────────────
   Conventions used:
   - Card radius 10px + 1.1rem padding to match .aj-card / .co-card
   - Accent border + lift on hover (matches .aj-card)
   - Solid borders inside the card (the rest of the app reserves
     dashed borders for actual "draft / placeholder" states)
   - dir-empty for empty states (works desktop + mobile, vs
     mi-empty which is mobile-only)
   - Meta lines use the same .72rem text3 treatment used elsewhere
     in card metadata (compare .co-job-meta) */
.pkg-list{
  display:flex;flex-direction:column;gap:.7rem;
  padding:.8rem .35rem 0;
}
.pkg-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1rem 1.15rem;
  transition:border-color .14s, transform .08s, box-shadow .14s, background .14s;
  display:flex;flex-direction:column;
  position:relative;
}
.pkg-card:hover{
  border-color:var(--accent);
  background:var(--surface-hi, var(--surface2));
  transform:translateY(-1px);
  box-shadow:var(--shadow-md, 0 4px 12px rgba(0,0,0,.12));
}
.pkg-card-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:.65rem;
  margin-bottom:.4rem;
}
.pkg-card-title{
  font-size:1rem;font-weight:600;color:var(--text);
  /* Slight line-height bump keeps long names from looking squished
     against the meta line above. */
  line-height:1.3;
}
.pkg-card-meta{
  font-size:.72rem;color:var(--text3);
  text-align:right;flex-shrink:0;
  /* Removed mono font — card meta lines in the rest of the app
     don't use it; this row was the outlier. */
}
.pkg-card-anchor{
  font-size:.78rem;color:var(--text2);
  margin-bottom:.5rem;
}
.pkg-card-anchor-virtual{
  color:var(--text3);font-style:italic;
}
.pkg-card-members{
  display:flex;flex-wrap:wrap;gap:.3rem;
}
.pkg-card-chip{
  font-size:.72rem;
  padding:.2rem .5rem;border-radius:5px;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text2);
  white-space:nowrap;
  /* Subtle tightening so chips read as a tight set, not a grab-bag. */
  line-height:1.3;
}
.pkg-card-chip.req{
  background:rgba(99,155,235,.08);
  border-color:rgba(99,155,235,.25);
  color:var(--accent);
  font-weight:500;
}
.pkg-card-chip-more{
  font-style:italic;color:var(--text3);
  background:transparent;border-color:transparent;
}
.pkg-card-notes{
  font-size:.75rem;color:var(--text3);
  margin-top:.55rem;
  padding-top:.45rem;
  border-top:1px solid var(--border);
  line-height:1.45;
}

/* Action row at the bottom of each card — solid divider, sits at
   the canonical button gap. */
.pkg-card-actions{
  display:flex;gap:.4rem;
  margin-top:.65rem;
  padding-top:.6rem;
  border-top:1px solid var(--border);
}

/* Empty-state CTA needs to clear the hint paragraph; dir-empty
   already centres + spaces things, the button just needs a bit of
   air above it. */
.pkg-empty-cta{ margin-top:1rem; }
/* (v5.77.0+) Empty state CTA row — Detect sets primary, manual
   create as a softer secondary. Centred + air above. */
.pkg-empty-actions{
  display:flex;justify-content:center;gap:.5rem;
  margin-top:1rem;flex-wrap:wrap;
}

/* ── Detect Packages modal (v5.77.0+) ────────────────────────── */
.dp-result-head{
  font-size:.72rem;color:var(--text3);
  text-transform:uppercase;letter-spacing:.05em;font-weight:600;
  margin-bottom:.55rem;
}
.dp-proposals{
  display:flex;flex-direction:column;gap:.65rem;
  max-height:55vh;overflow-y:auto;
  margin-bottom:.8rem;
}
.dp-proposal{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.75rem .85rem;
  transition:opacity .15s, border-color .15s;
}
.dp-proposal.is-off{
  opacity:.55;
}
.dp-proposal.is-on{
  border-color:rgba(99,155,235,.35);
}
.dp-proposal-head{
  display:flex;align-items:center;gap:.55rem;
  margin-bottom:.4rem;
}
.dp-prop-toggle{
  accent-color:var(--accent);cursor:pointer;
  width:18px;height:18px;flex-shrink:0;
}
.dp-prop-name{
  flex:1;min-width:0;
  font-size:.95rem;font-weight:600;color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:5px;
  padding:.35rem .55rem;
}
.dp-prop-name:focus{border-color:var(--accent);outline:none;}
.dp-prop-name:disabled{
  background:transparent;border-color:transparent;cursor:default;
  color:var(--text2);
}
.dp-proposal-reason{
  font-size:.78rem;color:var(--text2);
  line-height:1.5;
  margin-bottom:.55rem;
  padding:.4rem .6rem;
  background:rgba(99,155,235,.05);
  border-left:2px solid rgba(99,155,235,.4);
  border-radius:0 4px 4px 0;
}
.dp-anchor-toggle{
  display:flex;align-items:center;gap:.4rem;
  font-size:.78rem;color:var(--text2);
  padding:.4rem .55rem;
  margin-bottom:.45rem;
  background:rgba(245,158,11,.06);
  border:1px solid rgba(245,158,11,.18);
  border-radius:5px;
  cursor:pointer;
  flex-wrap:wrap;
}
.dp-anchor-toggle input{
  accent-color:var(--amber);cursor:pointer;
  width:14px;height:14px;flex-shrink:0;
}
.dp-anchor-toggle strong{color:var(--text);}
.dp-anchor-toggle .fg-hint{margin-top:0;font-size:.7rem;}

.dp-members{
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  overflow:hidden;
}
.dp-member-row{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.45rem .65rem;
  border-bottom:1px solid var(--border);
}
.dp-member-row:last-child{border-bottom:none;}
.dp-member-row input[type=checkbox]{
  width:15px;height:15px;flex-shrink:0;
  accent-color:var(--accent);cursor:pointer;
  margin-top:.15rem;
}
.dp-member-body{flex:1;min-width:0;}
.dp-member-name{
  font-size:.85rem;color:var(--text);font-weight:500;
}
.dp-member-qty{
  font-size:.75rem;color:var(--text2);font-weight:400;margin-left:.25rem;
}
.dp-member-meta{
  font-size:.7rem;color:var(--text3);margin-top:.15rem;
  line-height:1.4;
}
.dp-rationale{color:var(--text2);font-style:italic;}

/* Membership rows on the inventory edit modal */
.iie-packages-list{
  display:flex;flex-direction:column;gap:.35rem;
  border:1px solid var(--border);
  border-radius:7px;
  padding:.4rem;
  background:var(--surface2);
}
.iie-pkg-row{
  display:flex;align-items:center;gap:.65rem;
  padding:.5rem .65rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  transition:background .08s, border-color .08s;
}
.iie-pkg-row:hover{
  background:var(--surface-hi, var(--surface2));
  border-color:var(--border2);
}
.iie-pkg-name{flex:1;font-size:.85rem;color:var(--text);}
.iie-pkg-role{
  font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
  padding:.12rem .45rem;border-radius:8px;
  line-height:1.3;
  flex-shrink:0;
}
.iie-pkg-role-anchor{
  background:rgba(245,158,11,.12);
  color:var(--amber);
  border:1px solid rgba(245,158,11,.25);
}
.iie-pkg-role-req{
  background:rgba(99,155,235,.12);
  color:var(--accent);
  border:1px solid rgba(99,155,235,.25);
}
.iie-pkg-role-opt{
  background:var(--surface);
  color:var(--text3);
  border:1px solid var(--border);
}
.iie-pkg-arrow{color:var(--text3);font-size:.95rem;flex-shrink:0;}

/* Editor — anchor search, member list, member rows */
/* ── Package editor ────────────────────────────────────────────
   Inline search dropdowns for anchor + member selection. Pattern
   follows the typeahead used in suggest_contacts (sc-panel) and
   the message_compose search; tightened padding so dropdowns
   read as a tight list, not a stacked card. */
.pkg-search-results{
  position:relative;z-index:2;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
  max-height:240px;overflow-y:auto;
  margin-top:.3rem;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.pkg-search-row{
  display:flex;justify-content:space-between;align-items:center;gap:.7rem;
  padding:.45rem .65rem;
  cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background .06s;
}
.pkg-search-row:last-child{border-bottom:none;}
.pkg-search-row:hover{background:var(--surface-hi, var(--surface2));}
.pkg-search-name{font-size:.85rem;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pkg-search-meta{font-size:.72rem;color:var(--text3);flex-shrink:0;}
.pkg-search-empty{
  padding:.55rem .65rem;font-size:.78rem;
  color:var(--text3);font-style:italic;text-align:center;
}

/* Selected-anchor chip — slightly elevated tint to signal "this is
   the chosen anchor item" without competing with the form fields
   around it. */
.pkg-parent-chip{
  display:flex;align-items:center;gap:.55rem;
  padding:.55rem .75rem;
  background:rgba(99,155,235,.08);
  border:1px solid rgba(99,155,235,.25);
  border-radius:7px;
  margin-top:.35rem;
}
.pkg-parent-chip-icon{font-size:1rem;color:var(--accent);}
.pkg-parent-chip-name{flex:1;font-size:.88rem;color:var(--text);}
.pkg-parent-chip-clear{
  background:none;border:none;color:var(--text3);
  font-size:1rem;cursor:pointer;padding:.15rem .4rem;
  border-radius:4px;
  transition:background .08s, color .08s;
}
.pkg-parent-chip-clear:hover{
  color:var(--text);background:rgba(255,255,255,.06);
}

/* Members list — surface2 base so it sits visually distinct from
   the surrounding modal (which is .surface). */
.pkg-members-list{
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface2);
  min-height:60px;
  margin-bottom:.4rem;
  overflow:hidden;
}
.pkg-members-empty{
  padding:1.4rem .8rem;
  font-size:.8rem;color:var(--text3);
  font-style:italic;text-align:center;line-height:1.45;
}
.pkg-member-row{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem .75rem;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.pkg-member-row:last-child{border-bottom:none;}
/* (v5.76.3+) The .fg wrapper around the members list applies
   width:100% to ALL .fg input/select/textarea. That stretched the
   number-input AND the checkbox inside member rows to fill their
   flex parents, which broke the layout in a way that looked like
   clipping/stacking. Reset all inputs in member rows to auto-sized
   so the per-element rules below take effect cleanly. */
.pkg-member-row input{
  width:auto;
}
.pkg-member-body{
  flex:1 1 100%;
  min-width:0;
}
.pkg-member-name{
  font-size:.88rem;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pkg-member-cat{font-size:.7rem;color:var(--text3);margin-top:.12rem;}

/* Right-side cluster of controls. Body has flex-basis 100% so the
   cluster wraps to its own line and justify-content:flex-end aligns
   it to the right. */
.pkg-member-controls{
  display:flex;align-items:center;gap:.85rem;
  width:100%;
  justify-content:flex-end;
}
.pkg-member-qty{display:flex;align-items:center;gap:.4rem;flex-shrink:0;}
.pkg-member-qty label{font-size:.66rem;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;}
.pkg-member-qty input{
  width:64px;text-align:center;
  font-size:.85rem;
  padding:.3rem .35rem;
}
.pkg-member-req{
  display:flex;align-items:center;gap:.35rem;
  font-size:.78rem;color:var(--text2);
  flex-shrink:0;cursor:pointer;
  white-space:nowrap;
}
.pkg-member-req input[type=checkbox]{
  /* Explicit 16x16 — the inherited .fg rule was making this stretch
     to 100% of the flex parent, breaking layout. */
  width:16px;height:16px;
  accent-color:var(--accent);cursor:pointer;flex-shrink:0;
}
.pkg-member-remove{flex-shrink:0;}

.pkg-member-add{position:relative;}

.pkg-member-add{position:relative;}

/* ── Pull-package modal ────────────────────────────────────────
   Shown when picking an anchor item / loading a package to a day.
   The intro tint matches the parent-chip tint so the "this is
   package-related UI" visual cue is consistent. */
.pkg-pull-intro{
  padding:.7rem .85rem;margin-bottom:.7rem;
  background:rgba(99,155,235,.06);
  border:1px solid rgba(99,155,235,.18);
  border-radius:7px;
  font-size:.82rem;color:var(--text2);
  line-height:1.5;
}
.pkg-pull-anchor-line strong{color:var(--text);}
.pkg-pull-list{
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface);
  max-height:55vh;overflow-y:auto;
}
.pkg-pull-row{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.6rem .8rem;
  border-bottom:1px solid var(--border);
}
.pkg-pull-row:last-child{border-bottom:none;}
.pkg-pull-row.is-conflict{opacity:.55;}
.pkg-pull-row.is-req{background:rgba(99,155,235,.03);}
.pkg-pull-row input[type=checkbox]{
  accent-color:var(--accent);cursor:pointer;
  width:16px;height:16px;margin-top:.15rem;flex-shrink:0;
}
.pkg-pull-row input[type=checkbox]:disabled{cursor:not-allowed;}
.pkg-pull-body{flex:1;min-width:0;}
.pkg-pull-name{font-size:.88rem;color:var(--text);}
.pkg-pull-qty{font-size:.78rem;color:var(--text2);margin-left:.35rem;}
.pkg-pull-meta{font-size:.72rem;color:var(--text3);margin-top:.2rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;}
.pkg-pull-badge{
  display:inline-block;font-size:.62rem;font-weight:600;
  padding:.08rem .4rem;border-radius:8px;line-height:1.3;letter-spacing:.02em;
  text-transform:uppercase;
}
.pkg-pull-badge-req{
  background:rgba(99,155,235,.12);color:var(--accent);
  border:1px solid rgba(99,155,235,.25);
}
.pkg-pull-badge-opt{
  background:var(--surface2);color:var(--text3);
  border:1px solid var(--border);
}
.pkg-pull-badge-conflict{
  background:rgba(220,80,80,.1);color:#c44;
  border:1px solid rgba(220,80,80,.25);
}
.pkg-pull-badge-onday{
  background:rgba(64,160,96,.12);color:var(--accent2,#2a8d4a);
  border:1px solid rgba(64,160,96,.28);
}
.pkg-pull-row.is-onday{opacity:.6;}

/* ── Inv-picker package rows (v5.78.0+) ───────────────────────
   A "pull the whole kit" entry in the Add-Gear picker. Reuses
   .inv-picker-item layout; the leading checkbox slot is replaced by
   a kit glyph and the trailing control is a pull affordance. */
.inv-picker-pkg .inv-picker-pkg-icon{
  width:15px;height:15px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:.95rem;line-height:1;
}
.inv-picker-pkg-pull{
  font-size:.74rem;font-weight:600;color:var(--accent);flex-shrink:0;
  border:1px solid var(--accent);border-radius:7px;padding:.18rem .5rem;
  white-space:nowrap;
}
.inv-picker-pkg:hover .inv-picker-pkg-pull{background:var(--accent-dim);}
.inv-picker-pkg.pkg-all-on{cursor:default;opacity:.55;}
.inv-picker-pkg.pkg-all-on:hover{background:transparent;}
.inv-picker-pkg.pkg-all-on .inv-picker-pkg-pull{
  color:var(--accent2,#2a8d4a);border-color:rgba(64,160,96,.4);
}

/* ── Propose gear modal (v5.73.0+) ───────────────────────────── */
.fg-hint{font-size:.72rem;color:var(--text3);margin-top:.3rem;}

/* Loading state — Anthropic calls can take 5-15s for non-trivial
   proposals. The spinner + step text + elapsed counter + asymptotic
   progress bar keep the user oriented that the work is real, not
   that we're broken. (v5.74.0+) */
@keyframes pg-spin { to { transform: rotate(360deg); } }
.pg-loading-spinner{
  display:inline-block;font-size:2rem;
  animation: pg-spin 1.2s linear infinite;
  color: var(--accent);
}
.pg-loading-title{
  margin-top:.85rem;font-size:.95rem;font-weight:600;color:var(--text);
}
.pg-loading-step{
  font-size:.78rem;color:var(--text2);margin-top:.45rem;
  min-height:1.1em; /* prevent layout shift between step transitions */
}
.pg-loading-progress{
  width:100%;max-width:280px;
  height:4px;margin:1rem auto 0;
  background:var(--surface2);border-radius:2px;overflow:hidden;
}
.pg-loading-progress-fill{
  width:0%;height:100%;background:var(--accent);
  transition:width .35s ease-out;
}
.pg-loading-elapsed{
  font-family:var(--mono);font-size:.7rem;color:var(--text3);
  margin-top:.5rem;min-height:1em;
}

.pg-reasoning{
  background:linear-gradient(180deg, rgba(99,155,235,.05), rgba(99,155,235,.08));
  border:1px solid rgba(99,155,235,.18);
  border-radius:7px;
  padding:.7rem .85rem;margin-bottom:.85rem;
  font-size:.82rem;line-height:1.5;color:var(--text2);
}
.pg-result-head{
  display:flex;align-items:center;gap:.5rem;
  margin-bottom:.5rem;
  font-size:.72rem;color:var(--text3);
  text-transform:uppercase;letter-spacing:.05em;font-weight:600;
}
.pg-result-head span{flex:1;}
.pg-items{
  border:1px solid var(--border);border-radius:7px;
  max-height:55vh;overflow-y:auto;background:var(--surface);
}
.pg-cat-head{
  padding:.4rem .75rem;
  background:var(--surface2);
  font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text3);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1;
}
.pg-item{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.55rem .75rem;border-bottom:1px solid var(--border);
  transition:background .08s;
}
.pg-item:last-child{border-bottom:none;}
.pg-item:hover{background:var(--surface2);}
.pg-item.is-on{background:rgba(99,155,235,.04);}
.pg-item input[type=checkbox]{
  accent-color:var(--accent);cursor:pointer;
  width:16px;height:16px;flex-shrink:0;margin-top:.15rem;
}
.pg-item-body{flex:1;min-width:0;}
.pg-item-name{font-size:.88rem;font-weight:500;color:var(--text);}
.pg-item-why{
  font-size:.74rem;color:var(--text3);margin-top:.15rem;
  line-height:1.4;
}
.pg-item-qty{
  display:flex;align-items:center;gap:.3rem;
  font-family:var(--mono);font-size:.78rem;color:var(--text2);
  flex-shrink:0;
}
.pg-item-qty .qbtn{
  width:22px;height:22px;font-size:.85rem;
}
.pg-item-qty span{min-width:1.5em;text-align:center;}

.day-picker{border:1px solid var(--border2);border-radius:6px;max-height:280px;overflow-y:auto;}
.day-picker-job{padding:.4rem .85rem;background:var(--surface2);font-size:.78rem;font-weight:500;color:var(--text3);border-bottom:1px solid var(--border);}
.day-picker-day{padding:.55rem .85rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.65rem;cursor:pointer;transition:background .07s;}
.day-picker-day:hover{background:var(--surface2);}
.day-picker-day.picked{background:var(--accent-dim);}
.day-picker-day input[type=radio]{accent-color:var(--accent);cursor:pointer;}

/* -- MOBILE BOTTOM NAV -- */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  /* (b540) Total height = nav bar + notch safe-area. Previously the
     safe-area padding was carved OUT of the 64px (border-box), leaving
     ~30px of content box on iPhones — tabs overflowed the panel edges. */
  height:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));
  background:var(--surface);
  border-top:1px solid var(--border);
  z-index:300;
  /* Safe area for notch phones */
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.bottom-nav-inner{display:flex;height:100%;align-items:stretch;}
.bnav-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;cursor:pointer;border:none;background:transparent;
  color:var(--text3);font-size:.62rem;font-family:var(--ui);font-weight:500;
  transition:color .12s;padding:.25rem 0 .2rem;min-width:0;overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
.bnav-tab.active{color:var(--accent);}
.bnav-tab.active span:last-child{font-weight:700;}
.bnav-tab.active .bnav-icon{transform:translateY(-1px);}
.bnav-icon{line-height:0;transition:transform .12s;}
.bnav-icon svg{width:22px;height:22px;display:block;}
/* -- Truck view ------------------------------------------- */
.truck-view{display:flex;flex-direction:column;height:100%;overflow:hidden;}
/* (v5.56.0+) On desktop the .truck-sticky wrapper is invisible to
   layout — the header / progress / done-banner / filter remain
   direct flex children of .truck-view so .truck-gear-list keeps
   its flex:1 + scroll behaviour. On mobile (below in the mobile
   media block) the wrapper gets position:sticky so the header
   group sticks to the top of the viewport during gear scroll. */
.truck-sticky{display:contents;}
.truck-header{
  padding:.75rem 1rem .5rem;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  flex-shrink:0;
}
.truck-header-top{
  display:flex;align-items:center;gap:.5rem;margin-bottom:.65rem;
}
.truck-back-btn{
  background:none;border:none;color:var(--accent);
  font-size:1.1rem;padding:.2rem .4rem;cursor:pointer;
  display:flex;align-items:center;gap:.25rem;
  font-family:var(--ui);font-size:.9rem;font-weight:600;
}
.truck-day-title{flex:1;font-size:1rem;font-weight:700;color:var(--text);line-height:1.2;}
.truck-day-sub{font-size:.78rem;color:var(--text3);font-weight:400;}
/* Load / Unload mode toggle */
.truck-mode-toggle{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--surface2);border-radius:10px;
  border:1px solid var(--border);overflow:hidden;
  flex-shrink:0;
}
.truck-mode-btn{
  padding:.55rem 0;text-align:center;font-size:.88rem;font-weight:700;
  font-family:var(--ui);border:none;background:transparent;
  cursor:pointer;color:var(--text3);transition:background .12s,color .12s;
  letter-spacing:.02em;
}
.truck-mode-btn.active.load{background:var(--accent);color:#fff;}
.truck-mode-btn.active.unload{background:var(--red);color:#fff;}
/* Progress bar */
.truck-progress{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem 1rem;background:var(--surface);
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.truck-prog-track{
  flex:1;height:6px;background:var(--surface3);
  border-radius:3px;overflow:hidden;
}
.truck-prog-fill{
  height:100%;border-radius:3px;
  transition:width .25s ease;
}
.truck-prog-fill.load{background:var(--accent);}
.truck-prog-fill.unload{background:var(--red);}
.truck-prog-label{
  font-size:.8rem;font-weight:700;font-family:var(--ui);
  color:var(--text2);white-space:nowrap;min-width:3rem;text-align:right;
}
.truck-done-banner{
  display:none;padding:.45rem 1rem;text-align:center;
  font-size:.85rem;font-weight:700;font-family:var(--ui);
  background:rgba(62,201,110,.15);color:var(--green);
  border-bottom:1px solid rgba(62,201,110,.25);
}
.truck-done-banner.show{display:block;}
/* Gear list */
.truck-gear-list{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:.4rem 0;
}
.truck-gear-list.empty-msg{
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;color:var(--text3);padding:3rem 1rem;
}
/* (v5.56.0+) Quick filter is mobile-only — Phase 3 keeps desktop
   behaviour unchanged. The mobile media block overrides this
   back to display:flex. */
.truck-filter-row{display:none;}
.truck-item{
  display:flex;align-items:center;
  padding:.7rem 1rem;border-bottom:1px solid var(--border2);
  cursor:pointer;transition:background .08s;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  gap:.75rem;
  min-height:60px;
}
.truck-item:active{background:var(--surface2);}
.truck-item.checked{background:rgba(62,201,110,.07);}
.truck-item.checked .truck-item-name{color:var(--text3);}
/* Category colour strip */
.truck-cat-strip{
  width:4px;border-radius:2px;align-self:stretch;
  flex-shrink:0;min-height:36px;
}
/* Check circle */
.truck-check{
  width:32px;height:32px;border-radius:50%;
  border:2.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .12s,border-color .12s;
  font-size:1.1rem;line-height:1;
}
.truck-item.checked .truck-check{
  background:var(--green);border-color:var(--green);
  color:#fff;
}
.truck-item-info{flex:1;min-width:0;}
.truck-item-name{
  font-size:.95rem;font-weight:600;color:var(--text);
  line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.truck-item-meta{font-size:.75rem;color:var(--text3);margin-top:.15rem;}
.truck-item-qty{
  font-size:1rem;font-weight:700;color:var(--text2);
  flex-shrink:0;min-width:1.8rem;text-align:right;
  font-family:var(--ui);
}
/* Category section header within the truck list (v4.41.1).
   Small, uppercase, sits flush against the items below.
   Coloured dot ties back to the category colour stripe on the
   item rows so the eye can group quickly. The .done variant
   dims the header in the post-divider section since users
   aren't navigating by category there — they just want to see
   what's left to do. */
.truck-cat-header{
  display:flex;align-items:center;gap:.55rem;
  padding:.85rem 1rem .25rem;
  font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--text2);
  background:var(--bg);
}
.truck-cat-header:first-child{ padding-top:.45rem; }
.truck-cat-header.done{ color:var(--text3); }
.tch-dot{
  width:9px;height:9px;border-radius:50%;
  flex-shrink:0;
}
.tch-name{ flex:1;min-width:0; }
.tch-count{
  font-weight:600;color:var(--text3);
  font-variant-numeric:tabular-nums;
  font-size:.7rem;letter-spacing:.04em;
}
/* Divider between unchecked → checked sections. Two thin
   rules flanking a label so the boundary reads clearly even
   on a long list. (v4.41.1) */
.truck-section-div{
  display:flex;align-items:center;gap:.7rem;
  padding:1.1rem 1rem .5rem;
}
.truck-section-div-line{
  flex:1;height:1px;background:var(--border2);
}
.truck-section-div-label{
  font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--green);
  white-space:nowrap;
}

/* View Transitions for the truck list (v4.41.2). Each row gets
   a unique view-transition-name in the JS render, so when
   truckToggle re-renders the list the browser interpolates
   each row's old → new position instead of repainting hard.
   Tuned slightly slower than the default 250ms with an
   ease-out curve — feels like the row "settles" into its new
   slot rather than rushing there. Wrapped in @supports so
   Firefox (no API yet) just gets the instant repaint. */
@supports (view-transition-name: none) {
  ::view-transition-group(*) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  }
  /* The default ::view-transition-old/new cross-fade is helpful
     for the toggled row (it crossfades unchecked-style into
     checked-style while sliding) but visually distracting on
     all the OTHER rows that just shifted by one slot. We can't
     pattern-match view-transition-name in CSS, so we leave the
     cross-fade in place — for unchanged rows the old and new
     snapshots are pixel-identical, so the fade is invisible.
     Only the toggled row visibly cross-fades, which is the
     desired effect. */
}

/* ── Field edit mode (v5.xx+) ───────────────────────────────
   Edit toggle in the header, qty steppers + remove on each row,
   and the "+ Add gear" bar. Big touch targets throughout — this
   gets used one-handed, with gloves, in the sun. */
.truck-edit-toggle{
  flex-shrink:0;align-self:flex-start;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text2);font-family:var(--ui);font-weight:700;
  font-size:.82rem;padding:.45rem .7rem;border-radius:9px;
  cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.truck-edit-toggle.on{ background:var(--accent);border-color:var(--accent);color:#fff; }
/* Edit bar — sits where the mode toggle / progress normally are */
.truck-edit-bar{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem 1rem;background:var(--surface);
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.truck-edit-hint{
  flex:1;min-width:0;font-size:.78rem;color:var(--text3);
  line-height:1.25;
}
.truck-add-gear-btn{
  flex-shrink:0;background:var(--accent);border:none;color:#fff;
  font-family:var(--ui);font-weight:700;font-size:.9rem;
  padding:.6rem 1rem;border-radius:10px;cursor:pointer;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
.truck-add-gear-btn:active{ filter:brightness(.92); }
/* Edit-mode row — not tappable (no toggle); controls live on the right. */
.truck-item-edit{ cursor:default; }
.truck-item-edit:active{ background:transparent; }
/* Let the name wrap in edit mode so the ON TRUCK flag isn't clipped
   by the ellipsis (edit mode shows fewer rows; wrapping is fine). */
.truck-item-edit .truck-item-name{ white-space:normal;overflow:visible;text-overflow:clip; }
.truck-edit-outflag{
  display:inline-block;margin-left:.4rem;
  font-size:.6rem;font-weight:800;letter-spacing:.06em;
  color:var(--red);border:1px solid var(--red);border-radius:4px;
  padding:.05rem .25rem;vertical-align:middle;
}
/* Qty stepper (shared by edit rows + the add sheet) */
.truck-qty-stepper{
  display:flex;align-items:center;gap:.1rem;flex-shrink:0;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;
}
.tqs-btn{
  width:40px;height:40px;border:none;background:transparent;
  color:var(--text);font-size:1.4rem;font-weight:700;line-height:1;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center;
}
.tqs-btn:active{ background:var(--surface3); }
.tqs-val{
  min-width:2.1rem;text-align:center;font-family:var(--ui);
  font-weight:700;font-size:1rem;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.truck-remove-btn{
  flex-shrink:0;width:42px;height:40px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface2);
  font-size:1.1rem;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.truck-remove-btn:active{ background:rgba(232,82,82,.15);border-color:var(--red); }

/* ── Field add-gear sheet ───────────────────────────────────── */
.truck-add-modal{ display:flex;flex-direction:column;max-height:85vh; }
.tadd-list{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  margin:.2rem -.2rem .6rem;min-height:8rem;
  border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);
}
.tadd-row{
  display:flex;align-items:center;gap:.7rem;
  padding:.65rem .4rem;border-bottom:1px solid var(--border2);
  cursor:pointer;min-height:56px;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.tadd-row:active{ background:var(--surface2); }
.tadd-row.sel{ background:rgba(99,102,241,.08); }
.tadd-check{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  border:2.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;line-height:1;color:#fff;
}
.tadd-row.sel .tadd-check{ background:var(--accent);border-color:var(--accent); }
.tadd-info{ flex:1;min-width:0; }
.tadd-name{
  font-size:.92rem;font-weight:600;color:var(--text);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tadd-meta{ font-size:.72rem;color:var(--text3);margin-top:.1rem; }
.tadd-onday{
  display:inline-block;margin-left:.35rem;font-size:.6rem;font-weight:700;
  letter-spacing:.04em;color:var(--text3);border:1px solid var(--border);
  border-radius:4px;padding:.02rem .25rem;vertical-align:middle;
}
.tadd-empty{ padding:2.5rem 1rem;text-align:center;color:var(--text3);font-size:.9rem; }

/* Day picker screen */
.truck-picker{
  flex:1;overflow-y:auto;padding:.5rem 0;
}
.truck-picker-section{
  padding:.4rem 1rem .2rem;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text3);
}
.truck-picker-item{
  display:flex;align-items:center;gap:.85rem;
  padding:.75rem 1rem;border-bottom:1px solid var(--border2);
  cursor:pointer;transition:background .08s;
  -webkit-tap-highlight-color:transparent;
}
.truck-picker-item:active{background:var(--surface2);}
.truck-picker-datebox{
  width:42px;height:42px;border-radius:8px;
  background:var(--surface2);border:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;
}
.truck-picker-day{font-size:1.1rem;font-weight:800;color:var(--text);line-height:1;font-family:var(--ui);}
.truck-picker-mo{font-size:.6rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;}
.truck-picker-info{flex:1;min-width:0;}
.truck-picker-title{font-size:.92rem;font-weight:600;color:var(--text);line-height:1.25;}
.truck-picker-sub{font-size:.76rem;color:var(--text3);margin-top:.1rem;}
.truck-picker-arrow{color:var(--text3);font-size:1.1rem;}
.truck-picker-badge{
  font-size:.72rem;font-weight:700;padding:.15rem .45rem;
  border-radius:4px;white-space:nowrap;flex-shrink:0;
}
.truck-picker-badge.today{background:rgba(var(--accent-rgb),.15);color:var(--accent);}
.truck-picker-badge.soon{background:rgba(240,176,0,.15);color:#c09000;}
.truck-empty{
  padding:3rem 1.5rem;text-align:center;
  color:var(--text3);font-size:.95rem;line-height:1.6;
}

/* Rental confirm bar (b115+) — sticky-bottom action area for
   the rental truck session. Sits above renderViewFooter so the
   confirm button is always thumb-reachable on long kit lists. */
.truck-rental-confirm-bar{
  position:sticky;bottom:0;left:0;right:0;
  padding:.6rem .85rem .9rem;
  background:linear-gradient(180deg,transparent 0%,var(--bg) 30%);
  border-top:1px solid var(--border2);
  display:flex;flex-direction:column;gap:.5rem;
  z-index:5;
}
.truck-rental-confirm-btn{
  width:100%;padding:.85rem 1rem;
  font-size:1rem;font-weight:700;letter-spacing:.02em;
  border-radius:8px;
}
.truck-rental-confirm-btn:disabled{
  opacity:.55;cursor:not-allowed;
}
/* Mobile rental pill on truck picker cards — same shape as
   .mtp-card-out but cool-blue instead of amber so a rental
   card reads at a glance against the surrounding shoot days. */
.mtp-card-rental-pill{
  background:rgba(100,140,255,.16) !important;
  color:#7090e8 !important;
  border-color:rgba(100,140,255,.3) !important;
}

/* More grid inside drawer */
.mob-more-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;
  padding:.25rem 0;
}
.mob-more-item{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:.85rem .5rem;border-radius:10px;cursor:pointer;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text);font-size:.8rem;font-weight:500;font-family:var(--ui);
  transition:background .1s;
}
.mob-more-item:hover{background:var(--surface3);}

/* -- DRAWERS -- */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:400;opacity:0;pointer-events:none;transition:opacity .2s;
}
.drawer-overlay.open{opacity:1;pointer-events:all;}
.drawer{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--surface);border-top:1px solid var(--border);
  z-index:450;transform:translateY(100%);
  transition:transform .24s cubic-bezier(.32,.72,0,1);
  max-height:82vh;display:flex;flex-direction:column;border-radius:16px 16px 0 0;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.drawer.open{transform:translateY(0);}
.drawer-handle{width:40px;height:4px;background:var(--border3);border-radius:2px;margin:.7rem auto .35rem;flex-shrink:0;}
.drawer-head{
  padding:.55rem 1.1rem .7rem;display:flex;align-items:center;
  justify-content:space-between;flex-shrink:0;border-bottom:1px solid var(--border);
}
.drawer-title{font-weight:500;font-size:1.1rem;}
.drawer-close{background:none;border:none;color:var(--text3);font-size:1.3rem;cursor:pointer;padding:.2rem .4rem;line-height:1;}
.drawer-body{overflow-y:auto;padding:1rem;flex:1;}
.drawer-body.no-pad{padding:0;}

/* drawer list items */
.mob-list-item{
  padding:.85rem 1.1rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.7rem;cursor:pointer;transition:background .08s;
  border-left:3px solid transparent;
}
.mob-list-item:hover,.mob-list-item:active{background:var(--surface2);}
.mob-list-item.active{background:var(--accent-dim);border-left-color:var(--accent);}
.mob-list-item.active .mli-name{color:var(--accent);font-weight:600;}
.mli-name{font-weight:500;font-size:.95rem;flex:1;}
.mli-meta{font-size:.78rem;color:var(--text3);margin-top:.1rem;line-height:1.35;}
.mli-del{background:none;border:1px solid rgba(224,72,72,.3);color:var(--red);padding:.25rem .5rem;font-size:.78rem;cursor:pointer;flex-shrink:0;border-radius:5px;}

/* -- MOBILE GEAR CARDS -- */
.mob-section{border-bottom:1px solid var(--border);}
.mob-section-head{
  padding:.45rem 1rem;display:flex;align-items:center;gap:.6rem;
  background:var(--surface);cursor:pointer;user-select:none;
  border-bottom:1px solid var(--border);border-top:1px solid var(--border);
  position:sticky;top:52px;z-index:5;
}
.mscat{font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);flex:1;}
.mscount{font-size:.72rem;color:var(--text3);font-family:var(--mono);}
.mschev{font-size:.8rem;color:var(--text3);transition:transform .2s;margin-left:.4rem;}
.mob-section-head.collapsed .mschev{transform:rotate(-90deg);}
.mob-section-body.collapsed{display:none;}
.mob-gear-card{
  padding:.75rem 1rem;border-bottom:1px solid var(--border);
  background:var(--surface);
}
.mob-gear-card.out-row{border-left:3px solid var(--red);}
.mob-gear-card.in-row{border-left:3px solid transparent;}
.mgc-top{display:flex;align-items:flex-start;gap:.7rem;}
.mgc-info{flex:1;min-width:0;}
.mgc-name{font-weight:400;font-size:.92rem;line-height:1.3;}
.mgc-meta{font-family:var(--mono);font-size:.8rem;color:var(--text2);margin-top:.2rem;}
.mgc-notes{font-size:.84rem;color:var(--text3);margin-top:.1rem;font-style:italic;}
.mgc-badge{flex-shrink:0;margin-top:.1rem;}
.mgc-actions{display:flex;align-items:center;gap:.4rem;margin-top:.7rem;flex-wrap:wrap;}

/* -- AUTH -- */
#auth-screen{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(ellipse at 55% 40%,var(--surface2) 0%,var(--bg) 70%);
  display:flex;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:1.5rem 1rem;
  padding-top:calc(1.5rem + env(safe-area-inset-top));
  padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));
  font-family:var(--ui);
}
/* Anti-flash on refresh: when the early-boot hint says the user
   was authed last time, the inline script in index.html adds
   `auth-known` to <html> so the auth screen stays hidden until
   the /auth/status check confirms the session. authShowScreen()
   uses an inline style.display='flex' which overrides this rule
   when the session has actually expired. */
html.auth-known #auth-screen{ display:none; }
.auth-box{
  margin:auto;
  width:360px;max-width:92vw;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:14px;
  padding:2.2rem 2rem;
  box-shadow:var(--shadow-lg);
}
.auth-logo{
  font-size:1.6rem;font-weight:800;color:var(--accent);
  margin-bottom:.25rem;letter-spacing:.12em;text-transform:uppercase;
}
.auth-sub{font-size:.84rem;color:var(--text3);margin-bottom:1.8rem;}
.auth-label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);margin-bottom:.3rem;}
.auth-input{
  width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;
  color:var(--text);font-family:var(--ui);font-size:.96rem;
  padding:.58rem .88rem;outline:none;
  transition:border-color .15s,box-shadow .15s;
  margin-bottom:1rem;display:block;
}
.auth-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.auth-input::placeholder{color:var(--text3);}
.auth-btn{
  width:100%;background:var(--accent);color:#fff;border:none;
  border-radius:8px;font-family:var(--ui);font-size:.96rem;font-weight:700;
  padding:.65rem;cursor:pointer;
  transition:filter .12s,box-shadow .12s;margin-top:.25rem;
  box-shadow:0 3px 12px rgba(245,166,35,.3);
}
.auth-btn:hover{filter:brightness(1.1);box-shadow:0 4px 18px rgba(245,166,35,.4);}
.auth-error{
  font-size:.82rem;color:var(--red);
  margin-bottom:.8rem;min-height:1.2em;
}
.auth-hint{font-size:.78rem;color:var(--text3);margin-top:.9rem;text-align:center;}
.auth-hint a{color:var(--text2);cursor:pointer;text-decoration:underline;}

/* Lock button in header */
.lock-btn{
  background:none;border:1px solid var(--border2);border-radius:6px;
  color:var(--text3);font-size:.82rem;cursor:pointer;
  padding:.3rem .6rem;transition:all .12s;
}
.lock-btn:hover{border-color:var(--border3);color:var(--text);background:var(--surface2);}

/* -- Superuser Dashboard ------------------------------------ */
#superuser-dashboard{
  position:fixed;inset:0;z-index:500;
  background:var(--bg);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  font-family:var(--ui);
}
.su-topbar{
  position:sticky;top:0;z-index:10;
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:.75rem 1.25rem;
  display:flex;align-items:center;gap:.75rem;
}
.su-topbar-title{
  font-size:1rem;font-weight:800;color:var(--accent);
  letter-spacing:.1em;text-transform:uppercase;flex:1;
}
.su-topbar-user{font-size:.8rem;color:var(--text3);}
.su-body{max-width:900px;margin:0 auto;padding:1.5rem 1.25rem 4rem;}
/* ══ SUPERUSER PANEL (b679 restructure) ══════════════════════
   Sub-tabs one level below the Settings tabs, and one component
   vocabulary — .su-card / .su-chip / .su-badge / .su-row / .su-kv —
   shared by all five tabs. Before this, every section hand-rolled its
   own badges, buttons and spacing inline, so the panel read as five
   different apps stacked in a scroll. */

/* Sub-tab strip: reuses .set-tabs/.set-tab, dialled down so the
   Settings tabs above stay visually dominant. */
.su-subtabs{ margin:0 0 1.1rem; background:transparent; border-color:var(--border2); }
.su-subtabs .set-tab{ padding:.42rem .8rem; font-size:.8rem; }
.su-tab-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.15rem;height:1.15rem;padding:0 .3rem;margin-left:.1rem;
  border-radius:999px;font-size:.68rem;font-weight:700;line-height:1;
  background:var(--surface3);color:var(--text2);
}
.set-tab.active .su-tab-count{ background:rgba(255,255,255,.25);color:#fff; }
.su-tab-count.warn{ background:var(--accent);color:#1a1205; }

/* Card — one header shape for every section. */
.su-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:1.05rem 1.15rem;margin-bottom:1rem;
}
.su-card-head{
  display:flex;align-items:flex-start;gap:.75rem;
  margin-bottom:.85rem;
}
.su-card-title{
  font-size:1rem;font-weight:700;color:var(--text);margin:0;
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
}
.su-card-count{ font-size:.8rem;font-weight:400;color:var(--text3); }
.su-card-hint{ font-size:.8rem;color:var(--text3);margin-top:.25rem;line-height:1.45;max-width:62ch; }
.su-card-actions{ margin-left:auto;display:flex;gap:.4rem;flex-shrink:0; }
.su-sub-head{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text3);margin:1rem 0 .5rem;
}
.su-card > .su-sub-head:first-of-type{ margin-top:0; }
.su-empty{
  font-size:.85rem;color:var(--text3);background:var(--surface2);
  border:1px dashed var(--border2);border-radius:9px;
  padding:.8rem .9rem;margin-bottom:.6rem;
}
.su-muted{ color:var(--text3);font-weight:400; }
.su-warn-text{ color:var(--accent); }

/* (b690) Mail log — Settings → Superuser → Platform. One row per
   send attempt; failures get a red mark + the raw SMTP error under
   the meta line. Mono for addresses/errors, matching the chips. */
.su-mail-list{ display:flex;flex-direction:column;gap:.35rem; }
.su-mail-row{
  display:flex;gap:.6rem;align-items:flex-start;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;padding:.5rem .65rem;
}
.su-mail-row.fail{ border-color:color-mix(in srgb, #e04848 45%, var(--border)); }
.su-mail-ok{
  flex:0 0 auto;width:1.25rem;height:1.25rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;margin-top:.1rem;
  background:color-mix(in srgb, #3faf6b 18%, transparent);color:#3faf6b;
}
.su-mail-row.fail .su-mail-ok{
  background:color-mix(in srgb, #e04848 16%, transparent);color:#e04848;
}
.su-mail-main{ flex:1;min-width:0; }
.su-mail-top{ display:flex;gap:.6rem;align-items:baseline; }
.su-mail-subj{
  font-size:.83rem;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;
}
.su-mail-when{ flex:0 0 auto;font-size:.72rem;color:var(--text3);white-space:nowrap; }
.su-mail-sub{
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:baseline;
  font-size:.72rem;color:var(--text3);margin-top:.12rem;
}
.su-mail-ctx{
  font-family:var(--mono);font-size:.66rem;
  padding:.06rem .4rem;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);color:var(--text2);
}
.su-mail-to{
  font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:100%;
}
.su-mail-ms{ font-family:var(--mono); }
.su-mail-err{
  font-family:var(--mono);font-size:.72rem;color:#e04848;
  margin-top:.3rem;word-break:break-word;line-height:1.4;
}

/* (b788) App-wide billing banner. */
.bill-banner{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.55rem 1.2rem;font-size:.82rem;line-height:1.45;
  background:var(--surface2);color:var(--text2);
  border-bottom:1px solid var(--border2);
  flex-shrink:0;
}
.bill-banner b{ color:var(--text); }
.bill-banner.warn{ border-bottom-color:#c98a2e;background:color-mix(in srgb,#c98a2e 9%,var(--surface2)); }
.bill-banner.bad { border-bottom-color:#c04a4a;background:color-mix(in srgb,#c04a4a 11%,var(--surface2)); }
.bill-banner .btn{ margin-left:auto; }
.bill-banner-x{
  background:none;border:0;color:var(--text3);cursor:pointer;
  font-size:.85rem;padding:0 .2rem;line-height:1;
}
.bill-banner-x:hover{ color:var(--text); }
@media (max-width:560px){
  .bill-banner{ padding:.5rem .9rem;font-size:.78rem; }
  .bill-banner .btn{ margin-left:0;width:100%;justify-content:center; }
}

/* (b788) Billing tab — Settings -> Billing (tenant-facing). */
.bill-status{
  padding:.7rem .85rem;border-radius:9px;font-size:.85rem;line-height:1.5;
  border:1px solid var(--border2);background:var(--surface2);color:var(--text2);
}
.bill-status b{ color:var(--text); }
.bill-status.info{ border-color:#3f7fd0; }
.bill-status.warn{ border-color:#c98a2e; }
.bill-status.bad { border-color:#c04a4a; }

.bill-plans{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:.85rem;margin-top:1rem;
}
.bill-plan{
  position:relative;display:flex;flex-direction:column;
  padding:1rem;border-radius:11px;
  border:1px solid var(--border2);background:var(--surface2);
}
.bill-plan.featured{ border-color:var(--accent); }
.bill-plan-flag{
  position:absolute;top:-.55rem;right:.8rem;
  padding:.1rem .45rem;border-radius:.6rem;
  font-size:.62rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  background:var(--accent);color:#fff;
}
.bill-plan-tag{
  font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text3);margin-bottom:.15rem;
}
.bill-plan-name{ font-size:.98rem;font-weight:650;color:var(--text); }
.bill-plan-price{ font-size:1.6rem;font-weight:700;color:var(--text);margin:.3rem 0 .1rem; }
.bill-plan-price span{ font-size:.72rem;font-weight:500;color:var(--text3);margin-left:.15rem; }
.bill-plan-blurb{ font-size:.78rem;color:var(--text2);line-height:1.45;margin-bottom:.6rem; }
.bill-plan-feats{
  list-style:none;margin:0 0 .9rem;padding:0;
  font-size:.78rem;color:var(--text2);line-height:1.6;flex:1;
}
.bill-plan-feats li{ padding-left:1.1rem;position:relative; }
.bill-plan-feats li::before{
  content:'';position:absolute;left:.1rem;top:.5em;
  width:.42rem;height:.42rem;border-radius:50%;background:var(--accent);opacity:.65;
}
.bill-plan .btn{ width:100%;justify-content:center; }

@media (max-width:560px){
  .bill-plans{ grid-template-columns:1fr; }
  .bill-plan-price{ font-size:1.35rem; }
}

/* (b786) Billing card — Settings -> Superuser -> Platform. */
.su-bill-pills{ display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem; }
.su-bill-pill{
  display:inline-flex;align-items:center;
  padding:.15rem .5rem;border-radius:.75rem;
  font-size:.68rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  border:1px solid var(--border2);color:var(--text2);background:var(--surface2);
}
.su-bill-pill.trialing{ border-color:#3f7fd0;color:#5b9ae8; }
.su-bill-pill.active  { border-color:#3faf6b;color:#4cc07c; }
.su-bill-pill.past_due{ border-color:#c98a2e;color:#dda03f; }
.su-bill-pill.canceled{ border-color:#c04a4a;color:#e06565; }
.su-bill-row .su-bill-pill{ align-self:flex-start;margin-top:.1rem; }
.su-btn.tiny{ padding:.1rem .45rem;font-size:.66rem;margin-left:auto; }
.su-btn.tiny + .su-btn.tiny{ margin-left:.3rem; }

/* (b754) Client errors + deploy log — Settings → Superuser → Platform.
   Rides on the mail-log row chrome; the badge shows the hit count. */
.su-ce-row .su-mail-ok{ width:auto;min-width:1.25rem;padding:0 .3rem;border-radius:.65rem;font-size:.66rem; }
.su-ce-msg{ white-space:normal;word-break:break-word;line-height:1.35; }
.su-ce-x{
  margin-left:auto;background:none;border:0;color:var(--text3);cursor:pointer;
  font-size:.72rem;padding:0 .2rem;line-height:1;
}
.su-ce-x:hover{ color:#e04848; }
.su-ce-ua{ font-family:var(--mono);font-size:.64rem;color:var(--text3);margin-top:.25rem;opacity:.75; }
.su-ce-stack{ margin-top:.3rem; }
.su-ce-stack summary{
  cursor:pointer;font-family:var(--mono);font-size:.66rem;color:var(--text3);
  list-style:none;
}
.su-ce-stack summary::before{ content:'▸ '; }
.su-ce-stack[open] summary::before{ content:'▾ '; }
.su-ce-stack pre{
  margin:.3rem 0 0;padding:.45rem .6rem;border-radius:7px;
  background:var(--surface);border:1px solid var(--border);
  font-family:var(--mono);font-size:.66rem;line-height:1.45;color:var(--text2);
  white-space:pre-wrap;word-break:break-word;max-height:16rem;overflow:auto;
}
.su-deploy-log{
  margin:0;padding:.6rem .75rem;border-radius:9px;
  background:var(--surface2);border:1px solid var(--border);
  font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--text2);
  white-space:pre-wrap;word-break:break-word;max-height:22rem;overflow:auto;
}
.su-deploy-log .bad{ color:#e04848;font-weight:600; }
.su-deploy-log .good{ color:#3faf6b; }

/* (b709) Gear image catalog — Settings → Superuser → Gear images.
   Thumbnails sit on white regardless of theme (product photos are
   shot for white); the card chrome stays themed around them. */
.su-gi-chips{ display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem; }
.su-gi-chip-fail{ border-color:color-mix(in srgb, #e04848 45%, var(--border));color:#e04848; }
.su-gi-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:.55rem;
}
.su-gi-card{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;padding:.4rem;display:flex;flex-direction:column;gap:.3rem;
  min-width:0;
}
.su-gi-card.manual{ border-color:color-mix(in srgb, #3faf6b 45%, var(--border)); }
.su-gi-thumb{
  display:block;width:100%;aspect-ratio:1/1;object-fit:contain;
  background:#fff;border-radius:6px;border:1px solid var(--border);
}
.su-gi-name{
  font-size:.68rem;line-height:1.3;color:var(--text2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em;
}
.su-gi-acts{ display:flex;gap:.25rem; }
.su-gi-acts button,.su-gi-acts .su-gi-upl{
  flex:1;font-size:.72rem;padding:.18rem 0;text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  color:var(--text2);cursor:pointer;line-height:1.4;
}
.su-gi-acts button:hover,.su-gi-acts .su-gi-upl:hover{ color:var(--text);border-color:var(--border2); }
.su-gi-upl{ position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;cursor:pointer; }
.su-gi-upl input[type=file]{ position:absolute;inset:0;opacity:0;cursor:pointer;width:100%; }
.su-gi-fail{
  display:flex;gap:.5rem;align-items:center;
  background:var(--surface2);border:1px solid color-mix(in srgb, #e04848 35%, var(--border));
  border-radius:9px;padding:.45rem .6rem;margin-bottom:.4rem;
}
.su-gi-fail-main{ flex:1;min-width:0; }
.su-gi-fail-name{ display:block;font-size:.82rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.su-gi-fail-err{ display:block;font-family:var(--mono);font-size:.68rem;color:#e04848;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.su-gi-fail .su-btn,.su-gi-fail .su-gi-upl{ flex:0 0 auto; }
/* Narrow screens: the header's two actions and the fail rows' three
   buttons don't fit beside their text at 375px — let them wrap. */
.su-gi .su-card-head{ flex-wrap:wrap; }
.su-gi .su-card-actions{ flex-wrap:wrap; }
@media (max-width:600px){
  .su-gi-fail{ flex-wrap:wrap; }
  .su-gi-fail-main{ flex-basis:100%; }
}

/* Chips + badges — were five separate inline treatments. */
.su-chip{
  font-size:.72rem;font-family:var(--mono);
  padding:.16rem .5rem;border-radius:12px;
  background:var(--surface2);border:1px solid var(--border);color:var(--text2);
}
.su-badge{
  display:inline-block;vertical-align:middle;margin-left:.4rem;
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-radius:4px;padding:.12rem .4rem;
}
.su-badge.amber{ background:var(--accent-dim);color:var(--accent); }
.su-badge.red{   background:rgba(224,72,72,.15);color:var(--red); }
.su-badge.blue{  background:rgba(80,160,255,.15);color:#5aa3ff; }
.su-badge.ok{    background:rgba(60,180,110,.15);color:var(--green); }

/* Overview — attention tiles + fleet key/values. */
.su-tiles{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.65rem; }
.su-tile{
  background:var(--surface2);border:1px solid var(--border2);border-radius:10px;
  padding:.85rem .9rem;text-align:left;cursor:pointer;font-family:var(--ui);
  transition:border-color .12s, background .12s;
}
.su-tile:hover{ border-color:var(--border3);background:var(--surface3); }
.su-tile-n{ font-size:1.6rem;font-weight:800;line-height:1.05;color:var(--text3); }
.su-tile.live .su-tile-n{ color:var(--text); }
.su-tile.warn{ border-color:rgba(245,166,35,.45); }
.su-tile.warn .su-tile-n{ color:var(--accent); }
.su-tile-l{ font-size:.78rem;color:var(--text3);margin-top:.2rem;line-height:1.35; }
.su-tile-sub{ font-size:.72rem;color:var(--red);margin-top:.2rem;font-weight:600; }
.su-kv{ display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 1.4rem; }
.su-kv-row{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.45rem 0;border-bottom:1px solid var(--border2);font-size:.85rem;
}
.su-kv-row span{ color:var(--text3); }
.su-kv-row b{ color:var(--text);font-weight:600; }

/* Rows — shared by Invites and Queue. */
.su-row{
  display:flex;gap:.7rem;align-items:flex-start;
  border:1px solid var(--border2);border-radius:9px;
  padding:.6rem .7rem;margin-bottom:.5rem;background:var(--surface2);
}
.su-row.col{ flex-direction:column;gap:.35rem; }
.su-row.grave{ border-color:rgba(224,72,72,.5); }
.su-row-head{ display:flex;justify-content:space-between;gap:.6rem;align-items:flex-start;width:100%; }
.su-row-main{ flex:1;min-width:0; }
.su-row-title{ font-size:.86rem;font-weight:700;color:var(--text);display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline; }
.su-row-title.red{ color:var(--red); }
.su-row-sub{ font-weight:400;color:var(--text3);font-size:.8rem; }
.su-row-body{ font-size:.84rem;color:var(--text2);margin-top:.3rem;white-space:pre-wrap;overflow-wrap:anywhere; }
.su-row-meta{ font-size:.74rem;color:var(--text3);margin-top:.25rem; }
.su-row-grave{ font-size:.78rem;color:var(--red);margin-top:.25rem; }
.su-row-thumb{ width:72px;height:72px;object-fit:cover;border-radius:6px;flex-shrink:0; }
.su-row-acts{ display:flex;gap:.35rem;flex-shrink:0; }
.su-row-acts.col{ flex-direction:column; }
.su-row-acts .su-btn{ flex:0 0 auto;padding:.25rem .6rem;font-size:.74rem; }
.su-row-head .su-btn{ flex:0 0 auto;padding:.25rem .6rem;font-size:.74rem; }
.su-ctx{ font-size:.76rem;margin-top:.1rem; }
.su-ctx summary{ cursor:pointer;color:var(--text3); }
.su-ctx-row{ display:flex;gap:.6rem;margin-top:.2rem; }
.su-ctx-row span:first-child{ color:var(--text3);min-width:92px; }
.su-ctx-row span:last-child{ overflow-wrap:anywhere; }
.su-ctx-err{ margin-top:.3rem;color:var(--red); }
.su-ctx-err span{ color:var(--text3); }

/* Groups grid. */
.su-groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.9rem;}
.su-group-card{
  background:var(--surface2);border:1px solid var(--border);border-radius:12px;
  padding:1rem 1.05rem;display:flex;flex-direction:column;gap:.55rem;
  position:relative;
}
.su-group-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--border3);border-radius:12px 12px 0 0;
}
/* The accent stripe is a signal, not decoration: amber = wants a
   decision, blue = where fresh superuser sessions land. Four cards
   all wearing it (the old behaviour) told you nothing. */
.su-group-card.is-pending::before{ background:var(--accent); }
.su-group-card.is-home::before{ background:#5aa3ff; }
.su-group-card.is-pending{ border-color:rgba(245,166,35,.4); }
.su-group-name{font-size:1rem;font-weight:700;color:var(--text);}
.su-group-stats{display:flex;gap:.35rem;flex-wrap:wrap;}
.su-group-owner{font-size:.78rem;color:var(--text3);}
.su-members{font-size:.82rem;}
.su-members > summary{
  cursor:pointer;color:var(--text3);font-size:.78rem;
  padding:.2rem 0;list-style:none;
}
.su-members > summary::before{ content:'▸ ';font-size:.7rem; }
.su-members[open] > summary::before{ content:'▾ '; }
.su-members > summary::-webkit-details-marker{display:none;}
.su-member-row{
  display:flex;align-items:center;gap:.5rem;
  padding:.3rem 0;border-bottom:1px solid var(--border2);font-size:.82rem;
}
.su-member-row:last-child{border-bottom:none;}
.su-member-name{flex:1;color:var(--text);font-weight:500;min-width:0;overflow-wrap:anywhere;}
.su-member-email{font-size:.73rem;color:var(--text3);margin-left:.35rem;}
.su-member-role{
  font-size:.7rem;font-weight:700;padding:.1rem .4rem;border-radius:4px;
  background:var(--surface3);color:var(--text3);flex-shrink:0;
}
.su-member-role.admin{background:rgba(240,160,32,.12);color:var(--accent);}
.su-group-actions{display:flex;gap:.45rem;margin-top:auto;padding-top:.35rem;}

/* Per-card ⋯ menu (mirrors the b674 expenses header pattern). */
.su-more{position:relative;flex:0 0 auto;}
.su-more-btn{padding:.45rem .7rem;}
.su-more-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:216px;
  background:var(--surface);border:1px solid var(--border2);border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.3);padding:.35rem;z-index:140;
  display:flex;flex-direction:column;gap:.1rem;
}
.su-more-menu[hidden]{display:none;}
.su-more-item{
  display:flex;align-items:center;gap:.45rem;width:100%;text-align:left;
  background:none;border:none;color:var(--text);font-family:var(--ui);
  font-size:.84rem;padding:.5rem .55rem;border-radius:7px;cursor:pointer;
}
.su-more-item:hover{background:var(--surface2);}
.su-more-item.danger{color:var(--red);}
.su-more-item.danger:hover{background:rgba(220,60,60,.08);}
.su-more-quota{
  border-top:1px solid var(--border2);margin-top:.2rem;padding:.5rem .55rem .35rem;
}
.su-more-quota label{font-size:.74rem;font-weight:600;color:var(--text3);}
.su-more-quota > div{display:flex;align-items:center;gap:.35rem;margin-top:.3rem;}
.su-more-quota input{
  width:80px;background:var(--surface2);border:1px solid var(--border2);border-radius:6px;
  color:var(--text);font-family:var(--ui);font-size:.8rem;padding:.25rem .4rem;
}
.su-more-quota span{font-size:.78rem;color:var(--text3);}
.su-more-quota .su-btn{flex:0 0 auto;padding:.22rem .55rem;font-size:.75rem;}
.su-more-quota small{display:block;font-size:.7rem;color:var(--text3);margin-top:.3rem;}

/* Buttons. */
.su-btn{
  flex:1;padding:.45rem .75rem;border-radius:7px;font-size:.8rem;
  font-weight:600;font-family:var(--ui);cursor:pointer;border:1px solid var(--border2);
  background:var(--surface);color:var(--text);transition:background .1s;
}
.su-btn:hover{background:var(--surface3);}
.su-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.su-btn.primary:hover{filter:brightness(1.08);}
.su-btn.danger{color:var(--red);border-color:rgba(220,60,60,.3);}
.su-btn.danger:hover{background:rgba(220,60,60,.08);}
.su-card-actions .su-btn{flex:0 0 auto;}

/* Platform tab — switches and single-control fields. */
.su-switch{
  display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;
  padding:.6rem 0;border-bottom:1px solid var(--border2);
}
.su-switch input{width:15px;height:15px;margin-top:.15rem;accent-color:var(--accent);flex-shrink:0;}
.su-switch b{display:block;font-size:.86rem;font-weight:600;color:var(--text);}
.su-switch small{display:block;font-size:.78rem;color:var(--text3);margin-top:.15rem;line-height:1.45;}
.su-field{
  display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;
  padding:.7rem 0;border-bottom:1px solid var(--border2);
}
.su-field:last-of-type{border-bottom:none;}
.su-field > label{flex:1;min-width:210px;}
.su-field b{display:block;font-size:.86rem;font-weight:600;color:var(--text);}
.su-field small{display:block;font-size:.78rem;color:var(--text3);margin-top:.15rem;line-height:1.45;}
.su-field-ctl{display:flex;align-items:center;gap:.4rem;flex-shrink:0;}
.su-field-ctl input{
  width:96px;background:var(--surface2);border:1px solid var(--border2);border-radius:7px;
  color:var(--text);font-family:var(--ui);font-size:.85rem;padding:.35rem .5rem;
}
.su-field-ctl span{font-size:.8rem;color:var(--text3);}
.su-field-ctl .su-btn{flex:0 0 auto;}
.su-task-msg{font-size:.8rem;color:var(--text3);margin-top:.6rem;min-height:1.2em;}

/* New group form. */
.su-new-group-card{
  background:var(--surface2);border:2px dashed var(--border2);border-radius:12px;
  padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.65rem;
}
.su-new-group-card .su-fg{display:flex;flex-direction:column;gap:.25rem;}
.su-new-group-card label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);}
.su-new-group-card input{
  background:var(--surface);border:1px solid var(--border2);border-radius:7px;
  color:var(--text);font-family:var(--ui);font-size:.88rem;
  padding:.45rem .75rem;outline:none;transition:border-color .15s;
}
.su-new-group-card input:focus{border-color:var(--accent);}
.su-new-group-card .su-fg-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.su-new-group-card .su-btn{flex:0 0 auto;align-self:flex-start;padding:.45rem 1.1rem;}

/* (b678) Invite form. */
.su-inv-form{margin-bottom:1rem;}
.su-inv-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem;}
.su-inv-row input{flex:1;min-width:170px;}
.su-inv-row .su-btn{flex:0 0 auto;padding:.45rem 1rem;}
.su-inv-form input,.su-inv-form textarea{
  background:var(--surface2);border:1px solid var(--border2);border-radius:7px;
  color:var(--text);font-family:var(--ui);font-size:.88rem;
  padding:.45rem .75rem;outline:none;transition:border-color .15s;
}
.su-inv-form textarea{width:100%;resize:vertical;}
.su-inv-form input:focus,.su-inv-form textarea:focus{border-color:var(--accent);}
.su-form-error{font-size:.8rem;color:var(--red);min-height:1.2em;}

/* Phones: tiles two-up, rows stack, actions go full width. */
@media (max-width:560px){
  .su-card{padding:.9rem .85rem;}
  .su-tiles{grid-template-columns:1fr 1fr;}
  .su-groups-grid{grid-template-columns:1fr;}
  .su-row{flex-wrap:wrap;}
  .su-row-acts{width:100%;flex-direction:row;}
  .su-row-acts.col{flex-direction:row;}
  .su-row-acts .su-btn{flex:1;}
  .su-card-head{flex-direction:column;gap:.5rem;}
  .su-card-actions{margin-left:0;width:100%;}
  .su-card-actions .su-btn{flex:1;}
  .su-more-menu{right:auto;left:0;min-width:min(260px,78vw);}
  .su-field-ctl{width:100%;}
}
.su-entering-banner{
  background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.3);
  border-radius:8px;padding:.5rem 1rem;font-size:.82rem;color:var(--accent);
  display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;font-weight:600;
}


/* -- PRINT -- */
/* Print-only elements hidden on screen */
.print-doc-header,.print-summary,.print-footer{display:none;}

@media print{
  /* -- Reset page -- */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  @page{margin:15mm 16mm;size:A4 portrait;}
  html,body{
    height:auto!important;overflow:visible!important;
    background:#fff!important;color:#111!important;
    font-family:'CineBaseIcons','Inter',system-ui,sans-serif!important;font-size:10pt!important;
  }

  /* -- Hide ALL app chrome -- */
  header,nav,.bottom-nav,.hdr-tabs,.hdr-right,
  #job-rail,#day-rail,.right-panel,.controls,.bulk-bar,
  .topbar,.stats-bar,.drawer,.drawer-overlay,#auth-screen,
  .mob-content,.mgc-actions,.mob-section-head .mschev,
  .day-actions,.weather-chip,.gear-toolbar-sticky,#toast-rack,
  td.ta,td.tc,thead th:first-child,thead th:last-child,
  /* (b842) chrome added since this block was written — the b800s
     icon nav rail, the job panel header (name/pills/phase tabs),
     the day tab strip + context bar + info card, the media-cards
     card, and the fixed-position ⋯ menus. These bleeding into the
     sheet were most of the "broken print layout". */
  #app-rail,.nrail,.job-panel-header,.day-tabs-row,.day-context-bar,
  .day-info-wrap,.day-info-card,.ch-card-wrap,.gear-more-menu,
  .conflict-badge,.pgnr,
  #app-loading,.rp-sec,.right-panel > *{display:none!important;}

  /* (b842) The rail-on shell offsets the whole app body to the right
     of the icon rail; on paper that offset is a dead left margin. */
  html.rail-on .app-body{padding-left:0!important;}
  .day-scroll{padding:0!important;}

  /* -- Show only gear content -- */
  .app-body,.view,.view.active,.main-panel,#main-panel,
  #gear-content,.gear-scroll,.day-scroll{
    display:block!important;overflow:visible!important;
    height:auto!important;max-height:none!important;width:100%!important;
    position:static!important;border:none!important;background:#fff!important;
    padding:0!important;margin:0!important;
  }
  .ph{display:none!important;}

  /* -- Print document header -- */
  .print-doc-header{
    display:block!important;
    border-bottom:2.5pt solid #111;
    padding-bottom:9pt;margin-bottom:12pt;
  }
  .pdh-title{font-size:18pt;font-weight:700;color:#111;letter-spacing:-.02em;line-height:1;}
  .pdh-meta{font-size:9pt;color:#555;margin-top:4pt;line-height:1.6;}
  .pdh-meta strong{color:#111;}
  .pdh-logo{font-size:8pt;color:#aaa;float:right;margin-top:2pt;letter-spacing:.08em;text-transform:uppercase;}

  /* -- Insurance summary box -- */
  .print-summary{
    display:block!important;
    border:2pt solid #111;border-radius:3pt;
    padding:10pt 14pt;margin-bottom:14pt;
    background:#f8f8f8!important;
    page-break-inside:avoid;
  }
  .ps-label{font-size:7.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#555;margin-bottom:6pt;}
  .ps-grid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:0;border:1pt solid #ddd;}
  .ps-cell{padding:7pt 9pt;border-right:1pt solid #ddd;}
  .ps-cell:last-child{border-right:none;}
  .ps-cell-val{font-size:13pt;font-weight:700;color:#111;line-height:1;}
  .ps-cell-lbl{font-size:7.5pt;color:#666;margin-top:3pt;}
  .ps-total{background:#111!important;color:#fff!important;}
  .ps-total .ps-cell-val{font-size:16pt;color:#fff!important;}
  .ps-total .ps-cell-lbl{color:#bbb!important;}

  /* -- Gear table -- */
  .gtable{display:table!important;width:100%;border-collapse:collapse;margin-top:0;}
  .mob-content{display:none!important;}
  .gtable thead th{
    background:#111!important;color:#fff!important;
    font-size:7.5pt!important;font-weight:600!important;text-transform:uppercase;
    letter-spacing:.05em;padding:5pt 6pt!important;border:none!important;text-align:left;
  }
  .gtable thead th.tr{text-align:right;}
  .gtable tbody tr{border-bottom:1pt solid #e8e8e8!important;}
  .gtable tbody tr.out-row{background:#fff8f8!important;border-left:3pt solid #c00!important;}
  .gtable tbody tr.in-row{border-left:3pt solid transparent!important;}
  .gtable td{font-size:9pt!important;padding:5pt 6pt!important;color:#111!important;vertical-align:middle;}
  .gtable td.tv{color:#333!important;text-align:right;font-variant-numeric:tabular-nums;}
  .gtable td.tn{color:#111!important;font-weight:500;}
  .gtable td.tn .notes{font-weight:400;font-size:8pt;color:#777;margin-top:1pt;}

  /* -- Category section headers -- */
  .cat-section-head{
    background:#f0f0f0!important;color:#111!important;
    font-size:8pt!important;font-weight:700!important;
    text-transform:uppercase;letter-spacing:.07em;
    border-top:1.5pt solid #bbb!important;border-bottom:1pt solid #ccc!important;
    padding:4pt 6pt!important;position:static!important;
  }
  .cat-section-head .cat-count{font-weight:400;color:#666;text-transform:none;letter-spacing:0;}
  .cat-section-head .cat-val{font-weight:700;color:#111;margin-left:auto;}

  /* -- Status badges -- */
  .sbadge.in{background:#e8f5e9!important;color:#1b5e20!important;border:1pt solid #a5d6a7!important;font-size:7.5pt!important;}
  .sbadge.out{background:#ffebee!important;color:#b71c1c!important;border:1pt solid #ef9a9a!important;font-size:7.5pt!important;}
  /* IN|OUT toggle in print: collapse to just the active segment
     styled like the old sbadge. The inactive half is hidden so the
     printed page reads like a status indicator, not a control. */
  .io-toggle{border:none!important;background:none!important;box-shadow:none!important;display:inline-block!important;}
  .io-toggle .io-seg{display:none!important;}
  .io-toggle[data-status="in"]  .io-seg.io-in{display:inline-block!important;background:#e8f5e9!important;color:#1b5e20!important;border:1pt solid #a5d6a7!important;font-size:7.5pt!important;padding:1pt 5pt!important;border-radius:3pt!important;}
  .io-toggle[data-status="out"] .io-seg.io-out{display:inline-block!important;background:#ffebee!important;color:#b71c1c!important;border:1pt solid #ef9a9a!important;font-size:7.5pt!important;padding:1pt 5pt!important;border-radius:3pt!important;}
  .cat-badge{display:none!important;}
  .cat-dot{display:none!important;}
  .qbtn{display:none!important;}
  .qval{font-size:9pt!important;}

  /* -- Print footer per page -- */
  .print-footer{
    display:block!important;
    margin-top:18pt;padding-top:8pt;
    border-top:1pt solid #ccc;
    font-size:7.5pt;color:#888;
    display:flex!important;justify-content:space-between;
  }

  /* -- Category subtotal footer table -- */
  .print-cat-totals{
    display:table!important;width:100%;border-collapse:collapse;
    margin-top:14pt;page-break-inside:avoid;
  }
  .print-cat-totals caption{
    font-size:7.5pt;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:#555;text-align:left;padding-bottom:5pt;
  }
  .print-cat-totals th{
    background:#f0f0f0!important;font-size:7.5pt;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;
    padding:4pt 7pt;border:1pt solid #ddd;text-align:left;
  }
  .print-cat-totals th.tr{text-align:right;}
  .print-cat-totals td{
    font-size:9pt;padding:4pt 7pt;border:1pt solid #e8e8e8;color:#111;
  }
  .print-cat-totals td.tr{text-align:right;font-variant-numeric:tabular-nums;}
  .print-cat-totals tr.total-row td{
    font-weight:700;font-size:10pt;background:#111!important;
    color:#fff!important;border-color:#111;
  }
  .mob-section{break-inside:avoid;}
}

/* -- MOBILE GEAR BROWSER -- */
/* Mobile gear toolbar */
.mob-gear-toolbar{
  display:flex;gap:.4rem;padding:.45rem .75rem;
  background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;
}

/* ── (b842) Gear toolbar ⋯ menu ──
   Shared by the desktop .gear-controls row and the mobile toolbar.
   The panel is position:fixed (placed from the trigger's rect in
   _gearMoreToggle) because .gear-controls is overflow:hidden for the
   compact-collapse transition and would clip an absolute child. */
.gear-more{display:inline-flex;position:relative;}
.gear-more-menu{
  position:fixed;min-width:225px;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.28);
  padding:.35rem;z-index:1500;display:flex;flex-direction:column;gap:.1rem;
}
.gear-more-menu[hidden]{display:none;}
.gear-more-item{
  display:flex;align-items:center;gap:.45rem;width:100%;text-align:left;
  background:none;border:none;color:var(--text);font-family:var(--ui);
  font-size:.84rem;padding:.5rem .55rem;border-radius:7px;cursor:pointer;
}
.gear-more-item:hover{background:var(--surface2);}
.gear-more-sep{height:1px;background:var(--border);margin:.25rem .2rem;flex-shrink:0;}
/* Keep old .mob-sel-new hidden on desktop — not used on mobile anymore */
.mob-sel-new{display:none;}

/* -- BARCODE SCANNER ---------------------------------------
   Full-screen modal overlay with live camera preview, a target
   reticle, and a running scroll of recently-scanned items. Used
   for scan-to-toggle in/out on the active day.                 */
.scan-overlay{
  position:fixed;inset:0;z-index:2000;
  background:#000;display:none;flex-direction:column;
}
.scan-overlay.open{display:flex;}
.scan-video-wrap{
  position:relative;flex:1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.scan-video{
  width:100%;height:100%;object-fit:cover;
  display:block;background:#000;
}
.scan-reticle{
  position:absolute;top:50%;left:50%;
  width:min(78vw,420px);height:min(38vw,200px);
  transform:translate(-50%,-50%);
  border:2px solid rgba(240,160,32,.9);
  border-radius:10px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.45);
  pointer-events:none;
}
.scan-reticle::before,
.scan-reticle::after{
  content:'';position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:scan-sweep 2.2s ease-in-out infinite;
}
.scan-reticle::after{animation-delay:1.1s;}
@keyframes scan-sweep{
  0%,100%{top:0;opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  50%{top:calc(100% - 2px);opacity:1;}
}
.scan-reticle.flash-ok{
  border-color:#10b981;
  animation:scan-flash-ok .6s ease-out;
}
.scan-reticle.flash-err{
  border-color:#e04848;
  animation:scan-flash-err .6s ease-out;
}
@keyframes scan-flash-ok{
  0%{box-shadow:0 0 0 9999px rgba(16,185,129,.3), 0 0 40px rgba(16,185,129,.8);}
  100%{box-shadow:0 0 0 9999px rgba(0,0,0,.45);}
}
@keyframes scan-flash-err{
  0%{box-shadow:0 0 0 9999px rgba(224,72,72,.3), 0 0 40px rgba(224,72,72,.8);}
  100%{box-shadow:0 0 0 9999px rgba(0,0,0,.45);}
}

.scan-header{
  position:absolute;top:0;left:0;right:0;
  padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(0,0,0,.75),transparent);
  z-index:2;color:#fff;pointer-events:none;
}
.scan-header button{pointer-events:auto;}
.scan-title{
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  display:flex;align-items:center;gap:.5rem;
}
.scan-title .pulse{
  width:8px;height:8px;border-radius:50%;background:#10b981;
  box-shadow:0 0 8px #10b981;animation:scan-pulse 1.4s ease-in-out infinite;
}
@keyframes scan-pulse{50%{opacity:.4;transform:scale(.8);}}
.scan-close{
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  color:#fff;width:36px;height:36px;border-radius:50%;
  font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
}
.scan-close:hover{background:rgba(255,255,255,.25);}

.scan-bottom{
  flex-shrink:0;background:#141414;color:#eee;
  padding:.85rem 1rem 1rem;max-height:50vh;overflow:auto;
  border-top:1px solid rgba(255,255,255,.08);
}
.scan-status{
  font-size:.82rem;color:#aaa;margin-bottom:.4rem;
  display:flex;align-items:center;gap:.5rem;
}
.scan-status .st-code{
  font-family:var(--mono);font-size:.76rem;color:#f0a020;
  background:rgba(240,160,32,.12);padding:.08rem .4rem;border-radius:4px;
}
.scan-day-label{
  font-size:.72rem;color:#888;font-weight:500;
  padding:.15rem .45rem;background:rgba(255,255,255,.06);border-radius:4px;
}

.scan-log{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem;}
.scan-log-item{
  display:grid;grid-template-columns:24px 1fr auto;gap:.6rem;align-items:center;
  padding:.45rem .6rem;border-radius:6px;
  background:rgba(255,255,255,.04);border-left:3px solid transparent;
}
.scan-log-item.ok-in{border-left-color:#10b981;}
.scan-log-item.ok-out{border-left-color:#f0a020;}
.scan-log-item.err{border-left-color:#e04848;background:rgba(224,72,72,.08);}
.scan-log-icon{font-size:1rem;text-align:center;}
.scan-log-body{min-width:0;}
.scan-log-name{
  font-size:.84rem;color:#eee;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scan-log-meta{font-size:.7rem;color:#888;margin-top:.1rem;font-family:var(--mono);}
.scan-log-badge{
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:.14rem .5rem;border-radius:10px;font-family:var(--mono);
}
.scan-log-badge.in{background:rgba(16,185,129,.15);color:#34d399;}
.scan-log-badge.out{background:rgba(240,160,32,.18);color:#fbbf24;}
.scan-log-badge.err{background:rgba(224,72,72,.15);color:#fca5a5;}

.scan-manual{
  margin-top:.7rem;display:flex;gap:.4rem;
}
.scan-manual input{
  flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#eee;font-family:var(--mono);font-size:.85rem;
  padding:.5rem .7rem;border-radius:5px;
}
.scan-manual input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.1);}
.scan-manual input::placeholder{color:#666;}
.scan-manual button{
  background:var(--accent);color:#fff;border:none;
  font-size:.85rem;font-weight:600;padding:.5rem .9rem;border-radius:5px;cursor:pointer;
}

.scan-empty{
  text-align:center;padding:.6rem;color:#666;font-size:.8rem;
}

/* Entry button on the day toolbar + floating FAB on mobile */
.btn-scan{
  display:inline-flex;align-items:center;gap:.3rem;
}
.scan-fab{
  position:fixed;right:1rem;bottom:5rem;z-index:90;
  width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;
  font-size:1.5rem;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  display:none;align-items:center;justify-content:center;
  transition:transform .15s;
}
.scan-fab:active{transform:scale(.94);}
@media(max-width:700px){.scan-fab{display:flex;}}
.scan-fab.hidden{display:none !important;}

/* -- LABEL PRINT PICKER (modal) --------------------------- */
.lp-mode-row{
  display:flex;gap:.5rem;margin-bottom:.9rem;
}
.lp-mode{
  flex:1;display:flex;align-items:center;gap:.5rem;
  padding:.65rem .8rem;border:1px solid var(--border);border-radius:6px;
  background:var(--surface);cursor:pointer;transition:all .15s;
  font-size:.9rem;color:var(--text2);
}
.lp-mode:hover{ border-color:var(--border2); }
.lp-mode.active{
  border-color:var(--accent);background:var(--surface2);
  color:var(--text);font-weight:500;
}
.lp-mode input[type=radio]{ accent-color:var(--accent);margin:0; }
.lp-n{
  font-family:var(--mono);font-size:.75rem;color:var(--text3);
  background:var(--surface2);padding:.1rem .45rem;border-radius:10px;
  margin-left:auto;
}
.lp-mode.active .lp-n{ background:var(--accent);color:#fff; }

.lp-cat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:.4rem;margin-bottom:1rem;max-height:260px;overflow:auto;
  padding:.3rem;border:1px solid var(--border);border-radius:6px;
  background:var(--surface2);
}
.lp-cat{
  display:flex;align-items:center;gap:.5rem;
  padding:.4rem .6rem;border-radius:4px;cursor:pointer;
  font-size:.85rem;color:var(--text2);transition:background .1s;
}
.lp-cat:hover{ background:var(--surface); }
.lp-cat.on{ color:var(--text);font-weight:500; }
.lp-cat input[type=checkbox]{ accent-color:var(--accent);margin:0; }
.lp-cat .cat-dot{ width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.lp-cat-name{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.lp-cat-n{
  font-family:var(--mono);font-size:.72rem;color:var(--text3);
  padding:.1rem .4rem;background:var(--surface);border-radius:8px;
}

.lp-summary{
  padding:.6rem .8rem;background:var(--surface2);
  border-radius:6px;font-size:.85rem;color:var(--text2);text-align:center;
}
.lp-summary strong{color:var(--accent);font-family:var(--mono);}

/* -- Pick-items picker (mode='selected') -- */
.lp-pick-search{
  width:100%;padding:.5rem .65rem;font-size:.85rem;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:6px;
  margin-bottom:.5rem;
}
.lp-pick-search:focus{
  outline:none;border-color:var(--accent);
  background:var(--surface2);
}
.lp-pick-actions{
  display:flex;gap:.5rem;align-items:center;
  margin-bottom:.5rem;font-size:.78rem;color:var(--text3);
}
.lp-pick-actions button{
  background:none;border:1px solid var(--border);border-radius:4px;
  padding:.25rem .55rem;font-size:.75rem;color:var(--text2);cursor:pointer;
}
.lp-pick-actions button:hover{ background:var(--surface2);color:var(--text); }
.lp-pick-actions .sep{ flex:1; }
.lp-pick-list{
  max-height:320px;overflow-y:auto;
  border:1px solid var(--border);border-radius:6px;
  background:var(--surface2);margin-bottom:1rem;
}
.lp-pick-grouphead{
  position:sticky;top:0;z-index:1;
  display:flex;align-items:center;gap:.5rem;
  padding:.4rem .7rem;
  background:var(--surface);border-bottom:1px solid var(--border);
  font-size:.78rem;font-weight:600;color:var(--text2);
  cursor:pointer;user-select:none;
}
.lp-pick-grouphead .cat-dot{ width:8px;height:8px;border-radius:50%; }
.lp-pick-grouphead-name{ flex:1; }
.lp-pick-grouphead-n{
  font-family:var(--mono);font-size:.72rem;color:var(--text3);
  padding:.1rem .4rem;background:var(--surface2);border-radius:8px;
}
.lp-pick-grouphead input[type=checkbox]{ accent-color:var(--accent);margin:0; }
.lp-pick-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.35rem .7rem .35rem 1.8rem;
  font-size:.84rem;color:var(--text2);cursor:pointer;
  border-bottom:1px solid transparent;
}
.lp-pick-row:hover{ background:var(--surface); }
.lp-pick-row.on{ color:var(--text); }
.lp-pick-row input[type=checkbox]{ accent-color:var(--accent);margin:0;flex-shrink:0; }
.lp-pick-row-name{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.lp-pick-row-id{
  font-family:var(--mono);font-size:.72rem;color:var(--text3);
  padding:.1rem .4rem;background:var(--surface);border-radius:3px;
}
.lp-pick-empty{
  padding:1.5rem;text-align:center;
  color:var(--text3);font-size:.85rem;font-style:italic;
}


/* -- GLOBAL LOOKUP — "where is item X?" -- */
.gl-search{
  width:100%;padding:.7rem .8rem;font-size:1rem;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:6px;
  margin-bottom:.7rem;
  font-family:inherit;
}
.gl-search:focus{
  outline:none;border-color:var(--accent);
  background:var(--surface2);
}
.gl-results{
  /* 60vh of the LAYOUT viewport is taller than the whole visible
     strip once a phone keyboard is up, which is how the result rows
     ended up underneath it (b911). Bound by the visible height too;
     the 8rem allows for the modal's own chrome (title, blurb, input,
     AI hint). The #m-global-lookup rules below turn this into a flex
     fill, which needs no such estimate — this cap only sets the
     preferred size. */
  max-height:min(60vh, calc(var(--vvh, 100vh) - 8rem));
  overflow-y:auto;
  border:1px solid var(--border);border-radius:6px;
  background:var(--surface2);
  /* Don't let an over-scroll at the end of the list chain out to the
     page behind the overlay. */
  overscroll-behavior:contain;
}
.gl-section-head{
  position:sticky;top:0;z-index:1;
  padding:.4rem .8rem;
  background:var(--surface);border-bottom:1px solid var(--border);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text3);
  display:flex;justify-content:space-between;align-items:center;
}
.gl-section-head .gl-section-n{
  font-family:var(--mono);font-size:.68rem;
  padding:.1rem .35rem;background:var(--surface2);
  color:var(--text2);border-radius:8px;
}
.gl-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem .8rem;cursor:pointer;
  border-bottom:1px solid var(--border);
  font-size:.84rem;transition:background .08s;
}
.gl-row:last-child{ border-bottom:none; }
.gl-row:hover{ background:var(--surface2); }
.gl-row:hover .gl-row-arrow{ opacity:1; transform:translateX(2px); }
.gl-row-status{
  font-size:.6rem;font-weight:700;letter-spacing:.05em;
  padding:.15rem .35rem;border-radius:3px;
  font-family:var(--mono);text-transform:uppercase;
  flex-shrink:0;min-width:34px;text-align:center;
}
.gl-row-status.out     { background:rgba(240,72,72,.18);  color:var(--red); }
.gl-row-status.in      { background:rgba(62,201,110,.15); color:var(--green); }
.gl-row-status.inv     { background:var(--surface2);color:var(--text3); border:1px solid var(--border); }
.gl-row-status.booked  { background:rgba(100,140,255,.15);color:#7090e8; }
.gl-row-status.pending { background:rgba(240,160,32,.15); color:var(--accent); }
.gl-row-status.returned{ background:rgba(62,201,110,.1);  color:var(--green);opacity:.7; }
/* (v2026.07+) Global search entity chips — jobs / contacts / tasks. */
.gl-row-status.job     { background:rgba(245,166,35,.15); color:var(--accent); }
.gl-row-status.contact { background:rgba(100,140,255,.15);color:#7090e8; }
.gl-row-status.task    { background:rgba(160,120,240,.15);color:#a687e8; }
.gl-row-body{ flex:1;min-width:0; }
.gl-row-top{
  display:flex;align-items:baseline;gap:.4rem;min-width:0;flex-wrap:wrap;
}
.gl-row-name{
  color:var(--text);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  flex-shrink:1;min-width:0;
}
.gl-row-id{
  font-family:var(--mono);font-size:.7rem;color:var(--text3);
  background:var(--surface2);border-radius:3px;padding:.05rem .3rem;
  flex-shrink:0;white-space:nowrap;
}
.gl-row-qty{ font-size:.72rem;color:var(--text3);flex-shrink:0; }
.gl-row-overdue{
  font-size:.62rem;font-weight:700;background:var(--red-dim);color:var(--red);
  border:1px solid rgba(240,72,72,.3);border-radius:3px;padding:.05rem .3rem;flex-shrink:0;
}
.gl-row-loc{
  font-size:.73rem;color:var(--text3);margin-top:.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gl-row-arrow{
  color:var(--text3);font-size:1rem;flex-shrink:0;
  opacity:0;transition:opacity .1s,transform .1s;
}
.gl-empty{
  padding:2rem 1rem;text-align:center;
  color:var(--text3);font-size:.85rem;font-style:italic;
}
.gl-empty .gl-empty-hint{
  font-style:normal;font-size:.78rem;margin-top:.5rem;color:var(--text3);
}
.gl-empty .gl-empty-hint kbd{
  font-family:var(--mono);font-size:.7rem;
  padding:.1rem .35rem;background:var(--surface);
  border:1px solid var(--border);border-radius:3px;
  color:var(--text2);
}

/* ── Search modal: the list is the only thing that scrolls (b911) ──
   Search is the one modal where what you came for renders BELOW the
   control you're typing into. If the modal itself is the scroller,
   anything that shortens it — a keyboard, a small screen — starts
   pushing the input out of view and the user ends up scrolling to
   find the box they're typing in.

   Making the modal a flex column instead hands the leftover height to
   the results list: the header (title, blurb, input, AI hint) keeps
   its natural size, the list takes the rest and scrolls internally,
   and the modal itself never scrolls at all. Combined with the
   keyboard-aware max-height on .modal, the list simply ends wherever
   the visible area ends — which is the fix.

   Not scoped to a breakpoint: a short desktop window and a tablet with
   a keyboard up want exactly the same behaviour.                     */
#m-global-lookup .modal{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
/* Header rows keep their intrinsic height — only the list flexes. */
#m-global-lookup .modal > *{ flex:0 0 auto; }
#m-global-lookup .gl-results{
  flex:1 1 auto;
  /* Without min-height:0 a flex item refuses to shrink below its
     content, which is exactly how the list used to spill past the
     bottom of the screen. The max-height above still sets the
     PREFERRED size; this lets it give way when there's less room. */
  min-height:0;
}


/* -- PREP LIST — load-out checklist -- */
.prep-header{
  padding:.7rem .9rem;background:var(--surface2);
  border-radius:6px;margin-bottom:.8rem;
}
.prep-title{font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:.25rem}
.prep-subtitle{font-size:.85rem;color:var(--text3)}
.prep-progress{
  display:flex;align-items:center;gap:.7rem;
  margin-top:.6rem;font-size:.85rem;color:var(--text2);
}
.prep-progress-bar{
  flex:1;height:6px;background:var(--surface3);
  border-radius:3px;overflow:hidden;
}
.prep-progress-fill{
  height:100%;background:var(--green);
  transition:width .25s ease-out;
}
.prep-actions{
  display:flex;gap:.5rem;align-items:center;
  font-size:.78rem;color:var(--text3);
  margin-bottom:.6rem;
}
.prep-actions button{
  background:none;border:1px solid var(--border);border-radius:4px;
  padding:.25rem .55rem;font-size:.75rem;color:var(--text2);cursor:pointer;
}
.prep-actions button:hover{ background:var(--surface2);color:var(--text); }
.prep-actions .sep{ flex:1; }
.prep-list{
  max-height:60vh;overflow-y:auto;
  border:1px solid var(--border);border-radius:6px;
  background:var(--surface2);
  /* Stop wheel/touch scroll from chaining outward when the list hits
     its top/bottom — keeps the modal (and body) underneath still. */
  overscroll-behavior:contain;
}
.prep-grouphead{
  position:sticky;top:0;z-index:1;
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .8rem;
  background:var(--surface);border-bottom:1px solid var(--border);
  font-size:.78rem;font-weight:600;color:var(--text2);
  letter-spacing:.02em;
}
.prep-grouphead .cat-dot{ width:8px;height:8px;border-radius:50%; }
.prep-grouphead-name{ flex:1; }
.prep-grouphead-n{
  font-family:var(--mono);font-size:.72rem;color:var(--text3);
  padding:.1rem .4rem;background:var(--surface2);border-radius:8px;
}
.prep-row{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .8rem .55rem 1rem;
  border-bottom:1px solid var(--border);
  font-size:.88rem;cursor:pointer;
  transition:background .12s, opacity .15s;
}
.prep-row:last-child{ border-bottom:none; }
.prep-row:hover{ background:var(--surface); }
.prep-row.loaded{ opacity:.55; }
.prep-row.loaded .prep-row-name{ text-decoration:line-through; color:var(--text3); }
.prep-check{
  width:22px;height:22px;flex-shrink:0;
  border:2px solid var(--border2);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;
  transition:background .15s, border-color .15s;
}
.prep-row.loaded .prep-check{
  background:var(--green);border-color:var(--green);
}
.prep-row.loaded .prep-check::before{ content:"✓"; }
.prep-row-name{
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--text);
}
.prep-row-id{
  font-family:var(--mono);font-size:.72rem;color:var(--text3);
  padding:.1rem .4rem;background:var(--surface);border-radius:3px;
  flex-shrink:0;
}
.prep-row-qty{
  font-family:var(--mono);font-size:.78rem;color:var(--text2);
  flex-shrink:0;
}
.prep-empty{
  padding:2rem 1rem;text-align:center;
  color:var(--text3);font-size:.9rem;font-style:italic;
}

/* -- BOOKING CONFLICT PANEL — overlap warnings on new/edit modals
       and inside admin queue row drawers. Yellow tint (advisory),
       not red (blocking) — admins can override. */
.bcp-warning{
  border:1px solid #d09030;border-left:3px solid #d09030;
  background:rgba(245,166,35,.08);
  border-radius:6px;
  padding:.6rem .85rem;
  margin:.7rem 0;
  font-size:.85rem;color:var(--text);
}
.bcp-warning-head{
  font-size:.85rem;color:var(--text);
  margin-bottom:.5rem;line-height:1.4;
}
.bcp-list{
  display:flex;flex-direction:column;gap:.4rem;
}
.bcp-conflict{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:4px;
  padding:.45rem .65rem;
  font-size:.82rem;
}
.bcp-conflict-head{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.45rem;margin-bottom:.25rem;
}
.bcp-conflict-status{
  font-size:.65rem;font-weight:600;letter-spacing:.04em;
  padding:.1rem .35rem;border-radius:3px;
  font-family:var(--mono);text-transform:uppercase;
}
.bcp-status-approved{ background:rgba(34,197,94,.18);color:var(--green); }
.bcp-status-pending{ background:rgba(217,119,6,.18);color:#d77706; }
.bcp-conflict-dates{
  font-family:var(--mono);font-size:.78rem;color:var(--text3);
  margin-left:auto;
}
.bcp-conflict-items{
  margin:.2rem 0 0 1rem;padding:0;
  font-size:.8rem;color:var(--text2);
}
.bcp-conflict-items li{ margin:.1rem 0;list-style:disc; }

/* Inline pill on collapsed admin booking rows: shows "⚠ N" if any
   overlapping bookings exist for this booking's items+dates. Click
   target inherits from row, just a visual marker. */
.bcp-row-pill{
  display:inline-flex;align-items:center;gap:.25rem;
  background:rgba(245,166,35,.18);
  color:#d09030;
  border-radius:10px;
  padding:.1rem .5rem;
  font-size:.7rem;font-weight:600;
  margin-left:.4rem;
  white-space:nowrap;
}

/* Print mode for prep list */
@media print{
  body.printing-prep > *:not(.prep-print-area){ display:none !important; }
  .prep-print-area{display:block !important;color:#000;background:#fff;padding:.5cm 1cm;font-family:system-ui,sans-serif;}
  .prep-print-area .pp-title{font-size:18pt;font-weight:700;border-bottom:2px solid #000;padding-bottom:6pt;margin-bottom:6pt;}
  .prep-print-area .pp-meta{font-size:11pt;color:#444;margin-bottom:14pt;}
  .prep-print-area .pp-section{font-size:13pt;font-weight:700;margin-top:14pt;padding-top:6pt;border-top:1px solid #999;}
  .prep-print-area table{width:100%;border-collapse:collapse;font-size:11pt;}
  .prep-print-area td{padding:5pt 8pt;border-bottom:1px solid #ddd;vertical-align:top;}
  .prep-print-area td.pp-check{width:20pt;border:1px solid #000;height:14pt;}
  .prep-print-area td.pp-id{font-family:monospace;color:#666;font-size:10pt;width:100pt;}
  .prep-print-area td.pp-qty{font-family:monospace;width:40pt;text-align:right;color:#666;}
  .prep-print-area .pp-loaded td.pp-name{text-decoration:line-through;color:#888;}
  .prep-print-area .pp-loaded td.pp-check::before{content:"✓";font-size:14pt;display:block;text-align:center;}
}
.prep-print-area{display:none}

/* -- PREP MODE TOGGLE — three pills (Full / From {date} / To {date})
       Shown only when the day has a consecutive shoot day on either
       side. Single active state, segmented-control feel. */
.prep-mode-toggle{
  display:flex;gap:.3rem;
  background:var(--surface);border:1px solid var(--border);
  padding:.2rem;border-radius:6px;
  margin-bottom:.8rem;
  flex-wrap:wrap;
}
.prep-mode-toggle button{
  background:transparent;border:none;
  padding:.45rem .8rem;border-radius:4px;
  font-size:.82rem;color:var(--text2);cursor:pointer;
  font-weight:500;
  transition:background .15s, color .15s;
  flex:1;min-width:0;white-space:nowrap;
}
.prep-mode-toggle button:hover{ background:var(--surface2);color:var(--text); }
.prep-mode-toggle button.active{
  background:var(--accent);color:#fff;font-weight:600;
}
.prep-mode-toggle button.active:hover{ background:var(--accent);filter:brightness(1.05); }

/* -- TURNAROUND SECTIONS — Unload, Load, Stays. Each section has a
       header, a context note, and a list. Color-coded headers cue
       the direction: red for unload (off truck), green for load (on
       truck), amber for stays (informational). */
.prep-turnaround-section{
  margin-bottom:.9rem;
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  background:var(--surface2);
}
.prep-turnaround-section.empty{ opacity:.55; }
.prep-turnaround-section-head{
  display:flex;align-items:center;gap:.5rem;
  padding:.55rem .8rem;
  font-size:.92rem;font-weight:600;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.prep-turnaround-section-head.clickable{ cursor:pointer; user-select:none; }
.prep-turnaround-section-head.clickable:hover{ background:var(--surface3); }
.prep-turnaround-section-icon{
  font-size:.85rem;width:1em;display:inline-block;text-align:center;color:var(--text3);
}
.prep-turnaround-section-title{ flex:1; }
.prep-turnaround-section-n{
  font-family:var(--mono);font-size:.78rem;color:var(--text3);
  padding:.1rem .45rem;background:var(--surface2);border-radius:8px;
  font-weight:500;
}
.prep-turnaround-section-note{
  padding:.4rem .8rem .25rem;
  font-size:.78rem;color:var(--text3);font-style:italic;
}
.prep-turnaround-section-action{
  padding:.3rem .8rem .55rem;
}
.prep-turnaround-section-action .btn{
  font-size:.78rem;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text);
  padding:.35rem .75rem;
  border-radius:5px;
  cursor:pointer;
}
.prep-turnaround-section-action .btn:hover{
  background:var(--surface3);
  border-color:var(--border2);
}
.prep-turnaround-section.stays .prep-turnaround-section-action .btn{
  border-color:var(--amber);
  color:var(--amber);
}
.prep-turnaround-section.stays .prep-turnaround-section-action .btn:hover{
  background:var(--amber-dim);
}
.prep-turnaround-section-empty{
  padding:.7rem .8rem 1rem;
  font-size:.82rem;color:var(--text3);font-style:italic;
  text-align:center;
}
/* Section colour cues */
.prep-turnaround-section.unload .prep-turnaround-section-head{
  background:var(--red-dim);
  color:var(--red);
  border-bottom-color:var(--red-dim);
}
.prep-turnaround-section.unload .prep-turnaround-section-n{
  background:var(--surface2);color:var(--red);
}
.prep-turnaround-section.load .prep-turnaround-section-head{
  background:var(--green-dim);
  color:var(--green);
  border-bottom-color:var(--green-dim);
}
.prep-turnaround-section.load .prep-turnaround-section-n{
  background:var(--surface2);color:var(--green);
}
.prep-turnaround-section.stays .prep-turnaround-section-head{
  background:var(--amber-dim);
  color:var(--amber);
  border-bottom-color:var(--amber-dim);
}
.prep-turnaround-section.stays .prep-turnaround-section-n{
  background:var(--surface2);color:var(--amber);
}
/* The lists inside turnaround sections sit in the section bg so they
   blend with the surrounding card. Override the standalone prep-list
   max-height to keep all three sections visible without nested scroll. */
.prep-turnaround-section .prep-list{
  max-height:none;border:none;background:transparent;border-radius:0;
}
.prep-turnaround-section .prep-grouphead{
  background:var(--surface2);
}

/* Turnaround-specific print colour cues so the printed sheet matches
   the on-screen sectioning at a glance. */
@media print{
  .prep-print-area .pp-section.pp-unload{ color:#a02020; border-top-color:#a02020; }
  .prep-print-area .pp-section.pp-load{   color:#1a7530; border-top-color:#1a7530; }
  .prep-print-area .pp-section.pp-stays{  color:#8a6510; border-top-color:#8a6510; }
  .prep-print-area .pp-subsection{
    font-size:11pt;font-weight:600;margin-top:8pt;color:#444;
  }
}


/* -- JOB RAIL SECTIONS -- */
.rail-section-head{
  padding:.5rem 1rem .3rem;
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text3);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--rail-bg);
  position:sticky;top:0;z-index:1;
}
.rail-section-head::before{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.1rem;
  height:1px;background:var(--border);
}
.rail-section-head:first-child{margin-top:0;}
.rail-section-head .rsh-count{
  font-family:var(--mono);font-weight:500;letter-spacing:0;
  padding:.02rem .4rem;background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;font-size:.65rem;color:var(--text3);text-transform:none;
}
.rail-section-head-left{display:inline-flex;align-items:center;gap:.45rem;}
.rail-section-toggle{
  font-size:.7rem;font-weight:500;color:var(--text3);text-transform:none;letter-spacing:0;
  background:none;border:none;cursor:pointer;padding:.1rem .4rem;
  border-radius:4px;transition:all .12s;
}
.rail-section-toggle:hover{color:var(--accent);background:var(--surface2);}
.rail-item.archived-item{opacity:.5;}
.rail-item.archived-item:hover{opacity:.75;}

/* -- JOB VIEW TOGGLE BAR -- */
.job-view-bar{
  display:flex;align-items:center;gap:.5rem;
  padding:.3rem .7rem;border-bottom:1px solid var(--border);
  background:var(--surface);flex-shrink:0;
}
.job-view-label{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);}
.job-view-toggle{display:flex;background:var(--surface2);border:1px solid var(--border2);border-radius:5px;overflow:hidden;gap:0;}
.jvt-btn{
  background:none;border:none;border-right:1px solid var(--border2);cursor:pointer;
  padding:.28rem .6rem;color:var(--text3);
  display:flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:500;font-family:var(--ui);
  transition:all .12s;
}
.jvt-btn:last-child{border-right:none;}
.jvt-btn:hover{color:var(--text2);background:var(--surface3);}
.jvt-btn.active{background:var(--surface3);color:var(--accent);}

/* -- JOB CARD VIEW -- */
.jc-grid{padding:.5rem .55rem;display:flex;flex-direction:column;gap:.45rem;}
.jc-grid-past{opacity:.75;}
.jc-grid-archived{opacity:.45;}
.jc-grid-archived:hover{opacity:.6;}

.jsh-active-banner{
  padding:.55rem 1rem .45rem;
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);
  display:flex;align-items:center;gap:.55rem;
  background:var(--rail-bg);
  position:sticky;top:0;z-index:1;
  border-bottom:2px solid var(--accent);
}
.jsh-active-banner .rsh-count{
  font-family:var(--mono);font-weight:500;letter-spacing:0;
  padding:.02rem .4rem;background:rgba(245,166,35,.15);border:1px solid rgba(245,166,35,.35);
  border-radius:8px;font-size:.65rem;color:var(--accent);text-transform:none;
}
.jsh-archived{border-top:2px solid var(--border2);}

.jc-card{
  background:var(--surface);border:1.5px solid var(--border2);
  border-radius:9px;padding:.7rem .75rem .6rem;cursor:pointer;
  transition:border-color .12s,background .12s,box-shadow .12s;
  position:relative;
}
.jc-card:hover{background:var(--surface2);border-color:var(--border3);}
.jc-card.active{
  border-color:var(--accent);
  background:var(--accent-dim);
  box-shadow:0 0 0 1px var(--accent);
}
.jc-card.archived-item{opacity:1;}/* override — grid controls opacity */

.jc-top{display:flex;align-items:flex-start;gap:.6rem;justify-content:space-between;margin-bottom:.35rem;}
.jc-title{
  font-size:1rem;font-weight:750;line-height:1.25;color:var(--text);
  flex:1;min-width:0;
}
.jc-card.active .jc-title{color:var(--accent);}
.jc-meta{font-size:.75rem;color:var(--text3);margin-bottom:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jc-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:.45rem;padding-top:.38rem;border-top:1px solid var(--border);
}
.jc-status-pill{
  font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:.12rem .45rem;border-radius:20px;border:1px solid currentColor;
  opacity:.9;
}
.jc-status-overdue{background:rgba(240,72,72,.12);}
.jc-status-today{background:rgba(245,166,35,.12);}
.jc-status-upcoming{background:rgba(245,166,35,.07);}
.jc-status-past{background:transparent;opacity:.5;}
.jc-status-archived{background:transparent;opacity:.5;}

/* -- JOB LIST VIEW -- */
.jl-table{display:flex;flex-direction:column;}
.jl-table-archived{opacity:.4;}
.jl-table-archived:hover{opacity:.6;}

.jl-row{
  display:grid;
  grid-template-columns:8px 1fr auto auto auto auto;
  align-items:center;gap:.4rem .5rem;
  padding:.48rem .85rem;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .1s;font-size:.83rem;
  border-left:3px solid transparent;
}
.jl-row:hover{background:var(--surface2);}
.jl-row.active{background:var(--accent-dim);border-left-color:var(--accent);}
.jl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.jl-name{
  font-weight:650;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.jl-row.active .jl-name{color:var(--accent);}
.jl-meta{font-size:.73rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px;}
.jl-date{font-size:.72rem;color:var(--text3);white-space:nowrap;font-family:var(--mono);}
.jl-days{font-size:.68rem;color:var(--text3);font-family:var(--mono);background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:.05rem .3rem;white-space:nowrap;}
.jl-out{font-size:.68rem;color:var(--red);font-family:var(--mono);background:rgba(240,72,72,.1);border:1px solid rgba(240,72,72,.3);border-radius:6px;padding:.05rem .3rem;white-space:nowrap;}
.ri-archive-btn{
  font-size:.7rem;background:none;border:1px solid var(--border2);border-radius:3px;
  color:var(--text3);cursor:pointer;padding:.15rem .4rem;white-space:nowrap;
  transition:all .12s;
}
.ri-archive-btn:hover{color:var(--text);border-color:var(--border3);}

/* -- CONDITION BADGES -- */
.cond-badge{font-family:var(--mono);font-size:.68rem;padding:.1rem .38rem;border-radius:3px;border:1px solid;white-space:nowrap;}
.cond-Excellent{color:#48b85c;border-color:rgba(72,184,92,.4);background:rgba(72,184,92,.1);}
.cond-Good     {color:#888888;border-color:rgba(136,136,136,.4);background:rgba(136,136,136,.1);}
.cond-Fair     {color:#f0a020;border-color:rgba(240,160,32,.4);background:rgba(240,160,32,.1);}
.cond-Damaged  {color:#e04848;border-color:rgba(224,72,72,.4);background:rgba(224,72,72,.1);}

/* -- OVERDUE / OUT INDICATORS -- */
.ri-overdue{font-size:.68rem;color:var(--red);font-family:var(--mono);margin-left:.35rem;vertical-align:middle;}
.ri-date-badge{
  width:38px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1.5px solid var(--border2);border-radius:7px;
  padding:.2rem .15rem;text-align:center;
  background:var(--bg);gap:0;
}
.ri-date-dow{font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;}
.ri-date-day{font-size:1.25rem;font-weight:800;line-height:1;margin:.05rem 0;}
.ri-date-mon{font-size:.58rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;line-height:1.1;}
.ri-date-none{opacity:.3;border-style:dashed;}
.ri-date-today{box-shadow:0 0 0 1.5px var(--accent);}
.ri-gear-count{
  font-size:.72rem;font-weight:700;color:var(--text3);font-family:var(--mono);
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:10px;padding:.1rem .45rem;flex-shrink:0;align-self:flex-start;margin-top:.1rem;
}
.ri-out-count{font-size:.78rem;color:var(--red);}
/* km badge — small pill on a day card when km > 0. Mono digits keep
   the badge visually consistent regardless of value width. */
.ri-km-badge{
  font-size:.72rem;color:var(--text2);font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}

/* -- QUICK ACTIONS STRIP -- */
.day-actions{display:flex;gap:.4rem;align-items:center;padding:.38rem .9rem;
  border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;flex-wrap:wrap;}
.day-actions-label{font-size:.78rem;color:var(--text3);margin-right:.2rem;}

/* -- CONTACT POPOVER — floating card shown on jph-contact-pill tap -- */
#contact-popover{
  position:fixed;z-index:8500;
  background:var(--surface);border:1px solid var(--border2);border-radius:10px;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  padding:.75rem .9rem;
  display:flex;align-items:flex-start;gap:.75rem;
  min-width:220px;max-width:300px;
  animation:cp-in .1s ease;
}
@keyframes cp-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.cp-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;font-weight:700;font-family:var(--ui);
  letter-spacing:.02em;
}
.cp-body{flex:1;min-width:0;}
.cp-name{font-size:.95rem;font-weight:700;color:var(--text);line-height:1.2;}
.cp-role{font-size:.78rem;color:var(--text3);margin-top:.15rem;}
.cp-chips{display:flex;flex-direction:column;gap:.3rem;margin-top:.5rem;}
.cp-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;color:var(--text2);text-decoration:none;
  background:var(--surface2);border:1px solid var(--border);border-radius:5px;
  padding:.2rem .5rem;transition:border-color .1s;
}
a.cp-chip:hover{border-color:var(--accent);color:var(--accent);}
.cp-chip-icon{font-size:.75rem;opacity:.7;flex-shrink:0;}
.cp-notes{font-size:.78rem;color:var(--text3);margin-top:.45rem;line-height:1.4;}

/* -- TOAST NOTIFICATIONS -- */
#toast-rack{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);
  z-index:9000;display:flex;flex-direction:column;gap:.4rem;align-items:center;pointer-events:none;}
.toast{
  background:var(--surface3);border:1px solid var(--border3);border-radius:8px;
  color:var(--text);font-family:var(--ui);font-size:.88rem;
  padding:.55rem 1.1rem;box-shadow:0 4px 18px rgba(0,0,0,.45);
  animation:toast-in .18s ease;pointer-events:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.7rem;
}
.toast.success{border-color:rgba(72,184,92,.5);background:rgba(72,184,92,.18);color:#7dd48a;}
.toast.error  {border-color:rgba(224,72,72,.5);background:rgba(224,72,72,.18);color:#f09090;}
.toast.warn   {border-color:rgba(245,166,35,.55);background:rgba(245,166,35,.18);color:#f5c26b;}   /* (b915) */
/* Undo / action button inside a toast — v5.30.0+ */
.toast-action{
  background:transparent;border:1px solid currentColor;border-radius:5px;
  color:inherit;font:inherit;font-weight:600;cursor:pointer;
  padding:.18rem .6rem;letter-spacing:.02em;line-height:1.2;
  transition:background .12s ease;
}
.toast-action:hover{background:rgba(255,255,255,.08);}
.toast-action:active{background:rgba(255,255,255,.15);}
.toast-action:disabled{opacity:.6;cursor:default;}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* -- SHORTCUTS MODAL -- */
.shortcut-grid{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.2rem;margin-top:.2rem;}
.sc-key{font-family:var(--mono);font-size:.8rem;background:var(--surface3);border:1px solid var(--border3);
  border-radius:4px;padding:.15rem .5rem;color:var(--text);text-align:center;white-space:nowrap;}
.sc-desc{font-size:.88rem;color:var(--text2);display:flex;align-items:center;}

/* -- JOB NOTES IN RAIL -- */
.ri-jobnotes{font-size:.76rem;color:var(--text3);margin-top:.18rem;font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:3.6rem;}

/* -- WEATHER CHIP -- */
.weather-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.8rem;color:var(--text2);
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:5px;padding:.2rem .55rem;margin-top:.3rem;cursor:pointer;
}
.weather-chip:hover{background:var(--surface3);}
.weather-icon{font-size:1rem;}

/* -- CALENDAR WEEK VIEW -- */
.cal-view-tabs{
  display:inline-flex;gap:.15rem;padding:.12rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:7px;
  margin-right:.3rem;
}
.cal-view-tab{
  font-size:.8rem;font-weight:500;font-family:var(--ui);padding:.3rem .8rem;
  border-radius:5px;border:none;
  background:transparent;color:var(--text2);cursor:pointer;transition:all .12s;
}
.cal-view-tab.active{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 1px 3px rgba(245,166,35,.25);}
.cal-view-tab:hover:not(.active){background:var(--surface);color:var(--text);}

/* -- Year view ------------------------------------------- */
.year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;padding:.5rem 0 1rem;}
.year-month-card{background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:.5rem .6rem;}
.year-month-name{font-size:.78rem;font-weight:700;color:var(--text);margin-bottom:.35rem;cursor:pointer;letter-spacing:.02em;}
.year-month-name:hover{color:var(--accent);}
.year-mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;}
.ymc-head{font-size:.55rem;color:var(--text3);text-align:center;padding-bottom:2px;font-weight:600;}
.ymc-cell{font-size:.62rem;text-align:center;padding:2px 0;border-radius:3px;cursor:pointer;color:var(--text2);line-height:1.5;}
.ymc-cell.empty{cursor:default;}
.ymc-cell:not(.empty):hover{background:var(--surface2);}
.ymc-cell.today{background:var(--accent);color:#fff;font-weight:700;border-radius:50%;}
.ymc-cell.has-shoot{background:rgba(240,160,32,.25);color:var(--text);font-weight:600;}
.ymc-cell.has-hold{background:rgba(217,119,6,.22);color:var(--text);font-weight:600;}
.ymc-cell.has-approved{background:rgba(60,180,100,.2);color:var(--text);}
.ymc-cell.has-pending{background:rgba(240,160,32,.12);color:var(--text);}

/* (v5.21.0+) Hold chip on calendar week view — amber treatment to
   read as tentative. Mirrors the shoot-day-week chip's layout but
   with the hold colour family. */
.cal-chip-hold{
  background:rgba(245,158,11,.16);
  color:#d97706;
  border:1px solid rgba(217,119,6,.5);
  font-weight:600;
  font-size:.7rem;
}
.cal-chip-hold:hover{ background:rgba(245,158,11,.25); }

/* (b419) Blackout dates — personal no-booking blocks. Deep red,
   the strongest "don't book me" signal on the calendar. */
.cal-chip-blackout{
  background:rgba(220,38,38,.15);
  color:#dc2626;
  border:1px solid rgba(220,38,38,.5);
  font-weight:700;
  font-size:.7rem;
}
.cal-chip-blackout:hover{ background:rgba(220,38,38,.25); }
.ymc-cell.has-blackout{background:rgba(220,38,38,.24);color:var(--text);font-weight:700;}

/* (2026.05.19+b59) Event/meeting chip — cyan family, distinct
   from holds (amber) and shoot days (blue). Same layout shell
   as the hold chip. */
.cal-chip-event{
  background:rgba(8,145,178,.14);
  color:#0891b2;
  border:1px solid rgba(8,145,178,.5);
  font-weight:600;
  font-size:.7rem;
}
.cal-chip-event:hover{ background:rgba(8,145,178,.24); }

/* ── Subscribed external calendars (b903) ─────────────────────
   Feed colour arrives per-element as --cf-color rather than a class
   per feed — the palette is user-chosen, so it can't live in CSS.
   Deliberately the quietest chip on the grid: dashed edge, no fill
   weight. These are read-only records from someone else's calendar,
   and must never out-shout a real booking. */
.cal-chip-external{
  background:color-mix(in srgb, var(--cf-color,#8b5cf6) 13%, transparent);
  color:var(--cf-color,#8b5cf6);
  border:1px dashed color-mix(in srgb, var(--cf-color,#8b5cf6) 55%, transparent);
  font-weight:500;
  font-size:.68rem;
  cursor:default;
}
.cal-chip-external:hover{ background:color-mix(in srgb, var(--cf-color,#8b5cf6) 22%, transparent); }

/* Count / warning pill on the calendar header's Calendars button. */
.cal-feed-badge{
  display:inline-block;min-width:1.05rem;padding:0 .28rem;margin-left:.15rem;
  border-radius:999px;background:var(--fill2);color:var(--text2);
  font-size:.66rem;font-weight:700;line-height:1.35;text-align:center;
}
.cal-feed-badge.is-err{ background:rgba(220,38,38,.18); color:#dc2626; }

/* Feed colour dot in the conflict banner's external rows. */
.conflict-banner-list .cb-feed-dot{
  display:inline-block;width:.55rem;height:.55rem;border-radius:50%;
  margin-right:.4rem;vertical-align:baseline;flex:0 0 auto;
}

/* ── Calendars manager modal ───────────────────────────────── */
.cf-modal .cf-intro{
  font-size:.85rem;color:var(--text2);line-height:1.6;margin-bottom:1rem;
}
.cf-list{ display:flex;flex-direction:column;gap:.55rem;max-height:46vh;overflow-y:auto; }
.cf-row{
  border:1px solid var(--border);border-radius:8px;background:var(--surface2);
  padding:.6rem .7rem;
}
.cf-row-head{ display:flex;align-items:center;gap:.5rem; }
.cf-swatch{
  width:1.6rem;height:1.6rem;flex:0 0 auto;padding:0;cursor:pointer;
  border:1px solid var(--border2);border-radius:5px;background:transparent;
}
.cf-name{
  flex:1;min-width:0;background:transparent;border:1px solid transparent;
  color:var(--text);font-size:.9rem;font-weight:600;
  padding:.25rem .4rem;border-radius:5px;
}
.cf-name:hover{ border-color:var(--border2); }
.cf-name:focus{ border-color:var(--accent);background:var(--surface);outline:none; }
.cf-row-foot{
  display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;
  margin-top:.35rem;padding-left:.15rem;
}
.cf-meta{ font-size:.72rem;color:var(--text3);flex:1;min-width:9rem; }
.cf-err{ color:#dc2626; }
.cf-tog{
  display:inline-flex;align-items:center;gap:.28rem;
  font-size:.72rem;color:var(--text2);cursor:pointer;user-select:none;
}
.cf-tog input{ accent-color:var(--accent);cursor:pointer; }
.cf-url{
  margin-top:.3rem;font-family:var(--mono);font-size:.62rem;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cf-del:hover{ color:#dc2626; }
.cf-empty{
  border:1px dashed var(--border2);border-radius:8px;padding:.9rem 1rem;
  font-size:.8rem;color:var(--text3);line-height:1.65;
}
.cf-add{ margin-top:1rem;border-top:1px solid var(--border);padding-top:.85rem; }
.cf-add-title{ font-size:.78rem;font-weight:600;color:var(--text2);margin-bottom:.45rem; }
.cf-add-grid{ display:flex;gap:.4rem;align-items:center;flex-wrap:wrap; }
.cf-add-grid .cf-input:first-child{ flex:3 1 16rem; }
.cf-add-grid .cf-input{ flex:1 1 8rem;min-width:0; }
.cf-input{
  background:var(--surface2);border:1px solid var(--border2);border-radius:5px;
  color:var(--text);font-size:.8rem;padding:.42rem .55rem;
}
.cf-input:focus{ border-color:var(--accent);outline:none; }
@media(max-width:600px){
  .cf-add-grid .cf-input{ flex:1 1 100%; }
}

/* ────────────────────────────────────────────────────────────
   Conflict warning banner (v5.21.0+)

   Surfaces inside the hold-edit and new-day modals when the
   chosen date range overlaps an existing hold or shoot day.
   Amber when only holds conflict (soft warning — the user can
   still proceed), red when an actual booked shoot day conflicts
   (firm warning — a real double-book risk). Both variants stay
   non-blocking; the save button isn't disabled. Better to let
   the user proceed with their eyes open than to fight them.
   ──────────────────────────────────────────────────────────── */
.conflict-banner{
  margin:.75rem 0 .25rem;
  padding:.7rem .85rem;
  border-radius:8px;
  border:1px solid rgba(217,119,6,.5);
  background:rgba(245,158,11,.12);
  color:#b45309;
  font-size:.84rem;
  line-height:1.45;
}

/* (v5.28.0+) Inline hint under the hold typeahead. Two states:
   matched (green check, contact linked) and freeform (dim, free-form
   text will save without a contact link). Either is fine — the
   freeform path is supported on purpose for holds where the producer
   is not yet a contact in the system. */
.hold-contact-hint{
  font-size:.76rem;
  margin-top:.3rem;
  line-height:1.3;
  padding-left:.1rem;
}
.hold-contact-hint.matched{ color:var(--green); }
.hold-contact-hint.freeform{ color:var(--text3); font-style:italic; }
.conflict-banner.severe{
  border-color:rgba(220,38,38,.55);
  background:rgba(239,68,68,.12);
  color:#b91c1c;
}
.conflict-banner-head{
  font-weight:700;
  margin-bottom:.35rem;
  display:flex;
  align-items:center;
  gap:.45rem;
}
.conflict-banner-list{
  margin:0; padding:0; list-style:none;
}
.conflict-banner-list li{
  padding:.18rem 0;
  display:flex;
  gap:.5rem;
  align-items:baseline;
}
.conflict-banner-list .cb-date{
  font-family:var(--mono);
  font-size:.78rem;
  opacity:.85;
  min-width:9.5rem;
}
.conflict-banner-list .cb-item{
  flex:1;
}
@media(max-width:700px){.year-grid{grid-template-columns:repeat(2,1fr);gap:.5rem;}}
@media(max-width:400px){.year-grid{grid-template-columns:repeat(2,1fr);gap:.35rem;}.ymc-cell{font-size:.58rem;}}


.week-grid{display:grid;grid-template-columns:52px repeat(7,1fr);border-left:1px solid var(--border);border-top:1px solid var(--border);}
.week-col-head{
  background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border2);
  padding:.4rem .3rem;text-align:center;font-size:.72rem;
}
.week-col-head.today-col{background:rgba(240,160,32,.12);}
.week-col-head .wch-day{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);}
.week-col-head .wch-date{font-size:1.05rem;font-weight:600;color:var(--text);line-height:1.2;}
.week-col-head.today-col .wch-date{color:var(--accent);}
.week-time-label{
  background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  font-size:.65rem;font-family:var(--mono);color:var(--text3);
  padding:.2rem .3rem;text-align:right;vertical-align:top;
}
.week-cell{
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  min-height:36px;padding:.2rem .25rem;position:relative;
}
.week-cell.today-col{background:rgba(240,160,32,.04);}
.week-cell.all-day{min-height:28px;background:var(--surface);}
.week-allday-label{
  background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border2);
  font-size:.65rem;color:var(--text3);padding:.25rem .3rem;text-align:right;white-space:nowrap;
}
.cal-chip.shoot-day-week{
  font-size:.72rem;padding:.2rem .4rem;margin-bottom:.15rem;
  background:var(--cal-shoot-bg, rgba(61,142,240,.15));border-left:3px solid var(--cal-shoot, #3d8ef0);
  border-radius:0 3px 3px 0;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);border-right:1px solid var(--border2);
  color:var(--cal-shoot, #3d8ef0);display:block;white-space:normal;line-height:1.3;
}
.cal-chip.shoot-day-week.cal-chip-prep{
  background:var(--cal-prep-bg, rgba(32,190,160,.12));border-left-color:var(--cal-prep, #20b8a0);color:var(--cal-prep, #20b8a0);
}
.cal-chip.shoot-day-week.cal-chip-wrap{
  background:var(--cal-wrap-bg, rgba(160,100,220,.12));border-left-color:var(--cal-wrap, #9060d8);color:var(--cal-wrap, #9060d8);
}
.cal-chip.shoot-day-week.cal-chip-travel{
  background:var(--cal-travel-bg, rgba(240,88,72,.11));border-left-color:var(--cal-travel, #e05848);color:var(--cal-travel, #e05848);
}
.cal-chip.shoot-day-week.cal-chip-post{
  background:var(--cal-post-bg, rgba(74,125,232,.12));border-left-color:var(--cal-post, #4a7de8);color:var(--cal-post, #4a7de8);
}
.cal-chip.booking-week{
  font-size:.7rem;padding:.18rem .4rem;margin-bottom:.12rem;
  background:rgba(72,184,92,.12);border-left:3px solid var(--green);
  border-radius:0 3px 3px 0;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);border-right:1px solid var(--border2);
  color:var(--green);display:block;
}

/* Improve month chip legibility */
.cal-chip{font-size:.7rem;padding:.18rem .35rem;}
.cal-chip.shoot-day{
  background:rgba(240,160,32,.2);border-left:2px solid var(--accent);
  border-radius:0 3px 3px 0;color:var(--accent);font-weight:500;
}

/* -- CONTACTS -- */
/* ═══════════════════════════════════════════════════════════
   DIRECTORY VIEW — People + Companies
   ═══════════════════════════════════════════════════════════ */

/* Segmented-control sub-tabs */
.dir-tabs{
  display:inline-flex;gap:.2rem;padding:.22rem;margin-bottom:1rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:9px;
}
.dir-tab{
  font-family:var(--ui);font-size:.82rem;font-weight:500;letter-spacing:.01em;
  padding:.4rem .9rem;background:transparent;border:none;border-radius:7px;
  color:var(--text3);cursor:pointer;transition:all .12s;
  display:inline-flex;align-items:center;gap:.4rem;
}
.dir-tab:hover:not(.active){color:var(--text);background:var(--surface);}
.dir-tab.active{
  background:var(--accent);color:#fff;font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.dir-tab .dir-tab-count{
  font-size:.7rem;font-family:var(--mono);
  padding:.05rem .42rem;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);
  opacity:.9;
}
.dir-tab.active .dir-tab-count{background:rgba(255,255,255,.22);border-color:transparent;color:#fff;}

/* Search bar */
.dir-search{
  position:relative;margin-bottom:1rem;
}
.dir-search input{
  width:100%;padding:.58rem .9rem .58rem 2.1rem;
  font-size:.88rem;font-family:var(--ui);
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  color:var(--text);transition:border-color .12s;
}
.dir-search input:focus{outline:none;border-color:var(--accent);}
.dir-search::before{
  content:"🔍";position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
  font-size:.85rem;opacity:.55;pointer-events:none;
}

/* Search row wraps the search field + view-mode toggle (v4.35.0).
   The toggle is a small segmented control sitting to the right of
   the search box. On narrow screens it wraps below; the search
   stays full-width either way. */
.dir-search-row{
  display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;
  flex-wrap:wrap;
}
.dir-search-row .dir-search{
  flex:1;min-width:240px;margin-bottom:0;
}
.dir-view-toggle{
  display:inline-flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;flex-shrink:0;
}
.dir-view-btn{
  background:transparent;border:none;color:var(--text3);
  padding:.45rem .75rem;font-size:1rem;line-height:1;
  cursor:pointer;transition:background .12s, color .12s;
  font-family:inherit;
  border-right:1px solid var(--border);
}
.dir-view-btn:last-child{border-right:none;}
.dir-view-btn:hover{background:var(--surface2);color:var(--text2);}
.dir-view-btn.active{
  background:var(--accent-dim);color:var(--accent);
}
.dir-view-btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:-2px;
}

/* ── Directory list view (v4.35.0) ──
   Sortable table for People + Companies. Mirrors .invo-table's UX
   (sticky header, hover row highlight, sort-arrow column accent)
   but lives in its own class block so per-page tweaks (column
   widths, responsive collapsing) don't bleed across. */
.dir-list-wrap{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  overflow-x:auto;
  /* Don't clip vertically — sticky thead needs the cell to be a
     scroll container of the parent. The view's main scroll
     container is the contacts-content panel which already provides
     sticky behaviour. */
}
.dir-table{
  width:100%;border-collapse:collapse;
  font-size:.86rem;
  font-variant-numeric:tabular-nums;
}
.dir-table thead th{
  text-align:left;padding:.6rem .75rem;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text3);font-weight:600;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1;
  white-space:nowrap;
}
.dir-th-sort{
  cursor:pointer;user-select:none;
  transition:color .12s, background .12s;
}
.dir-th-sort:hover{color:var(--text2);background:var(--surface3);}
.dir-th-sort.active{color:var(--accent);}
.dir-th-arrow{
  display:inline-block;margin-left:.3rem;font-size:.7em;
  visibility:hidden;
}
.dir-th-sort.active .dir-th-arrow{visibility:visible;}
.dir-th-check{ width:2.4rem; padding:.6rem .5rem !important; }
.dir-th-actions{ width:5.5rem; }

.dir-table tbody td{
  padding:.55rem .75rem;
  border-bottom:1px solid var(--border);
  color:var(--text2);
  vertical-align:middle;
}
.dir-table tbody tr:last-child td{border-bottom:none;}
.dir-row{
  cursor:pointer;
  transition:background .1s;
}
.dir-row:hover{background:var(--surface2);}
.dir-row.selected{background:var(--accent-dim);}
.dir-row.selected:hover{background:var(--accent-dim);}

/* Cells */
.dir-td-check{ padding:.55rem .5rem !important; width:2.4rem; }
.dir-td-check input{cursor:pointer;}
.dir-td-name{
  display:flex;align-items:center;gap:.55rem;
  color:var(--text);
  min-width:0;
}
.dir-name-text{
  font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;
}
.dir-avatar{
  flex-shrink:0;
  width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--surface3);color:var(--text2);
  font-size:.7rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  text-transform:uppercase;
}
.dir-avatar-company{
  background:var(--accent-dim);color:var(--accent);
  border-radius:5px;
}
.dir-td-role{
  color:var(--text3);font-size:.82rem;
  max-width:9rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dir-td-contact{
  max-width:14rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dir-td-contact a{
  color:var(--text2);text-decoration:none;
}
.dir-td-contact a:hover{color:var(--accent);text-decoration:underline;}
.dir-td-company{
  color:var(--text2);
  max-width:11rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dir-td-num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--text2);
  width:4rem;
}
.dir-td-date{
  color:var(--text3);font-size:.82rem;
  white-space:nowrap;
}
.dir-td-dim{ color:var(--text3); }
.dir-td-actions{
  white-space:nowrap;text-align:right;
}
.dir-td-actions .btn{
  padding:.22rem .42rem;font-size:.78rem;
}

@media (max-width:880px){
  /* Hide secondary columns on tablet — Phone (both tables) and
     Website + Latest job (companies). Email + main columns stay. */
  .dir-cell-md-hide{display:none !important;}
}
@media (max-width:640px){
  /* Drop another tier — Email (both) + Company (people) — leaving
     Name + Role/Jobs + actions. */
  .dir-cell-sm-hide{display:none !important;}
  .dir-table{font-size:.82rem;}
  .dir-table thead th,.dir-table tbody td{padding:.45rem .55rem;}
  .dir-avatar{width:1.5rem;height:1.5rem;font-size:.65rem;}
  .dir-td-actions .btn{padding:.18rem .35rem;font-size:.74rem;}
}

/* Section head tweaks specific to directory */
.dir-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:.9rem;gap:1rem;
}
.dir-section-head .dsh-sub{
  font-size:.78rem;color:var(--text3);margin-top:.1rem;
}

/* Role group header */
.dir-role-head{
  display:flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text3);
  margin:1.1rem 0 .5rem;
}
.dir-role-head::after{
  content:"";flex:1;height:1px;background:var(--border);
}
.dir-role-head .rc-count{
  font-family:var(--mono);letter-spacing:0;text-transform:none;
  font-weight:500;font-size:.72rem;color:var(--text3);
  padding:.05rem .4rem;border:1px solid var(--border);border-radius:8px;
}

/* ── Contact activity surfacing (v5.39.0+) ────────────────────
   Activity chips for recently-active contacts, plus the divider
   that separates the active group from the rest of the directory.
   Tones: red (urgent), amber (action wanted), blue (info), green
   (good news). Compact mode strips the label and shows icon only
   — used in the list view where horizontal space is tight. */

/* Summary pill in the section head — "🔔 N active". Quiet on its
   own (no fill), the bell carries the visual weight. */
.dir-act-summary{
  display:inline-flex;align-items:center;gap:.3rem;
  margin-left:.5rem;
  font-size:.72rem;font-weight:600;
  padding:.18rem .55rem;border-radius:10px;
  background:var(--accent-dim);color:var(--accent);
  border:1px solid rgba(240,160,32,.35);
  vertical-align:middle;
  letter-spacing:0;text-transform:none;
}

/* The chip strip below a contact name / inside a card. */
.dir-act-strip{
  display:inline-flex;flex-wrap:wrap;gap:.3rem;align-items:center;
  /* margin only when standalone (card view); list-view variant
     resets this in its container. */
}
.contact-card.is-active .dir-act-strip{margin:.2rem 0 .15rem;}

/* One chip — pill with icon + label. Tone-coloured semi-fill so
   the chip pops without dominating. Hover bumps saturation
   slightly to invite the click-through (chip itself isn't a
   button, but the row/card is). */
.dir-act-chip{
  display:inline-flex;align-items:center;gap:.28rem;
  padding:.15rem .5rem;border-radius:9px;
  font-size:.7rem;font-weight:600;
  border:1px solid;
  letter-spacing:0;
  white-space:nowrap;line-height:1.1;
  font-family:var(--ui);
}
.dir-act-strip.is-compact .dir-act-chip{
  /* Icon-only in compact mode — keep just a small square. */
  padding:.12rem .32rem;border-radius:7px;
}
.dir-act-strip.is-compact .dir-act-chip-lbl{display:none;}
.dir-act-chip-icon{font-size:.85rem;line-height:1;}
.dir-act-chip-lbl{font-weight:500;}

/* Tone variants — semantic colours layered onto var(--cal-*)
   would couple this to calendar settings; here the tones map to
   urgency, not day-type, so we use the global semantic palette
   (red/amber/green/blue) directly via rgba so it works in both
   light and dark themes. */
.dir-act-chip-red{
  background:rgba(208,64,64,.13);
  color:var(--red, #d04040);
  border-color:rgba(208,64,64,.42);
}
.dir-act-chip-amber{
  background:rgba(240,160,32,.14);
  color:var(--accent, #e69325);
  border-color:rgba(240,160,32,.42);
}
.dir-act-chip-blue{
  background:rgba(61,142,240,.12);
  color:var(--cal-shoot, #3d8ef0);
  border-color:rgba(61,142,240,.4);
}
.dir-act-chip-green{
  background:rgba(58,160,80,.12);
  color:var(--green, #3aa050);
  border-color:rgba(58,160,80,.4);
}
.dir-act-chip-more{
  background:transparent;color:var(--text3);
  border-color:var(--border2);
  font-weight:500;
}

/* (v5.41.0+) Archived state — contacts the user won't work with
   again. Toolbar pill + per-row "📦 archived" badge + greyed
   rows/cards when shown. Hidden by default so the directory
   stays focused. */
.dir-arch-pill{
  display:inline-flex;align-items:center;gap:.22rem;
  margin-left:.4rem;
  font-size:.62rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;
  padding:.12rem .45rem;border-radius:7px;
  background:var(--surface3);color:var(--text3);
  border:1px solid var(--border2);
  vertical-align:baseline;white-space:nowrap;
}
/* Archived rows / cards fade so they read as "deprioritised"
   without being invisible. Hover restores full opacity so the
   user can read details before clicking through. */
.dir-row.is-archived td{
  color:var(--text3);
  background:rgba(0,0,0,.025);
}
.dir-row.is-archived:hover td{
  background:var(--surface2);
}
.dir-row.is-archived .dir-avatar{ opacity:.65; }
.contact-card.is-archived{
  opacity:.6;
}
.contact-card.is-archived:hover{ opacity:.95; }
.contact-card.is-archived::before{
  background:var(--text3);opacity:.5;
}

/* Mute-activity indicator — small bell-off glyph next to a
   contact's name to mark "excluded from active surfacing".
   Quiet on purpose; the user opted into hiding this contact
   from rollup, not into a loud badge. */
.dir-mute-flag{
  display:inline-block;
  font-size:.78rem;
  opacity:.55;
  margin-left:.3rem;
  vertical-align:baseline;
  cursor:help;
}
.dir-mute-flag:hover{opacity:.9;}

/* Edit Contact modal — mute-activity checkbox row. Two-line
   label (title + sub) with the checkbox aligned to the top so
   it doesn't drift past the sub-text. */
.ce-mute-row{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.65rem .85rem;
  margin-bottom:.65rem;
}
.ce-mute-lbl{
  display:flex;align-items:flex-start;gap:.65rem;
  cursor:pointer;
  margin:0;
}
.ce-mute-lbl input[type=checkbox]{
  flex-shrink:0;margin-top:.18rem;cursor:pointer;
  width:1rem;height:1rem;
}
.ce-mute-text{display:flex;flex-direction:column;gap:.18rem;min-width:0;}
.ce-mute-title{
  font-size:.86rem;font-weight:600;color:var(--text);line-height:1.2;
}
.ce-mute-sub{
  font-size:.74rem;color:var(--text3);line-height:1.35;
}

/* ══════════════════════════════════════════════════════════
   (v2026.07+) RENTER-PORTAL VISIBILITY
   ══════════════════════════════════════════════════════════ */
/* Checkbox card on the gear add/edit modals. Same shape as the
   .ce-mute-* twin above but self-contained so the two can be
   tuned independently. Spans the modal's full width (not a
   .frow cell) because the sub-label wraps to two lines. */
.inv-vis-row{
  background:var(--surface2, rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:8px;
  padding:.6rem .75rem;
  margin:.2rem 0 .55rem;
}
.inv-vis-lbl{
  display:flex;align-items:flex-start;gap:.55rem;
  cursor:pointer;margin:0;
}
.inv-vis-lbl input[type=checkbox]{
  flex-shrink:0;margin:.15rem 0 0;cursor:pointer;
  width:1rem;height:1rem;accent-color:var(--accent);
}
.inv-vis-text{display:flex;flex-direction:column;gap:.18rem;min-width:0;}
.inv-vis-title{
  font-size:.86rem;font-weight:600;color:var(--text);line-height:1.2;
}
.inv-vis-sub{
  font-size:.74rem;color:var(--text3);line-height:1.35;
}

/* "🚫 Renters" badge in the admin inventory renderers (mobile row,
   desktop list row, desktop card, package member row). Admin-only
   at-a-glance marker; renters never receive these rows at all.
   Deliberately NOT the amber/accent family — OUT and BOOKED already
   own amber and blue, so this uses a muted neutral-red so three
   badges can sit side by side and stay readable. */
.inv-hidden-badge{
  font-size:.62rem;font-weight:800;letter-spacing:.04em;
  background:rgba(220,68,68,.13);color:#e06666;
  border:1px solid rgba(220,68,68,.32);
  border-radius:4px;padding:.1rem .35rem;
  line-height:1.2;
  display:inline-flex;align-items:center;gap:.15rem;
  vertical-align:middle;flex-shrink:0;white-space:nowrap;
}
/* Share-list variant — violet, so "not on the producer list" reads as
   a different axis from "not rentable" at a glance. */
.inv-hidden-badge.inv-share-badge{
  background:rgba(139,92,246,.14);color:#a78bfa;
  border-color:rgba(139,92,246,.34);
}
/* Inherited variant — this item isn't hidden itself, it's inside a
   hidden kit. Outline-only so it reads as weaker than a direct flag. */
.inv-hidden-badge.inv-inherit-badge{
  background:transparent;color:#e0a066;
  border-color:rgba(224,160,102,.42);font-weight:700;
}
/* Retired variant (b744) — neutral grey, deliberately NOT red: this is
   an archival state, not a warning. Same chip skeleton as its
   siblings so the badge row stays visually even. */
.inv-hidden-badge.inv-retired-badge{
  background:rgba(148,148,160,.13);color:var(--text3,#9a9aa6);
  border-color:rgba(148,148,160,.34);
}
/* Detail-modal retired chip (b744) — same grey language. */
.igd-meta-chip.igd-meta-retired{
  background:rgba(148,148,160,.13);color:var(--text3,#9a9aa6);
  border:1px solid rgba(148,148,160,.34);
}
/* Two toggles stacked in one card (renter + share list). */
.inv-vis-row .inv-vis-lbl + .inv-vis-lbl{
  margin-top:.55rem;padding-top:.55rem;
  border-top:1px solid var(--border);
}
/* Share-list staleness banner — the cached public payload still
   contains an item that's now flagged hidden. */
.gl-stale-banner{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.34);
  color:var(--text);
  border-radius:8px;padding:.55rem .7rem;margin:.4rem 0 .6rem;
  font-size:.8rem;line-height:1.35;
}
.gl-stale-banner strong{color:var(--amber);font-weight:700;}

/* (v5.42.0+) Business-card scan affordance. The "📇 Scan business
   card" button + inline status sit at the top of the contact-edit
   Details pane (Add mode only). The toolbar twin uses .dir-head-
   actions to place the Scan button beside the primary Add Contact
   button. */
.dir-head-actions{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
}
.ce-scan-row{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-bottom:.75rem;
}
.ce-scan-btn{flex-shrink:0;}
.ce-scan-status{
  font-size:.78rem;color:var(--text3);line-height:1.3;min-width:0;
}
.ce-scan-status.err{color:var(--red);}
.ce-card-company-hint{
  font-size:.76rem;color:var(--accent);
  margin:.3rem 0 .1rem;line-height:1.35;
}

/* "Other contacts" divider — separates the active group from
   the rest of the directory. Lives in a <tr> in list mode (with
   a single full-span <td>) and as a standalone <div> in card
   mode; styles handle both. */
.dir-act-divider{
  display:flex;align-items:center;gap:.6rem;
  margin:.85rem 0 .3rem;
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text3);
}
.dir-act-divider::before,
.dir-act-divider::after{
  content:"";flex:1;height:1px;background:var(--border);
}
.dir-divider-row td{
  padding:0 !important;border-bottom:none !important;
}
.dir-divider-row td .dir-act-divider{
  margin:.55rem .25rem .3rem;
}

/* Active-row indicators — a left-edge accent strip on the row /
   card that doesn't add weight when the contact is quiet. */
.dir-row.is-active td:first-child{
  box-shadow:inset 3px 0 0 var(--accent);
}
.contact-card.is-active::before{
  background:var(--accent);opacity:1;
}
.contact-card.is-active{
  border-color:rgba(240,160,32,.32);
}

/* Activity column in the list table. Cell content is the chip
   strip — keep it from growing too wide on long screens. */
.dir-th-activity{ width:auto; min-width:90px; }
.dir-td-activity{
  white-space:nowrap;
}
@media (max-width:880px){
  /* Narrow viewports: drop the Activity column entirely. The
     active-row's left-edge accent + the "🔔 N active" summary in
     the header still communicate the signal. */
  .dir-th-activity, .dir-td-activity{display:none !important;}
}

/* Card — redesigned with left accent stripe + better hierarchy */
.contact-card{
  position:relative;
  background:var(--surface);border:1px solid var(--border);border-radius:9px;
  padding:.9rem 1.05rem .9rem 1.2rem;
  display:flex;align-items:flex-start;gap:.95rem;
  transition:border-color .14s, box-shadow .14s, transform .14s;
}
.contact-card::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
  background:var(--border2);border-radius:0 3px 3px 0;
  transition:background .14s;
}
.contact-card:hover{border-color:var(--border3);box-shadow:0 1px 6px rgba(0,0,0,.05);}
.contact-card.cc-person::before{background:var(--accent);opacity:.55;}
.contact-card.cc-person:hover::before{opacity:1;}
.contact-card.cc-company::before{background:var(--accent);}
.contact-card.cc-company:hover::before{opacity:.85;}

/* Avatar — circle for people, rounded-square for companies */
.cc-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--accent-dim);color:var(--accent);
  font-weight:700;font-size:.95rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:.02em;
}
.cc-avatar.cc-avatar-company{
  border-radius:10px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent2, var(--accent)) 100%);
  color:#fff;
}

.cc-info{flex:1;min-width:0;}

/* Header block: name + role/subtitle */
.cc-header{display:flex;flex-direction:column;gap:.1rem;}
.cc-name{
  font-weight:650;font-size:1rem;color:var(--text);
  line-height:1.25;
}
.cc-role{
  font-size:.76rem;font-weight:500;
  color:var(--accent);font-family:var(--ui);
  letter-spacing:.02em;
}

/* Contact chip row */
.cc-chips{
  display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem;
}
.cc-chip{
  display:inline-flex;align-items:center;gap:.32rem;
  font-size:.76rem;font-family:var(--ui);
  padding:.2rem .55rem;border-radius:12px;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text2);text-decoration:none;
  transition:all .1s;
  max-width:100%;
}
.cc-chip:hover{background:var(--surface);border-color:var(--border3);color:var(--text);}
.cc-chip .cc-chip-icon{
  font-size:.78rem;opacity:.7;flex-shrink:0;
}
.cc-chip .cc-chip-text{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Address block (companies) */
.cc-address{
  margin-top:.55rem;padding:.45rem .7rem;
  background:var(--surface2);border-radius:6px;
  font-size:.78rem;color:var(--text2);
  white-space:pre-line;line-height:1.45;
  border-left:2px solid var(--border2);
}

/* Notes block — distinct callout */
.cc-notes{
  margin-top:.55rem;padding:.4rem .65rem;
  background:var(--surface2);border-radius:6px;
  font-size:.79rem;color:var(--text3);
  font-style:italic;line-height:1.45;
  border-left:2px solid var(--border2);
}

.cc-actions{display:flex;gap:.3rem;flex-shrink:0;opacity:.5;transition:opacity .12s;}
.contact-card:hover .cc-actions{opacity:1;}

/* Per-company jobs list on company card */
.co-jobs-list{
  margin-top:.7rem;padding-top:.6rem;
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:.2rem;
}
.co-jobs-head{
  display:flex;align-items:center;gap:.45rem;
  font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--text3);margin-bottom:.35rem;
}
.co-jobs-head .cjh-count{
  font-family:var(--mono);font-weight:500;
  padding:.05rem .4rem;border:1px solid var(--border);border-radius:8px;
  letter-spacing:0;
}
.co-job-row{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:.82rem;padding:.38rem .55rem;border-radius:6px;
  cursor:pointer;transition:background .1s, transform .1s;
  color:var(--text2);
}
.co-job-row:hover{background:var(--surface2);color:var(--text);transform:translateX(2px);}
.co-job-row .cjr-chevron{color:var(--text3);font-size:.75rem;opacity:.5;}
.co-job-row:hover .cjr-chevron{opacity:1;color:var(--accent);}
.co-job-name{
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:500;
}
.co-job-name.archived{color:var(--text3);font-style:italic;}
.co-job-meta{
  font-size:.72rem;font-family:var(--mono);color:var(--text3);
  flex-shrink:0;white-space:nowrap;
}

/* (v5.70.0+) Per-company hygiene panel on the company card. Shows
   contacts who've worked on this company's jobs via job_contacts
   but aren't formally linked in contact_companies. One-click links
   merge them in via the same set_contact_companies write path. */
.co-hygiene-panel{
  margin-top:.55rem;padding:.55rem .65rem;
  background:linear-gradient(180deg, rgba(99,155,235,.04), rgba(99,155,235,.07));
  border:1px solid rgba(99,155,235,.18);
  border-radius:7px;
}
.co-hygiene-head{ margin-bottom:.4rem; }
.co-hygiene-title{
  font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);
}
.co-hygiene-sub{
  display:block;font-size:.7rem;color:var(--text3);
  margin-top:.1rem;
}
.co-hygiene-rows{ display:flex;flex-direction:column;gap:.25rem; }
.co-hg-row{
  display:flex;align-items:center;gap:.5rem;
  padding:.32rem .45rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:5px;
}
.co-hg-body{ flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem; }
.co-hg-name{
  font-size:.82rem;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.co-hg-meta{ font-size:.7rem;color:var(--text3); }
.co-hg-link{
  font-size:.7rem !important;padding:.18rem .55rem !important;
  flex-shrink:0;
}
.co-hg-more{
  font-size:.7rem;color:var(--text3);font-style:italic;
  padding:.25rem .45rem;
}

/* Empty state */
.dir-empty{
  padding:2.5rem 1rem;text-align:center;
  color:var(--text3);font-size:.9rem;
  background:var(--surface);border:1px dashed var(--border);border-radius:9px;
}
.dir-empty-icon{font-size:2rem;display:block;margin-bottom:.6rem;opacity:.45;}
.dir-empty-hint{font-size:.8rem;color:var(--text3);margin-top:.4rem;}
/* (b684) Way out of the missing-info filter from its own empty state. */
.dir-empty-link{color:var(--accent);cursor:pointer;}
.dir-empty-link:hover{text-decoration:underline;}

/* Filter/sort toolbar below search */
.dir-toolbar{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  margin-bottom:.9rem;padding:.55rem .7rem;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  font-size:.8rem;
}
.dir-toolbar-group{
  display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap;
}
.dir-toolbar-label{
  font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text3);margin-right:.15rem;
}
.dir-toolbar select{
  font-family:var(--ui);font-size:.8rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  color:var(--text);padding:.28rem .5rem;cursor:pointer;
}
.dir-toolbar select:hover{border-color:var(--border3);}
.dir-toolbar select:focus{outline:none;border-color:var(--accent);}

/* Filter chip */
.dir-chip{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.74rem;font-family:var(--ui);
  padding:.2rem .6rem;border-radius:12px;cursor:pointer;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text2);transition:all .1s;user-select:none;
}
.dir-chip:hover{border-color:var(--border3);color:var(--text);}
.dir-chip.active{
  background:var(--accent-dim);border-color:var(--accent);
  color:var(--accent);font-weight:500;
}
.dir-chip-clear{
  font-size:.72rem;color:var(--text3);cursor:pointer;
  padding:.15rem .4rem;border-radius:4px;
  text-decoration:underline;text-underline-offset:2px;
}
.dir-chip-clear:hover{color:var(--text);}

/* Bulk selection */
.contact-card{
  position:relative;
}
.cc-checkbox{
  flex-shrink:0;align-self:center;
  width:18px;height:18px;cursor:pointer;
  accent-color:var(--accent);
}
.contact-card.selected{
  background:var(--accent-dim);
  border-color:var(--accent);
}
.contact-card.selected::before{background:var(--accent) !important;opacity:1 !important;}

/* Floating bulk action bar */
.bulk-bar{
  position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem .9rem;border-radius:10px;
  background:var(--text);color:var(--surface);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
  z-index:50;font-size:.85rem;
  animation:bulk-bar-in .18s ease-out;
}
@keyframes bulk-bar-in{
  from{opacity:0;transform:translate(-50%,8px);}
  to{opacity:1;transform:translate(-50%,0);}
}
.bulk-bar-count{
  font-weight:600;padding-right:.55rem;
  border-right:1px solid rgba(255,255,255,.18);
}
.bulk-bar button{
  background:transparent;border:1px solid rgba(255,255,255,.3);
  color:var(--surface);font-size:.8rem;
  padding:.32rem .7rem;border-radius:6px;cursor:pointer;
  font-family:var(--ui);font-weight:500;transition:all .1s;
}
.bulk-bar button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);}
.bulk-bar button.danger{border-color:rgba(220,80,80,.5);color:#ffb0b0;}
.bulk-bar button.danger:hover{background:rgba(220,80,80,.18);color:#ffe0e0;}
.bulk-bar button.ghost{border-color:transparent;opacity:.7;}
.bulk-bar button.ghost:hover{opacity:1;}

/* --- end DIRECTORY VIEW --- */

/* Job contacts panel inside job rail item */
.job-contacts-strip{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.3rem;}
.jc-chip{
  font-size:.7rem;font-family:var(--mono);
  padding:.1rem .4rem;border-radius:3px;
  background:var(--surface2);border:1px solid var(--border2);color:var(--text2);
  white-space:nowrap;
}
.jc-chip.has-email{border-color:rgba(240,160,32,.4);color:var(--accent);}

/* Contact picker in modal */
.jca-item{
  padding:.55rem .75rem;cursor:pointer;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.6rem;transition:background .08s;
}
.jca-item:last-child{border-bottom:none;}
.jca-item:hover{background:var(--surface3);}
.jca-item.selected{background:var(--accent-dim);}
.jca-item-name{font-size:.9rem;font-weight:500;color:var(--text);}
.jca-item-meta{font-size:.76rem;color:var(--text3);font-family:var(--mono);}

/* Email modal contact checkboxes */
.ej-contact-list{
  border:1px solid var(--border);border-radius:6px;
  background:var(--surface2);max-height:140px;overflow-y:auto;
}
.ej-contact-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.45rem .75rem;border-bottom:1px solid var(--border);font-size:.85rem;
}
.ej-contact-row:last-child{border-bottom:none;}
.ej-contact-row input[type=checkbox]{width:15px;height:15px;cursor:pointer;flex-shrink:0;}
.ej-contact-name{font-weight:500;color:var(--text);flex:1;}
.ej-contact-role{font-size:.74rem;color:var(--accent);font-family:var(--mono);}
.ej-contact-email{font-size:.74rem;color:var(--text3);font-family:var(--mono);}

/* -- USER PROFILE -- */
.profile-form{display:flex;flex-direction:column;gap:.6rem;}
.profile-form .frow{display:flex;gap:.75rem;flex-wrap:wrap;}
.profile-form .fg{flex:1;min-width:140px;}

/* -- BORROW REQUEST ADMIN CARDS -- */
.br-card{
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:.8rem 1rem;margin-bottom:.5rem;
}
.br-card.pending{border-left:3px solid var(--accent);}
.br-card.approved{border-left:3px solid var(--green);}
.br-card.denied{border-left:3px solid var(--red);opacity:.75;}
.br-card-head{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.4rem;}
.br-card-title{flex:1;font-weight:600;font-size:.95rem;color:var(--text);}
.br-card-meta{font-size:.78rem;color:var(--text3);margin-top:.2rem;line-height:1.6;}
.br-card-items{font-size:.8rem;color:var(--text2);margin:.4rem 0;line-height:1.7;}
.br-card-reason{font-size:.8rem;color:var(--text3);background:var(--surface2);border-radius:5px;padding:.4rem .7rem;margin-top:.35rem;border-left:2px solid var(--border3);}
.br-card-actions{display:flex;gap:.4rem;margin-top:.5rem;flex-wrap:wrap;}
.borrow-tabs{display:flex;gap:.3rem;margin-bottom:1rem;border-bottom:1px solid var(--border);padding-bottom:.5rem;}
.borrow-tab{font-size:.88rem;padding:.3rem .8rem;border-radius:5px;cursor:pointer;background:none;border:none;color:var(--text3);font-family:var(--ui);}
.borrow-tab.active{background:var(--accent);color:#fff;}

/* -- BORROW PORTAL -- */
#borrow-view{
  display:none;flex-direction:column;flex:1;overflow:hidden;
  background:var(--bg);
}
#borrow-view.active{display:flex;}
.borrow-wrap{
  flex:1;overflow-y:auto;
  padding:1.5rem 2rem;
  /* Bottom padding includes safe-area inset so the submit button never sits behind
     iOS home indicator / browser chrome on mobile. Extra space added on small screens. */
  padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));
  max-width:760px;width:100%;margin:0 auto;
}
.borrow-edit-banner{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  position:sticky;top:0;z-index:6;
  background:var(--accent-dim);border:1px solid var(--accent);border-radius:10px;
  padding:.8rem 1rem;margin-bottom:1.4rem;
  box-shadow:0 3px 12px rgba(0,0,0,.14);
}
.borrow-edit-banner .beb-title{font-size:.94rem;font-weight:700;color:var(--text);}
.borrow-edit-banner .beb-range{color:var(--accent);font-weight:700;white-space:nowrap;}
.borrow-edit-banner .beb-sub{font-size:.79rem;color:var(--text2);margin-top:.22rem;line-height:1.4;}
.borrow-edit-banner .beb-actions{display:flex;gap:.5rem;flex-shrink:0;}
#borrow-content.editing .borrow-header{opacity:.4;transition:opacity .15s;}
.borrow-header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
.borrow-header h1{font-size:1.3rem;font-weight:600;color:var(--text);}
.borrow-header p{font-size:.86rem;color:var(--text3);margin-top:.3rem;line-height:1.5;}
.borrow-section{margin-bottom:1.4rem;}
.borrow-section-title{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text3);margin-bottom:.55rem;display:flex;align-items:center;gap:.5rem;
}
.borrow-item-list{display:flex;flex-direction:column;gap:.3rem;}
.borrow-item{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .85rem;background:var(--surface);border:1px solid var(--border);
  border-radius:7px;transition:border-color .1s,background .1s;cursor:pointer;user-select:none;
}
.borrow-item:hover{border-color:var(--border3);}
.borrow-item.checked{border-color:var(--accent);background:var(--accent-dim);}
.borrow-item.has-conflict{border-color:rgba(240,72,72,.3);background:rgba(240,72,72,.03);}
.borrow-item.has-conflict.checked{border-color:var(--red);background:rgba(240,72,72,.08);}
.borrow-item.unavailable{
  opacity:.55;cursor:not-allowed!important;
  border-color:var(--border)!important;
  background:var(--surface2)!important;
}
.borrow-item.unavailable *{cursor:not-allowed!important;}
.borrow-item.unavailable .borrow-item-name{text-decoration:line-through;color:var(--text3);}
.borrow-item.unavailable .borrow-item-qty{display:none;}
.borrow-item input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);flex-shrink:0;}
.borrow-item-info{flex:1;min-width:0;}
.borrow-item-name{font-size:.9rem;font-weight:500;color:var(--text);}
.borrow-item-meta{font-size:.74rem;color:var(--text3);font-family:var(--mono);margin-top:.1rem;}
.borrow-item-qty{
  display:flex;align-items:center;gap:.35rem;
  opacity:0;pointer-events:none;transition:opacity .12s;flex-shrink:0;
}
.borrow-item.checked .borrow-item-qty{opacity:1;pointer-events:all;}
.borrow-qty-btn{
  width:24px;height:24px;border-radius:4px;border:1px solid var(--border2);
  background:var(--surface2);color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:background .1s;
}
.borrow-qty-btn:hover{background:var(--surface3);}
.borrow-qty-val{font-family:var(--mono);font-size:.82rem;min-width:18px;text-align:center;color:var(--text);}
.borrow-dates{display:flex;gap:.75rem;flex-wrap:wrap;}
.borrow-dates .fg{flex:1;min-width:140px;}
.borrow-success{text-align:center;padding:3rem 2rem;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.borrow-success .bs-icon{font-size:3rem;margin-bottom:.75rem;}
.borrow-success h2{font-size:1.2rem;font-weight:600;color:var(--text);margin-bottom:.5rem;}
.borrow-success p{font-size:.88rem;color:var(--text3);}
.borrow-submit-row{margin-top:1rem;padding-top:.25rem;}

/* -- HOME SCREEN -- */

/* Header block */
.home-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:2.4rem;flex-wrap:wrap;
}
.home-header-text{min-width:0;}
.home-greeting{
  font-size:2.4rem;font-weight:750;color:var(--text);
  letter-spacing:-.025em;line-height:1.1;
}
.home-greeting-emoji{margin-right:.2rem;}
.home-date{
  font-size:.92rem;color:var(--text2);margin-top:.45rem;
  font-family:var(--mono);letter-spacing:.02em;
}
.home-header-actions{display:flex;gap:.5rem;flex-wrap:wrap;flex-shrink:0;}

/* Section headers — clearer hierarchy with optional supporting text & actions */
.home-two-col{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start;
  margin-bottom:2.4rem;
}
.home-two-col .home-section{margin-bottom:0;}
@media(max-width:700px){.home-two-col{grid-template-columns:1fr;}}
.home-section{margin-bottom:2.4rem;}

/* ══════════════════════════════════════════════════════════════
   HOME v2 (b575) — big, graphical, colourful
   Dan's brief: "make everything BIG and graphical. Colourful. Put
   what I need to do that day front and center and don't drown me
   in minutia." Hero card → quick actions → Needs You → big day
   cards → rentals. Jobs/Finances glance cards and the two 6-week
   dot-grid calendars were removed; Recent activity and Auto-import
   moved to Insights → Activity.

   Day-type palette matches the calendar (--cal-* vars are declared
   nowhere and always carry fallbacks — keep the fallbacks).
   ══════════════════════════════════════════════════════════════ */

/* ── Hero "Today" card ─────────────────────────────────────── */
.home-hero{
  position:relative;
  border-radius:22px;
  padding:1.5rem 1.7rem 1.6rem;
  margin-bottom:1.4rem;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
}
/* Working day — (b652) quiet surface card, matching the tips-card
   treatment. "Today is on" now reads from a slim accent left rule
   and the accent-coloured ON TODAY kicker instead of the old full
   orange gradient wash, which dominated the page. */
.home-hero-shoot{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  color:var(--text);
}
.home-hero-clear{
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
}
.home-hero-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem;
}
.home-hero-greet{
  font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;
}
.home-hero-shoot .home-hero-greet{color:var(--text);}
.home-hero-clear .home-hero-greet{color:var(--text);}
.home-hero-date{
  font-size:.85rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;opacity:.75;
}
.home-hero-clear .home-hero-date{color:var(--text3);opacity:1;}
.home-hero-shoot .home-hero-date{color:var(--text3);opacity:1;}
.home-hero-kicker{
  font-size:.68rem;font-weight:800;letter-spacing:.16em;
  opacity:.8;margin-bottom:.5rem;
}
.home-hero-shoot .home-hero-kicker{color:var(--accent);opacity:1;}
.home-hero-days{display:flex;flex-direction:column;gap:.6rem;}
.home-hero-day{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;width:100%;text-align:left;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:15px;
  padding:1rem 1.1rem;
  cursor:pointer;font-family:var(--ui);color:var(--text);
  transition:background .12s, border-color .12s, transform .1s;
}
.home-hero-day:hover{background:var(--surface-hi);border-color:var(--border3);}
.home-hero-day:active{transform:scale(.99);}
.home-hero-day-main{min-width:0;}
.home-hero-job{
  font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
  line-height:1.15;overflow-wrap:anywhere;
}
.home-hero-day-lbl{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.95rem;font-weight:600;margin-top:.35rem;opacity:.95;
}
.home-hero-type-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--accent-dim);color:var(--accent);
  padding:.16rem .55rem;border-radius:999px;
  font-size:.75rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;
}
.home-hero-day-meta{
  font-size:.85rem;margin-top:.4rem;color:var(--text2);
  display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;
}
.home-hero-dot{opacity:.55;}
/* (b584/b585) Skeleton placeholders.
   .cb-skel is the shared primitive: a rounded bar tinted from
   currentColor, so it reads correctly on both the dark shoot hero and
   the light clear hero without needing a variant. The sweep is an
   ::after overlay rather than an animated background-position, which
   keeps it on the compositor instead of repainting the element.
   .home-hero-skel is the b584 boot bar, now sharing the same look. */
.cb-skel,
.home-hero-skel{
  position:relative; overflow:hidden; display:inline-block;
  border-radius:6px; vertical-align:middle;
  background:color-mix(in srgb, currentColor 13%, transparent);
}
.home-hero-skel{ height:1.05rem; width:9rem; }
.cb-skel::after,
.home-hero-skel::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb, currentColor 14%, transparent),
    transparent);
  animation:cb-skel-sweep 1.5s ease-in-out infinite;
}
@keyframes cb-skel-sweep{ to{ transform:translateX(100%); } }

/* Skeleton brief card. It reuses the .home-digest-* classes outright
   for padding, radius and grid. Real sections carry their theme colour
   as an inline --hd; the skeleton has no theme, so it just defines --hd
   as currentColor and the existing .home-digest-sec rules (tint,
   border, coloured left edge) resolve to a neutral grey on their own.
   Overriding those rules directly would not work anyway — they are
   declared later in this file at equal specificity, so they win. */
.hd-skel-sec{ --hd:currentColor; }

/* Motion is decoration here — the reserved space is the point. */
@media (prefers-reduced-motion: reduce){
  .cb-skel::after,
  .home-hero-skel::after{ animation:none; }
}
.home-hero-day-stats{
  display:flex;align-items:center;gap:1rem;flex-shrink:0;
  font-size:.8rem;
}
.home-hero-stat b{font-size:1.5rem;font-weight:800;margin-right:.22rem;}
.home-hero-stat.is-warn{color:var(--orange,#e08a2a);}
.home-hero-arrow{font-size:1.7rem;color:var(--text3);opacity:1;line-height:1;}
.home-hero-clear-line{
  font-size:1.15rem;font-weight:700;color:var(--text2);margin-bottom:.9rem;
}
.home-hero-next{
  position:relative;display:block;width:100%;text-align:left;
  background:var(--surface);
  border:1px solid var(--border2);
  border-left:5px solid var(--accent);
  border-radius:14px;padding:.95rem 2.4rem .95rem 1.1rem;
  cursor:pointer;font-family:var(--ui);color:var(--text);
  transition:border-color .12s, background .12s;
}
.home-hero-next:hover{background:var(--surface-hi);border-color:var(--border3);border-left-color:var(--accent);}
.home-hero-next-rel{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.28rem;
}
.home-hero-next-job{display:block;font-size:1.25rem;font-weight:800;letter-spacing:-.01em;}
.home-hero-next-sub{display:block;font-size:.85rem;color:var(--text3);margin-top:.18rem;}
.home-hero-next .home-hero-arrow{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--text3);}
.home-hero-next-none{
  cursor:default;border-left-color:var(--border2);
  color:var(--text3);font-size:.95rem;
}
/* Today's brief nests inside the hero — strip its card chrome so it
   reads as part of the hero rather than a second panel. */
.home-hero #home-digest{margin-top:1.1rem;}
.home-hero .home-digest-card{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:15px;
}
.home-hero-clear .home-digest-card{
  background:var(--surface);border-color:var(--border);
}

/* ── Quick actions ─────────────────────────────────────────── */
.home-qa{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.85rem;margin-bottom:2.2rem;
}
.home-qa-tile{
  --qa:var(--accent);
  display:flex;align-items:center;gap:.9rem;
  padding:1.15rem 1.25rem;
  border-radius:16px;cursor:pointer;
  font-family:var(--ui);font-size:1.02rem;font-weight:700;
  color:var(--text);text-align:left;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:5px solid var(--qa);
  transition:transform .1s, background .12s, border-color .12s, box-shadow .12s;
}
.home-qa-tile:hover{
  background:var(--surface-hi);border-color:var(--border2);border-left-color:var(--qa);
  box-shadow:0 4px 16px rgba(0,0,0,.10);
}
.home-qa-tile:active{transform:scale(.985);}
.home-qa-icon{
  flex-shrink:0;width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;line-height:1;
  background:var(--accent-dim);
  background:color-mix(in srgb, var(--qa) 16%, transparent);
  color:var(--qa);
}
.home-qa-newjob{--qa:var(--accent);}
.home-qa-snap  {--qa:#3d8ef0;}
.home-qa-find  {--qa:var(--green);}

/* ── Big day cards (schedule) ──────────────────────────────── */
.home-day-scroll{overflow-x:auto;padding-bottom:.4rem;}
.home-day-row{display:flex;align-items:stretch;gap:.6rem;min-width:min-content;}
.home-day-card{
  --dc:var(--border2);
  flex:0 0 auto;width:238px;
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-top:5px solid var(--dc);
  border-radius:16px;
  padding:.85rem .9rem 1rem;
  transition:border-color .12s, box-shadow .12s;
}
.home-day-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.10);}
.home-day-card.is-shoot {--dc:var(--cal-shoot,#3d8ef0);}
.home-day-card.is-prep  {--dc:var(--cal-prep,#20b8a0);}
.home-day-card.is-post  {--dc:var(--cal-post,#4a7de8);}
.home-day-card.is-wrap  {--dc:var(--cal-wrap,#9060d8);}
.home-day-card.is-travel{--dc:var(--cal-travel,#e05848);}
.home-day-card.is-today{--dc:var(--accent);box-shadow:0 0 0 2px var(--accent-rim);}
.home-day-card.is-tomorrow{--dc:var(--accent-rim);}
.home-day-card.is-empty{opacity:.7;width:150px;justify-content:flex-start;}
.home-day-when{
  font-size:.66rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text3);
}
.home-day-card.is-today .home-day-when{color:var(--accent);}
.home-day-num{
  font-size:2.4rem;font-weight:800;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;margin-top:.1rem;
}
.home-day-card.is-today .home-day-num{color:var(--accent);}
.home-day-mo{
  font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text3);margin-bottom:.7rem;
}
.home-day-empty-lbl{
  font-size:.85rem;color:var(--text3);font-weight:600;
}
.home-day-tiles{display:flex;flex-direction:column;gap:.5rem;}
.home-day-tile{
  --dt:var(--cal-shoot,#3d8ef0);
  display:block;width:100%;text-align:left;
  background:color-mix(in srgb, var(--dt) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--dt) 34%, transparent);
  border-radius:12px;padding:.65rem .7rem;
  cursor:pointer;font-family:var(--ui);color:var(--text);
  transition:background .12s, transform .1s;
}
.home-day-tile:hover{background:color-mix(in srgb, var(--dt) 22%, transparent);}
.home-day-tile:active{transform:scale(.98);}
.home-day-tile.is-shoot {--dt:var(--cal-shoot,#3d8ef0);background:rgba(61,142,240,.12);border-color:rgba(61,142,240,.34);}
.home-day-tile.is-prep  {--dt:var(--cal-prep,#20b8a0);background:rgba(32,184,160,.12);border-color:rgba(32,184,160,.34);}
.home-day-tile.is-post  {--dt:var(--cal-post,#4a7de8);background:rgba(74,125,232,.12);border-color:rgba(74,125,232,.34);}
.home-day-tile.is-wrap  {--dt:var(--cal-wrap,#9060d8);background:rgba(144,96,216,.12);border-color:rgba(144,96,216,.34);}
.home-day-tile.is-travel{--dt:var(--cal-travel,#e05848);background:rgba(224,88,72,.12);border-color:rgba(224,88,72,.34);}
.home-day-tile.is-shoot {background:color-mix(in srgb, var(--dt) 12%, transparent);}
.home-day-tile.is-prep  {background:color-mix(in srgb, var(--dt) 12%, transparent);}
.home-day-tile.is-wrap  {background:color-mix(in srgb, var(--dt) 12%, transparent);}
.home-day-tile.is-travel{background:color-mix(in srgb, var(--dt) 12%, transparent);}
.home-day-type{
  display:block;font-size:.64rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dt);margin-bottom:.25rem;
}
.home-day-job{
  display:block;font-size:1.02rem;font-weight:700;line-height:1.2;
  overflow-wrap:anywhere;
}
.home-day-lbl{display:block;font-size:.82rem;color:var(--text2);margin-top:.12rem;}
.home-day-meta{display:block;font-size:.74rem;color:var(--text3);margin-top:.3rem;}
.home-day-evts{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem;}
.home-day-evt{
  display:inline-flex;align-items:center;gap:.25rem;max-width:100%;
  font-family:var(--ui);font-size:.7rem;font-weight:600;
  padding:.2rem .45rem;border-radius:999px;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.home-day-evt:hover{border-color:var(--border2);color:var(--text);}
.home-day-evt.is-more{color:var(--text3);}
.home-day-gap{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.4rem;padding:0 .5rem;min-width:66px;
}
.home-day-gap-line{flex:1;width:2px;background:var(--border);border-radius:2px;min-height:14px;}
.home-day-gap-lbl{
  font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text3);white-space:nowrap;
}

/* ── Availability one-liner (replaces the 6-week dot grid) ─── */
.home-avail-line{
  margin-top:.9rem;padding:.75rem 1rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:12px;
  font-size:.92rem;font-weight:600;color:var(--text2);
}
.home-avail-line b{color:var(--text);font-weight:800;}

/* ── Rental cards (replace the second dot-grid calendar) ───── */
.home-rental-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:.75rem;
}
.home-rental-card{
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  text-align:left;font-family:var(--ui);cursor:pointer;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:5px solid #0d9488;
  border-radius:14px;padding:1rem 1.1rem;
  color:var(--text);
  transition:background .12s, border-color .12s, transform .1s;
}
.home-rental-card:hover{background:var(--surface-hi);border-color:var(--border2);border-left-color:#0d9488;}
.home-rental-card:active{transform:scale(.99);}
.home-rental-card.is-overdue{border-left-color:var(--red);}
.home-rental-card.is-overdue:hover{border-left-color:var(--red);}
.home-rental-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;
  background:rgba(13,148,136,.14);
}
.home-rental-card.is-overdue .home-rental-icon{background:var(--red-dim);}
.home-rental-body{flex:1;min-width:0;}
.home-rental-who{
  display:block;font-size:1.05rem;font-weight:700;line-height:1.2;
  overflow-wrap:anywhere;
}
.home-rental-who em{font-style:normal;font-weight:500;color:var(--text3);font-size:.9rem;}
.home-rental-meta{display:block;font-size:.8rem;color:var(--text3);margin-top:.15rem;}
.home-rental-due{
  flex-basis:100%;font-size:.8rem;font-weight:700;color:var(--text2);
  background:var(--surface2);border-radius:999px;
  padding:.28rem .7rem;align-self:flex-start;
}
.home-rental-due.is-overdue{background:var(--red-dim);color:var(--red);}

/* ── Activity footer link ──────────────────────────────────── */
.home-activity-link-wrap{margin:2.6rem 0 1.2rem;text-align:center;}
.home-activity-link{
  font-family:var(--ui);font-size:.82rem;font-weight:600;
  color:var(--text3);background:none;border:none;cursor:pointer;
  padding:.4rem .7rem;border-radius:8px;transition:color .12s, background .12s;
}
.home-activity-link:hover{color:var(--text2);background:var(--surface2);}

/* Insights → Activity host spacing */
.ins-act-feed{margin-top:.4rem;}

@media (max-width:900px){
  .home-hero{padding:1.2rem 1.2rem 1.3rem;}
  .home-hero-greet{font-size:1.4rem;}
  .home-hero-job{font-size:1.25rem;}
  .home-hero-day{flex-wrap:wrap;gap:.7rem;}
  .home-day-card{width:196px;}
}


/* (b192) Homepage availability view — a compact 6-week booked/hold/
   free grid under the Schedule timeline (which covers what's coming
   up; this covers when you're free). Each day is shaded by status so
   the month's shape reads at a glance — the question that matters
   when a producer asks "are you free the week of the 20th?". Holds
   are first-class (the timeline ignores them); a small dot marks days
   with a meeting. Tap a day to open the full calendar there. Booked =
   solid blue, Hold = dashed blue (tentative), Today = amber ring (the
   app accent), kept off the blue/hold colours so they never clash. */
.home-avail{
  margin-top:.9rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.7rem .8rem .8rem;
}
.av-summary{font-size:.82rem;font-weight:600;color:var(--text2);margin-bottom:.5rem;}
.av-legend{
  display:flex;gap:.85rem;align-items:center;
  font-size:.68rem;color:var(--text3);margin-bottom:.55rem;
}
.av-leg{display:inline-flex;align-items:center;gap:.3rem;}
.av-sw{width:.7rem;height:.7rem;border-radius:3px;display:inline-block;flex-shrink:0;box-sizing:border-box;}
.av-sw.is-booked{background:var(--cal-shoot,#3d8ef0);}
.av-sw.is-hold{background:rgba(61,142,240,.16);border:1px dashed var(--cal-shoot,#3d8ef0);}
.av-sw.is-free{background:var(--surface);border:1px solid var(--border);}
.av-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.av-dow{
  text-align:center;font-size:.6rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.03em;padding-bottom:.1rem;
}
.av-cell{
  position:relative;height:1.95rem;min-width:0;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:7px;
  background:var(--surface);color:var(--text2);
  font:inherit;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;transition:filter .12s,border-color .12s;
}
.av-cell:hover{filter:brightness(1.14);border-color:var(--border3);}
.av-num{font-size:.74rem;font-weight:500;line-height:1;}
.av-mo{font-size:.54rem;font-weight:700;text-transform:uppercase;opacity:.85;margin-right:.14em;}
.av-cell.is-hold{background:rgba(61,142,240,.16);border:1px dashed var(--cal-shoot,#3d8ef0);}
.av-cell.is-booked{background:var(--cal-shoot,#3d8ef0);border-color:var(--cal-shoot,#3d8ef0);color:#fff;}
.av-cell.is-booked .av-num{font-weight:600;}
.av-cell.is-past{opacity:.3;}
.av-cell.is-today{box-shadow:inset 0 0 0 2px var(--accent);border-color:var(--accent);}
.av-cell.is-today .av-num{font-weight:800;}
.av-evt{position:absolute;bottom:3px;right:3px;width:4px;height:4px;border-radius:50%;background:#0891b2;}
.av-cell.is-booked .av-evt{background:#fff;}
@media (max-width:700px){
  .home-avail{padding:.6rem .6rem .7rem;}
  .av-num{font-size:.7rem;}
  .av-grid{gap:2px;}
  .av-cell{height:2.1rem;}
}
.home-section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:1rem;
}
.home-section-title{
  font-size:1.05rem;font-weight:700;letter-spacing:-.01em;
  color:var(--text);display:inline-flex;align-items:baseline;gap:.55rem;
}
/* (b350) The descendant selector below only ever matched a .hst-count
 * NESTED inside the title, but every scoped dashboard emits it as a
 * SIBLING of .home-section-title inside .home-section-head — so the
 * count pill has been rendering as unstyled bare text, shoved right by
 * the head's justify-content:space-between. Both forms are matched now.
 * Fixes Next up, Just wrapped, and the Tasks/Gear/Rentals equivalents. */
.home-section-title .hst-count,
.home-section-head > .hst-count{
  font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:0;
  padding:.1rem .5rem;border-radius:10px;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text3);text-transform:none;
  flex-shrink:0;white-space:nowrap;
}
.home-section-action{
  font-size:.85rem;color:var(--text2);cursor:pointer;
  text-decoration:none;border:none;background:transparent;padding:0;
  font-family:var(--ui);font-weight:500;
}
.home-section-action:hover{color:var(--accent);}

/* Multi-action wrapper for section heads that need more than one
   right-side control (e.g. the schedule head with view-mode toggle
   + "Open calendar" link). align-items aligns the toggle pill's
   baseline with the inline-text link. */
.home-section-actions{
  display:flex; align-items:center; gap:.65rem; flex-wrap:wrap;
}

/* ────────────────────────────────────────────────────────────
   Schedule view-mode toggle (b96+)

   Two-button segmented pill that swaps the schedule from the
   horizontal date-axis strip to a stacked vertical list of day
   cards. Active button gets a filled background; inactive button
   stays ghosted. Mounted in the card head of both the home
   dashboard and per-job overview. */
.sched-view-toggle{
  display:inline-flex; gap:0;
  border:1px solid var(--border2);
  border-radius:6px;
  overflow:hidden;
  background:var(--surface2);
}
.sched-view-btn{
  background:transparent; border:none;
  font-family:var(--ui);
  font-size:.75rem; font-weight:500;
  color:var(--text3);
  padding:.32rem .7rem; line-height:1.1;
  cursor:pointer;
  transition:background .12s, color .12s;
  letter-spacing:.01em;
}
.sched-view-btn + .sched-view-btn{
  border-left:1px solid var(--border2);
}
.sched-view-btn:hover{ background:var(--surface3); color:var(--text2); }
.sched-view-btn.active{
  background:var(--surface);
  color:var(--text);
  font-weight:600;
  /* Subtle inset to suggest a pressed/selected state without
     visually shouting at the user. */
  box-shadow:inset 0 1px 0 var(--border);
}

/* ────────────────────────────────────────────────────────────
   Schedule list-view layout (b96+)

   Stacked column of day cards: each card is full-width, with a
   compact left-side date column (weekday / MAY / 12 / optional
   TODAY tag) and a right-side body that reuses the same
   .home-tl-card-row markup the strip uses. Between consecutive
   cards sits a thin "{N} days" divider so gap context survives
   the layout change. */
.sched-list{
  display:flex; flex-direction:column; gap:.55rem;
}
.sched-list-card{
  display:flex; align-items:stretch;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  transition:border-color .12s, box-shadow .12s;
}
.sched-list-card:hover{
  border-color:var(--border2);
}
.sched-list-card.is-today{
  border-color:var(--amber);
  background:var(--amber-dim, rgba(245,158,11,.06));
}
.sched-list-card-date{
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center;
  min-width:64px;
  padding:.5rem .55rem;
  background:var(--surface3);
  border-right:1px solid var(--border);
  font-family:var(--mono);
  text-align:center;
  gap:.05rem;
}
.sched-list-card.is-today .sched-list-card-date{
  background:var(--amber);
  border-right-color:var(--amber);
  color:#fff;
}
.sched-list-card-wday{
  font-size:.62rem; letter-spacing:.08em;
  color:var(--text3);
  text-transform:uppercase;
}
.sched-list-card.is-today .sched-list-card-wday{ color:rgba(255,255,255,.85); }
.sched-list-card-mo{
  font-size:.65rem; letter-spacing:.08em;
  color:var(--text2);
  text-transform:uppercase;
}
.sched-list-card.is-today .sched-list-card-mo{ color:rgba(255,255,255,.9); }
.sched-list-card-num{
  font-size:1.4rem; font-weight:700;
  color:var(--text);
  line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.sched-list-card.is-today .sched-list-card-num{ color:#fff; }
.sched-list-card-today{
  font-size:.55rem; font-weight:700; letter-spacing:.1em;
  margin-top:.15rem;
  color:#fff;
  background:rgba(255,255,255,.18);
  padding:.05rem .3rem; border-radius:3px;
}
/* Tomorrow (list mode) — amber outline + tinted date cell rather than
   today's filled amber, with a TOMORROW pill. */
.sched-list-card.is-tomorrow{
  border-color:var(--amber);
  background:var(--amber-dim, rgba(245,158,11,.05));
}
.sched-list-card.is-tomorrow .sched-list-card-date{
  background:var(--amber-dim, rgba(245,158,11,.14));
  border-right-color:var(--amber);
}
.sched-list-card.is-tomorrow .sched-list-card-num{ color:var(--amber); }
.sched-list-card-tomorrow{
  font-size:.5rem; font-weight:700; letter-spacing:.04em;
  margin-top:.15rem;
  color:var(--amber);
  background:var(--amber-dim, rgba(245,158,11,.15));
  padding:.05rem .28rem; border-radius:3px;
  white-space:nowrap;
}
.sched-list-card-body{
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  padding:.3rem 0;
}

/* Inter-card "{N} days" divider — quiet, low-weight, just enough
   to communicate gap context without competing with the cards. */
.sched-list-gap{
  display:flex; align-items:center; gap:.55rem;
  padding:.1rem .25rem;
  font-size:.7rem; letter-spacing:.04em;
  color:var(--text3);
}
.sched-list-gap-line{
  flex:1;
  height:1px;
  background:var(--border);
}
.sched-list-gap-lbl{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}

/* Narrow viewports: shrink the date column slightly so the body
   still has room for a label + meta line without wrapping every
   day-type pill. */
@media (max-width:540px){
  .sched-list-card-date{ min-width:52px; padding:.4rem .35rem; }
  .sched-list-card-num{ font-size:1.2rem; }
  .sched-view-btn{ font-size:.7rem; padding:.28rem .55rem; }
}

/* Snap Receipt CTA — big mobile-first action between alerts and
   KPIs. Designed for one-handed use: full-width on mobile, ample
   touch height (Apple HIG minimum is 44pt; we go ~80px for "in
   the field, balancing a coffee" use), accent-tinted so it reads
   as the primary action of the home page. (v4.76.0+) */
.home-snap-cta-wrap{
  /* Mobile-only — the "Snap Receipt" CTA exists for the
     in-the-field, one-handed phone workflow. On desktop the
     standard Finances → Expenses → New Expense path has plenty
     of screen real estate and a real keyboard, so the big amber
     button just adds visual noise. Hidden by default; shown
     below the same 900px breakpoint that the dashboard grids
     use to switch to single-column. (v4.78.2+) */
  display:none;
  margin:0 0 1.5rem;
}
@media(max-width:900px){
  .home-snap-cta-wrap{display:block;}
}
.home-snap-cta{
  display:flex;align-items:center;gap:1rem;width:100%;
  padding:1rem 1.2rem;min-height:78px;
  background:linear-gradient(135deg, rgba(245,166,35,.16), rgba(245,166,35,.07));
  border:1px solid rgba(245,166,35,.4);
  border-radius:14px;cursor:pointer;
  font-family:var(--ui);text-align:left;
  color:var(--text);
  transition:transform .12s, box-shadow .12s, border-color .12s;
  -webkit-tap-highlight-color:transparent;
}
.home-snap-cta:hover{
  border-color:rgba(245,166,35,.7);
  box-shadow:0 4px 14px rgba(245,166,35,.18);
  transform:translateY(-1px);
}
.home-snap-cta:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(245,166,35,.18);
}
.home-snap-cta:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
.home-snap-cta-icon{
  font-size:2rem;line-height:1;flex-shrink:0;
  width:54px;height:54px;border-radius:12px;
  background:rgba(245,166,35,.18);
  display:inline-flex;align-items:center;justify-content:center;
}
.home-snap-cta-body{
  flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0;
}
.home-snap-cta-title{
  font-size:1.15rem;font-weight:700;color:var(--text);
  letter-spacing:-.01em;
}
.home-snap-cta-sub{
  font-size:.82rem;color:var(--text2);
}
.home-snap-cta-arrow{
  font-size:1.6rem;color:var(--accent);font-weight:300;
  flex-shrink:0;line-height:1;
  transition:transform .14s;
}
.home-snap-cta:hover .home-snap-cta-arrow{
  transform:translateX(3px);
}

/* KPI row — clickable tiles with distinct primary/secondary weighting */
.tasks-kpi-row{margin:0 0 .9rem;}
#tasks-kpis .dash-ai-section{margin-bottom:.9rem;}
.home-kpi-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:.7rem;margin-bottom:2rem;
}
.home-kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:.95rem 1.05rem;display:flex;flex-direction:column;gap:.2rem;
  cursor:pointer;transition:all .14s;position:relative;overflow:hidden;
}
.home-kpi.no-action{cursor:default;}
.home-kpi.no-action:hover{border-color:var(--border);box-shadow:none;transform:none;}
.home-kpi.no-action::after{display:none;}
.home-kpi::after{
  content:"›";position:absolute;top:.7rem;right:.9rem;
  font-size:1.1rem;color:var(--text3);opacity:0;transition:opacity .14s, transform .14s;
}
.home-kpi:hover{border-color:var(--border3);box-shadow:0 1px 6px rgba(0,0,0,.05);transform:translateY(-1px);}
.home-kpi:hover::after{opacity:.7;transform:translateX(3px);}
.home-kpi.is-alert{border-color:rgba(224,72,72,.45);background:rgba(224,72,72,.04);}
.home-kpi.is-warn{border-color:rgba(240,160,32,.45);background:rgba(240,160,32,.04);}
/* (v4.97.0+) Green-tinted KPI for positive states — used by the
   Estimates pipeline 'Approved' tile when there are estimates ready
   to convert. Mirrors the is-alert / is-warn tint pattern. */
.home-kpi.is-good{border-color:rgba(64,180,96,.45);background:rgba(64,180,96,.04);}
.home-kpi-top{display:flex;align-items:center;gap:.5rem;}
.home-kpi-icon{
  font-size:1rem;width:24px;height:24px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface2);color:var(--text3);flex-shrink:0;
}
.home-kpi-lbl{
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text3);
}
.home-kpi-val{
  font-size:2.1rem;font-weight:700;color:var(--text);line-height:1;
  font-variant-numeric:tabular-nums;margin-top:.25rem;
}
.home-kpi-val.amber{color:var(--accent);}
.home-kpi-val.red  {color:var(--red);}
.home-kpi-val.green{color:var(--green);}
.home-kpi-sub{
  font-size:.76rem;color:var(--text3);font-family:var(--mono);margin-top:.1rem;
  letter-spacing:.02em;
}

/* Quick action buttons */
.home-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:2rem;}
.home-action-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--surface);border:1px solid var(--border2);border-radius:8px;
  color:var(--text2);font-family:var(--ui);font-size:.86rem;font-weight:500;
  padding:.5rem .95rem;cursor:pointer;transition:all .12s;
}
.home-action-btn:hover{background:var(--surface3);border-color:var(--border3);color:var(--text);}
.home-action-btn.primary{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;
  box-shadow:0 1px 4px rgba(245,166,35,.3);
}
.home-action-btn.primary:hover{filter:brightness(1.08);box-shadow:0 2px 8px rgba(245,166,35,.4);}
.home-action-icon{font-size:1rem;}

/* Alerts — elevated visual priority */
.home-alert{
  background:rgba(224,72,72,.08);border:1px solid rgba(224,72,72,.3);
  border-left:3px solid var(--red);
  border-radius:7px;padding:.7rem 1rem;margin-bottom:.5rem;
  font-size:.86rem;color:var(--text);
  display:flex;align-items:center;gap:.75rem;
  cursor:pointer;transition:all .1s;
}
.home-alert:hover{background:rgba(224,72,72,.13);transform:translateX(2px);}
.home-alert-icon{font-size:1.15rem;flex-shrink:0;color:var(--red);}
.home-alert-body{flex:1;min-width:0;}
.home-alert-body strong{font-weight:600;}
.home-alert-arrow{color:var(--text3);font-size:.9rem;opacity:.55;flex-shrink:0;}

/* Recent log on home — also used by the activity feed in
   the per-job dashboard. Shared utility surface. */
.home-section-card{
  background:var(--surface);border:1px solid var(--border);border-radius:9px;
  padding:.5rem .85rem;
}

/* --- end HOME --- */

/* ═══════════════════════════════════════════════════════════
   HOME — TIMELINE-FIRST DASHBOARD (v5.0.0)
   ═══════════════════════════════════════════════════════════
   Replaces the v4 Today/Upcoming/Active-Jobs triptych with a
   single chronological feed plus a consolidated decision inbox
   and per-domain glance cards. Reuses --cal-shoot/-prep/-wrap/
   -travel CSS variables so day-type colours track whatever the
   user has set in Settings → Calendar colours. */

/* Alert variant — warn (amber) for less-urgent informational
   alerts like estimates expiring. Existing .home-alert is
   already red/danger-toned; this is the milder cousin. */
.home-alert.home-alert-warn{
  border-color:rgba(240,160,32,.4);
  background:rgba(240,160,32,.06);
}
.home-alert.home-alert-warn .home-alert-icon{color:var(--accent);}

/* ── Needs You inbox ─────────────────────────────────────── */
/* (vN+) Grouped decision queue. The previous multi-column card
   grid (minmax 360px) squeezed every row's title + sub through a
   nowrap/ellipsis clip, so the detail that actually drives the
   decision — item counts, how overdue, dollar amounts — was the
   first thing to get cut off. Reworked into a single-column list
   split under three urgency-based category headers (Urgent /
   Awaiting review / Finances). Rows are full width and WRAP rather
   than truncate, so nothing relevant is ever hidden, and a thin
   left edge + the group header carry the category colour cue. */
.home-inbox{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.home-inbox-group{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.home-inbox-group-head{
  display:flex;align-items:center;gap:.5rem;
  padding:0 .1rem .05rem;
}
.home-inbox-group-emoji{font-size:.85rem;line-height:1;}
.home-inbox-group-lbl{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text2);
}
.home-inbox-group-count{
  font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:0;
  padding:.05rem .42rem;border-radius:9px;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text3);line-height:1.4;
}
/* Per-category accent on the header label so the eye can jump
   straight to the tier it cares about. */
.home-inbox-group-urgent  .home-inbox-group-lbl{color:var(--red);}
.home-inbox-group-review  .home-inbox-group-lbl{color:var(--accent);}
.home-inbox-group-finance .home-inbox-group-lbl{color:var(--green);}
.home-inbox-group-rows{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.home-inbox-row{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:.7rem .95rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--border);
  border-radius:7px;
  cursor:pointer;
  transition:background .1s, border-color .1s;
}
.home-inbox-row:hover{ background:var(--surface-hi); border-color:var(--border2); }
/* Left edge inherits the category colour; hover keeps it so the
   tier stays legible even on the active row. */
.home-inbox-group-urgent  .home-inbox-row{border-left-color:var(--red);}
.home-inbox-group-review  .home-inbox-row{border-left-color:var(--accent);}
.home-inbox-group-finance .home-inbox-row{border-left-color:var(--green);}
.home-inbox-group-urgent  .home-inbox-row:hover{border-left-color:var(--red);}
.home-inbox-group-review  .home-inbox-row:hover{border-left-color:var(--accent);}
.home-inbox-group-finance .home-inbox-row:hover{border-left-color:var(--green);}
.home-inbox-icon{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;margin-top:.05rem;
}
.home-inbox-icon-amber{background:rgba(240,160,32,.14);color:var(--accent);}
.home-inbox-icon-green{background:rgba(72,184,92,.14);color:var(--green);}
.home-inbox-icon-blue{background:rgba(61,142,240,.14);color:#3d8ef0;}
.home-inbox-icon-red{background:rgba(224,72,72,.14);color:var(--red);}
.home-inbox-icon-default{background:var(--surface2);color:var(--text3);font-weight:700;}
.home-inbox-body{flex:1;min-width:0;padding-top:.05rem;}
.home-inbox-title{
  font-size:.92rem;font-weight:600;color:var(--text);
  line-height:1.3;overflow-wrap:anywhere;
}
.home-inbox-sub{
  font-size:.79rem;color:var(--text3);margin-top:.15rem;
  line-height:1.4;overflow-wrap:anywhere;
}
.home-inbox-btn{
  flex-shrink:0;font-family:var(--ui);font-size:.8rem;font-weight:500;
  padding:.4rem .85rem;border:1px solid var(--border2);border-radius:6px;
  background:var(--surface2);color:var(--text2);cursor:pointer;
  transition:all .1s;align-self:center;
}
.home-inbox-btn:hover{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
/* (v5.33.3+) Secondary action button — quieter so the primary
   action stays the obvious next step. Used for "Dismiss" on
   notification rows where the admin's choice is "fix it" (primary)
   or "I've seen it, stop reminding me" (secondary). On hover it
   reads as a neutral / destructive-ish action rather than the
   amber/accent pull of the primary. */
.home-inbox-btn-secondary{
  background:transparent;
  color:var(--text3);
  border-color:var(--border);
}
.home-inbox-btn-secondary:hover{
  background:var(--surface3);
  color:var(--text);
  border-color:var(--border2);
}
.home-inbox-row.home-inbox-more{
  cursor:pointer;
  align-items:center;
  background:var(--surface2);
  border-left-color:var(--border);  /* neutral edge — not a category */
}
.home-inbox-empty{
  padding:1.1rem 1.2rem;font-size:.85rem;color:var(--text3);
  display:flex;align-items:center;gap:.6rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
}
.home-inbox-empty-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:rgba(72,184,92,.14);color:var(--green);font-size:.85rem;
  flex-shrink:0;
}

/* ── What's New inbox (v5.28.0+) ─────────────────────────────
   Sibling to .home-inbox above but distinct: shows recently
   auto-created entities from email ingest + pending rental
   requests. Unread items get a left-border accent and bolder
   weight; once the cursor bumps they fade to read state but
   stay visible so the admin can still trace recent activity. */
.home-inbox-new-section .hst-count-unread{
  background:var(--accent);color:#fff;
  border:none;
}
/* (v5.34.5+) Same multi-column grid + per-row tile treatment as
   home-inbox. The unread border-left strip stays — it's an inline
   indicator, not a separator. */
.home-inbox-new{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
  gap:.45rem;
}
.home-inbox-new-row{
  display:flex;align-items:center;gap:.85rem;
  padding:.7rem 1rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
  border-left:3px solid var(--border);
  cursor:pointer;
  transition:background .1s, border-color .1s;
}
.home-inbox-new-row:hover{ background:var(--surface-hi); border-color:var(--border2); border-left-color:var(--border2); }
.home-inbox-new-row-unread{
  border-left-color:var(--accent);
  background:rgba(240,160,32,.04);
}
.home-inbox-new-row-unread:hover{background:rgba(240,160,32,.08); border-left-color:var(--accent);}
.home-inbox-new-icon{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;
}
.home-inbox-new-icon-email{background:rgba(61,142,240,.14);color:#3d8ef0;}
.home-inbox-new-icon-rental{background:rgba(240,160,32,.14);color:var(--accent);}
/* (2026.05.19+) Receipt-ingest row — green tint to read as a
   completed transaction rather than something needing review. */
.home-inbox-new-icon-expense{background:rgba(80,180,120,.14);color:#50b478;}
.home-inbox-new-body{flex:1;min-width:0;}
.home-inbox-new-title{
  font-size:.92rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.home-inbox-new-row-unread .home-inbox-new-title{font-weight:700;}
/* Inline amount pill next to vendor name on receipt rows. Tabular
   numerals so amounts of different lengths still line up visually
   when several receipts arrive in a row. */
.home-inbox-new-amount{
  font-weight:500;color:var(--text2);font-size:.86rem;
  font-variant-numeric:tabular-nums;
  margin-left:.25rem;
}
.home-inbox-new-type{
  font-weight:400;color:var(--text3);font-size:.78rem;
  margin-left:.35rem;
}
.home-inbox-new-sub{
  font-size:.78rem;color:var(--text3);margin-top:.15rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.home-inbox-new-when{
  flex-shrink:0;font-size:.74rem;color:var(--text3);
  font-variant-numeric:tabular-nums;
}
/* (2026.05.19+) Inline Reply button on email rows. Compact —
   .btn-sm sizing + reduced padding so it doesn't stretch the row
   height — and uses the accent treatment to read as the primary
   action without dominating the row. */
.home-inbox-new-reply{
  flex-shrink:0;
  padding:.3rem .55rem;
  font-size:.78rem;
}
/* (b691) ✕ dismiss on email rows — quiet ghost circle at the row's
   far edge; visually subordinate to Reply so accidental clears are
   unlikely. Fixed square hit-target for touch. */
.home-inbox-new-dismiss{
  flex-shrink:0;
  width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  color:var(--text3);
  border:1px solid var(--border2);
  border-radius:50%;
  font-size:.78rem;line-height:1;
  cursor:pointer;
  transition:background .12s,color .12s;
}
.home-inbox-new-dismiss:hover{background:var(--surface3);color:var(--text);}
.home-inbox-new-row.home-inbox-new-more{
  cursor:default;
  background:var(--surface2);
  border-left-color:transparent;
  grid-column:1 / -1;  /* span all columns in the auto-fit grid */
}
.home-inbox-new-row.home-inbox-new-more:hover{background:var(--surface2);}

/* ── Nav inbox badge (v5.28.0+) ───────────────────────────────
   Small pill next to the Home label in desktop top-nav, and a
   floating dot atop the mobile bottom-nav home icon. Uses
   the accent colour to draw the eye without alarm-state red. */
.nav-inbox-badge{
  display:inline-flex;
  align-items:center;justify-content:center;
  min-width:18px;height:18px;
  padding:0 .35rem;
  margin-left:.4rem;
  background:var(--accent);color:#fff;
  border-radius:9px;
  font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums;
  line-height:1;
  vertical-align:middle;
}
.nav-inbox-badge-mobile{
  position:absolute;
  top:-4px;right:-8px;
  min-width:16px;height:16px;
  padding:0 .25rem;
  font-size:.62rem;
  margin-left:0;
}
.bnav-icon{position:relative;}

/* ── Schedule timeline — cards + connectors (v5.38.1+) ────────
   Per Dan's mockup: rounded job cards with a date column on the
   left and body on the right, joined by horizontal connectors
   whose length is proportional to the day-gap between them.
   Horizontal scroll kicks in when content exceeds container.
   Day-type colour cues come from --cal-* CSS vars so the
   calendar Settings palette propagates here without coupling. */

.home-tl{
  display:flex;flex-direction:column;gap:.65rem;
}
.home-tl-scroll{
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding:.4rem 0 .25rem;
}
.home-tl-strip{
  display:flex;align-items:center;
  min-width:max-content;
  padding:.3rem 1rem 1.2rem .25rem;
  /* Right padding gives the trailing card breathing room at
     the scroll edge so it doesn't get cropped flush against
     the container. Bottom padding leaves room for the day-gap
     label which sits below the connector line. */
}

/* ── Card ────────────────────────────────────────────────────
   Fixed-ish width (170px on desktop, narrower on mobile).
   Two-column inside: date | body. flex-shrink: 0 so cards keep
   their width when many of them queue up + scroll horizontally. */
.home-tl-card{
  flex:0 0 auto;width:172px;
  display:flex;align-items:stretch;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .12s, box-shadow .12s, transform .12s;
}
.home-tl-card:hover{
  border-color:var(--border3);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.home-tl-card.is-today{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset, 0 2px 10px rgba(0,0,0,.05);
}

/* Date column — month abbr above, big day number below,
   optional TODAY tag underneath. Fixed width keeps every card's
   date column the same size so the row reads cleanly. */
.home-tl-card-date{
  flex:0 0 50px;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;
  padding:.55rem .25rem;
  border-right:1px solid var(--border);
  background:var(--surface2);
  text-align:center;
}
.home-tl-card.is-today .home-tl-card-date{
  background:rgba(240,160,32,.08);
  border-right-color:rgba(240,160,32,.3);
}
.home-tl-card-mo{
  font-size:.65rem;font-weight:700;letter-spacing:.07em;
  color:var(--text2);text-transform:uppercase;
  line-height:1;margin-bottom:.18rem;
}
.home-tl-card-num{
  font-size:1.45rem;font-weight:800;color:var(--text);
  line-height:1;font-variant-numeric:tabular-nums;
}
.home-tl-card.is-today .home-tl-card-num{color:var(--accent);}
.home-tl-card.is-today .home-tl-card-mo {color:var(--accent);}
.home-tl-card-today{
  font-size:.58rem;font-weight:800;letter-spacing:.08em;
  color:var(--accent);margin-top:.3rem;line-height:1;
}
/* Tomorrow — distinct from today but a notch quieter: a soft accent
   ring instead of today's solid highlight, plus a TOMORROW tag so the
   next day is unmistakable at a glance without competing with today. */
.home-tl-card.is-tomorrow{
  border-color:var(--accent-rim);
  box-shadow:0 0 0 1px var(--accent-rim) inset, 0 2px 10px rgba(0,0,0,.05);
}
.home-tl-card.is-tomorrow .home-tl-card-date{
  background:rgba(240,160,32,.045);
  border-right-color:var(--accent-rim);
}
.home-tl-card.is-tomorrow .home-tl-card-num{color:var(--accent);}
.home-tl-card-tomorrow{
  font-size:.47rem;font-weight:800;letter-spacing:.02em;
  color:var(--accent);margin-top:.3rem;line-height:1.05;
  white-space:nowrap;opacity:.9;
}

/* Body column — stack of clickable rows, one per scheduled day
   on this date. Most cards have one row; same-date overlap from
   multiple jobs stacks here. */
.home-tl-card-body{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  padding:.4rem 0;
}
.home-tl-card-row{
  /* (b88) Was a <button> with display:block; now a <div> with role=button
     because it nests a real <button> for the inline edit affordance.
     Switched to flex so the main content and edit button align in
     a single row. */
  display:flex;align-items:center;gap:.3rem;
  width:100%;text-align:left;
  background:none;border:none;cursor:pointer;
  padding:.25rem .65rem;
  font-family:var(--ui);
  border-left:3px solid transparent;
  transition:background .1s, border-color .1s;
}
.home-tl-card-row + .home-tl-card-row{
  border-top:1px solid var(--border);
  margin-top:.15rem;padding-top:.4rem;
}
.home-tl-card-row:hover{background:var(--surface-hi, var(--surface2));}
.home-tl-card-row:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.home-tl-card-row-shoot {border-left-color:var(--cal-shoot,  #3d8ef0);}
.home-tl-card-row-prep  {border-left-color:var(--cal-prep,   #20b8a0);}
.home-tl-card-row-post  {border-left-color:var(--cal-post,   #4a7de8);}
.home-tl-card-row-wrap  {border-left-color:var(--cal-wrap,   #9060d8);}
.home-tl-card-row-travel{border-left-color:var(--cal-travel, #e05848);}
/* (2026.05.22+) Hold accent — matches the calendar hold colour
   so a hold card on the job-overview timeline reads the same as
   its calendar chip. */
.home-tl-card-row-hold  {border-left-color:#d97706;}
/* (b91) Event accent — muted indigo. Distinct from the day-type
   palette (warm/cool primaries) and the amber hold, so events
   read as their own category without competing with the day rows
   that carry the production-critical info. The event_type emoji
   (🤝 / 🔍 / 📞 / 📦 / ...) does the categorical lifting; the
   row's left border is a category indicator only. */
.home-tl-card-row-event {border-left-color:#7785c4;}
/* (b88) Inner wrapper for the row's text content — the flex item
   that takes up all the slack space, leaving room for the edit
   button to sit at the right edge. */
.home-tl-card-row-main{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
}
/* (b88) Inline edit (✎) button on day rows. Subtle until the row
   is hovered/focused — keeps the strip visually clean during
   passive scanning. On mobile (no hover) it stays softly visible
   so touch users can find it. */
.home-tl-card-edit{
  flex:0 0 auto;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  padding:0;background:transparent;border:none;border-radius:4px;
  color:var(--text3);font-size:.85rem;line-height:1;cursor:pointer;
  opacity:.4;          /* desktop default — faint */
  transition:opacity .12s, background .12s, color .12s;
}
.home-tl-card-row:hover .home-tl-card-edit,
.home-tl-card-row:focus-within .home-tl-card-edit{ opacity:1; }
.home-tl-card-edit:hover{
  background:var(--surface2);
  color:var(--text);
}
@media (hover: none){
  /* Touch devices — never .home-tl-card-row:hover fires reliably;
     keep the edit affordance visible at moderate opacity so users
     can find it. */
  .home-tl-card-edit{ opacity:.7; }
}
.home-tl-card-job{
  font-size:.84rem;font-weight:700;color:var(--text);
  line-height:1.18;
  /* 2-line clamp avoids ugly mid-word truncation while still
     bounding card height. Webkit prefix needed for full support. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.home-tl-card-desc{
  display:flex;align-items:center;gap:.3rem;margin-top:.15rem;
  font-size:.72rem;color:var(--text2);font-weight:500;
  white-space:nowrap;overflow:hidden;
}
.home-tl-card-emoji{font-size:.78rem;flex-shrink:0;}
.home-tl-card-lbl{
  overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.home-tl-card-empty{
  padding:.35rem .65rem;
  font-size:.78rem;color:var(--text3);
  font-style:italic;
}

/* ── Connector (proportional gap) ─────────────────────────────
   Lives between cards. flex-grow set inline based on gap days;
   line stretches to fill the resulting width. Vertical caps at
   each end + day-count label centered below the line. */
.home-tl-gap{
  flex:0 1 auto;          /* flex-grow set inline based on gap */
  display:flex;flex-direction:column;align-items:stretch;
  justify-content:center;
  padding:0 .4rem;
  align-self:center;
  position:relative;
}
.home-tl-gap-bar{
  display:flex;align-items:center;height:14px;
}
.home-tl-gap-cap{
  flex:0 0 1.5px;width:1.5px;height:14px;
  background:var(--text2);
}
.home-tl-gap-line{
  flex:1 1 auto;height:1.5px;
  background:var(--text2);
  position:relative;            /* anchor for absolutely-positioned event dots (b65) */
}
.home-tl-gap-lbl{
  text-align:center;font-size:.78rem;font-weight:600;
  color:var(--text2);margin-top:.4rem;line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
}

/* ── Broken connector (2026.05.22+b85, glyph refined b86, b87) ─
   For unusually long gaps (>14 days) the proportional sizing
   blows the timeline out to thousands of pixels for a single
   span. The break variant caps the visual width and inserts a
   vertical zigzag glyph across the line — the classic chart-axis
   break — so the user reads "not to scale" instantly. The real
   day count stays in the label below, made bolder to claim
   visual primacy since the line itself no longer encodes the
   span.
   History:
     b85: two diagonal slash marks via ::before/::after — read as
          clumsy double-slash.
     b86: horizontal wave (S-curve) — read as "approximately",
          not as a break.
     b87: vertical zigzag (4-segment, alternating sides) in the
          darker --text3 — reads as a genuine break the moment
          you see it. */
.home-tl-gap-break .home-tl-gap-line {
  /* Carve a 16px transparent zone — narrower than the b86 wave's
     28px because the zigzag is only ~5px wide and a tighter cut
     reads more "interrupted" / less "decorated". */
  background: linear-gradient(
    to right,
    var(--text2) 0,
    var(--text2) calc(50% - 8px),
    transparent calc(50% - 8px),
    transparent calc(50% + 8px),
    var(--text2) calc(50% + 8px),
    var(--text2) 100%
  );
}
.home-tl-gap-break-mark{
  position:absolute;
  top:50%;
  left:50%;
  width:7px;
  height:14px;
  transform:translate(-50%, -50%);
  /* (b87) Slightly darker than the line itself so the zigzag
     has visual weight against the surface. var(--text3) sits
     one step muted from --text2 in both light and dark themes. */
  color:var(--text3);
  pointer-events:none;
  overflow:visible;       /* corners of the zigzag may protrude */
}
.home-tl-gap-break .home-tl-gap-lbl {
  color: var(--text);
  font-weight: 700;
}

/* ── Event dots on the schedule timeline (b65) ─────────────────
   Small clickable markers floating on the gap-connector line.
   Sized to feel peripheral compared to the day cards but big
   enough to tap on mobile. Cyan family matches the calendar
   event chips so the visual language is consistent across
   home / calendar / job-dashboard. */
.home-tl-evt-dot{
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
  width:18px;
  height:18px;
  padding:0;
  margin:0;
  border-radius:50%;
  background:var(--surface);
  border:1.5px solid #0891b2;
  color:#0891b2;
  font-size:.66rem;             /* shrink emoji to fit */
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:2;
  transition:transform .12s, box-shadow .12s, background .12s;
}
.home-tl-evt-dot:hover{
  transform:translate(-50%, -50%) scale(1.35);
  background:rgba(8,145,178,.18);
  box-shadow:0 2px 8px rgba(8,145,178,.4);
  z-index:3;
}
.home-tl-evt-dot-more{
  font-size:.62rem;
  font-weight:700;
  font-family:var(--mono);
  color:var(--text2);
  border-color:var(--text2);
}
/* (2026.05.22+b85) Broken-gap aggregate badge — single centered
   pill summarising events in a non-to-scale span. Wider than a
   normal dot (auto width) since it carries a count + icon. */
.home-tl-evt-dot-gap-agg{
  width:auto;
  min-width:34px;
  padding:0 .5rem;
  height:20px;
  border-radius:11px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;     /* sit above the slash marks */
  background:var(--bg-elev1, var(--surface));
  font-size:.66rem;
  letter-spacing:.02em;
}

/* On-card event strip — events that fall on a day-card date.
   Smaller dots, in a row at the bottom of the card body.
   Secondary visual weight to the day rows above. */
.home-tl-card-evts{
  display:flex;
  align-items:center;
  gap:.2rem;
  padding:.25rem .5rem .35rem;
  border-top:1px dashed var(--border);
  cursor:default;
}
.home-tl-card-evt-dot{
  width:18px;
  height:18px;
  padding:0;
  margin:0;
  border-radius:50%;
  background:rgba(8,145,178,.14);
  border:1px solid rgba(8,145,178,.4);
  color:#0891b2;
  font-size:.62rem;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:transform .12s, background .12s;
}
.home-tl-card-evt-dot:hover{
  transform:scale(1.2);
  background:rgba(8,145,178,.3);
}
.home-tl-card-evt-more{
  font-size:.62rem;
  font-weight:700;
  font-family:var(--mono);
  color:var(--text3);
  padding-left:.15rem;
  letter-spacing:.02em;
}

/* ── Terminal "+N beyond" row and empty state ───────────────── */
.home-tl-far{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem .85rem;background:var(--surface2);
  border:1px dashed var(--border2);border-radius:8px;
  font-size:.82rem;color:var(--text3);cursor:pointer;
  font-family:var(--ui);text-align:left;width:100%;
  transition:all .1s;
}
.home-tl-far:hover{
  border-color:var(--border3);color:var(--text2);
  background:var(--surface-hi, var(--surface2));
}
.home-tl-far-link{color:var(--accent);font-weight:500;}
.home-tl-empty{
  display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1rem;background:var(--surface);
  border:1px dashed var(--border);border-radius:8px;
  font-size:.86rem;color:var(--text3);
}
.home-tl-empty-icon{font-size:1.1rem;}

/* ── Two-column glance footer (Jobs / Finances) ──────────── */
.home-glance{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin:1.6rem 0 1.4rem;
}
.home-glance-card{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:1rem 1.2rem;cursor:pointer;transition:all .12s;
  display:flex;flex-direction:column;gap:.5rem;
}
.home-glance-card:hover{
  border-color:var(--border3);box-shadow:0 1px 8px rgba(0,0,0,.05);
  transform:translateY(-1px);
}
.home-glance-h{
  display:flex;align-items:center;gap:.55rem;
  font-size:.95rem;font-weight:700;color:var(--text);
  padding-bottom:.5rem;border-bottom:1px solid var(--border);
}
.home-glance-h-icon{font-size:1.05rem;}
.home-glance-h-link{
  margin-left:auto;color:var(--text3);font-weight:400;font-size:1rem;
  transition:transform .12s, color .12s;
}
.home-glance-card:hover .home-glance-h-link{
  color:var(--accent);transform:translateX(3px);
}
.home-glance-stats{
  display:flex;flex-direction:column;gap:.3rem;
}
.home-glance-stat{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.85rem;
}
.home-glance-stat-faint{opacity:.55;}
.home-glance-stat-lbl{color:var(--text3);}
.home-glance-stat-val{
  font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;
  text-align:right;
}
.home-glance-stat-val.is-warn{color:var(--accent);}
.home-glance-stat-val.is-bad {color:var(--red);}
.home-glance-delta{
  font-size:.7rem;font-weight:600;margin-left:.3rem;
  padding:.05rem .35rem;border-radius:8px;font-variant-numeric:tabular-nums;
}
.home-glance-delta.is-good{color:var(--green);background:rgba(72,184,92,.12);}
.home-glance-delta.is-bad {color:var(--red);  background:rgba(224,72,72,.12);}
.home-glance-faint{color:var(--text3);font-weight:400;font-size:.78rem;}

/* ── Recent activity collapse toggle ─────────────────────── */
.home-act-section{margin-top:.8rem;}
.home-act-toggle{
  display:flex;align-items:center;gap:.55rem;
  background:transparent;border:none;cursor:pointer;
  padding:.35rem 0;width:100%;text-align:left;
  color:var(--text);font-family:var(--ui);
}
.home-act-toggle:hover .home-section-title{color:var(--accent);}
.home-act-toggle .home-section-title{margin:0;}
.home-act-toggle-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:auto;flex-shrink:0;
  color:var(--text3);font-size:1.65rem;line-height:1;width:1.6rem;
  transition:transform .18s, color .12s;
}
.home-act-toggle:hover .home-act-toggle-arrow{color:var(--accent);}
.home-act-toggle-arrow.is-open{transform:rotate(90deg);}
.home-act-body{margin-top:.45rem;}
/* Recent activity: keep the collapsed control compact and content-
   width instead of stretching into a full-width bar with the arrow
   floating off on the far right. Scoped to .home-act-section so the
   shared .home-act-toggle base rule still drives the full-width
   cron-diagnostics toggle (which carries a status pill). */
.home-act-section .home-act-toggle{ width:auto; display:inline-flex; }
.home-act-section .home-act-toggle-arrow{
  margin-left:.35rem; font-size:1.15rem; width:1.1rem;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — collapse glance to single column, tighten timeline
   ═══════════════════════════════════════════════════════════ */
@media (max-width:780px){
  .home-glance{grid-template-columns:1fr;gap:.7rem;margin:1.2rem 0 1rem;}
  .home-glance-card{padding:.85rem .95rem;}
  /* Schedule cards — narrower so they fit a phone viewport.
     ~150px wide means today + a connector + one more card just
     fit a 380px screen, with scroll for the rest. */
  .home-tl-card{width:150px;border-radius:12px;}
  .home-tl-card-date{flex-basis:48px;padding:.45rem .25rem;}
  .home-tl-card-num{font-size:1.25rem;}
  .home-tl-card-mo{font-size:.6rem;}
  .home-tl-card-today{font-size:.54rem;margin-top:.22rem;}
  .home-tl-card-tomorrow{font-size:.42rem;margin-top:.22rem;}
  .home-tl-card-job{font-size:.8rem;}
  .home-tl-card-desc{font-size:.68rem;}
  .home-tl-card-row{padding:.22rem .55rem;}
  .home-tl-gap{padding:0 .25rem;}
  .home-tl-gap-lbl{font-size:.72rem;margin-top:.3rem;}
  .home-inbox-row{padding:.65rem .85rem;gap:.65rem;}
  .home-inbox-icon{width:26px;height:26px;font-size:.85rem;}
  .home-inbox-title{font-size:.86rem;}
  .home-inbox-sub{font-size:.72rem;}
  .home-inbox-btn{padding:.32rem .65rem;font-size:.74rem;}
}


/* -- USER ROLE PILL -- */
.role-badge{font-family:var(--mono);font-size:.7rem;padding:.15rem .5rem;border-radius:4px;border:1px solid;white-space:nowrap;vertical-align:middle;}
.role-admin   {color:var(--accent);border-color:rgba(240,160,32,.4);background:rgba(240,160,32,.1);}
.role-operator{color:var(--green);border-color:rgba(72,184,92,.4);background:rgba(72,184,92,.1);}
.role-viewer  {color:var(--text3);border-color:var(--border2);background:var(--surface2);}
.role-renter  {color:#a878c8;border-color:rgba(168,120,200,.4);background:rgba(168,120,200,.1);}

/* -- GROUP SWITCHER (multi-group membership) -- */
.gswitch{position:relative;display:inline-flex;align-items:center;}
.gswitch-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface2);border:1px solid var(--border2);
  border-radius:6px;padding:.22rem .5rem;cursor:pointer;color:var(--text);font-size:.8rem;line-height:1;max-width:240px;}
.gswitch-btn:hover{border-color:var(--border3);}
.gswitch-cur{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}
.gswitch-caret{color:var(--text3);font-size:.7rem;}
.gswitch-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:230px;background:var(--surface);
  border:1px solid var(--border2);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.28);padding:.35rem;z-index:600;}
.gswitch-menu[hidden]{display:none;}
.gswitch-menu-head{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);
  padding:.3rem .5rem .35rem;}
.gswitch-item{display:flex;align-items:center;gap:.5rem;width:100%;background:none;border:none;cursor:pointer;
  padding:.45rem .5rem;border-radius:6px;color:var(--text);text-align:left;}
.gswitch-item:hover{background:var(--surface2);}
.gswitch-item.active{background:var(--surface2);}
.gswitch-name{flex:1;font-size:.86rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gswitch-check{width:1em;text-align:center;color:var(--accent);font-size:.8rem;}

/* -- NEW-USER "add existing person" note -- */
.nu-note{font-size:.82rem;line-height:1.4;padding:.5rem .65rem;border-radius:6px;margin:.1rem 0 .5rem;border:1px solid;}
.nu-note-ok{color:var(--green);border-color:rgba(72,184,92,.4);background:rgba(72,184,92,.1);}
.nu-note-warn{color:var(--accent);border-color:rgba(240,160,32,.4);background:rgba(240,160,32,.1);}

/* -- BOOKING STATUS -- */
.bk-badge{font-family:var(--mono);font-size:.72rem;padding:.15rem .45rem;border-radius:4px;border:1px solid;white-space:nowrap;}
.bk-pending {color:var(--accent);border-color:rgba(240,160,32,.4);background:rgba(240,160,32,.1);}
.bk-approved{color:var(--green);border-color:rgba(72,184,92,.4);background:rgba(72,184,92,.1);}
.bk-rejected{color:var(--red);border-color:rgba(224,72,72,.4);background:rgba(224,72,72,.1);}

/* -- BOOKING CARD -- */
/* -- CALENDAR -- */
.cal-header{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;flex-wrap:wrap;
  padding:.65rem .7rem;background:var(--surface);border:1px solid var(--border);border-radius:9px;
}
.cal-title{
  font-size:1.25rem;font-weight:700;color:var(--text);letter-spacing:-.01em;
  padding:0 .3rem;
}
.cal-nav{
  display:flex;gap:.15rem;padding:.12rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:7px;
}
.cal-nav-btn{
  background:transparent;border:none;border-radius:5px;
  color:var(--text2);font-family:var(--ui);font-size:.85rem;font-weight:500;
  padding:.3rem .65rem;cursor:pointer;transition:all .1s;
  display:inline-flex;align-items:center;justify-content:center;min-width:26px;
}
.cal-nav-btn:hover{background:var(--surface);color:var(--text);}
.cal-nav-today{
  padding:.3rem .8rem;font-weight:600;
  border-left:1px solid var(--border);border-right:1px solid var(--border);border-radius:0;
}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  border-left:1px solid var(--border);border-top:1px solid var(--border);
  border-radius:9px 9px 0 0;overflow:hidden;
  min-width:560px;
}
.cal-day-label{
  background:var(--surface2);border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:.5rem .4rem;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text3);text-align:center;
}
.cal-cell{
  background:var(--surface);border-right:1px solid var(--border);
  /* (b860) Grows with the week's event-lane count (set as --cal-lanes on
     .cal-week-section) so overlaid lanes never overflow into the next
     week's row: 30px date offset + n*(~22px lane incl. borders + 3px
     gap) + padding. */
  min-height:max(95px, calc(38px + var(--cal-lanes,0)*26px));
  padding:.4rem .45rem;vertical-align:top;cursor:default;
  transition:background .08s;
}
.cal-cell.today{
  background:rgba(240,160,32,.06);
  box-shadow:inset 0 2px 0 var(--accent);
}
.cal-cell.other-month{background:var(--surface2);}
.cal-cell.other-month .cal-cell-date{opacity:.35;}
.cal-cell-date{
  font-size:.78rem;font-weight:600;color:var(--text3);margin-bottom:.35rem;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;
}
.cal-cell.today .cal-cell-date{background:var(--accent);color:#fff;}

/* (v5.71.0+) Click-drag range highlight while creating a hold by
   dragging across calendar cells. Tinted with the hold colour (amber)
   so the visual matches the actual hold chip that'll appear once the
   modal saves. user-select:none stops the gesture from selecting
   text on the way through. */
.cal-cell.cal-drag-in-range,
.week-cell.cal-drag-in-range{
  background:rgba(217,119,6,.15) !important;
  box-shadow:inset 0 0 0 1px rgba(217,119,6,.35);
}
.cal-cell.cal-drag-anchor,
.week-cell.cal-drag-anchor{
  background:rgba(217,119,6,.25) !important;
}
/* (b257) Drag-to-move affordances. Movable blocks show a grab cursor; the
   one being dragged fades + drops out of hit-testing so elementFromPoint can
   read the cell beneath it; the target date cell lights up in the accent. */
.cal-event-block.cal-movable{ cursor:grab; }
.cal-event-block.cal-moving{ opacity:.45; pointer-events:none; cursor:grabbing; transform:none; }
body.cal-move-dragging{ cursor:grabbing; user-select:none; -webkit-user-select:none; }
.cal-cell.cal-move-target{
  background:var(--accent-dim) !important;
  box-shadow:inset 0 0 0 2px var(--accent);
}
.cal-grid, .week-grid, .cal-week-section, .cal-week-dates{
  user-select:none;
  -webkit-user-select:none;
}
/* Spanning event blocks — overlaid on top of day cells */
.cal-week-section{
  grid-column:1/-1;
  position:relative;
  border-bottom:1px solid var(--border);
}
.cal-week-dates{
  display:grid;grid-template-columns:repeat(7,1fr);
}
.cal-week-events{
  position:absolute;
  top:30px;left:0;right:0;
  display:flex;flex-direction:column;gap:3px;
  padding:0 2px 5px;
  pointer-events:none;
}
.cal-event-lane{
  display:grid;grid-template-columns:repeat(7,1fr);
  min-height:20px;
  pointer-events:none;
}
.cal-event-block{
  font-size:.7rem;font-weight:600;letter-spacing:-.005em;
  padding:.18rem .45rem;border-radius:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;line-height:1.3;
  pointer-events:all;
  transition:filter .1s, transform .1s;
}
.cal-event-block:hover{filter:brightness(1.1);transform:translateY(-1px);}
/* Legacy chip styles kept for week view */
.cal-chip{
  font-size:.68rem;font-family:var(--mono);
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:3px;padding:.1rem .3rem;margin-bottom:.2rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;transition:border-color .1s;display:block;
}
.cal-chip:hover{border-color:var(--border3);}
.cal-chip.pending {border-left:2px solid var(--accent);}
.cal-chip.approved{border-left:2px solid var(--green);}
.cal-chip.shoot-day{border-left:2px solid var(--accent);background:rgba(240,160,32,.12);color:var(--accent);}
.cal-scroll-wrap{overflow-x:auto;border-radius:0 0 9px 9px;border:1px solid var(--border);border-top:none;}
.cal-scroll-wrap .cal-grid{border-radius:0;border:none;}

/* v5.49.0: hover-linking. When the user hovers any shoot-day element
   (event block in month view, chip in week view) we add this class to
   every sibling sharing the same job_id. Subtle outline + lift; reads
   as "these dates belong together" without fighting the existing
   per-type colouring. */
.cal-event-block.cal-day-linked,
.cal-chip.cal-day-linked{
  outline:2px solid var(--accent);
  outline-offset:1px;
  filter:brightness(1.08);
  z-index:2;
  position:relative;
}

/* Legend moved to a cleaner card */
.cal-legend{
  display:flex;gap:1rem;margin-top:.9rem;flex-wrap:wrap;
  padding:.6rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;
}
.cal-leg-item{
  display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--text2);
  font-weight:500;
}
.cal-leg-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0;}

/* -- USERS TABLE -- */
.users-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.users-table th{
  text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text3);padding:.5rem .75rem;border-bottom:2px solid var(--border2);
}
.users-table td{padding:.65rem .75rem;border-bottom:1px solid var(--border);color:var(--text2);}
.users-table tr:last-child td{border-bottom:none;}
.users-table td:first-child{font-weight:500;color:var(--text);}

/* -- USERS VIEW -- */
.user-role-group{margin-bottom:1.2rem;}
.user-role-head{
  display:flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text3);margin:0 0 .55rem;
}
.user-role-head::after{
  content:"";flex:1;height:1px;background:var(--border);
}
.user-role-head .urh-count{
  font-family:var(--mono);letter-spacing:0;text-transform:none;
  font-weight:500;font-size:.72rem;color:var(--text3);
  padding:.05rem .4rem;border:1px solid var(--border);border-radius:8px;
}

.user-card{
  position:relative;
  background:var(--surface);border:1px solid var(--border);border-radius:9px;
  padding:.9rem 1.05rem .9rem 1.2rem;
  display:flex;align-items:flex-start;gap:.95rem;
  transition:all .14s;margin-bottom:.5rem;
}
.user-card::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  border-radius:0 3px 3px 0;
}
.user-card.role-admin::before   {background:var(--accent);}
.user-card.role-operator::before{background:var(--green);}
.user-card.role-viewer::before  {background:var(--border3);}
.user-card.role-renter::before  {background:#a878c8;}
.user-card:hover{border-color:var(--border3);box-shadow:0 1px 6px rgba(0,0,0,.04);}
.user-card.is-self{background:var(--accent-dim);border-color:var(--accent);}

.user-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;letter-spacing:.02em;
  background:var(--surface2);border:1px solid var(--border);color:var(--text2);
}
.user-card.role-admin .user-avatar{background:rgba(240,160,32,.12);border-color:rgba(240,160,32,.35);color:var(--accent);}
.user-card.role-operator .user-avatar{background:rgba(72,184,92,.12);border-color:rgba(72,184,92,.35);color:var(--green);}
.user-card.role-renter .user-avatar{background:rgba(168,120,200,.12);border-color:rgba(168,120,200,.35);color:#a878c8;}

.user-info{flex:1;min-width:0;}
.user-name-row{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.user-name{font-weight:650;font-size:1rem;color:var(--text);letter-spacing:-.01em;}
.user-you-tag{
  font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  background:var(--accent);color:#fff;
  padding:.1rem .4rem;border-radius:4px;
}
.user-fullname{font-size:.82rem;color:var(--text3);margin-top:.12rem;}
.user-meta{
  font-size:.74rem;color:var(--text3);font-family:var(--mono);
  margin-top:.3rem;display:flex;gap:.9rem;flex-wrap:wrap;
}
.user-meta-item{display:inline-flex;align-items:center;gap:.3rem;}
.user-meta-icon{opacity:.6;}
/* Email verification status pill in the user-card meta row. */
.user-verif.is-verified{color:var(--green);}
.user-verif.is-verified .user-meta-icon{opacity:1;color:var(--green);}
.user-verif.is-unverified{color:var(--red);font-weight:600;}
.user-verif.is-unverified .user-meta-icon{opacity:1;color:var(--red);}

.user-actions{
  display:flex;align-items:center;gap:.35rem;flex-shrink:0;flex-wrap:wrap;
}
.user-role-select{
  background:var(--surface2);border:1px solid var(--border);color:var(--text2);
  border-radius:6px;padding:.3rem .5rem;font-size:.78rem;font-family:var(--ui);
  cursor:pointer;transition:all .1s;
}
.user-role-select:hover:not(:disabled){background:var(--surface3);border-color:var(--border3);color:var(--text);}
.user-role-select:disabled{opacity:.4;cursor:not-allowed;}

/* Permissions legend */
.user-perms{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:1.1rem 1.35rem;margin-top:.5rem;
}
.user-perms-head{
  display:flex;align-items:center;gap:.5rem;
  font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--text2);margin-bottom:.9rem;padding-bottom:.55rem;
  border-bottom:1px solid var(--border);
}
.user-perm-row{
  display:flex;align-items:baseline;gap:.85rem;padding:.45rem 0;
  font-size:.82rem;color:var(--text3);line-height:1.5;
}
.user-perm-row + .user-perm-row{border-top:1px dashed var(--border);}
.user-perm-label{
  font-weight:700;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;
  width:80px;flex-shrink:0;
}
.user-perm-label.admin   {color:var(--accent);}
.user-perm-label.operator{color:var(--green);}
.user-perm-label.viewer  {color:var(--text2);}
.user-perm-label.renter  {color:#a878c8;}

/* -- SECTION HEADING (reusable) -- */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.section-title{font-size:1.05rem;font-weight:600;color:var(--text);}
.section-sub{font-size:.82rem;color:var(--text3);margin-top:.15rem;}

/* -- RESPONSIVE -- */
@media(max-width:700px){
  /* ── CineBaseIcons (b541) — monochrome line-icon glyph shim ──────
   A tiny (13KB) webfont mapping the emoji codepoints used across
   CineBase to Lucide line icons (ISC). Prepended to the font stacks
   below, it makes every 📦🎬📅… — static HTML, JS templates, PHP
   share pages, CSS content — render as a monochrome line icon in
   currentColor, with zero call-site edits. unicode-range keeps it
   scoped to exactly the mapped codepoints; all other characters
   fall through to the normal stacks. Rebuild notes: /home/claude
   session tooling — lucide-static + nanoemoji (glyf) + fontTools
   (FE0F/FE0E mapped to empty glyphs; explicit FE0F selectors are
   stripped from source since Chrome forces colour-emoji for them). */
@font-face{
  font-family:'CineBaseIcons';
  src:url('grip-icons.woff2?v=1') format('woff2');
  font-display:block;
  unicode-range:U+2139,U+2302,U+2315,U+231B,U+2328,U+2398-2399,U+23F0-23F1,U+23F3,U+23F8,U+25A6,U+2600-2601,U+2610-2611,U+2615,U+2630,U+2693,U+2699,U+26A0-26A1,U+26B2,U+26C5,U+26C8,U+26D3-26D4,U+2705,U+2708-2709,U+270B,U+270D-270F,U+2728,U+274C,U+2753,U+2795,U+2B50,U+1F305-1F306,U+1F308,U+1F310,U+1F319,U+1F321,U+1F324,U+1F326-1F328,U+1F32B,U+1F331,U+1F389,U+1F392,U+1F39E,U+1F3A4-1F3A5,U+1F3A8,U+1F3AC,U+1F3AF,U+1F3B2,U+1F3C1,U+1F3C6,U+1F3E2,U+1F3E5,U+1F3EA,U+1F3F7,U+1F422,U+1F440-1F441,U+1F44B,U+1F464-1F465,U+1F480,U+1F4A1,U+1F4A4-1F4A5,U+1F4AC,U+1F4B0-1F4B1,U+1F4B3,U+1F4B5,U+1F4B8,U+1F4BD-1F4BE,U+1F4C1-1F4C2,U+1F4C4-1F4C5,U+1F4C7-1F4C8,U+1F4CA-1F4D0,U+1F4D6,U+1F4DA,U+1F4DC-1F4DE,U+1F4E4-1F4E8,U+1F4EC-1F4ED,U+1F4F7-1F4F8,U+1F501,U+1F504,U+1F50D-1F50E,U+1F510-1F512,U+1F514-1F515,U+1F517,U+1F525,U+1F527,U+1F53A-1F53B,U+1F552-1F553,U+1F558,U+1F578,U+1F5A8,U+1F5BC,U+1F5C2,U+1F5C4,U+1F5D1,U+1F5D3,U+1F680,U+1F697,U+1F69A-1F69B,U+1F6A8,U+1F6AA-1F6AB,U+1F6CB,U+1F6E0-1F6E1,U+1F916,U+1F91D,U+1F9CA,U+1F9F0,U+1F9FE,U+1FA7A,U+1FA91,U+1FA9E-1FA9F;
}

:root{--header-h:50px;--bnav-h:64px;}

  /* -- Header: strip down to logo + user menu -- */
  /* (v2026.07+) theme/lock/settings moved inside the user-pill menu,
     which takes no header width — so they no longer need hiding here
     and become usable on mobile too (bottom nav covers the tabs). */
  .hdr-tabs,.hdr-search{display:none!important;}
  .hdr-right{gap:.3rem;}

  /* -- Bottom nav visible -- */
  .bottom-nav{display:block;}
  .app-body{padding-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));}
  /* Renter portal: hide app bottom-nav (its tabs aren't part of the renter UX). */
  body.is-renter .bottom-nav{display:none!important;}

  /* -- Hide desktop-only elements -- */
  .rail,.right-panel,.resize-handle,
  .gear-controls,.jph-contacts-row{display:none!important;}
  .gtable{display:none!important;}
  .mob-content{display:block!important;}

  /* -- Job panel header on mobile (2026.05.27+ b136) --
     Keep .job-panel-header rendered so the phase-tabs-row (Plan ·
     Schedule · Gear · Shoot · Wrap) and the Shoot-phase day-tabs-row
     (with its ＋ Day pill) remain reachable. The desktop chrome
     inside it — back button, title row, meta, action buttons — is
     hidden because mobile uses the bottom nav for back/navigation
     and the dashboard cards surface job actions where they matter.

     Without this override, .job-panel-header had display:none on
     mobile, which buried the new phase nav entirely — leaving the
     user on the default Plan phase with no path to add a shoot day. */
  .job-panel-header{ padding:0; }
  .job-panel-header .jph-inner{
    background:transparent;border:none;border-radius:0;overflow:visible;
  }
  .job-panel-header .jph-top{ display:none!important; }

  /* -- Views: stack vertically, scroll normally --
     overscroll-behavior-y keeps a bounce at the top of the view from
     chaining out to the shell while pull-to-refresh (b872) owns the
     gesture. */
  .view.active{flex-direction:column;overflow-y:auto;overscroll-behavior-y:contain;}
  #view-home,#view-calendar,#view-contacts,#view-users,
  #view-inventory,#view-borrow,#view-settings{overflow-y:auto;}
  #main-panel{overflow-y:auto;flex:1;}
  #home-content,#calendar-content,#contacts-content,
  #users-content,#borrow-admin-content{overflow-y:visible;flex:none;}

  /* -- Content padding (mobile) — single declaration for the
     shared container; calendar still gets its tighter top. */
  #home-content,#contacts-content,
  #users-content,#borrow-admin-content{padding:1rem;}
  #settings-content{padding:1rem;}
  #calendar-content{padding:.3rem .5rem 0;}

  /* -- Topbar -- */
  .topbar{padding:.45rem .75rem;flex-wrap:wrap;gap:.4rem;}
  .topbar-title{font-size:.88rem;}
  .topbar .btn{padding:.25rem .5rem;font-size:.78rem;}

  /* -- Stats bar -- */
  .stats-bar{overflow-x:auto;padding:.35rem .75rem;gap:0;background:var(--surface);border-bottom:1px solid var(--border);}
  .stat{min-width:56px;padding:.25rem .35rem;}
  .stat-n{font-size:1.05rem;}
  .stats-bar .stat-l{font-size:.6rem;}

  /* -- Modals: slide up from bottom -- */
  /* `bottom:var(--kb)` is the whole keyboard-occlusion fix on phones
     (b911). These sheets are position:fixed against the LAYOUT
     viewport, so bottom:0 parked them behind the soft keyboard: the
     sheet's lower half — which for the search sheet is the entire
     results list — sat under it. --kb is the keyboard's height in px
     (0 when closed, published by _vvApply() in grip-app.js), so the
     sheet now rests on top of the keyboard instead of beneath it.
     max-height follows the same logic: 92vh measures the full screen,
     which is taller than what's left once the keyboard is up. */
  .modal,.modal.wide{
    width:100%;max-width:100vw;
    border-radius:16px 16px 0 0;border-left:none;border-right:none;border-bottom:none;
    position:fixed;bottom:var(--kb, 0px);left:0;right:0;margin:0;
    max-height:min(92vh, calc(var(--vvh, 100vh) - 1rem));
    /* Ride the keyboard up/down instead of jumping. Matches the ~250ms
       iOS keyboard curve closely enough to read as one movement. */
    transition:bottom .22s var(--ease-out, ease-out);
  }
  .overlay{align-items:flex-end;padding:0;}

  /* -- Home KPI grid: 2 cols -- */
  .home-kpi-row{grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.25rem;}
  .home-kpi-val{font-size:1.55rem;}
  .home-kpi{padding:.75rem .85rem;}
  .home-actions,.home-header-actions{gap:.4rem;}
  .home-action-btn{font-size:.82rem;padding:.4rem .8rem;}
  .home-section-title{font-size:.95rem;}
  .home-header{flex-direction:column;align-items:flex-start;gap:.85rem;margin-bottom:1.5rem;}
  .home-header-actions{width:100%;}
  .home-greeting{font-size:1.85rem;}
  /* -- Home alerts -- */
  .home-alert{padding:.6rem .8rem;font-size:.82rem;}

  /* -- Calendar -- */
  .cal-legend{display:none;}
  .week-grid{font-size:.72rem;}
  .cal-header{padding:.5rem .55rem;gap:.45rem;}
  .cal-title{font-size:1.05rem;padding:0 .15rem;}
  .cal-nav-btn{padding:.28rem .5rem;font-size:.82rem;}
  .cal-nav-today{padding:.28rem .55rem;}
  .cal-view-tab{padding:.28rem .6rem;font-size:.78rem;}
  .cal-cell{min-height:max(70px, calc(38px + var(--cal-lanes,0)*26px));padding:.25rem .3rem;}
  .cal-cell-date{font-size:.72rem;width:18px;height:18px;}

  /* -- Directory tabs, search, cards -- */
  .dir-tabs{width:100%;}
  .dir-tab{flex:1;justify-content:center;padding:.45rem .5rem;font-size:.8rem;}
  .dir-toolbar{padding:.5rem .6rem;gap:.4rem;}
  .dir-toolbar-group{font-size:.76rem;}
  .contact-card{padding:.8rem .95rem .8rem 1rem;gap:.75rem;}
  .cc-avatar{width:40px;height:40px;font-size:.9rem;}
  .cc-name{font-size:.95rem;}
  .cc-chips{gap:.3rem;margin-top:.45rem;}
  .cc-chip{font-size:.74rem;padding:.18rem .5rem;}
  .cc-actions{flex-direction:column;gap:.3rem;opacity:1;} /* always visible on touch */

  /* -- Floating bulk bar -- */
  .bulk-bar{
    bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + .6rem);
    max-width:calc(100% - 1.5rem);flex-wrap:wrap;
    padding:.55rem .7rem;font-size:.8rem;
  }
  .bulk-bar button{font-size:.76rem;padding:.3rem .6rem;}

  /* -- Borrow request rows -- */
  /* (b814) Dates stay front-and-center on mobile: line 1 is
     status + date range + chevron, line 2 the person, line 3 the
     pills. Previously the dates were hidden entirely at 375px. */
  /* Parent-qualified: the base .br-row-* rules sit LATER in this file,
     so single-class overrides here lose the cascade at equal
     specificity — two classes win regardless of order. */
  .br-row .br-row-main{padding:.6rem .75rem .65rem .9rem;gap:.5rem;flex-wrap:wrap;row-gap:.3rem;}
  .br-row-main .br-row-status{width:26px;height:26px;font-size:.85rem;order:0;}
  .br-row-main .br-row-dates{order:1;flex:1;flex-direction:row;align-items:center;gap:.45rem;min-width:0;}
  .br-row-main .br-date-range{font-size:.95rem;}
  .br-row-main .br-row-chevron{order:2;}
  .br-row-main .br-row-who{order:3;flex:1 1 100%;padding-left:calc(26px + .5rem);}
  .br-row-main .br-row-name{font-size:.92rem;}
  .br-row-main .br-row-gear-summary{order:4;flex:1 1 100%;justify-content:flex-start;padding-left:calc(26px + .5rem);}
  .br-row-actions{padding:.4rem .75rem .55rem .85rem;flex-wrap:wrap;}
  .req-status-row{grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem;}
  .req-status-tile{padding:.6rem .8rem;}
  .req-status-val{font-size:1.45rem;}
  /* (b217) at-a-glance tiles + calendar */
  .br-tiles{gap:.45rem;}
  .br-tile{min-width:calc(33.33% - .3rem);padding:.5rem .55rem;}
  .br-tile-count{font-size:1.25rem;}
  .br-tile-label{font-size:.68rem;}
  .br-cal{padding:.55rem .6rem .65rem;}
  .br-cal-tick{font-size:.62rem;}
  .br-cal-bar-label{font-size:.64rem;}

  /* -- Users cards -- */
  .user-card{padding:.75rem .9rem .75rem 1rem;gap:.75rem;flex-wrap:wrap;}
  .user-avatar{width:40px;height:40px;font-size:.9rem;}
  .user-actions{width:100%;margin-top:.2rem;flex-wrap:wrap;}
  .user-role-select{flex:1;min-width:110px;}
  .user-perms{padding:.85rem 1rem;}
  .user-perm-row{flex-direction:column;gap:.1rem;padding:.45rem 0;}
  .user-perm-label{width:auto;}

  /* -- Inventory -- */
  .inv-cats{display:none!important;}
  .inv-main{width:100%;}
  .inv-summary{gap:1rem;padding:.55rem .85rem;}
  .inv-summary-val{font-size:.95rem;}
  .inv-summary-lbl{font-size:.62rem;}
  .inv-sum-sort-wrap{margin-left:0;flex-basis:100%;flex-wrap:wrap;margin-top:.2rem;border-top:1px solid var(--border);padding-top:.4rem;}
  .inv-scroll{grid-template-columns:1fr;gap:.4rem;}
  /* (b199+) On mobile the VIEW scrolls (#view-inventory{overflow-y:auto}
     above), so the inv-shell must flow naturally rather than becoming a
     second nested scroller, and the header isn't sticky. */
  #view-inventory .inv-shell{flex:none;overflow:visible;}
  #view-inventory .inv-head{position:static;padding-top:.5rem;}
  .inv-list-header,.inv-list-row{grid-template-columns:1fr 90px 70px;}
  .inv-lr-cat{display:none;}

  /* -- Settings -- */
  .set-group{padding:.9rem 1rem;}

  /* -- Jobs panel header buttons -- */
  .jph-btn{padding:.35rem .65rem;font-size:.78rem;}
  .jph-actions-group{padding:.12rem;}
}

@media(min-width:701px){
  .mob-content{display:none;}
  .bottom-nav,.drawer,.drawer-overlay{display:none!important;}
}

/* -- BORROW REQUEST TABLE ROWS -- */
.br-table{
  border:1px solid var(--border);border-radius:9px;overflow:hidden;
  background:var(--surface);
}
.br-row{border-bottom:1px solid var(--border);position:relative;}
.br-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:transparent;
}
.br-row.br-status-pending::before {background:var(--accent);}
.br-row.br-status-approved::before{background:var(--green);}
.br-row.br-status-denied::before  {background:var(--red);}
.br-row:last-child{border-bottom:none;}
.br-row-archived{opacity:.55;}
.br-row-archived:hover{opacity:.8;}

/* (v5.27.1+) Deep-link arrival pulse — applied for ~2.4s after a
   #borrow/req-{id} hash lands on a row so the user sees what
   they landed on. Two-stage anim: a single soft flash with a
   slow fade-out. */
@keyframes br-row-deeplink-pulse{
  0%   { box-shadow: 0 0 0 0   rgba(240,160,32,.0); background: transparent; }
  10%  { box-shadow: 0 0 0 4px rgba(240,160,32,.18); background: rgba(240,160,32,.10); }
  100% { box-shadow: 0 0 0 0   rgba(240,160,32,.0); background: transparent; }
}
.br-row-deeplink{
  animation: br-row-deeplink-pulse 2.4s ease-out;
  border-radius: 10px;
}
/* (b814) Bolder, date-first row: 32px status dot, a leading date
   block in heavy tabular type, one line of secondary info. */
.br-row-main{
  display:flex;align-items:center;gap:.9rem;
  padding:.85rem 1rem .85rem 1.15rem;cursor:pointer;
  transition:background .08s;user-select:none;
}
.br-row-main:hover{background:var(--surface2);}
.br-row-status{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;font-size:1rem;
}
.br-row-status.status-pending {background:rgba(240,160,32,.12);color:var(--accent);}
.br-row-status.status-approved{background:rgba(72,184,92,.12);color:var(--green);}
.br-row-status.status-denied  {background:rgba(224,72,72,.12);color:var(--red);}
.br-row-status.status-archived{background:var(--surface2);color:var(--text3);}
.br-row-who{flex:1;min-width:0;}
.br-row-name{
  font-size:1rem;font-weight:750;color:var(--text);letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.br-row-sub{
  font-size:.76rem;color:var(--text3);margin-top:.15rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);
}
/* (b681) When the request came in — the queue reads as a timeline. */
.br-row-when{
  font-size:.72rem;color:var(--text3);margin-top:.15rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* (b814) The date block leads the row and carries the heaviest type. */
.br-row-dates{
  display:flex;flex-direction:column;align-items:flex-start;gap:.22rem;
  flex-shrink:0;min-width:128px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.br-date-range{
  display:flex;align-items:baseline;gap:.32rem;
  font-size:1.02rem;font-weight:800;letter-spacing:-.015em;color:var(--text);
}
.br-d-arrow{color:var(--text3);font-weight:400;font-size:.85rem;}
.br-row-days{
  font-family:var(--mono);font-size:.68rem;font-weight:700;color:var(--accent);
  background:rgba(240,160,32,.1);border:1px solid rgba(240,160,32,.3);
  border-radius:10px;padding:.1rem .5rem;
}
.br-row-gear-summary{display:flex;align-items:center;gap:.35rem;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
.br-gear-pill{
  font-size:.72rem;font-weight:600;font-family:var(--mono);
  background:var(--surface2);color:var(--text2);border:1px solid var(--border);
  border-radius:10px;padding:.12rem .45rem;white-space:nowrap;
}
.br-budget-pill{
  font-size:.72rem;font-weight:700;font-family:var(--mono);
  background:rgba(72,184,92,.1);color:var(--green);
  border:1px solid rgba(72,184,92,.3);
  border-radius:10px;padding:.12rem .45rem;white-space:nowrap;
}
/* (b810) Budget-vs-standard-rates disparity pill + drawer line */
.br-gap-pill{
  font-size:.7rem;font-weight:700;font-family:var(--mono);
  border-radius:10px;padding:.12rem .45rem;white-space:nowrap;
}
.br-gap-pill.below{
  background:rgba(240,160,32,.12);color:var(--amber,#f0a020);
  border:1px solid rgba(240,160,32,.35);
}
.br-gap-pill.above{
  background:rgba(72,184,92,.1);color:var(--green);
  border:1px solid rgba(72,184,92,.3);
}
.br-gap-line.below{color:var(--amber,#f0a020)}
.br-checkout-pill{
  font-size:.7rem;font-weight:600;border-radius:10px;padding:.12rem .45rem;white-space:nowrap;
}
.br-checkout-pill.awaiting{background:rgba(240,160,32,.1);color:var(--accent);border:1px solid rgba(240,160,32,.3);}
.br-checkout-pill.out{background:rgba(224,72,72,.1);color:var(--red);border:1px solid rgba(224,72,72,.3);}
.br-checkout-pill.returned{background:rgba(72,184,92,.1);color:var(--green);border:1px solid rgba(72,184,92,.3);}
.br-checkout-bar{
  padding:.55rem .85rem .1rem;
  border-top:1px solid var(--border2);
}
.br-checkout-steps{display:flex;flex-direction:column;gap:.4rem;}
.br-checkout-step{display:flex;align-items:center;gap:.55rem;font-size:.8rem;}
.br-checkout-step.locked{opacity:.45;pointer-events:none;}
.bcs-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--border);background:var(--bg2);
}
.br-checkout-step.done .bcs-dot{background:var(--green);border-color:var(--green);}
.bcs-label{flex:1;color:var(--text2);}
.br-checkout-step.done .bcs-label{color:var(--text);}
.btn-warning{
  background:rgba(240,160,32,.15);color:var(--accent);
  border:1px solid rgba(240,160,32,.4);
}
.btn-warning:hover{background:rgba(240,160,32,.28);}
.br-row-chevron{
  flex-shrink:0;color:var(--text3);font-size:1rem;
  transition:transform .15s;line-height:1;opacity:.6;
}
.br-row-main:hover .br-row-chevron{opacity:1;color:var(--accent);}

/* Expanded drawer */
.br-gear-drawer{
  background:var(--surface2);border-top:1px solid var(--border);
}
.br-gear-inner{padding:.7rem 1rem .5rem 1.1rem;}
.br-gear-contact{
  font-size:.82rem;color:var(--text2);font-family:var(--mono);
  margin-bottom:.5rem;word-break:break-all;
}
.br-gear-note{
  font-size:.8rem;color:var(--text3);margin-top:.5rem;font-style:italic;
  padding:.35rem .55rem;background:var(--surface);border-radius:5px;
  border-left:2px solid var(--border2);
}
.br-row-actions{
  display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;
  padding:.5rem 1rem .7rem 1.1rem;border-top:1px solid var(--border);
}

/* Requests view status KPI strip */
.req-status-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.6rem;margin-bottom:1.25rem;
}
.req-status-tile{
  padding:.75rem 1rem;border-radius:9px;
  background:var(--surface);border:1px solid var(--border);
  display:flex;flex-direction:column;gap:.2rem;
  position:relative;overflow:hidden;
}
.req-status-tile::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
}
.req-status-tile.pending ::before{background:var(--accent);}
.req-status-tile.approved::before{background:var(--green);}
.req-status-tile.denied  ::before{background:var(--red);}
.req-status-tile.archived::before{background:var(--border3);}
.req-status-label{
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text3);display:flex;align-items:center;gap:.4rem;
}
.req-status-val{
  font-size:1.8rem;font-weight:700;color:var(--text);line-height:1;
  font-variant-numeric:tabular-nums;margin-top:.15rem;
}
.req-status-tile.pending  .req-status-val{color:var(--accent);}
.req-status-tile.approved .req-status-val{color:var(--green);}
.req-status-tile.denied   .req-status-val{color:var(--red);}

/* ════════════════════════════════════════════════════════════
   RENTALS DASHBOARD — at-a-glance redesign (b217)
   Operational tiles + 4-week calendar timeline + state grouping.
   Replaces the approval-status tile row.
   ════════════════════════════════════════════════════════════ */
.br-tiles{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem;}
.br-tile{
  flex:1 1 0;min-width:120px;
  display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;
  padding:.6rem .75rem;border-radius:10px;cursor:pointer;text-align:left;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--tile);
  transition:background .1s,border-color .1s,transform .05s;
}
.br-tile:hover{background:var(--surface2);}
.br-tile:active{transform:translateY(1px);}
.br-tile.active{border-color:var(--tile);box-shadow:0 0 0 2px var(--tile);background:var(--surface2);}
.br-tile.dim{opacity:.5;}
.br-tile.dim:hover{opacity:.85;}
.br-tile-count{font-size:1.5rem;font-weight:800;line-height:1;color:var(--tile);font-variant-numeric:tabular-nums;}
.br-tile-label{font-size:.74rem;font-weight:600;color:var(--text2);white-space:nowrap;}

/* ── (b822) Rentals admin overhaul: tabs, table, detail popup ── */
.br-toolbar{gap:.6rem;}
.br-search{
  flex:0 1 280px;min-width:160px;background:var(--bg);border:1px solid var(--border);color:var(--text);
  padding:.42rem .7rem;border-radius:6px;font:inherit;font-size:.85rem;
}
.br-search:focus{outline:none;border-color:var(--accent);}
.br-table-wrap{border:1px solid var(--border);border-radius:10px;overflow:auto;background:var(--surface);}
.br-list{font-size:.86rem;}
.br-list thead th{white-space:nowrap;}
.br-list tbody td{padding:.6rem .8rem;vertical-align:middle;}
.br-r-archived td{opacity:.55;}
.br-c-range{font-weight:700;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;}
.br-c-range .br-d-arrow{color:var(--text3);font-weight:400;margin:0 .15rem;}
/* (b874) Computed standard-rates figure in the Value column — marked
   as provisional so it never reads like a quoted or invoiced number. */
.br-c-val .br-c-sub.br-c-est{ font-style:italic; opacity:.85; }
.br-c-sub{font-size:.74rem;color:var(--text3);margin-top:.1rem;}
.br-c-name{font-weight:600;color:var(--text);}
.br-c-gear{max-width:220px;}
.br-c-gearlist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
.br-c-val{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text);}
.br-c-val .br-c-sub{margin-left:.15rem;display:inline;}
.br-c-val>div+div.br-c-sub{display:block;margin-left:0;}
.br-stage{
  display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;
  font-size:.72rem;font-weight:700;color:var(--sc);background:var(--sb);
  padding:.18rem .55rem;border-radius:20px;letter-spacing:.01em;
}
.br-c-next{white-space:nowrap;}
.br-next-btn{
  background:var(--accent-dim);border:1px solid transparent;color:var(--text);font-weight:600;
}
.br-next-btn:hover{border-color:var(--accent);}
.br-next-wait{font-size:.78rem;color:var(--text3);}
.br-c-who{min-width:140px;}
.br-c-stage{white-space:nowrap;}
.br-c-flags{margin-top:.3rem;display:flex;gap:.25rem;flex-wrap:wrap;}
.br-flag{
  display:inline-block;font-size:.7rem;font-weight:600;color:var(--text2);line-height:1.2;
  background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:.1rem .4rem;
}
.br-flag-warn{color:#dc2626;border-color:rgba(220,38,38,.4);}
@media (max-width:760px){
  .br-c-gear{display:none;}
  .br-list thead th:nth-child(3){display:none;}
  .br-c-who{min-width:0;}
  .br-list tbody td{padding:.55rem .5rem;}
  .br-c-next .br-next-btn{padding:.25rem .45rem;font-size:.72rem;}
}

/* ≤560: rows become cards (overrides the generic .invo-row card grid) */
@media (max-width:560px){
  .br-table-wrap{border:none;background:transparent;overflow:visible;}
  .br-list tbody tr.invo-row.br-r{
    grid-template-columns:1fr auto;
    grid-template-areas:"dates who" "gear gear" "stage value" "next next";
    gap:.3rem .6rem;
  }
  .br-list tbody .invo-row.br-r td{display:block;opacity:1;}
  .br-list tbody .invo-row.br-r td.br-c-dates{grid-area:dates;}
  .br-list tbody .invo-row.br-r td.br-c-who{grid-area:who;text-align:right;}
  .br-list tbody .invo-row.br-r td.br-c-gear{grid-area:gear;display:block;max-width:none;}
  .br-list tbody .invo-row.br-r td.br-c-val{grid-area:value;text-align:right;}
  .br-list tbody .invo-row.br-r td.br-c-stage{grid-area:stage;}
  .br-list tbody .invo-row.br-r td.br-c-next{grid-area:next;}
  .br-list tbody .invo-row.br-r td.br-c-next .br-next-btn{width:100%;justify-content:center;padding:.45rem;font-size:.8rem;}
  .br-r-archived td{opacity:.55 !important;}
  .br-c-gearlist{max-width:none;}
}

/* Rentals view sub-tab strip (top-level view, b823) */
#borrow-admin-content .br-strip{padding:0 0 .7rem;max-width:none;}

/* Detail popup */
.modal-rental-detail{max-width:820px;}
.rd-header{align-items:center;}
.rd-header-side{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;flex-shrink:0;}
.rd-next{margin-top:0;}
/* Phase tabs in the popup — reuse the job page's .phase-tab styling,
   five across. */
.rd-phases{grid-template-columns:repeat(5,1fr);padding:.6rem .9rem;position:sticky;top:0;z-index:2;}
.rd-phases .phase-tab{padding:.6rem .5rem;font-size:.9rem;}
.rd-phases .phase-tab.rd-phase-off{opacity:.4;}
.rd-panel{padding:.9rem 1.25rem 1.1rem;background:var(--surface);}
.rd-status{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.85rem;}
.rd-status-line{font-size:.88rem;color:var(--text2);}
.rd-status-line.ok{color:var(--green);}
.rd-status-line.warn{color:var(--amber);font-weight:600;}
/* Big, bold, context-specific actions */
.rd-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem;margin-bottom:1rem;}
.rd-act{
  display:flex;align-items:center;gap:.7rem;text-align:left;
  padding:.8rem .95rem;border-radius:11px;cursor:pointer;font:inherit;
  background:var(--surface-grad,var(--surface2));border:1px solid var(--border);color:var(--text);
  box-shadow:inset 0 1px 0 var(--surface-rim,transparent);
  transition:background .12s,border-color .12s,transform .06s,box-shadow .12s;
}
.rd-act:hover{border-color:var(--border2);background:var(--surface2-grad,var(--surface2));}
.rd-act:active{transform:translateY(1px);}
.rd-act.wide{grid-column:1 / -1;}
.rd-act-icon{font-size:1.45rem;line-height:1;flex-shrink:0;width:1.8rem;text-align:center;}
.rd-act-text{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.rd-act-label{font-size:1rem;font-weight:700;letter-spacing:-.005em;line-height:1.2;}
.rd-act-sub{font-size:.74rem;color:var(--text3);line-height:1.25;}
.rd-act.primary{
  background:linear-gradient(180deg,color-mix(in oklch,var(--accent),white 7%) 0%,var(--accent) 100%);
  border-color:var(--accent);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 4px var(--accent-rim,rgba(0,0,0,.2)),0 2px 10px var(--accent-dim);
}
.rd-act.primary .rd-act-sub{color:rgba(255,255,255,.8);}
.rd-act.primary:hover{filter:brightness(1.06);}
.rd-act.good{border-color:var(--green);background:rgba(22,163,74,.14);}
.rd-act.good .rd-act-label{color:var(--green);}
.rd-act.bad{border-color:rgba(220,38,38,.5);background:rgba(220,38,38,.08);}
.rd-act.bad .rd-act-label{color:#dc2626;}
.rd-block{margin-top:.9rem;}
.rd-block-head{font-size:.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem;}
.rd-gear{font-size:.88rem;}
@media (max-width:640px){
  .rd-phases{grid-template-columns:repeat(5,1fr);gap:.3rem;padding:.5rem .6rem;}
  .rd-phases .phase-tab{padding:.5rem .2rem;font-size:.7rem;gap:.25rem;flex-direction:column;}
  .rd-phases .phase-tab-badge{position:absolute;top:-6px;right:-4px;}
  .rd-acts{grid-template-columns:1fr;}
  .rd-header-side .rd-next{display:none;}
}
.modal-rental-detail > #rd-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.rd-next{margin-top:.35rem;font-size:.76rem;font-weight:600;color:var(--accent);white-space:nowrap;}
.rd-next.wait{color:var(--text3);}
.rd-line{font-size:.85rem;color:var(--text);margin:.25rem 0;}
.rd-chips{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;margin-top:.45rem;}
.rd-chips-label{font-size:.72rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-right:.2rem;}
.rd-events .cd-event-row{padding:.3rem 0;}
.rd-ev-renter .cd-event-icon{color:#8b5cf6;}
.rd-ev-link{cursor:pointer;border-radius:6px;}
.rd-ev-link:hover{background:var(--surface2);}

/* Calendar-at-a-glance timeline */
.br-cal{margin-bottom:1.25rem;padding:.7rem .85rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;}
.br-cal-head{position:relative;height:1.05rem;margin-bottom:.3rem;}
.br-cal-tick{position:absolute;transform:translateX(-2px);font-size:.68rem;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap;}
.br-cal-tick.today{color:var(--accent);font-weight:700;transform:translateX(-50%);}
.br-cal-grid{position:relative;border-radius:6px;overflow:hidden;}
.br-cal-cols{position:absolute;inset:0;display:flex;z-index:0;}
.br-cal-col{flex:1;border-right:1px solid var(--border);}
.br-cal-col:last-child{border-right:none;}
.br-cal-col.wknd{background:var(--surface2);}
.br-cal-today{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);opacity:.85;z-index:2;}
.br-cal-lanes{position:relative;z-index:1;}
.br-cal-bar{
  position:absolute;border-radius:5px;cursor:pointer;box-sizing:border-box;
  border:1px solid var(--bar);display:flex;align-items:center;gap:.15rem;
  padding:0 .35rem;overflow:hidden;transition:filter .1s;
}
.br-cal-bar:hover{filter:brightness(1.12);z-index:3;}
.br-cal-bar.tentative{border-style:dashed;}
.br-cal-bar-label{font-size:.7rem;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.br-cal-clip{font-weight:800;color:var(--bar);flex-shrink:0;font-size:.78rem;line-height:1;}
.br-cal-empty{padding:.9rem;text-align:center;color:var(--text3);font-size:.82rem;}

/* Operational group + row accents */
.req-group-head .rgh-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.br-row.br-op-overdue::before {background:#dc2626;}
.br-row.br-op-out::before     {background:#d97706;}
.br-row.br-op-awaiting::before{background:#0891b2;}
.br-row.br-op-pending::before {background:#8b5cf6;}
.br-row.br-op-returned::before{background:#16a34a;}
.br-row.br-op-denied::before,
.br-row.br-op-archived::before{background:#6b7280;}

/* Rentals financials card (b692) */
.br-fin{margin-bottom:1.25rem;padding:.7rem .85rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;}
.br-fin-head{display:flex;align-items:center;gap:.6rem;cursor:pointer;user-select:none;}
.br-fin-title{font-size:.9rem;font-weight:700;color:var(--text);}
.br-fin-sub{font-size:.74rem;color:var(--text3);}
.br-fin-chev{margin-left:auto;color:var(--text3);font-size:1.05rem;font-weight:700;transition:transform .12s;}
.br-fin-chev.open{transform:rotate(90deg);}
.br-fin-collapsed{display:flex;align-items:center;gap:.6rem;cursor:pointer;user-select:none;padding:.55rem .85rem;}
.br-fin-collapsed:hover,.br-fin-head:hover .br-fin-chev{color:var(--text2);}
.br-fin-mini{font-size:.78rem;color:var(--text2);font-variant-numeric:tabular-nums;}
.br-fin-chips{display:flex;gap:.6rem;flex-wrap:wrap;margin:.7rem 0 .35rem;}
.br-fin-chip{flex:1 1 0;min-width:130px;padding:.5rem .7rem;border-radius:8px;background:var(--surface2);border:1px solid var(--border);display:flex;flex-direction:column;gap:.15rem;}
.br-fin-chip-val{font-size:1.05rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1;}
.br-fin-chip.collected .br-fin-chip-val{color:var(--green);}
.br-fin-chip.outstanding .br-fin-chip-val{color:#d97706;}
.br-fin-chip.proposed .br-fin-chip-val{color:var(--text2);}
.br-fin-chip.projected .br-fin-chip-val{color:#0891b2;}
.br-fin-leg-dot{box-sizing:border-box;}
.br-fin-chip-label{font-size:.7rem;font-weight:600;color:var(--text3);}
.br-fin-chart{width:100%;height:auto;display:block;margin-top:.25rem;}
.br-fin-legend{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.3rem;}
.br-fin-leg{font-size:.72rem;color:var(--text3);display:inline-flex;align-items:center;gap:.35rem;}
.br-fin-leg-dot{width:10px;height:10px;border-radius:3px;display:inline-block;}

/* Active-filter chip */
.br-filter-chip{
  font-size:.76rem;font-weight:600;padding:.25rem .65rem;border-radius:20px;cursor:pointer;
  background:var(--surface2);border:1px solid var(--border);color:var(--text2);margin-right:auto;
}
.br-filter-chip:hover{border-color:var(--accent);color:var(--text);}

/* AI insight strip (b218) */
.br-insight{
  display:flex;align-items:center;gap:.55rem;
  margin-bottom:1.1rem;padding:.55rem .8rem;border-radius:10px;
  background:rgba(240,160,32,.07);border:1px solid rgba(240,160,32,.22);
  font-size:.86rem;line-height:1.4;color:var(--text);
}
.br-insight-icon{flex-shrink:0;font-size:.95rem;opacity:.9;}
.br-insight-text{flex:1;min-width:0;}
.br-insight-text.loading{color:var(--text3);font-style:italic;}
.br-insight-refresh{
  flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--text3);
  font-size:.95rem;padding:.1rem .3rem;border-radius:6px;line-height:1;
  transition:color .1s,background .1s;
}
.br-insight-refresh:hover{color:var(--accent);background:rgba(240,160,32,.12);}

/* Archived toggle */
.req-toolbar{
  display:flex;align-items:center;justify-content:flex-end;gap:1rem;
  margin-bottom:.6rem;font-size:.79rem;color:var(--text3);
}
.req-toolbar label{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
}

/* Group headers in Requests */
.req-group{margin-bottom:1.25rem;}
.req-group-head{
  display:flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text2);margin:0 0 .55rem;
}
.req-group-head::after{
  content:"";flex:1;height:1px;background:var(--border);
}
.req-group-head .rgh-count{
  font-family:var(--mono);letter-spacing:0;text-transform:none;
  font-weight:500;font-size:.72rem;color:var(--text3);
  padding:.05rem .4rem;border:1px solid var(--border);border-radius:8px;
}
.req-group-head .rgh-icon{opacity:.7;}

/* Gear chip grid */
.bi-wrap{display:flex;flex-direction:column;gap:.55rem;}
.bi-cat{display:flex;align-items:center;gap:.45rem;margin-bottom:.35rem;}
.bi-cat-name{
  position:relative;padding-left:.6rem;
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--bi-col,#8a8f98);
}
.bi-cat-name::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:11px;border-radius:2px;background:var(--bi-col,#8a8f98);
}
.bi-cat-n{
  font-size:.63rem;font-weight:700;color:var(--text3);
  background:var(--surface3);border-radius:20px;padding:.06rem .42rem;line-height:1.4;
}
.bi-items{display:flex;flex-wrap:wrap;gap:.32rem;}
.bi-item{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.24rem .55rem;border-radius:7px;font-size:.8rem;line-height:1.3;
  background:var(--surface2);border:1px solid var(--border);
}
.bi-item-name{color:var(--text);font-weight:500;}
.bi-item-q{color:var(--text3);font-family:var(--mono);font-size:.72rem;font-weight:700;}
/* org in name line */
.br-row-org{font-size:.75rem;font-weight:400;color:var(--text3);}
/* Category settings rows */
.set-cat-row{
  display:flex;align-items:center;gap:.65rem;
  padding:.42rem 0;border-bottom:1px solid var(--border);
  transition:opacity .15s;
}
.set-cat-row.drag-over{border-top:2px solid var(--accent);margin-top:-1px;}
.set-cat-row:last-child{border-bottom:none;}
.set-cat-drag{
  cursor:grab;color:var(--text3);font-size:1rem;flex-shrink:0;
  padding:.1rem .05rem;touch-action:none;user-select:none;line-height:1;
}
.set-cat-drag:active{cursor:grabbing;}
.set-cat-color{
  width:32px;height:32px;padding:2px;border-radius:6px;
  border:2px solid var(--border2);cursor:pointer;background:none;
  flex-shrink:0;
}
.set-cat-color::-webkit-color-swatch-wrapper{padding:0;}
.set-cat-color::-webkit-color-swatch{border-radius:3px;border:none;}
.set-cat-name-wrap{
  flex:1;display:flex;align-items:center;position:relative;
}
.set-cat-name-input{
  flex:1;font-size:.88rem;font-weight:500;color:var(--text);
  background:var(--surface2);border:1px solid var(--border2);border-radius:6px;
  padding:.28rem .55rem .28rem .55rem;
  transition:border-color .12s,box-shadow .12s;
  cursor:text;
}
.set-cat-name-input:hover{border-color:var(--border3);}
.set-cat-name-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-dim);
  outline:none;
}
.set-cat-edit-hint{
  position:absolute;right:.45rem;
  font-size:.72rem;color:var(--text3);
  pointer-events:none;transition:opacity .1s;
}
.set-cat-name-input:focus ~ .set-cat-edit-hint{opacity:0;}
.set-cat-default{font-size:.72rem;color:var(--text3);font-style:italic;}

/* -- APP SETTINGS -- */
/* (.set-header/.set-header-title/.set-header-actions removed in
   v4.22.0 — settings page now uses the standard .page-head family.
   .set-header-status stays — it's the auto-save indicator pill
   that lives inside the page-head row.) */
.set-header-status{
  font-size:.78rem;color:var(--text3);min-width:0;
  display:inline-flex;align-items:center;gap:.4rem;
}
.set-header-status.dirty{color:var(--accent);}
.set-header-status.saved{color:var(--green);}
.set-header-status.err{color:var(--red);}

.set-group{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:1.1rem 1.35rem;margin-bottom:1rem;
}
.set-group-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);
}
.set-group-title{
  font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--text2);display:inline-flex;align-items:center;gap:.5rem;margin:0;padding:0;border:none;
}
.set-group-icon{
  font-size:1rem;
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;
  background:var(--accent-dim);color:var(--accent);
}
.set-group.danger{border-color:rgba(224,72,72,.3);background:rgba(224,72,72,.02);}
.set-group.danger .set-group-title{color:var(--red);}
.set-group.danger .set-group-icon{background:rgba(224,72,72,.1);color:var(--red);}
.set-field{margin-bottom:.9rem;}
.set-field:last-child{margin-bottom:0;}
.set-field label{
  display:block;font-size:.78rem;font-weight:500;color:var(--text2);margin-bottom:.25rem;
}
.set-field input,.set-field textarea,.set-field select{
  width:100%;padding:.5rem .75rem;
  background:var(--bg);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-family:var(--ui);font-size:.88rem;
  transition:border-color .12s, background .12s;
}
.set-field input:focus,.set-field textarea:focus,.set-field select:focus{
  outline:none;border-color:var(--accent);
}
.set-field input:hover:not(:focus),
.set-field textarea:hover:not(:focus),
.set-field select:hover:not(:focus){
  border-color:var(--border2);
}
/* Custom chevron for selects since native dropdown arrow is OS-styled
   and looks out of place. SVG is inline so we don't need an asset. */
.set-field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2380838c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right .7rem center;
  padding-right:2rem;cursor:pointer;
}
/* Native date-input calendar icon is white-on-light by default —
   barely visible in dark mode. Invert it; revert in light theme. */
.set-field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(0.55);cursor:pointer;opacity:.85;
}
.set-field input[type="date"]:hover::-webkit-calendar-picker-indicator{
  opacity:1;
}
html.light .set-field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:none;
}

/* ── Email signature rich text editor (2026.05.19+) ──────────────
   Contenteditable WYSIWYG with a minimal toolbar. Visual match for
   the other .set-field controls so the Settings page stays cohesive
   — same border, padding, focus accent. */
.sig-editor-wrap{
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg);
  overflow:hidden;
  transition:border-color .12s;
}
.sig-editor-wrap:hover{border-color:var(--border2);}
.sig-editor-wrap:focus-within{border-color:var(--accent);}
.sig-editor-toolbar{
  display:flex;
  align-items:center;
  gap:.25rem;
  padding:.4rem .55rem;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.sig-tb-btn{
  background:transparent;
  border:1px solid transparent;
  color:var(--text2);
  font-family:var(--ui);
  font-size:.82rem;
  padding:.28rem .5rem;
  border-radius:5px;
  cursor:pointer;
  line-height:1;
  transition:background .12s, border-color .12s, color .12s;
}
.sig-tb-btn:hover{background:var(--surface);border-color:var(--border);color:var(--text);}
.sig-tb-btn:active{background:var(--surface-hi);}
.sig-tb-sep{
  width:1px;height:18px;background:var(--border);
  margin:0 .15rem;
}
.sig-editor{
  min-height:120px;
  padding:.65rem .8rem;
  font-family:var(--ui);
  font-size:.88rem;
  color:var(--text);
  line-height:1.5;
  outline:none;
  word-wrap:break-word;
}
.sig-editor:empty::before{
  content:"Type your signature — name, role, phone, website…";
  color:var(--text3);
  pointer-events:none;
}
/* Links rendered live in the editor so the user sees what the
   recipient will see. Underline + accent colour for clarity, but
   suppress the default browser focus ring since the surrounding
   wrap already shows focus. */
.sig-editor a{
  color:var(--accent);
  text-decoration:underline;
}

.set-field-help{
  font-size:.74rem;color:var(--text3);margin-top:.3rem;line-height:1.4;
}

/* Two-column layout for short fields on wider screens */
.set-field-row{
  display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.9rem;
}
.set-field-row .set-field{margin-bottom:0;}
.set-field-row.four-col{grid-template-columns:repeat(4,1fr);}
.set-field-row.three-col{grid-template-columns:repeat(3,1fr);}
@media (max-width:720px){
  .set-field-row{grid-template-columns:1fr;}
  .set-field-row.four-col{grid-template-columns:1fr 1fr;}
  .set-field-row.three-col{grid-template-columns:1fr;}
}

/* Calendar colour picker */
.cal-color-row{display:flex;align-items:center;gap:.6rem;}
.cal-color-row input[type=color]{
  width:2.4rem;height:2.4rem;padding:.1rem;border-radius:6px;
  border:1px solid var(--border2);background:var(--surface2);cursor:pointer;flex-shrink:0;
}
.cal-color-swatch{
  display:inline-block;flex:1;height:1.75rem;border-radius:5px;
  border:1px solid rgba(0,0,0,.12);transition:background .1s;
}

/* Danger zone action */
.set-danger-row{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.85rem;
}
.set-danger-info{min-width:220px;}
.set-danger-label{
  font-size:.9rem;font-weight:600;color:var(--text);
}
.set-danger-desc{font-size:.78rem;color:var(--text3);margin-top:.2rem;line-height:1.4;}

/* Settings → Diagnostics tab. Small, structured, distinct from the
   form-heavy other tabs — feels like a debugging readout. */
.diag-row{
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem 0;
  font-size:.85rem;
  flex-wrap:wrap;
}
.diag-row + .diag-row{border-top:1px solid var(--border);}
.diag-status-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.4rem; height:1.4rem; border-radius:50%;
  font-size:.78rem; font-weight:700;
}
.diag-row-ok .diag-status-icon{
  background:rgba(34,197,94,.12); color:var(--green, #22c55e);
}
.diag-row-warn .diag-status-icon{
  background:rgba(245,158,11,.14); color:var(--orange, #f59e0b);
}
.diag-status-label{
  font-family:var(--mono);
  color:var(--text);
}
.diag-status-note{color:var(--text3); font-size:.78rem;}
.diag-status-detail{
  flex-basis:100%;
  margin-top:.45rem;
  font-size:.78rem;
  color:var(--text2);
  line-height:1.5;
}
.diag-status-pre{
  margin:.5rem 0 0;
  padding:.6rem .75rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--text);
  overflow-x:auto;
  white-space:pre;
}

/* Inventory diagnostic results — banner + sections. */
.diag-banner{
  padding:.7rem .9rem;
  border-radius:8px;
  font-size:.85rem;
  line-height:1.5;
  margin-bottom:1rem;
  border:1px solid;
}
.diag-banner-ok{
  background:rgba(34,197,94,.07);
  border-color:rgba(34,197,94,.25);
  color:var(--text);
}
.diag-banner-warn{
  background:rgba(245,158,11,.07);
  border-color:rgba(245,158,11,.3);
  color:var(--text);
}
.diag-banner-info{
  background:var(--surface2);
  border-color:var(--border);
  color:var(--text2);
}
.diag-result-error{
  padding:.7rem .9rem;
  border-radius:8px;
  background:rgba(224,72,72,.08);
  border:1px solid rgba(224,72,72,.3);
  color:var(--red);
  font-size:.85rem;
}
.diag-section{margin-bottom:1rem;}
.diag-section:last-child{margin-bottom:0;}
.diag-section-head{
  font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--text3);
  margin-bottom:.5rem;
}
.diag-kvgrid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.35rem .9rem;
  font-size:.85rem;
}
.diag-k{color:var(--text3);}
.diag-v{color:var(--text); word-break:break-all;}
.diag-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:.6rem;
}
.diag-stat{
  padding:.6rem .75rem;
  border-radius:8px;
  background:var(--surface2);
  border:1px solid var(--border);
}
.diag-stat-label{
  font-size:.7rem; letter-spacing:.02em;
  color:var(--text3); text-transform:uppercase;
}
.diag-stat-val{
  font-size:1.4rem; font-weight:600;
  color:var(--text); font-variant-numeric:tabular-nums;
  margin-top:.15rem;
}
.diag-stat-note{font-size:.7rem; color:var(--text3); margin-top:.2rem;}
.diag-stat-ok      .diag-stat-val{color:var(--green, #22c55e);}
.diag-stat-zero    .diag-stat-val{color:var(--text3);}
.diag-stat-muted{opacity:.6;}

/* Sample-rows table — wide tabular layout, scroll horizontally on
   narrow viewports. */
.diag-table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:8px;
}
.diag-table{
  width:100%; border-collapse:collapse;
  font-size:.8rem;
}
.diag-table th, .diag-table td{
  padding:.45rem .65rem;
  text-align:left;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.diag-table th{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text3); font-weight:600;
  background:var(--surface2);
}
.diag-table tbody tr:last-child td{border-bottom:none;}
.diag-flag{
  display:inline-block;
  padding:.1rem .42rem;
  font-size:.68rem;
  border-radius:999px;
  font-weight:500;
}
.diag-flag-ok{
  background:rgba(34,197,94,.12); color:var(--green, #22c55e);
}
.diag-flag-bad{
  background:rgba(224,72,72,.12); color:var(--red);
  margin-right:.25rem;
}

/* Trash bin (v5.30.0+) — Settings → Trash tab */
.set-field-inline-row{display:flex;align-items:center;gap:.55rem;}
.trash-list{
  display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem;
}
.trash-row{
  display:flex;align-items:center;gap:.85rem;
  padding:.75rem .9rem;
  background:var(--surface2);border:1px solid var(--border2);border-radius:8px;
  transition:border-color .12s, background .12s;
}
.trash-row:hover{border-color:var(--border3);background:var(--surface3);}
.trash-icon{font-size:1.35rem;flex-shrink:0;line-height:1;width:1.8rem;text-align:center;}
.trash-main{flex:1;min-width:0;}
.trash-label{
  font-size:.92rem;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.trash-meta{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  font-size:.75rem;color:var(--text3);margin-top:.18rem;
}
.trash-type{
  background:var(--surface3);border:1px solid var(--border3);
  padding:.08rem .42rem;border-radius:3px;
  text-transform:capitalize;letter-spacing:.01em;color:var(--text2);
}
.trash-age{color:var(--text3);}
.trash-cascade{color:var(--text3);font-style:italic;}
.trash-actions{display:flex;gap:.4rem;flex-shrink:0;}
.trash-empty{
  text-align:center;padding:2.5rem 1rem;color:var(--text3);
}
.trash-empty-icon{font-size:2.2rem;opacity:.6;margin-bottom:.4rem;}
.trash-empty-msg{font-size:.92rem;color:var(--text2);}
@media (max-width: 600px){
  .trash-row{flex-wrap:wrap;}
  .trash-actions{margin-left:auto;}
}

/* Day list inline action buttons — only visible when day is active */
.ri-day-inline-actions{
  display:flex;gap:.2rem;align-items:center;flex-shrink:0;margin-left:auto;
}
.ri-day-act-btn{
  background:none;border:1px solid var(--border2);cursor:pointer;font-size:.75rem;
  padding:.22rem .38rem;border-radius:4px;color:var(--text3);transition:all .1s;
  line-height:1;
}
.ri-day-act-btn:hover{background:var(--surface3);color:var(--text);border-color:var(--border3);}
.ri-day-act-btn.danger:hover{background:var(--red);color:#fff;border-color:var(--red);}

/* ============================================================
   INVOICING — v4.0.0
   List view, editor, preview/print page, status pills.
   Class prefix: .invo-* (kept distinct from inventory's .inv-*)
   ============================================================ */

/* ── Shell (parallels .inv-shell for inventory) ── */
.invo-shell{
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);
}
.invo-shell-inner{
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  max-width:var(--page-max);width:100%;margin:0 auto;padding:1rem 1.4rem 0;
}
/* When the dashboard is rendered, the inner shell needs to scroll
   the whole pane (KPIs, chart, recent list, clients all together).
   The list/editor/preview views manage their own internal scrolling
   regions instead — the .invo-scroll body inside the list table is
   sticky-header-aware, the editor has a scrolling .invo-edit-body,
   etc. — so we only relax the overflow when the dashboard is the
   direct child. The tax report follows the same single-scroll
   pattern as the dashboard. */
.invo-shell-inner:has(> .invo-dash),
.invo-shell-inner:has(> .tax-rep),
.invo-shell-inner:has(> .fin-dash),
.invo-shell-inner:has(> .exp-pane),
.invo-shell-inner:has(> .est-list),
.invo-shell-inner:has(> .est-edit-shell){overflow-y:auto;}

/* ── List header ── */
.invo-head{
  display:flex;flex-direction:column;gap:.7rem;
  margin-bottom:.85rem;
}
.invo-summary-bits{
  display:flex;gap:1rem;align-items:baseline;
}
.invo-bit{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;}
.invo-bit-label{
  font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);
}
.invo-bit strong{font-size:1rem;color:var(--text);font-variant-numeric:tabular-nums;}

/* ── List wrap & scroll ── */
.invo-list-wrap{
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
}
.invo-scroll{
  flex:1;overflow-y:auto;overflow-x:auto;min-height:0;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);
}

/* ── List table ── */
.invo-table{
  width:100%;border-collapse:collapse;font-size:.88rem;
}
.invo-table thead th{
  text-align:left;padding:.65rem .8rem;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text3);font-weight:600;
  border-bottom:1px solid var(--border);background:var(--surface2);
  position:sticky;top:0;z-index:1;
}
/* Sortable header — click to sort, re-click to reverse direction.
   The arrow span is always rendered (even on inactive columns) and
   inactive arrows are hidden with visibility:hidden rather than
   display:none so the column width stays constant as the active
   sort changes. */
.invo-th-sort{
  cursor:pointer;user-select:none;transition:color .1s;
}
.invo-th-sort:hover{color:var(--text2);}
.invo-th-sort.active{color:var(--accent);}
.invo-th-arrow{
  display:inline-block;margin-left:.2rem;font-size:.7em;
  vertical-align:baseline;visibility:hidden;
}
.invo-th-sort.active .invo-th-arrow{visibility:visible;}
/* Right-aligned columns: keep arrow tight to the label */
.invo-th-sort[style*="right"] .invo-th-arrow{margin-left:.2rem;}
.invo-table tbody td{
  padding:.7rem .8rem;border-bottom:1px solid var(--border);
  color:var(--text2);vertical-align:middle;
}
.invo-table tbody tr:last-child td{border-bottom:none;}
.invo-row{cursor:pointer;transition:background .12s;}
.invo-row:hover{background:var(--surface2);}
.invo-row td:first-child{color:var(--text);}

/* ── Status pill ── */
.invo-pill{
  display:inline-block;padding:.18rem .55rem;border-radius:11px;
  font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;
}

/* ── Editor shell ── */
.invo-edit-shell{
  flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.invo-edit-head{
  /* Action bar: stand out from the body content as a card. */
  display:flex;align-items:center;gap:.8rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.7rem .9rem;
  margin-bottom:1rem;
}
.invo-edit-head .btn{flex-shrink:0;}
.invo-edit-title{flex:1;font-size:1.05rem;color:var(--text);}
.invo-edit-actions{display:flex;gap:.5rem;}
.invo-edit-body{
  flex:1;display:grid;grid-template-columns:1fr 320px;gap:1.2rem;
  overflow-y:auto;padding-bottom:2rem;align-items:flex-start;
}
.invo-edit-col-main{display:flex;flex-direction:column;gap:1rem;min-width:0;}
.invo-edit-col-side{display:flex;flex-direction:column;gap:1rem;position:sticky;top:0;min-width:0;}

/* (b630) Mobile-only editor chrome — hidden on desktop. The bar and
   the header delete icon only exist on small screens; see the mobile
   redesign block near the v4.37.0 section. */
.invo-mobile-bar{display:none;}

/* ── Line item table (also used for tax-rates table in settings) ── */
.invo-li-table{
  width:100%;border-collapse:collapse;font-size:.85rem;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  overflow:hidden;
}
.invo-li-table thead th{
  text-align:left;padding:.55rem .75rem;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text3);font-weight:600;
  border-bottom:1px solid var(--border);background:var(--surface2);
}
.invo-li-table tbody td{
  padding:.55rem .65rem;border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.invo-li-table tbody tr:last-child td{border-bottom:none;}
.invo-li-table tbody tr:hover{background:var(--surface2);}
.invo-li-table input[type="text"],
.invo-li-table input[type="number"],
.invo-li-table select{
  width:100%;background:transparent;border:1px solid transparent;
  color:var(--text);padding:.45rem .6rem;border-radius:5px;
  font:inherit;font-size:.88rem;line-height:1.2;
  transition:border-color .12s, background .12s;
}
.invo-li-table input:hover:not(:focus),
.invo-li-table select:hover:not(:focus){
  background:var(--surface2);border-color:var(--border);
}
.invo-li-table input:focus,
.invo-li-table select:focus{
  outline:none;border-color:var(--accent);background:var(--bg);
}
/* Hide native spinner buttons on number inputs in line items.
   The OS-styled up/down arrows are visually noisy in dark themes
   and step="0.01" on qty was causing tiny 1.00 -> 1.01 increments
   that made it look like multiplication wasn't working. Users can
   still type values directly or use keyboard arrows (which respect
   the step attribute -- qty=1, rate=0.01). */
.invo-li-table input[type="number"]::-webkit-outer-spin-button,
.invo-li-table input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.invo-li-table input[type="number"]{-moz-appearance:textfield;}
.invo-li-table select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2380838c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right .55rem center;
  padding-right:1.7rem;cursor:pointer;
}
.invo-li-amount{
  color:var(--text);font-weight:500;
  font-variant-numeric:tabular-nums;
  padding-right:.85rem;
}

/* Linked-job picker (invoice editor) — searchable combobox.
   Replaces a plain <select> so the user can type to filter, see the
   most relevant active job at the top, and never have to scroll
   past archived ones. */
.invo-job-picker{ position:relative; }
.invo-job-picker-input-wrap{
  position:relative;
  display:flex;align-items:center;
}
.invo-job-picker-input{
  width:100%;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:6px;
  padding:.5rem .75rem;
  padding-right:2rem;        /* room for ✕ */
  font-size:.92rem;
  color:var(--text);
  font-family:var(--ui);
}
.invo-job-picker-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-dim);
}
.invo-job-picker-input-wrap.has-value .invo-job-picker-input{
  font-weight:600;
}
.invo-job-picker-clear{
  position:absolute;right:.55rem;
  width:18px;height:18px;border-radius:50%;
  background:var(--border3);color:var(--text3);
  border:none;cursor:pointer;font-size:.62rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .1s,color .1s;
}
.invo-job-picker-clear:hover{ background:var(--red); color:#fff; }
.invo-job-picker-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  z-index:50;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  max-height:320px;overflow-y:auto;
  padding:.25rem;
}
.invo-job-picker-row{
  padding:.5rem .65rem;
  border-radius:5px;
  cursor:pointer;
  transition:background .1s;
}
.invo-job-picker-row.active,
.invo-job-picker-row:hover{
  background:var(--surface2);
}
.invo-job-picker-row.active{
  outline:2px solid var(--accent-dim);
  outline-offset:-2px;
}
.invo-job-picker-row-name{
  font-size:.92rem;font-weight:600;color:var(--text);
  margin-bottom:.15rem;
}
.invo-job-picker-row-sub{
  font-size:.78rem;color:var(--text3);
}
.invo-job-picker-empty{
  padding:.85rem .75rem;font-size:.85rem;color:var(--text3);
  text-align:center;
}
.invo-job-picker-row.co-picker-add{
  border-top:1px solid var(--border);
  border-radius:0 0 5px 5px;
}
.invo-job-picker-row.co-picker-add .invo-job-picker-row-name{
  color:var(--accent);
  margin-bottom:0;
}

/* ── Line item cards (editor) ──
   Each line item is now a stacked two-row card instead of a single
   cramped table row. Row 1: Type combobox + Description + delete.
   Row 2: Qty | Rate | Tax | Amount. Type uses <input list> bound
   to a shared <datalist> for autocomplete from prior values. */
.invo-li-cards{
  display:flex;flex-direction:column;gap:.6rem;
}
.invo-li-card{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.75rem .9rem;
  display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .12s;
}
.invo-li-card:focus-within{border-color:var(--border3);}
/* Brief highlight pulse for "you already have this" feedback —
   used when clicking +Mileage on an invoice that already has a
   mileage line. Fades back to normal over ~1.5s. (v4.42.3+) */
.invo-li-card.flash-highlight,
.flash-highlight{
  animation: grip-flash-highlight 1.4s ease-out;
}
@keyframes grip-flash-highlight {
  0%   { background: rgba(245,166,35,.32); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,166,35,.15); }
  100% { background: var(--surface2);     border-color: var(--border); box-shadow: 0 0 0 0 transparent; }
}
.invo-li-row-1{
  display:grid;
  grid-template-columns:auto minmax(140px,1fr) minmax(0,2fr) auto;
  gap:.7rem;align-items:flex-end;
}
/* (b797) drag-to-reorder handle */
.invo-li-drag{
  background:none;border:0;color:var(--text3);cursor:grab;
  font-size:1rem;line-height:1;letter-spacing:-.15em;padding:.45rem .2rem;
  align-self:center;touch-action:none;user-select:none;-webkit-user-select:none;
}
.invo-li-drag:hover{color:var(--text);}
.invo-li-reordering .invo-li-card{transition:transform .12s ease;}
.invo-li-card.invo-li-dragging{
  transition:none;position:relative;z-index:5;cursor:grabbing;
  box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:.95;
}
.invo-li-row-2{
  display:grid;
  grid-template-columns:80px minmax(120px,150px) minmax(140px,180px) 1fr;
  gap:.7rem;align-items:flex-end;
}
.invo-li-field{display:flex;flex-direction:column;gap:.2rem;min-width:0;}
.invo-li-field label{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text3);font-weight:600;
}
.invo-li-field input,
.invo-li-field select{
  width:100%;background:var(--bg);border:1px solid var(--border);
  color:var(--text);padding:.45rem .6rem;border-radius:5px;
  font:inherit;font-size:.88rem;line-height:1.2;
  transition:border-color .12s, background .12s;
}
.invo-li-field input:hover:not(:focus),
.invo-li-field select:hover:not(:focus){
  border-color:var(--border2);
}
.invo-li-field input:focus,
.invo-li-field select:focus{
  outline:none;border-color:var(--accent);
}
/* Hide native number-input spinners — same approach as elsewhere */
.invo-li-field input[type="number"]::-webkit-outer-spin-button,
.invo-li-field input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.invo-li-field input[type="number"]{-moz-appearance:textfield;}
.invo-li-field-qty input,
.invo-li-field-rate input{text-align:right;font-variant-numeric:tabular-nums;}
.invo-li-field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2380838c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right .55rem center;
  padding-right:1.7rem;cursor:pointer;
}
/* Currency symbol prefix on money inputs (rate). Sits as an
   absolutely-positioned span over the input's left padding. */
.invo-li-money-wrap{position:relative;}
.invo-li-money-wrap .invo-li-money-sym{
  position:absolute;left:.6rem;top:50%;transform:translateY(-50%);
  color:var(--text3);font-size:.85rem;pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.invo-li-money-wrap input{padding-left:1.5rem;}
/* (b818) "in package" toggle lives in the Amount label */
.invo-li-field-amount>label{display:flex;justify-content:space-between;align-items:center;gap:.4rem;}
.invo-li-pkg{display:inline-flex;align-items:center;gap:.25rem;text-transform:none;letter-spacing:0;font-weight:500;color:var(--text3);cursor:pointer;white-space:nowrap;}
.invo-li-pkg input{width:auto;margin:0;accent-color:var(--accent);cursor:pointer;}
.invo-li-field input:disabled,.invo-li-field select:disabled{opacity:.45;cursor:not-allowed;}
.invo-li-amount-incl{font-style:italic;font-weight:400 !important;color:var(--text3) !important;}
.invo-pv-incl{color:var(--text3);font-style:italic;font-weight:400;}
.invo-pv-incl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px 14px;margin:2px 0 3px 18%;padding-left:9px;border-left:2px solid var(--cb-rule-soft);font-size:.82em;line-height:1.35;color:var(--cb-text3,var(--text3));}
.invo-pv-incl-item{min-width:0;}
.rinv-items-lbl{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:var(--text);margin:.2rem 0 .6rem;cursor:pointer;}
.rinv-items-lbl input{margin-top:.2rem;accent-color:var(--accent);}
.rinv-items-hint{display:block;font-size:.74rem;color:var(--text3);margin-top:.15rem;}
/* Amount is read-only output, not a field */
.invo-li-field-amount .invo-li-amount{
  padding:.45rem .6rem;border:1px solid transparent;
  font-size:1rem;font-weight:600;text-align:right;
  color:var(--text);font-variant-numeric:tabular-nums;
  background:transparent;
}
.invo-li-remove{
  background:transparent;border:1px solid var(--border);
  color:var(--text3);font-size:.95rem;line-height:1;
  width:32px;height:36px;border-radius:5px;cursor:pointer;
  align-self:flex-end;flex-shrink:0;
  transition:all .12s;
}
.invo-li-remove:hover{
  background:rgba(220,38,38,.1);border-color:#dc2626;color:#dc2626;
}

/* Receipt indicator row (v4.45.0+). Renders only when a line item
   carries a source_expense_id whose underlying expense has a receipt
   file on disk. Layout: paperclip glyph · vendor·date label · View
   button · Share-with-client checkbox.
   Two visual states keyed off data-shared on the row:
     0 = receipt is private to the issuer (outlined paperclip, neutral
         row background) — the recipient won't see it.
     1 = receipt is shared on the public invoice + email-attached
         (filled paperclip, accent-tinted background) — emphasises
         that this is visible client-side.
   Mirrors the .cifj-exp-attach toggle vibe so the affordance feels
   familiar to anyone who's used the CIFJ paperclip. */
.invo-li-receipt-row{
  display:flex;align-items:center;gap:.55rem;
  padding:.4rem .55rem;border:1px solid var(--border);border-radius:5px;
  background:var(--bg);
  font-size:.82rem;color:var(--text2);
  transition:background .12s, border-color .12s, color .12s;
}
.invo-li-receipt-row[data-shared="1"]{
  background:rgba(245,166,35,.08);
  border-color:rgba(245,166,35,.45);
  color:var(--text);
}
.invo-li-receipt-glyph{
  font-size:.95rem;line-height:1;
  filter:grayscale(1);opacity:.7;
}
.invo-li-receipt-row[data-shared="1"] .invo-li-receipt-glyph{
  filter:none;opacity:1;
}
.invo-li-receipt-meta{
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.invo-li-receipt-view{
  background:transparent;border:1px solid var(--border2);
  color:var(--text);font:inherit;font-size:.78rem;
  padding:.18rem .55rem;border-radius:4px;cursor:pointer;
  transition:all .12s;flex-shrink:0;
}
.invo-li-receipt-view:hover{
  background:var(--surface);border-color:var(--accent);color:var(--accent);
}
.invo-li-receipt-share{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.78rem;color:var(--text3);cursor:pointer;
  user-select:none;flex-shrink:0;
  padding:.18rem 0;
}
.invo-li-receipt-share input{
  margin:0;cursor:pointer;
  accent-color:var(--accent);
}
.invo-li-receipt-row[data-shared="1"] .invo-li-receipt-share{
  color:var(--text);
}
@media (max-width:540px){
  /* On narrow viewports the meta text gets clipped first; collapse
     the share label to just "Share" so it still fits. */
  .invo-li-receipt-share span{display:none;}
  .invo-li-receipt-share::after{
    content:"Share";font-size:.78rem;
  }
}

/* Activity log styling lives in the dash-act-* block above (shared
   with the home dashboard's recent-activity feed — they read the
   same since v4.9.2). The old invo-activity-* classes were retired
   when the per-invoice log adopted date-grouped rendering. */

@media (max-width:760px){
  /* On narrow screens collapse to single-column rows */
  .invo-li-row-1{
    grid-template-columns:auto 1fr auto;
  }
  .invo-li-drag{grid-column:1 / 2;grid-row:1 / 3;padding:.3rem .1rem;}
  .invo-li-field-type{grid-column:2 / -1;}
  .invo-li-field-desc{grid-column:2 / 3;}
  .invo-li-remove{grid-column:3 / 4;align-self:flex-end;}
  .invo-li-row-2{
    grid-template-columns:1fr 1fr;
  }
  /* (b630) Qty|Rate on one line, Tax|Amount on the next — the four
     money fields read as two tidy pairs instead of Tax hogging a
     whole row with Amount orphaned beneath it. */
}

/* ── Totals card (sticky right column) ── */
.invo-totals-card{
  padding:1rem 1.1rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
}
.invo-totals-card .set-group-head{
  margin-bottom:.55rem;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--border);
}
.invo-totals-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.32rem 0;color:var(--text2);font-size:.92rem;
}
.invo-totals-row strong{
  color:var(--text);font-variant-numeric:tabular-nums;
  font-size:.95rem;
}
.invo-totals-row input{
  background:var(--bg);border:1px solid var(--border);
  color:var(--text);padding:.35rem .55rem;border-radius:5px;
  font:inherit;font-size:.9rem;font-variant-numeric:tabular-nums;
  text-align:right;
  transition:border-color .12s;
}
.invo-totals-row input:hover:not(:focus){border-color:var(--border2);}
.invo-totals-row input:focus{outline:none;border-color:var(--accent);}
/* Match line-items: hide spinner buttons in totals card too. */
.invo-totals-row input[type="number"]::-webkit-outer-spin-button,
.invo-totals-row input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.invo-totals-row input[type="number"]{-moz-appearance:textfield;}

/* ── Send card buttons (v4.35.2) ──
   Shared geometry for the primary Send / Send Again button and
   the secondary Send Reminder button beneath it. Both span the
   card width and use the same padding/font weight so they form
   a tidy stack; only the colour treatment differs. */
.invo-btn-send{
  width:100%;
  justify-content:center;
  padding:.7rem 1rem;
  font-size:.95rem;
  font-weight:600;
}
/* Reminder = neutral filled button, sits below primary with a
   small gap. Inherits .btn's surface2 background + border so it
   reads as a real button (visible affordance) but visually
   subordinate to the accent-coloured primary above. The bell
   gets a subtle amber tint so the action's intent is still
   readable at a glance without competing for the click. */
.invo-btn-reminder{
  margin-top:.5rem;
  background:var(--surface2);
  color:var(--text);
  border-color:var(--border2);
}
.invo-btn-reminder:hover{
  background:var(--surface3);
  border-color:var(--accent-dim);
  color:var(--text);
}

/* ── Send & Share card (right column, below Totals) ──
   Unified output card (v4.46.0+). Replaces the previously-separate
   .invo-share-card (Online Link) and the bare Send card with a
   single panel divided into up to three vertically-stacked
   sections: Status (last sent + reminders), Public link (URL +
   Copy/Open or Generate button), and Send (primary + reminder).

   Internal layout principles:
     - Each section has a small uppercase label so they read as
       distinct units inside the same card without needing
       sub-headings or full visual separators.
     - A 1px hairline divider sits BETWEEN sections via
       `:not(:first-child)` border-top so the dividing line
       only appears when there are actually multiple sections —
       a never-sent invoice with no link section yet won't get
       a hanging divider.
     - URL row + action buttons reuse the .invo-share-url /
       .invo-share-actions classes from the prior standalone
       Online Link card; the rules are now scoped to the new
       parent so the visual treatment is identical.
*/
.invo-send-share-card .invo-ss-status,
.invo-send-share-card .invo-ss-section{
  padding: .85rem 0 0 0;
  margin-top: .85rem;
  border-top: 1px solid var(--border);
}
/* First inner block sits flush below the card header — no top
   border, no doubled gap. The card's own padding handles spacing. */
.invo-send-share-card .invo-ss-status:first-of-type,
.invo-send-share-card .invo-ss-section:first-of-type,
.invo-send-share-card .set-group-head + .invo-ss-status,
.invo-send-share-card .set-group-head + .invo-ss-section{
  border-top: none;
  margin-top: .55rem;
  padding-top: 0;
}
.invo-send-share-card .invo-ss-label{
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  margin-bottom: .4rem;
}
.invo-send-share-card .invo-ss-sub{
  font-size: .82rem;
  color: var(--text3);
  line-height: 1.4;
  margin-bottom: .65rem;
}
.invo-send-share-card .invo-ss-line{
  font-size: .82rem;
  color: var(--text3);
  line-height: 1.4;
  margin-bottom: .35rem;
}
.invo-send-share-card .invo-ss-line:last-child{
  margin-bottom: 0;
}
.invo-send-share-card .invo-ss-line strong{
  color: var(--text2);
  font-weight: 600;
}
.invo-send-share-card .invo-ss-line-sub{
  /* Slightly smaller / dimmer than the primary status line so
     the "last sent" date stays the focal point. */
  font-size: .8rem;
}
.invo-send-share-card .invo-ss-ord{
  color: var(--text3);
  font-size: .78rem;
}
.invo-send-share-card .invo-share-url{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.4;
  padding: .55rem .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: all;            /* triple-click selects the whole URL */
  cursor: text;
  flex: 1;
  min-width: 0;                /* let it shrink/ellipsis inside flex */
}
/* Compact link row (v4.46.1+). URL field flex-grows to take the
   remaining width; the two icon buttons sit on the right at fixed
   32×32. Replaces the prior stacked layout (full-width URL row +
   full-width Copy/Open pills) with a single dense row, freeing
   vertical space in the rail. */
.invo-send-share-card .invo-share-row{
  display: flex;
  align-items: stretch;
  gap: .35rem;
}
.invo-send-share-card .invo-share-icon-btn{
  flex: 0 0 auto;
  width: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .12s, background .12s, color .12s;
}
.invo-send-share-card .invo-share-icon-btn:hover{
  background: var(--surface2);
  border-color: var(--border2);
  color: var(--text);
}
.invo-send-share-card .invo-share-icon-btn:focus-visible{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(245,166,35,.25);
}

/* ── Preview / Print page ── */
/* ── Invoice preview / print page — app-native styling ──────────
   The in-app preview, the emailed HTML view, and the PDF all aim
   at the same visual identity: Inter sans throughout (no mono),
   rounded card corners that match the app's surface treatment,
   business name as the hero title (the app is white-label — the
   recipient never sees "CineBase" anywhere). The orange accent strip
   stays because it's a subtle brand touch and keeps documents
   visually identifiable as coming from the same workflow.

   v4.55.0: every gap/padding tightened so a typical 1-2 line item
   invoice + an attached receipt fits on a single Letter page when
   printed. Mirror changes live in invoice_html() in grip-api.php.
*/
.invo-preview-scroll{
  flex:1;min-height:0;overflow-y:auto;
  padding-bottom:1rem;     /* tail breathing room when scrolled all the way */
}
.invo-preview-page{
  --cb-orange:#f5a623;
  --cb-orange-dk:#c97509;
  --cb-ink:#0a0a0c;
  --cb-text:#1a1b1f;
  --cb-text2:#3a3c42;
  --cb-text3:#80838c;
  --cb-rule:#cdd0d6;
  --cb-rule-soft:#e6e8ed;
  --cb-surface:#fafafa;

  background:#fff;color:var(--cb-text);
  max-width:8.5in;margin:1.2rem auto 3rem;
  box-shadow:0 4px 24px rgba(0,0,0,.4);
  border-radius:12px;overflow:hidden;
  font-family:'CineBaseIcons','Inter','Helvetica Neue',Arial,sans-serif;
  font-size:10.5pt;line-height:1.45;
}
.invo-pv-accent{
  height:5px;background:var(--cb-orange);
}
.invo-pv-pad{padding:34px 36px 28px;}

.invo-pv-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;
  border-bottom:1px solid var(--cb-rule);
  padding-bottom:18px;margin-bottom:20px;
}
.invo-pv-from{flex:1;min-width:0;}
/* Business name is the hero — large, tight, the most prominent
   thing on the page. */
.invo-pv-bizname{
  font-size:20pt;font-weight:750;letter-spacing:-.02em;
  line-height:1.05;color:var(--cb-ink);margin-bottom:8px;
}
.invo-pv-addr{
  font-size:9pt;color:var(--cb-text2);line-height:1.5;
  white-space:pre-line;margin:0;
}
.invo-pv-meta{font-size:8.5pt;color:var(--cb-text3);margin-top:4px;}
.invo-pv-right{text-align:right;flex-shrink:0;}
/* "Invoice" doctype label — secondary to biz name; same family,
   just a little smaller and lower-case so it reads as a category
   label instead of a competing title. */
.invo-pv-doctype{
  font-size:13pt;font-weight:600;letter-spacing:-.01em;
  line-height:1.1;color:var(--cb-text2);
}
.invo-pv-num{
  font-family:'CineBaseIcons','Inter','Helvetica Neue',Arial,sans-serif;
  font-size:10.5pt;color:var(--cb-orange-dk);
  font-weight:600;margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.invo-pv-pill-wrap{margin-top:8px;}

/* Project block — appears AFTER the totals now (was before line
   items in earlier versions). Reads as: who/what/how-much first,
   then "this was for project X" as confirming context. */
.invo-pv-project{
  background:var(--cb-surface);
  border:1px solid var(--cb-rule-soft);
  border-left:3px solid var(--cb-orange);
  padding:9px 14px 11px;
  margin-top:12px;
  border-radius:8px;
}
.invo-pv-project-name{
  font-size:11pt;font-weight:700;color:var(--cb-ink);
  margin-bottom:2px;letter-spacing:-.005em;
}
.invo-pv-project-meta{
  font-size:9pt;color:var(--cb-text2);line-height:1.45;
}
.invo-pv-project-meta .invo-pv-dot,
.invo-pv-dot{color:var(--cb-rule);margin:0 6px;}

.invo-pv-meta-row{
  display:grid;grid-template-columns:1.3fr 1fr;
  gap:24px;margin-bottom:14px;align-items:flex-start;
}
.invo-pv-eyebrow{
  font-size:7pt;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;color:var(--cb-orange);margin-bottom:4px;
}
.invo-pv-eyebrow.muted{color:var(--cb-text3);}
.invo-pv-billto{min-width:0;}
.invo-pv-billto-name{
  font-size:10.5pt;font-weight:700;color:var(--cb-ink);margin-bottom:2px;
}
.invo-pv-attn{
  font-size:8.5pt;color:var(--cb-text3);margin-top:4px;
}
.invo-pv-numbers{
  display:grid;grid-template-columns:auto 1fr;
  gap:3px 14px;align-items:baseline;font-size:9pt;
}
.invo-pv-numbers .l{
  font-size:7pt;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--cb-text3);text-align:right;
}
.invo-pv-numbers .v{
  font-weight:500;color:var(--cb-ink);text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Line items — wrap in a rounded card so the table edge respects
   the rest of the document's corner radius. */
.invo-pv-items-wrap{
  border:1px solid var(--cb-rule-soft);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:6px;
}
.invo-pv-items{
  width:100%;border-collapse:collapse;
  font-size:9pt;
}
.invo-pv-items thead th{
  background:var(--cb-ink);color:#fafafc;
  font-size:7pt;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;padding:7px 10px;text-align:left;
}
.invo-pv-items thead th.r{text-align:right;}
.invo-pv-items tbody td{
  padding:7px 10px;border-bottom:1px solid var(--cb-rule-soft);
  color:var(--cb-text);vertical-align:top;
}
.invo-pv-items tbody tr:last-child td{ border-bottom:none; }
.invo-pv-items tbody tr:nth-child(even of :not(.invo-pv-incl-row)) td{background:var(--cb-surface);}
.invo-pv-items tbody tr.invo-pv-has-incl:nth-child(even of :not(.invo-pv-incl-row)) + tr.invo-pv-incl-row td{background:var(--cb-surface);}
.invo-pv-items tbody tr.invo-pv-has-incl td{border-bottom:none;padding-bottom:2px;}
.invo-pv-items tbody tr.invo-pv-incl-row td{padding-top:0;}
.invo-pv-items td.invo-pv-num{
  text-align:right;font-variant-numeric:tabular-nums;
  font-family:inherit;color:var(--cb-text);font-weight:400;
  margin-top:0;
}
.invo-pv-items td.invo-pv-li-type{
  font-weight:600;color:var(--cb-ink);width:18%;
}
.invo-pv-items td.invo-pv-li-desc{color:var(--cb-text2);}
.invo-pv-items td.invo-pv-li-amt{font-weight:600;color:var(--cb-ink);}

/* Inline receipt link inside the description cell (v4.45.0+,
   visually retuned in v4.54.0 to match the public invoice_html()
   exactly). Subtle accent-tinted background, no border, soft
   underline on hover. The preview only renders this for
   attach_receipt=1 lines (private receipts are deliberately
   omitted from the preview — see the receiptInline assembly in
   renderInvoicePreview), so we only need the "shared" treatment. */
.invo-pv-li-receipt{
  display:inline-block;
  margin-left:6px;padding:0 4px;
  font-size:8.5pt;color:var(--cb-orange-dk);
  text-decoration:none;border-radius:3px;
  background:rgba(217,119,6,.06);
  white-space:nowrap;
  vertical-align:baseline;
  transition:background .12s;
}
.invo-pv-li-receipt:hover{
  text-decoration:underline;
  background:rgba(217,119,6,.12);
}
/* Legacy data-shared="0" style retained for any non-preview render
   path that still uses .invo-pv-li-receipt with private state. */
.invo-pv-li-receipt[data-shared="0"]{
  color:var(--cb-text3);
  background:transparent;
  border:1px solid var(--cb-rule);
}
.invo-pv-li-receipt-priv{
  font-style:italic;color:var(--cb-text3);font-size:7.5pt;
}
.invo-pv-items td.invo-pv-empty{
  color:var(--cb-text3);font-style:italic;padding:18px 12px;
  text-align:center;
}

/* Attached receipts footer block (v4.54.0+). Mirrors the public
   invoice_html()'s .ar-* — same .invo-pv-block chrome, but with
   an orange left border (instead of grey) so it reads as supporting
   documentation rather than just another note. Each row links to
   the receipt via viewExpenseReceipt(). Hidden by JS when no
   line item has attach_receipt=1. */
.invo-pv-block.invo-pv-ar-block{
  border-left-color:var(--cb-orange-dk);
}
.invo-pv-ar-list{
  display:block;font-size:9.5pt;
}
.invo-pv-ar-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  text-decoration:none;color:var(--cb-text2);
  border-radius:6px;cursor:pointer;
  transition:background .12s;
}
.invo-pv-ar-row + .invo-pv-ar-row{
  border-top:1px solid var(--cb-rule-soft);
}
.invo-pv-ar-row:hover{
  background:rgba(217,119,6,.05);
}
.invo-pv-ar-icon{ font-size:11pt;flex-shrink:0; }
.invo-pv-ar-vendor{ flex:1;font-weight:600;color:var(--cb-ink); }
.invo-pv-ar-meta{ color:var(--cb-text3);font-size:8.5pt; }
.invo-pv-ar-action{
  color:var(--cb-orange-dk);font-weight:600;
  font-size:9pt;flex-shrink:0;
}
/* Tax column. Header inherits the standard items-thead styling
   (uppercase tracked) — only the cells need the softer grey +
   tabular treatment. */
.invo-pv-items th.invo-pv-li-tax-col{white-space:nowrap;}
.invo-pv-items td.invo-pv-li-tax{
  white-space:nowrap;color:var(--cb-text3);
  font-size:9pt;font-variant-numeric:tabular-nums;
  text-align:left;
  font-family:inherit;font-weight:400;margin-top:0;
}
/* Within the totals card, the rate parenthetical is softer grey
   so the tax-name reads as the primary label. */
.invo-pv-totals .invo-pv-t-rate{color:var(--cb-text3);font-weight:500;}

/* Paid badge — replaces the pill on fully-paid invoices. Bigger,
   bolder, with a checkmark badge — communicates "you're square,
   no action needed" at a glance. Only this state is shown on the
   document; every other status is admin-internal and surfaces in
   the editor toolbar instead. */
.invo-pv-paid-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:#10b981;color:#fff;
  padding:6px 14px;border-radius:7px;
  font-size:10.5pt;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.invo-pv-paid-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;
  background:rgba(255,255,255,.22);
  font-size:10pt;line-height:1;
}

/* Notes + totals row — places (optional) Notes block on the
   left, totals card on the right. Saves the empty space the
   right-aligned totals card used to leave on the left. */
table.invo-pv-totals-row{
  width:100%;border-collapse:collapse;margin-top:10px;
}
table.invo-pv-totals-row > tbody > tr > td{
  vertical-align:top;padding:0;
}
table.invo-pv-totals-row > tbody > tr > td.invo-pv-totals-row-left{
  padding-right:14px;
}
table.invo-pv-totals-row > tbody > tr > td.invo-pv-totals-row-right{
  width:1%;             /* shrink-fit so totals card sets its own width */
  white-space:nowrap;
}
/* Notes inside the row drops its top margin — wrapping table
   provides the spacing from above. */
table.invo-pv-totals-row .invo-pv-block{margin-top:0;}

/* Totals card — was a flex .invo-pv-totals div, now a styled
   table living inside totals-row-right. */
table.invo-pv-totals{
  border-collapse:separate;border-spacing:0;
  min-width:280px;border-radius:8px;overflow:hidden;
  border:1px solid var(--cb-rule-soft);
}
table.invo-pv-totals td{padding:5px 14px;font-size:9.5pt;white-space:nowrap;}
table.invo-pv-totals tr:first-child td{padding-top:8px;}
table.invo-pv-totals td.t-label{
  color:var(--cb-text3);font-weight:600;font-size:8pt;
  text-transform:uppercase;letter-spacing:.07em;
}
table.invo-pv-totals td.num{
  text-align:right;color:var(--cb-ink);
  font-variant-numeric:tabular-nums;
}
table.invo-pv-totals tr.tot td{
  border-top:1.5px solid var(--cb-ink);
  font-size:9pt;color:var(--cb-ink);font-weight:700;
  padding-top:7px;
}
table.invo-pv-totals tr.tot td.t-label{color:var(--cb-ink);}
table.invo-pv-totals tr.bal td{
  background:var(--cb-ink);color:#fff;font-weight:700;
  padding:8px 14px;letter-spacing:.05em;
}
table.invo-pv-totals tr.bal td.t-label{color:#fff;font-size:8.5pt;}
table.invo-pv-totals tr.bal td.num{
  color:var(--cb-orange);font-size:11pt;
}

/* Mobile: stack notes above totals */
@media (max-width:640px){
  table.invo-pv-totals-row,
  table.invo-pv-totals-row > tbody,
  table.invo-pv-totals-row > tbody > tr,
  table.invo-pv-totals-row > tbody > tr > td.invo-pv-totals-row-left,
  table.invo-pv-totals-row > tbody > tr > td.invo-pv-totals-row-right{
    display:block;width:100%;padding:0;
  }
  table.invo-pv-totals-row > tbody > tr > td.invo-pv-totals-row-right{margin-top:14px;}
}

.invo-pv-block{
  background:var(--cb-surface);
  border:1px solid var(--cb-rule-soft);
  border-left:3px solid var(--cb-text3);
  padding:9px 14px;margin-top:10px;border-radius:8px;
}
.invo-pv-block-text{
  font-size:9pt;color:var(--cb-text2);line-height:1.45;
  white-space:pre-wrap;
}
/* Side-by-side container for Payment Information + Terms when
   both are present. The table (rather than flex/grid) keeps the
   layout robust across browser print engines. */
table.invo-pv-block-grid{
  width:100%;border-collapse:collapse;margin-top:10px;
}
table.invo-pv-block-grid > tbody > tr > td{
  vertical-align:top;width:50%;padding:0;
}
table.invo-pv-block-grid > tbody > tr > td.invo-pv-block-grid-left{padding-right:7px;}
table.invo-pv-block-grid > tbody > tr > td.invo-pv-block-grid-right{padding-left:7px;}
/* Inner blocks lose top margin — the wrapping table provides
   the spacing from above. */
table.invo-pv-block-grid .invo-pv-block{margin-top:0;}
/* Mobile: stack */
@media (max-width:540px){
  table.invo-pv-block-grid,
  table.invo-pv-block-grid > tbody,
  table.invo-pv-block-grid > tbody > tr,
  table.invo-pv-block-grid > tbody > tr > td.invo-pv-block-grid-left,
  table.invo-pv-block-grid > tbody > tr > td.invo-pv-block-grid-right{
    display:block;width:100%;padding:0;
  }
  table.invo-pv-block-grid > tbody > tr > td.invo-pv-block-grid-right .invo-pv-block{margin-top:14px;}
}
.invo-pv-footer{
  text-align:center;margin-top:16px;padding-top:10px;
  border-top:1px solid var(--cb-rule-soft);
  font-size:8.5pt;color:var(--cb-text3);font-style:italic;
}
/* Doc footer — quiet provenance line. Sans-serif (was mono),
   sentence case (was UPPER), and shows the business name only —
   no app-branding reference. */
.invo-pv-doc-footer{
  margin-top:14px;padding:8px 0 0;
  border-top:1px solid var(--cb-rule-soft);
  font-size:8pt;color:var(--cb-text3);
  letter-spacing:.02em;text-align:center;
}

/* ── Statement of Account modal (v4.34.0) ──
   Wider modal than the standard one (the printable layout needs
   horizontal room — 7-column invoice table). The body holds a
   .invo-preview-page with all the invoice-preview classes, so we
   piggyback on those for the printable visuals; the .stmt-* classes
   layer on top for the bits the invoice preview doesn't have. */
.stmt-modal{
  width:880px;
  max-width:96vw;
  max-height:90vh;
  padding:1.1rem;
  display:flex;flex-direction:column;
}
.stmt-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;margin-bottom:.85rem;flex-wrap:wrap;
}
.stmt-modal-head .modal-title{
  margin-bottom:0;
}
.stmt-modal-actions{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
/* Show-paid toggle — small inline switch styled to match the modal
   chrome rather than a plain checkbox. */
.stmt-toggle{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.32rem .55rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  color:var(--text2);font-size:.82rem;cursor:pointer;
  user-select:none;
}
.stmt-toggle input{margin:0;cursor:pointer;}
.stmt-toggle:has(input:checked){
  background:var(--accent-dim);border-color:var(--accent);color:var(--text);
}
.stmt-modal-body{
  flex:1;overflow-y:auto;
  background:transparent;
  /* Padding 0 — the .invo-preview-page wrapper inside has its own
     padding via .invo-pv-pad. */
}

/* Statement-specific page tweaks layered over .invo-preview-page */
.stmt-page{
  /* Slightly tighter max-width than the invoice preview default —
     the statement is denser per row. */
  max-width:none;
  width:100%;
}

/* Statement items table — extends .invo-pv-items styling */
.stmt-items thead th,
.stmt-items tbody td{
  font-size:9.5pt;
}
.stmt-items .stmt-num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.stmt-items thead th.stmt-num{ text-align:right; }
.stmt-items tbody td.stmt-num-bal{
  font-weight:700;
  color:#111;
}
.stmt-empty-row{
  padding:1.4rem 1rem !important;
  text-align:center;
  color:#666;
  font-style:italic;
}
/* Inline pills inside the Invoice # cell */
.stmt-row-overdue{
  display:inline-block;
  margin-left:.4rem;
  padding:.05em .42em;
  font-size:.72em;font-weight:600;
  background:#fde8e8;color:#9a1a1a;
  border-radius:3px;
  letter-spacing:.02em;
  vertical-align:.06em;
}
.stmt-row-paid{
  display:inline-block;
  margin-left:.4rem;
  padding:.05em .42em;
  font-size:.72em;font-weight:600;
  background:#e7f6ec;color:#1a6c2e;
  border-radius:3px;
  letter-spacing:.02em;
  vertical-align:.06em;
}

/* Summary card — stacked rows, grand total emphasized. Sits to the
   right at desktop width, stacks below on narrow. */
.stmt-summary{
  display:flex;flex-direction:column;gap:.25rem;
  margin:1rem 0 0;
  padding:.75rem 1rem;
  background:#fafafa;
  border:1px solid #e5e5e5;border-radius:4px;
  align-self:flex-end;
  max-width:340px;
  margin-left:auto;
  font-size:9.5pt;
}
.stmt-summary-row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:.7rem;
}
.stmt-summary-label{ color:#666; }
.stmt-summary-val{
  font-weight:600;color:#111;
  font-variant-numeric:tabular-nums;
}
.stmt-summary-grand{
  margin-top:.35rem;padding-top:.45rem;
  border-top:2px solid #d0d0d0;
  font-size:11pt;
}
.stmt-summary-grand .stmt-summary-label{
  color:#111;font-weight:600;
}
.stmt-summary-grand .stmt-summary-val{
  color:#c63;font-size:13pt;font-weight:700;
}

/* Aging buckets — 5-column horizontal strip below the items table */
.stmt-aging{
  margin-top:1.1rem;
  padding:.85rem 1rem;
  background:#fff;
  border:1px solid #e5e5e5;border-radius:4px;
}
.stmt-aging-title{
  font-size:8.5pt;text-transform:uppercase;letter-spacing:.06em;
  color:#666;font-weight:700;margin-bottom:.55rem;
}
.stmt-aging-grid{
  display:grid;grid-template-columns:repeat(5, 1fr);gap:.4rem;
}
.stmt-aging-cell{
  text-align:center;
  padding:.45rem .35rem;
  border:1px solid #eee;border-radius:3px;
  background:#fafafa;
}
.stmt-aging-label{
  font-size:8.5pt;color:#666;font-weight:600;
  white-space:nowrap;
}
.stmt-aging-val{
  margin-top:.2rem;
  font-size:10pt;font-weight:700;color:#111;
  font-variant-numeric:tabular-nums;
}
.stmt-aging-cell-zero .stmt-aging-val{
  color:#bbb;font-weight:500;
}

/* Payment instructions block at the bottom */
.stmt-pay-instr{
  margin-top:1.1rem;
  padding:.7rem 0 0;
  border-top:1px solid #eee;
}
.stmt-pay-instr-title{
  font-size:8.5pt;text-transform:uppercase;letter-spacing:.06em;
  color:#666;font-weight:700;margin-bottom:.4rem;
}
.stmt-pay-instr-body{
  font-size:9.5pt;color:#333;line-height:1.5;
}

@media (max-width:760px){
  .stmt-modal{padding:.75rem;}
  .stmt-modal-head{gap:.5rem;}
  .stmt-modal-actions{width:100%;justify-content:flex-end;}
  .stmt-aging-grid{grid-template-columns:repeat(2, 1fr);}
  .stmt-summary{max-width:none;align-self:stretch;}
  /* On narrow screens, drop the Job column to save room */
  .stmt-items thead th:nth-child(4),
  .stmt-items tbody td:nth-child(4){display:none;}
}

/* ── Print: hide app chrome, let the preview page fill the sheet ── */
@media print{
  body > *{display:none !important;}
  body > .view.active,
  body > .view.active *{display:revert !important;}
  /* Statement modal opts in to print — surface the page contents,
     hide the modal frame + action chrome. */
  body > .overlay#m-statement,
  body > .overlay#m-statement *{display:revert !important;}
  body > .overlay#m-statement{
    position:static !important;
    background:transparent !important;
    backdrop-filter:none !important;
    display:block !important;
  }
  body > .overlay#m-statement .modal{
    width:100% !important;
    max-width:none !important;
    max-height:none !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
    overflow:visible !important;
    background:#fff !important;
  }
  .stmt-modal-head{display:none !important;}
  .stmt-modal-body{overflow:visible !important;}
  .invo-edit-head,.invo-edit-actions,
  .nav-tab,.nav-bar,.bottom-nav,
  .header,.drawer,.drawer-overlay{display:none !important;}
  .invo-preview-page{
    box-shadow:none;margin:0;border-radius:0;
    max-width:none;width:100%;
  }
  /* Match the screen .invo-pv-pad value at print time too — the prior
     override (.35in .4in) squashed the top from 42px down to ~33px, so
     the hero "Dan Barham Productions" sat too close to the orange
     accent strip on the printed sheet / saved PDF. The 42/36/28 trio
     gives the same comfortable breathing room as the live preview. */
  .invo-pv-pad{padding:34px 36px 28px;}
  .invo-edit-shell{overflow:visible !important;}
  .invo-preview-scroll{overflow:visible !important;padding:0;}
  /* Letter print: tight page margins so a 1-2 line invoice + a
     receipt fits on a single sheet. Browser default margins (often
     ~.75in) push too much content overflow; .35in is enough room
     for printer hardware bleed without wasting vertical space. */
  @page{ size:Letter; margin:.35in .4in; }
}

/* ── Mobile responsive ── */
@media (max-width:760px){
  .invo-shell-inner{padding:.7rem .8rem 0;}
  .invo-edit-body{grid-template-columns:1fr;}
  .invo-edit-col-side{position:static;}
  .invo-table{font-size:.8rem;}
  .invo-table thead th,.invo-table tbody td{padding:.5rem .55rem;}
  /* On narrow screens, hide the Issued/Due columns. Class-based
     (b674) instead of nth-child so the ≤560px card layout at the
     bottom of this file can re-enable Due inside the card. */
  .invo-table .invo-th-issue_date, .invo-table .invo-td-issued,
  .invo-table .invo-th-due_date,  .invo-table .invo-td-due{display:none;}
  .invo-li-table{font-size:.78rem;}
  .invo-li-table input,.invo-li-table select{padding:.3rem .4rem;font-size:.78rem;}
  .invo-preview-page{padding:.5in .4in;font-size:10pt;}
  .invo-pv-title{font-size:1.5rem;}
  .invo-pv-header,.invo-pv-meta-row{flex-direction:column;gap:.7rem;}
  .invo-pv-numbers{text-align:left;}
}

/* ════════════════════════════════════════════════════════════
   Invoice Editor — Mobile (v4.37.0)
   ════════════════════════════════════════════════════════════
   The editor is the densest screen in the app — one form drives
   four sub-sections (Bill To, Invoice Details, Line Items,
   Payments) plus a sticky-side totals card. The desktop rules
   above already collapse the two-column body and unstick the
   side card; this block handles everything else: header reflow,
   touch-friendly inputs, line-item card spacing, and a card-
   style payments table.

   Breakpoint: ≤760px (matches the rest of the editor). */
@media (max-width:760px){

  /* ── Header ──
     Wrap to two rows: row 1 has back-arrow + title; row 2 has
     the action buttons spanning full width with Save weighted
     heavier. The back-button label collapses to a chevron and
     the Save-Changes label drops "Changes" (handled by the
     spans added in renderInvoiceEditor). */
  .invo-edit-head{
    flex-wrap:wrap;
    gap:.5rem .55rem;
    padding:.6rem .7rem;
    margin-bottom:.7rem;
  }
  .invo-edit-back{
    flex-shrink:0;
    padding:.5rem .65rem;
    min-width:40px;
    justify-content:center;
  }
  .invo-back-label{display:none;}
  .invo-back-arrow{font-size:1.05rem;line-height:1;}
  .invo-edit-title{
    flex:1;font-size:.92rem;line-height:1.25;min-width:0;
  }
  .invo-edit-title strong{display:block;font-size:.95rem;}
  .invo-edit-title > span{
    /* Stack the invoice number under the title — clears the
       inline margin from the renderer and lets long numbers
       wrap rather than push the Save button off-screen. */
    display:block;margin-left:0 !important;font-size:.78rem;
    overflow-wrap:anywhere;
  }
  /* (b630) Mobile redesign: the header actions cluster is GONE on
     phones — Save/Preview live in the fixed bottom bar (thumb reach,
     always visible); Delete lives on the invoice detail popup (b821).
     The head collapses to one clean row: ← | title. */
  .invo-edit-actions{display:none;}

  /* ── Bottom action bar ──
     Fixed to the viewport bottom (above the app bottom-nav when it's
     present — see the ≤700px override below). Left side: live
     Balance Due + autosave dot, tappable to jump to the totals card.
     Right side: Preview + Save/Create. */
  .invo-mobile-bar{
    display:flex;align-items:center;gap:.55rem;
    position:fixed;left:0;right:0;bottom:0;z-index:290;
    background:var(--surface);
    border-top:1px solid var(--border);
    padding:.55rem .85rem calc(.55rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 18px rgba(0,0,0,.28);
  }
  .invo-mbar-tot{
    flex:1 1 auto;min-width:0;
    display:flex;flex-direction:column;gap:.1rem;
    background:none;border:none;padding:0;margin:0;
    text-align:left;cursor:pointer;font:inherit;color:inherit;
  }
  .invo-mbar-label{
    display:flex;align-items:center;gap:.35rem;white-space:nowrap;
    font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;
    color:var(--text3);font-weight:600;
  }
  .invo-mbar-bal{
    font-size:1.12rem;color:var(--accent);line-height:1.15;
    font-variant-numeric:tabular-nums;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
  }
  /* Autosave state dot — driven by data-state on #invo-mobile-bar
     (set in _invoSetSaveInd). Invisible when idle. */
  .invo-mbar-dot{
    width:7px;height:7px;border-radius:50%;flex:none;
    background:transparent;transition:background .15s;
  }
  #invo-mobile-bar[data-state="pending"] .invo-mbar-dot,
  #invo-mobile-bar[data-state="saving"] .invo-mbar-dot{background:var(--accent);}
  #invo-mobile-bar[data-state="saved"] .invo-mbar-dot{background:var(--green,#3fa34d);}
  #invo-mobile-bar[data-state="error"] .invo-mbar-dot{background:#dc2626;}
  .invo-mbar-preview{
    flex:0 0 auto;padding:.62rem .8rem;font-size:.85rem;
    justify-content:center;
  }
  .invo-mbar-save{
    flex:0 0 auto;min-width:100px;justify-content:center;
    padding:.62rem 1.05rem;font-size:.92rem;font-weight:600;
  }
  /* Receipt pass-through rows: let the meta + actions wrap instead
     of forcing the card wide. */
  .invo-li-receipt-row{flex-wrap:wrap;}
  .invo-li-receipt-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;}

  /* ── Section cards ──
     Tighter padding so more content fits per screen. The
     header lets right-side buttons wrap so a long
     "+ Mileage (245 km · $0.68)" never pushes past the edge. */
  .invo-edit-shell .set-group{
    padding:.85rem .9rem;margin-bottom:.7rem;border-radius:8px;
    min-width:0;
  }
  .invo-edit-shell .set-group-head{
    flex-wrap:wrap;gap:.5rem .8rem;
    margin-bottom:.7rem;padding-bottom:.5rem;
  }
  /* The right-side action cluster on Line Items / Payments
     section heads is an inline-styled <div style="display:flex">.
     Add wrap so its own children (Mileage + Add Line buttons)
     break to a new line if they don't fit, instead of forcing
     the whole row past the viewport edge. */
  .invo-edit-shell .set-group-head > div{flex-wrap:wrap;}

  /* ── Field rows ──
     Issue / Due / Terms — let dates pair side-by-side; Terms
     drops to its own row beneath. Saves vertical space without
     making the dates uncomfortably narrow (the global rule at
     line ~4972 forces 1fr — we override here, scoped). */
  .invo-edit-shell .set-field-row.three-col{
    grid-template-columns:1fr 1fr;gap:.5rem;
  }
  .invo-edit-shell .set-field-row.three-col > .set-field:nth-child(3){
    grid-column:1 / -1;
  }
  /* Trim horizontal padding for the dates so the native iOS date
     widget (date text + calendar icon) actually fits in a half-
     column on a 375px-wide viewport. min-width:0 on the inputs
     plus min-width:0 on the cells lets grid shrink them past
     intrinsic content width when needed. */
  .invo-edit-shell .set-field-row.three-col > .set-field{min-width:0;}
  .invo-edit-shell .set-field-row.three-col input[type="date"],
  .invo-edit-shell .set-field-row.three-col input[type="text"]{
    padding-left:.55rem;padding-right:.55rem;
  }

  /* Larger touch targets across all editor inputs. font-size:16px
     is deliberate — anything smaller triggers iOS Safari's "zoom
     in on focus" behavior, which throws the form layout off.
     min-width:0 is the iOS-Safari workaround that lets native
     date/select widgets actually shrink to their grid/flex cell
     instead of refusing to drop below their intrinsic content. */
  .invo-edit-shell .set-field input,
  .invo-edit-shell .set-field textarea,
  .invo-edit-shell .set-field select{
    padding:.7rem .8rem;font-size:16px;min-width:0;
  }
  .invo-edit-shell .invo-job-picker-input{
    padding:.7rem .85rem;font-size:16px;
  }

  /* ── Line item cards ──
     Already collapse via the existing 760px rule above. Layer on
     bigger tap targets and a slightly larger remove-X. */
  .invo-li-card{padding:.7rem .75rem;gap:.55rem;}
  .invo-li-row-1, .invo-li-row-2{gap:.55rem;}
  .invo-li-field input,
  .invo-li-field select{padding:.6rem .7rem;font-size:16px;}
  .invo-li-money-wrap input{padding-left:1.6rem;}
  .invo-li-money-wrap .invo-li-money-sym{font-size:.92rem;}
  .invo-li-field-amount .invo-li-amount{
    padding:.55rem .6rem;font-size:1.05rem;
    text-align:right;background:var(--surface2);
    border-radius:6px;font-weight:600;
    font-variant-numeric:tabular-nums;
  }
  .invo-li-remove{width:38px;height:42px;font-size:1rem;}

  /* ── Totals card ──
     Once it stacks below the main column it's the only
     "summary at a glance" the user gets — give it a slight
     elevated treatment so it still reads as a summary card.
     Wider deposit input since horizontal space is no longer
     constrained by the 320px sidebar. */
  .invo-totals-card{
    padding:.95rem 1rem;border-color:var(--border2);
  }
  .invo-totals-row{padding:.45rem 0;font-size:.95rem;}
  .invo-totals-row strong{font-size:1rem;}
  .invo-totals-row input{
    padding:.5rem .7rem;font-size:16px;width:120px;
  }

  /* ── Payments table → cards ──
     The 5-column table (Date | Method | Reference | Amount | X)
     is unreadable on a phone. Reflow each <tr> into a stacked
     mini-card, hide the <thead>. Scoped to .invo-edit-shell so
     the settings tax-rate table (which also uses .invo-li-table)
     keeps its desktop layout on mobile. */
  .invo-edit-shell .invo-li-table{
    display:block;border:none;background:transparent;
    font-size:inherit;
  }
  .invo-edit-shell .invo-li-table thead{display:none;}
  .invo-edit-shell .invo-li-table tbody{
    display:flex;flex-direction:column;gap:.5rem;
  }
  .invo-edit-shell .invo-li-table tbody tr{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "date     amount"
      "method   amount"
      "ref      delete";
    column-gap:.6rem;row-gap:.15rem;align-items:center;
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:8px;
    padding:.65rem .8rem;
  }
  .invo-edit-shell .invo-li-table tbody tr:hover{background:var(--surface2);}
  .invo-edit-shell .invo-li-table tbody td{
    padding:0;border:none;font-size:.85rem;line-height:1.3;
  }
  .invo-edit-shell .invo-li-table tbody td:nth-child(1){
    grid-area:date;font-weight:600;color:var(--text);
  }
  .invo-edit-shell .invo-li-table tbody td:nth-child(2){
    grid-area:method;color:var(--text2);font-size:.82rem;
  }
  .invo-edit-shell .invo-li-table tbody td:nth-child(3){
    grid-area:ref;color:var(--text3);font-size:.78rem;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  }
  .invo-edit-shell .invo-li-table tbody td:nth-child(4){
    grid-area:amount;text-align:right !important;
    font-weight:600;font-size:1.05rem;color:var(--text);
    font-variant-numeric:tabular-nums;
    align-self:start;
  }
  .invo-edit-shell .invo-li-table tbody td:nth-child(5){
    grid-area:delete;justify-self:end;align-self:end;
  }

  /* ── Recipient cards ──
     auto-fill 220px already collapses to 1 column under ~370px;
     force 1 column at all phone widths so each card has room for
     name + role + email on one line each. */
  .invo-recipient-cards{grid-template-columns:1fr;}
  .invo-rp-card{padding:.6rem .75rem;}

  /* ── Bottom safe-area + horizontal-overflow guard ──
     iOS home-indicator clearance so the last form field isn't
     swallowed by the gesture bar. overflow-x:clip is a defensive
     guard: .invo-edit-body has overflow-y:auto, which per the
     CSS spec coerces a `visible` x-axis to `auto` — meaning any
     child that's accidentally wider than the body would create
     a horizontal scrollbar. `clip` (rather than `hidden`) avoids
     creating a scroll container in either axis. */
  .invo-edit-body{
    /* (b630) 96px clears the fixed bottom action bar; the ≤700px
       override below adds the app bottom-nav's height on top. */
    padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));
    overflow-x:clip;
  }
}

/* Tighter ramp for very narrow phones (≤380px). Stack the Issue/Due
   dates row since iOS native date widgets really want ~150px each and
   a half-column at 360-375px barely provides that even with trimmed
   padding. (b630: the old Save-promotion rules for the header actions
   cluster are gone — actions live in the fixed bottom bar now.) */
@media (max-width:380px){
  .invo-edit-shell .set-field-row.three-col{
    grid-template-columns:1fr;
  }
  .invo-mbar-preview{padding:.62rem .6rem;font-size:.82rem;}
  .invo-mbar-save{min-width:88px;padding:.62rem .85rem;}
}

/* (b630) When the app bottom-nav is on screen (≤700px), the invoice
   editor's action bar stacks ABOVE it: the nav carries the safe-area
   inset itself, so the bar drops its own. Placed AFTER the ≤760px
   editor rules so it wins the equal-specificity cascade. */
@media (max-width:700px){
  .invo-mobile-bar{
    bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));
    padding-bottom:.55rem;
  }
  body.is-renter .invo-mobile-bar{bottom:0;padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px));}
  .invo-edit-body{
    padding-bottom:calc(var(--bnav-h) + 96px + env(safe-area-inset-bottom,0px));
  }
}

/* ════════════════════════════════════════════════════════════
   Row-click loading indicator (applied by the global delegator
   in index.html — see ROW_LOADING_SELECTORS / _markRowLoading)
   ════════════════════════════════════════════════════════════
   Subtle row dim + small spinner pinned to the right edge so the
   user gets immediate "click registered" feedback during the brief
   gap between click and the next render landing. Layout-neutral:
   the spinner is absolutely-positioned, the row's contents don't
   shift.

   IMPORTANT: rules below are scoped strictly under .row-loading so
   inactive rows reserve no space whatsoever — the ::after has no
   `content` declaration outside the .row-loading class, so the
   pseudo-element doesn't generate a box at all on normal rows. */

.row-loading{
  position:relative;
  pointer-events:none;          /* prevent double-clicks */
}
.row-loading > *{
  opacity:.55;
  transition:opacity .12s;
}
.row-loading::after{
  content:'';
  position:absolute;
  top:50%;right:.85rem;
  width:14px;height:14px;
  margin-top:-7px;
  border:2px solid var(--border2);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:row-loading-spin .7s linear infinite;
  z-index:5;
  pointer-events:none;
  /* Don't dim the spinner itself */
  opacity:1;
}
@keyframes row-loading-spin{
  to { transform:rotate(360deg); }
}

/* Table-row variant: <tr> can't host position:relative reliably,
   so the spinner attaches to the last <td> instead. Same rules
   only apply when .row-loading is on the <tr>. */
tr.row-loading td{opacity:.55;transition:opacity .12s;}
tr.row-loading > td:last-child{position:relative;}
tr.row-loading > td:last-child::after{
  content:'';
  position:absolute;
  top:50%;right:.85rem;
  width:14px;height:14px;
  margin-top:-7px;
  border:2px solid var(--border2);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:row-loading-spin .7s linear infinite;
  pointer-events:none;
  opacity:1;
}
/* Suppress the parent ::after for the tr variant. Needs to come
   AFTER the base rule and be at least as specific. */
tr.row-loading::after{content:none;}

/* ════════════════════════════════════════════════════════════
   Invoice Dashboard — visual language inherited from the main
   Home dashboard (home-kpi, home-section, home-alert classes).
   .invo-dash-* classes add module-specific pieces: revenue chart
   card, recent-invoices list, top-clients ranked bars.
   ════════════════════════════════════════════════════════════ */

.invo-dash{
  display:flex;flex-direction:column;gap:1.2rem;
  padding-bottom:2rem;
}
/* (.invo-dash-head/-title/-actions removed in v4.22.0 — Invoice
   Dashboard now uses the standard .page-head family.) */

/* Card surface used for chart, recent, top-clients sections.
   Mirrors .home-section styling so the dashboard reads as one
   coherent layout. */
.invo-dash-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1rem 1.1rem;
}
.invo-dash-card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin-bottom:.7rem;
}
.invo-dash-card-title{
  font-weight:600;color:var(--text);font-size:.95rem;
}
.invo-dash-card-meta{
  color:var(--text3);font-size:.8rem;font-variant-numeric:tabular-nums;
}
.invo-dash-empty{
  color:var(--text3);font-size:.88rem;padding:.6rem 0;text-align:center;
}

/* ── Estimates pipeline card (v4.97.0+) ─────────────────────────
   Sits between the invoice KPI row and the All Invoices table on
   the financial dashboard, surfacing estimate state without making
   the user navigate to the Estimates sub-tab. Reuses .home-kpi
   tiles (same component as the invoice row above) but in a tighter
   sub-card with its own header — keeps both pipelines visually
   distinct without duplicating tile styling.

   The KPI row inside has zero top margin since the card head
   already provides separation. */
/* (b782) UNUSED — the estimates tile these style was removed from
   the invoices dashboard. Kept as the revert path; delete once the
   removal has stuck for a few builds. */
.invo-dash-est-card{
  margin-top:1rem;
}
.invo-dash-est-card .invo-dash-card-head{
  margin-bottom:.85rem;
}
.invo-dash-est-summary{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
}
.invo-dash-est-kpis{
  margin-top:0;
  margin-bottom:0;
}
@media (max-width:640px){
  .invo-dash-est-summary{gap:.5rem;}
  .invo-dash-est-summary .btn{font-size:.78rem;padding:.35rem .6rem;}
}

/* ── Expected income forecast card ──────────────────────────────
   Sits directly under the invoice KPI row, above the All Invoices
   table (the estimates tile that used to sit between them was
   removed in b782). Turns the single
   "Outstanding" number into a due-date timeline: a headline total,
   a balance-weighted "average wait", a segmented proportion bar,
   and a clickable per-bucket breakdown that drills the table below.
   Colours for the bar/dots are inline (sourced from the bucket
   config in JS) so they stay in lockstep; everything here is
   structure + theming via CSS vars so it works in both modes. */
.invo-fc-card{ margin-top:1rem; }
.invo-fc-headhint{ color:var(--text3); font-size:.8rem; }
.invo-fc-headline{
  display:flex; align-items:baseline; gap:.55rem;
  flex-wrap:wrap; margin-bottom:.3rem;
}
.invo-fc-total{
  font-size:1.5rem; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.invo-fc-approx{ font-size:.6em; opacity:.7; font-weight:500; }
.invo-fc-sub{ color:var(--text2); font-size:.85rem; }
.invo-fc-when{
  display:flex; align-items:center; gap:.4rem;
  color:var(--text2); font-size:.82rem; margin-bottom:.8rem;
}
.invo-fc-when-ico{ opacity:.8; }
.invo-fc-when strong{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.invo-fc-bar{
  display:flex; width:100%; height:14px;
  border-radius:7px; overflow:hidden; margin-bottom:.85rem;
  background:var(--surface2);
}
.invo-fc-seg{ height:100%; transition:width .25s ease; min-width:2px; }
.invo-fc-seg.active{ box-shadow:inset 0 0 0 2px var(--surface); }
.invo-fc-rows{ display:flex; flex-direction:column; gap:.1rem; }
.invo-fc-row{
  display:flex; align-items:center; gap:.6rem;
  padding:.4rem .5rem; border-radius:7px; cursor:pointer;
  transition:background .12s ease;
}
.invo-fc-row:hover{ background:var(--surface2); }
.invo-fc-row.active{ background:var(--surface2); }
.invo-fc-row.active .invo-fc-lbl{ font-weight:600; }
.invo-fc-dot{
  width:9px; height:9px; border-radius:50%; flex:none;
}
.invo-fc-lbl{ flex:1; min-width:78px; color:var(--text); font-size:.88rem; }
.invo-fc-range{
  min-width:84px; text-align:right; white-space:nowrap;
  color:var(--text3); font-size:.78rem;
}
.invo-fc-amt{
  min-width:96px; text-align:right; white-space:nowrap;
  color:var(--text); font-weight:600; font-variant-numeric:tabular-nums;
}
.invo-fc-cnt{
  min-width:52px; text-align:right; white-space:nowrap;
  color:var(--text3); font-size:.78rem; font-variant-numeric:tabular-nums;
}
.invo-fc-clear{ margin-top:.6rem; }

/* ── Expected income: multi-view forecast card (b775) ──────────
   Base rules first; the mobile overrides live in the media block
   below so they win the cascade at equal specificity. */
.invo-fc-tabs{ display:flex; gap:.25rem; flex-wrap:wrap; }
.invo-fc-tab{
  padding:.25rem .6rem; border-radius:6px; cursor:pointer;
  font-size:.75rem; font-family:var(--mono);
  background:transparent; color:var(--text3);
  border:1px solid var(--border);
  transition:background .12s, color .12s, border-color .12s;
}
.invo-fc-tab:hover:not(.active){ background:var(--surface2); color:var(--text); }
.invo-fc-tab.active{
  background:var(--accent); border-color:var(--accent);
  color:#fff; font-weight:500;
}
/* Provenance line — says which basis produced the predictions. */
.invo-fc-basis{
  color:var(--text3); font-size:.74rem; font-family:var(--mono);
  margin:-.5rem 0 .8rem;
}
/* Aging, folded into the overdue row rather than given its own
   top-level buckets. Full-width so it wraps under the amounts. */
.invo-fc-aging{
  flex:1 0 100%; display:flex; gap:.9rem; flex-wrap:wrap;
  padding:.15rem 0 0 1.35rem;
  color:var(--text3); font-size:.72rem; font-variant-numeric:tabular-nums;
}
.invo-fc-aging strong{ color:var(--text2); font-weight:600; }
/* Clients view — stacked rows with a proportional bar. */
.invo-fc-crow{
  display:flex; flex-direction:column; gap:.25rem;
  padding:.5rem; border-radius:7px; cursor:pointer;
  transition:background .12s ease;
}
.invo-fc-crow:hover, .invo-fc-crow.active{ background:var(--surface2); }
.invo-fc-cl-top{ display:flex; align-items:baseline; gap:.6rem; }
.invo-fc-cl-name{
  flex:1; min-width:0; color:var(--text); font-size:.88rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.invo-fc-cl-bar{
  height:4px; border-radius:2px; background:var(--surface2); overflow:hidden;
}
.invo-fc-cl-bar > div{ height:100%; background:var(--accent); border-radius:2px; }
.invo-fc-cl-meta{
  display:flex; gap:.7rem; flex-wrap:wrap;
  font-size:.72rem; font-family:var(--mono);
}
.invo-fc-rel{ color:var(--text3); }
.invo-fc-rel.good{ color:var(--green,#16a34a); }
.invo-fc-rel.warn{ color:var(--amber,#f59e0b); }
.invo-fc-rel.bad{  color:var(--red,#dc2626); }
.invo-fc-rel.none{ color:var(--text3); font-style:italic; }
.invo-fc-cl-od{ color:var(--red,#dc2626); font-variant-numeric:tabular-nums; }
.invo-fc-cl-soon{ color:var(--text3); }
/* Pipeline view — deliberately quieter than hard AR above it. */
.invo-fc-pipe-note{
  color:var(--text3); font-size:.76rem; margin-bottom:.7rem;
}
.invo-fc-psec{ margin-bottom:.9rem; }
.invo-fc-psec:last-child{ margin-bottom:0; }
.invo-fc-phead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.6rem; padding:.25rem .5rem; margin-bottom:.15rem;
  border-bottom:1px solid var(--border);
  color:var(--text3); font-size:.74rem; font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.03em;
}
.invo-fc-phead strong{
  color:var(--text2); font-size:.85rem; text-transform:none;
  letter-spacing:0; font-variant-numeric:tabular-nums;
}
.invo-fc-prow{
  display:flex; align-items:center; gap:.6rem;
  padding:.4rem .5rem; border-radius:7px; cursor:pointer;
  opacity:.86; transition:background .12s ease, opacity .12s ease;
}
.invo-fc-prow:hover{ background:var(--surface2); opacity:1; }
.invo-fc-pico{ flex:none; font-size:.85rem; }
.invo-fc-empty{
  color:var(--text3); font-size:.82rem; font-style:italic;
  padding:.6rem .5rem;
}

/* ── Timeline view (b777) ─────────────────────────────────────
   A dated run of expected payments. Four columns: when, who, how
   much, running total. Grid (not flex) so the amount and running
   total columns stay aligned down the whole list — the running
   total is only readable as a column. */
.invo-fc-tl-legend{
  display:grid;
  grid-template-columns:minmax(96px,132px) 1fr minmax(84px,auto) minmax(88px,auto);
  gap:.7rem; padding:0 .5rem .3rem;
  color:var(--text3); font-size:.66rem; font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.04em;
}
.invo-fc-tl-legend-amt,.invo-fc-tl-legend-cum{ text-align:right; }
.invo-fc-tl{ display:flex; flex-direction:column; }
.invo-fc-tl-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.6rem; margin:.7rem 0 .2rem; padding:0 .5rem .25rem;
  border-bottom:1px solid var(--border);
  color:var(--text3); font-size:.72rem; font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.03em;
}
.invo-fc-tl-head:first-child{ margin-top:0; }
.invo-fc-tl-head strong{
  color:var(--text2); font-size:.84rem; text-transform:none;
  letter-spacing:0; font-variant-numeric:tabular-nums;
}
.invo-fc-tl-head.od{ color:var(--red,#dc2626); border-bottom-color:var(--red,#dc2626); }
.invo-fc-tl-head.od strong{ color:var(--red,#dc2626); }
.invo-fc-tl-row{
  display:grid;
  grid-template-columns:minmax(96px,132px) 1fr minmax(84px,auto) minmax(88px,auto);
  gap:.7rem; align-items:center;
  padding:.45rem .5rem; border-radius:7px; cursor:pointer;
  transition:background .12s ease;
}
.invo-fc-tl-row:hover{ background:var(--surface2); }
.invo-fc-tl-row.od{ box-shadow:inset 2px 0 0 var(--red,#dc2626); }
.invo-fc-tl-date{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.invo-fc-tl-day{
  color:var(--text); font-size:.84rem; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.invo-fc-tl-rel{ color:var(--text3); font-size:.7rem; white-space:nowrap; }
.invo-fc-tl-who{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.invo-fc-tl-client{
  color:var(--text); font-size:.86rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.invo-fc-tl-num{
  display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
  color:var(--text3); font-size:.7rem; font-family:var(--mono);
}
.invo-fc-conf{ font-size:.66rem; }
.invo-fc-conf.good{ color:var(--green,#16a34a); }
.invo-fc-conf.warn{ color:var(--amber,#f59e0b); }
.invo-fc-conf.none{ color:var(--text3); font-style:italic; }
.invo-fc-tl-amt{
  text-align:right; white-space:nowrap;
  color:var(--text); font-weight:600; font-size:.88rem;
  font-variant-numeric:tabular-nums;
}
.invo-fc-tl-cum{
  text-align:right; white-space:nowrap;
  color:var(--text3); font-size:.78rem; font-variant-numeric:tabular-nums;
}
@media (max-width:760px){
  .invo-fc-total{ font-size:1.3rem; }
  .invo-fc-tabs{ width:100%; margin-top:.4rem; }
  .invo-fc-tab{ flex:1; text-align:center; }
  .invo-fc-aging{ padding-left:0; gap:.6rem; }
  .invo-fc-prow{ flex-wrap:wrap; }
  .invo-fc-prow .invo-fc-range{ min-width:0; order:3; }
  /* Running total is the first thing to go on a phone — the date,
     client and amount are what you're scanning for. */
  .invo-fc-tl-legend{ display:none; }
  .invo-fc-tl-row{ grid-template-columns:minmax(84px,110px) 1fr auto; }
  .invo-fc-tl-cum{ display:none; }
  .invo-fc-row{ flex-wrap:wrap; gap:.35rem .55rem; }
  .invo-fc-lbl{ flex:1 1 auto; min-width:0; }
  .invo-fc-range{ min-width:0; flex:0 0 auto; order:3; }
  .invo-fc-amt{ min-width:0; flex:0 0 auto; }
  .invo-fc-cnt{ min-width:0; flex:0 0 auto; }
}

/* Three-column grid for Tax Report + Revenue chart + Top Clients
   (v4.32.2). auto-fit + minmax means the row reflows automatically:
   3 columns on wide desktops, 2 columns mid-range, 1 column on
   phones. The min track width (300px) is calibrated so the Tax
   Report hero number stays comfortably readable; below that we'd
   rather stack than squeeze. align-items:start (default for grid)
   keeps each card's natural height — they'll be slightly different
   heights due to varying content, which reads fine. */
.invo-dash-grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1rem;
}

/* (b783) Active forecast drill-in chip in the invoice filter row. */
.invo-drill-chip{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.22rem .55rem; border-radius:6px; cursor:pointer;
  background:var(--accent-dim); color:var(--text);
  border:1px solid var(--accent);
  font-size:.75rem; white-space:nowrap;
}
.invo-drill-chip:hover{ background:var(--accent); color:#fff; }

/* (b780) Background-refresh pill in the Invoices page head. The
   dashboard paints from cache immediately and refetches underneath;
   this is what tells the user the visible numbers are being
   replaced. Deliberately quiet — it is not an error state. */
.invo-refresh-pill{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.15rem .5rem; border-radius:20px;
  background:var(--surface2); color:var(--text3);
  font-size:.7rem; font-family:var(--mono); white-space:nowrap;
}
/* Own keyframes: the ldspin rule used elsewhere is injected into a
   <style> by showLoading() at runtime, so it may not exist yet. */
@keyframes invo-refresh-spin{ to{ transform:rotate(360deg); } }
.invo-refresh-spin{
  display:inline-block; animation:invo-refresh-spin 1.1s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  .invo-refresh-spin{ animation:none; }
  .cb-skel::after{ animation:none; }
}
/* Cold-start skeleton — column layout matching the real dashboard so
   nothing jumps when the data lands. */
.invo-skel .invo-dash-card{ display:flex; flex-direction:column; }
.invo-skel-kpi{ flex:1; min-width:8rem; }

/* Revenue chart — SVG fills the card width */
.invo-dash-chart{
  width:100%;height:auto;display:block;
}

/* ── Revenue: 12-month billed vs collected (b779) ──────────────
   The card stretches to match its grid row; the chart takes the
   leftover height via flex:1 so it fills the space the old
   fixed-aspect sparkline left empty. */
.invo-rev-card{ display:flex; flex-direction:column; }
/* (b781) No flex:1 and no preserveAspectRatio="none" — that pair
   stretched the SVG to whatever height the grid row happened to be,
   distorting the bars, their rounded corners and the month labels.
   The chart now keeps its own aspect ratio; the footer below takes
   up any slack when a taller sibling card sets the row height. */
.invo-rev-chart{
  width:100%; height:auto; display:block;
}
.invo-rev-stats{
  display:flex; gap:1.4rem; flex-wrap:wrap; margin:.1rem 0 .5rem;
}
.invo-rev-stat{ display:flex; flex-direction:column; gap:.1rem; }
.invo-rev-stat-lbl{
  display:flex; align-items:center; gap:.35rem;
  color:var(--text3); font-size:.7rem; font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.04em;
}
.invo-rev-stat strong{
  color:var(--text); font-size:1.05rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.invo-rev-key{ width:9px; height:9px; border-radius:2px; flex:none; }
.invo-rev-key.dim{ background:var(--accent-dim); }
.invo-rev-key.solid{ background:var(--accent); }
.invo-rev-yoy{
  font-size:.72rem; font-family:var(--mono); font-weight:600;
  padding:.15rem .45rem; border-radius:5px; white-space:nowrap;
}
.invo-rev-yoy.up{ color:var(--green,#16a34a); background:rgba(22,163,74,.12); }
.invo-rev-yoy.down{ color:var(--red,#dc2626); background:rgba(220,38,38,.12); }
.invo-rev-foot{
  color:var(--text3); font-size:.68rem;
  margin-top:auto; padding-top:.5rem;
}

/* ── Client activity (b779) ────────────────────────────────── */
.invo-dash-clients-list .invo-dash-client{
  cursor:pointer; border-radius:6px;
  margin:0 -.4rem; padding:.3rem .4rem;
  transition:background .12s ease;
}
.invo-dash-clients-list .invo-dash-client:hover{ background:var(--surface2); }
.invo-ca-trend{
  flex:none; font-size:.7rem; font-family:var(--mono); font-weight:600;
  white-space:nowrap;
}
.invo-ca-trend.up{ color:var(--green,#16a34a); }
.invo-ca-trend.down{ color:var(--red,#dc2626); }
.invo-ca-trend.flat{ color:var(--text3); }
.invo-ca-trend.new{ color:var(--accent); }
.invo-ca-stale{ color:var(--amber,#f59e0b); }
.invo-ca-quiet{
  margin-top:.9rem; padding-top:.7rem;
  border-top:1px solid var(--border);
}
.invo-ca-quiet-head{
  color:var(--text3); font-size:.68rem; font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem;
}
.invo-ca-qrow{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.6rem; padding:.28rem .4rem; margin:0 -.4rem;
  border-radius:6px; cursor:pointer;
  transition:background .12s ease;
}
.invo-ca-qrow:hover{ background:var(--surface2); }
.invo-ca-qname{
  color:var(--text2); font-size:.84rem; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.invo-ca-qmeta{
  color:var(--text3); font-size:.7rem; font-family:var(--mono);
  white-space:nowrap; flex:none;
}

/* Recent invoices list */
.invo-dash-recent-list{display:flex;flex-direction:column;}
.invo-dash-recent{
  display:flex;align-items:center;gap:.8rem;
  padding:.65rem 0;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .12s;
  margin:0 -.6rem;padding-left:.6rem;padding-right:.6rem;
  border-radius:6px;
}
.invo-dash-recent:last-child{border-bottom:none;}
.invo-dash-recent:hover{background:var(--surface2);}
.invo-dash-recent-main{flex:1;min-width:0;}
.invo-dash-recent-title{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin-bottom:.2rem;
}
.invo-dash-recent-title strong{color:var(--text);font-weight:600;}
.invo-dash-recent-meta{
  color:var(--text3);font-size:.82rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.invo-dash-recent-amt{
  flex-shrink:0;color:var(--text);font-weight:600;
  font-variant-numeric:tabular-nums;font-size:.95rem;
}

/* Top clients — name + amount + proportional bar */
.invo-dash-clients-list{display:flex;flex-direction:column;gap:.85rem;}
.invo-dash-client{display:flex;flex-direction:column;gap:.25rem;}
.invo-dash-client-row{
  display:flex;align-items:baseline;gap:.6rem;
}
.invo-dash-client-rank{
  flex-shrink:0;width:1.4rem;
  color:var(--text3);font-size:.82rem;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.invo-dash-client-name{
  flex:1;color:var(--text);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.invo-dash-client-total{
  flex-shrink:0;color:var(--text);font-weight:600;
  font-variant-numeric:tabular-nums;font-size:.92rem;
}
.invo-dash-client-bar{
  height:5px;background:var(--surface2);border-radius:3px;overflow:hidden;
  margin-left:1.4rem;
}
.invo-dash-client-bar > div{
  height:100%;background:var(--accent);border-radius:3px;
  transition:width .3s;
}
.invo-dash-client-sub{
  color:var(--text3);font-size:.76rem;margin-left:1.4rem;
}

/* Setup nudge appears when business profile is incomplete */
.invo-dash-setup-nudge{
  border-color:rgba(245,166,35,.4);
  background:rgba(245,166,35,.04);
}

/* List view header — back-to-dashboard breadcrumb button */
.invo-back{
  background:transparent;border:1px solid var(--border);
  color:var(--text2);padding:.32rem .6rem;border-radius:5px;
  cursor:pointer;font-size:.82rem;font-family:inherit;
  display:inline-flex;align-items:center;gap:.3rem;
  transition:all .12s;flex-shrink:0;
}
.invo-back:hover{
  background:var(--surface2);border-color:var(--border2);
  color:var(--text);
}

/* ── Dashboard inline All Invoices table card (v4.32.0) ──
   The All Invoices list now lives directly on the dashboard. The
   wrapping card has zero horizontal padding so the table can run
   edge-to-edge under rounded corners. The card head still has
   normal padding for title + summary bits. */
.invo-dash-table-card{
  padding:0;
  overflow:hidden;
}
.invo-dash-table-card > .invo-dash-card-head{
  padding:1rem 1.1rem .65rem;
  margin-bottom:0;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.invo-dash-table-summary{
  display:flex;align-items:center;gap:.9rem;
  font-size:.82rem;color:var(--text2);
  flex-wrap:wrap;
}
.invo-dash-table-summary .invo-bit{
  display:inline-flex;align-items:baseline;gap:.4rem;
  font-variant-numeric:tabular-nums;
}
.invo-dash-table-summary .invo-bit-label{
  color:var(--text3);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;
}
.invo-dash-table-summary .invo-bit strong{
  color:var(--text);font-weight:600;
}
/* Override the top-bordered, surface-colored thead from list-view —
   on the dashboard the table sits inside a card so we don't need
   the second border above the header row. The sticky behavior is
   preserved (it sticks within .invo-shell-inner). */
.invo-dash-table-card .invo-table thead th{
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
/* Horizontal scroll container — kicks in on narrow screens when
   the table can't fit. */
.invo-dash-table-wrap{
  overflow-x:auto;
}
/* Empty-state cell row — calmer styling than a blank row */
.invo-dash-table-empty{
  padding:2.4rem 1rem !important;
  text-align:center;
  color:var(--text3);
}
/* Pagination bar inside the dashboard table card sits flush at the
   bottom under the rows, separated by a thin border. */
.invo-dash-table-card .pgnr{
  border-top:1px solid var(--border);
  margin:0;padding:.55rem .8rem;
}

/* ── Tax Report summary card (v4.32.1) ──
   Data-driven dashboard card showing the current quarter's sales
   tax position. Three states (loading / empty / loaded) are styled
   together. The card is clickable as a whole; the Open button is
   the explicit focus target. */
.invo-dash-tax-card{
  display:flex;flex-direction:column;gap:.85rem;
  cursor:pointer;
  transition:background .12s, border-color .12s, transform .12s;
}
.invo-dash-tax-card:hover{
  background:var(--surface-hi);
  border-color:var(--border2);
}
.invo-dash-tax-card:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* Quiet ↗ corner glyph in the title — matches the Finances Dashboard
   GST/HST KPI affordance so both entry points to the Tax Report read
   as "go to the report" with the same visual language. */
.invo-dash-tax-go{
  font-size:.85rem;color:var(--text3);font-weight:500;
  margin-left:.35rem;display:inline-block;
  transition:color .12s, transform .12s;
}
.invo-dash-tax-card:hover .invo-dash-tax-go{
  color:var(--accent);
  transform:translate(1px, -1px);
}
/* Header row — title left, period right */
.invo-dash-tax-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:.6rem;flex-wrap:wrap;
}
.invo-dash-tax-period{
  font-size:.78rem;color:var(--text3);
  font-variant-numeric:tabular-nums;
  text-transform:uppercase;letter-spacing:.04em;font-weight:600;
}

/* Hero stat — the headline "to remit" number */
.invo-dash-tax-hero{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.2rem 0;
}
.invo-dash-tax-hero-label{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);font-weight:600;
}
.invo-dash-tax-hero-val{
  font-size:1.85rem;font-weight:700;
  color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em;
  line-height:1.05;
}
.invo-dash-tax-hero-sub{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  color:var(--text3);font-size:.82rem;
  font-variant-numeric:tabular-nums;
}
/* QoQ delta badge — neutral by default; .up/.down add subtle hue
   without screaming "good" or "bad" (more revenue = more tax = both
   true, depending on perspective). */
.invo-dash-tax-delta{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.12rem .5rem;border-radius:999px;
  font-size:.72rem;font-weight:600;
  background:var(--surface2);color:var(--text2);
  border:1px solid var(--border);
}
.invo-dash-tax-delta.up   { color:var(--text); }
.invo-dash-tax-delta.down { color:var(--text2); }
.invo-dash-tax-delta.new  { color:var(--accent); border-color:var(--accent-dim); background:var(--accent-dim); }

/* Last-quarter mini stat — single inline line under the hero */
.invo-dash-tax-mini{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  padding:.55rem .65rem;
  background:var(--surface2);border-radius:6px;
  font-size:.84rem;
  font-variant-numeric:tabular-nums;
}
.invo-dash-tax-mini-label{
  color:var(--text3);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
}
.invo-dash-tax-mini-val{
  color:var(--text);font-weight:600;
}
.invo-dash-tax-mini-sub{
  color:var(--text3);font-size:.78rem;flex:1;text-align:right;
}

/* Per-rate breakdown — stacked rows so each rate gets a clear line.
   On wider screens we could go side-by-side, but vertical stays
   readable when there are 3+ rates (GST + PST + something else). */
.invo-dash-tax-rates{
  display:flex;flex-direction:column;gap:.2rem;
  padding-top:.5rem;border-top:1px solid var(--border);
}
.invo-dash-tax-rate{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:.6rem;
  padding:.3rem 0;
  font-size:.86rem;
  font-variant-numeric:tabular-nums;
}
.invo-dash-tax-rate-name{
  color:var(--text2);
}
.invo-dash-tax-rate-name strong{
  color:var(--text);font-weight:600;
}
.invo-dash-tax-rate-pct{
  color:var(--text3);font-weight:500;margin-left:.3rem;
}
.invo-dash-tax-rate-val{
  color:var(--text);font-weight:600;
}

/* Empty state — friendly message when no invoices in period or
   the fetch failed. */
.invo-dash-tax-empty-state{
  padding:.8rem 0;
  color:var(--text3);font-size:.86rem;line-height:1.5;
}

/* Loading state — two skeleton bars to keep height stable while
   the fetch is in-flight. */
.invo-dash-tax-loading{
  display:flex;flex-direction:column;gap:.55rem;
  padding:.6rem 0;
}
.invo-dash-tax-loading-bar{
  height:1.85rem;border-radius:5px;
  background:linear-gradient(90deg, var(--surface2) 0%, var(--surface-hi) 50%, var(--surface2) 100%);
  background-size:200% 100%;
  animation:invoDashTaxShimmer 1.4s ease-in-out infinite;
}
.invo-dash-tax-loading-bar.short{
  height:1rem;width:55%;
}
@keyframes invoDashTaxShimmer{
  0%   { background-position:  100% 0; }
  100% { background-position: -100% 0; }
}

/* Footer — CTA button right-aligned. */
.invo-dash-tax-footer{
  display:flex;justify-content:flex-end;
  padding-top:.3rem;
}

@media (max-width:760px){
  .invo-dash-card{padding:.85rem;}
  .invo-dash-table-card{padding:0;}
  .invo-dash-table-card > .invo-dash-card-head{padding:.85rem .85rem .55rem;}
  .invo-dash-table-summary{font-size:.78rem;gap:.7rem;}
  .invo-dash-tax-hero-val{font-size:1.55rem;}
  .invo-dash-tax-mini-sub{flex:1 100%;text-align:left;}
  .invo-dash-tax-footer .btn{width:100%;}
}

/* ==================================================================
   TAX REPORT (v4.31.0)
   Sales tax report view — accrual-basis aggregation of tax collected
   over a chosen period, with per-rate breakdown and invoice drill-
   down. Lives inside the invoices module shell. Layout mirrors the
   dashboard's card stack so the two feel like siblings.
   ================================================================== */
.tax-rep{
  display:flex;flex-direction:column;gap:.9rem;padding-bottom:1.4rem;
}
/* The .page-head-sub is already styled, but we want a tighter top
   margin here — the period strip sits right below the head, and
   the default sub margin makes that gap awkward. */
.tax-rep-head .page-head-sub{
  margin-top:.15rem;
}

/* ── Period selector strip ── */
/* Sticky-feeling control row above the report body. Date inputs and
   the preset dropdown live on one line; on narrow screens they wrap
   naturally. */
.tax-rep-period{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.6rem .85rem;
}
.tax-rep-period-row{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
}
.tax-rep-period-label{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text3);font-weight:600;
}
.tax-rep-period-select{
  padding:.32rem .55rem;font-size:.88rem;
  background:var(--surface2);color:var(--text);
  border:1px solid var(--border);border-radius:5px;
  font-family:inherit;cursor:pointer;
}
.tax-rep-period-date{
  padding:.32rem .55rem;font-size:.88rem;
  background:var(--surface2);color:var(--text);
  border:1px solid var(--border);border-radius:5px;
  font-family:inherit;
}
.tax-rep-period-sep{
  color:var(--text3);font-size:.85rem;
}
.tax-rep-period-range{
  color:var(--text2);font-size:.85rem;
  font-variant-numeric:tabular-nums;
}

/* ── Generic card (matches invo-dash-card sizing/feel) ── */
.tax-rep-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1rem 1.1rem;
}
.tax-rep-card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin-bottom:.7rem;
}
.tax-rep-card-title{
  font-weight:600;color:var(--text);font-size:.95rem;
}
.tax-rep-card-meta{
  color:var(--text3);font-size:.8rem;font-variant-numeric:tabular-nums;
}

/* ── Summary card ── */
/* Three-column key-stat grid. The hero stat (Tax collected) gets
   accent color treatment because it's the headline answer the
   report exists to provide. Wraps to single column on narrow. */
.tax-rep-summary{
  /* Slightly more breathing room than other cards — this is the
     headline result. */
  padding:1.1rem 1.2rem;
}
/* Hero net-owed cell — the answer the user came for. Pinned to
   the top of the summary card; colour-coded amber for owed, green
   for refund, neutral for balanced. The two flavours below each
   tint the inner text to match without changing the surface so the
   card still feels coherent with the rest of the report. */
.tax-rep-summary-hero{
  margin:-.2rem -.3rem 1rem;
  padding:.85rem 1rem;
  border-radius:8px;
  background:var(--surface2);
  border:1px solid var(--border);
  display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;
}
.tax-rep-summary-hero.amber{
  background:rgba(245,158,11,.08);
  border-color:rgba(245,158,11,.3);
}
.tax-rep-summary-hero.good{
  background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.3);
}
.tax-rep-summary-hero-label{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);font-weight:600;flex:1;min-width:8rem;
}
.tax-rep-summary-hero.amber .tax-rep-summary-hero-label{color:var(--amber);}
.tax-rep-summary-hero.good  .tax-rep-summary-hero-label{color:var(--green);}
.tax-rep-summary-hero-value{
  font-size:1.9rem;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.018em;
  color:var(--text);line-height:1;
}
.tax-rep-summary-hero.amber .tax-rep-summary-hero-value{color:var(--amber);}
.tax-rep-summary-hero.good  .tax-rep-summary-hero-value{color:var(--green);}
.tax-rep-summary-hero-sub{
  font-size:.82rem;color:var(--text3);font-weight:500;
}
.tax-rep-summary-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:1rem;
}
@media (max-width:720px){
  .tax-rep-summary-grid{grid-template-columns:1fr;gap:.7rem;}
}
.tax-rep-summary-sub{
  margin-top:.85rem;padding-top:.7rem;
  border-top:1px solid var(--border);
  font-size:.78rem;color:var(--text3);
  font-variant-numeric:tabular-nums;line-height:1.5;
}
.tax-rep-stat{
  display:flex;flex-direction:column;gap:.18rem;
  padding:.55rem .15rem;
}
.tax-rep-stat-label{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);font-weight:600;
}
.tax-rep-stat-value{
  font-size:1.45rem;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  line-height:1.1;
}
.tax-rep-stat-sub{
  font-size:.78rem;color:var(--text3);
  font-variant-numeric:tabular-nums;
}
/* "Minus" stat — the ITC subtotal, visually subtracted from the
   collected total. Slightly muted so the eye reads collected −
   ITCs = net at a glance. */
.tax-rep-stat-minus .tax-rep-stat-value{
  color:var(--text2);
}
/* "Equals" stat — the net result. Coloured to match the hero so
   the two reinforce each other at the same glance. */
.tax-rep-stat-eq .tax-rep-stat-value{
  color:var(--text);font-weight:800;
}
.tax-rep-stat-eq.amber .tax-rep-stat-value{color:var(--amber);}
.tax-rep-stat-eq.good  .tax-rep-stat-value{color:var(--green);}
/* Hero variant — the headline "Tax collected" cell stands out so
   the user's eye lands on the answer immediately. (Kept for
   backwards-compat; new layout uses tax-rep-stat-eq instead.) */
.tax-rep-stat-hero .tax-rep-stat-value{
  color:var(--accent);
  font-size:1.65rem;
}
.tax-rep-stat-hero .tax-rep-stat-sub{
  color:var(--text2);font-weight:500;
}

/* ── Card title side-tag (e.g. "(invoices)" / "(expenses)") ── */
/* Visual hint that pairs the rates+invoices and itcs+expenses
   cards by side without needing two separate H2-style headers. */
.tax-rep-card-side{
  font-weight:500;color:var(--text3);font-size:.85em;
  margin-left:.3rem;
}

/* ── ITC fraction pill — shown next to each tax-type label ── */
/* Tells the user at a glance why $200 paid yields $83.33 claimable
   ("5/12") vs $200 yields $200 ("100%"). */
.tax-rep-itc-frac{
  display:inline-block;
  font-size:.7rem;font-weight:600;
  padding:.08rem .42rem;border-radius:99px;
  margin-left:.4rem;vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
.tax-rep-itc-frac.full{
  background:rgba(34,197,94,.13);color:var(--green);
}
.tax-rep-itc-frac.partial{
  background:rgba(245,158,11,.13);color:var(--amber);
}
.tax-rep-itc-frac.none{
  background:var(--surface2);color:var(--text3);
}

/* Receipt indicator on expense drill rows. Same treatment as the
   list view's paperclip pill but compact for table density. */
.tax-rep-exp-receipt{
  display:inline-block;font-size:.78rem;
  margin-left:.25rem;opacity:.65;
}

/* ── T2125 report ──────────────────────────────────────────
   Sibling of the Tax Report — shares almost all chrome. The
   declarations below add the bits unique to T2125: per-line
   expandable rows, the meals/vehicle flag pills, and the
   uncategorised-cleanup card warning state. */

/* Expandable line row — clickable header with chevron toggle. */
.t2125-line-row{
  cursor:pointer;
  transition:background .12s;
}
.t2125-line-row:hover{
  background:var(--surface-hi);
}
.t2125-line-toggle{
  display:inline-block;width:.9rem;color:var(--text3);
  font-size:.7rem;margin-right:.25rem;
  transition:transform .12s, color .12s;
}
.t2125-line-row:hover .t2125-line-toggle{
  color:var(--accent);
}
/* Blended-rate hint — shown next to the parent line's weighted-
   average % when the contributing categories have mixed rates.
   Quiet so it doesn't compete with the percentage itself. */
.t2125-line-blended{
  font-size:.7rem;color:var(--text3);
  font-style:italic;font-weight:400;
  margin-left:.2rem;
}

/* Children row contains a nested table — visually nested via
   indent and a softer surface. */
.t2125-line-children > td{
  padding:0 !important;
  background:var(--surface2);
  border-top:1px solid var(--border);
}
.t2125-cat-table{
  width:100%;border-collapse:collapse;
}
.t2125-cat-table thead th{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text3);font-weight:600;
  padding:.45rem .9rem;border-bottom:1px solid var(--border);
}
.t2125-cat-table tbody td{
  padding:.45rem .9rem;font-size:.85rem;
  border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;
}
.t2125-cat-table tbody tr:last-child td{ border-bottom:none; }
.t2125-cat-table tbody td:first-child{ padding-left:2.4rem; }

/* Category dot — same treatment as in the expenses list. */
.t2125-cat-dot{
  display:inline-block;width:.55rem;height:.55rem;
  border-radius:99px;margin-right:.4rem;vertical-align:middle;
  border:1px solid rgba(0,0,0,.2);
}
.t2125-cat-name{ vertical-align:middle; }

/* Meals (50%) / vehicle flag pills. Surfaced inline next to the
   category name so the user sees at a glance why a row is showing
   reduced deductibility. */
.t2125-flag{
  display:inline-block;font-size:.65rem;font-weight:700;
  padding:.05rem .35rem;border-radius:99px;
  margin-left:.35rem;vertical-align:middle;letter-spacing:.02em;
}
.t2125-flag.meals{
  background:rgba(245,158,11,.13);color:var(--amber);
}
.t2125-flag.vehicle{
  background:rgba(125,156,255,.13);color:var(--accent);
  font-size:.78rem;padding:.02rem .3rem;
}

/* Uncategorised warning callout in summary card. Subtle amber tone
   to draw the eye without screaming. */
.t2125-uncat-warn{
  background:rgba(245,158,11,.07);
  border-color:rgba(245,158,11,.25) !important;
  color:var(--amber);
}
.t2125-uncat-warn a{
  color:inherit;font-weight:600;text-decoration:underline;
}

/* The uncategorised cleanup card itself — full warning treatment. */
.t2125-uncat-card{
  border-color:rgba(245,158,11,.4);
  background:rgba(245,158,11,.03);
}
.t2125-uncat-help{
  font-size:.85rem;color:var(--text2);
  padding:.4rem 0 .8rem;line-height:1.5;
}

/* T2125 expense drill — line column reads compactly. */
.t2125-exp-line{
  font-size:.78rem;color:var(--text3);
  font-variant-numeric:tabular-nums;
}
.t2125-exp-table thead th:nth-child(2){ width:14rem; }

/* ── Finance Dashboard Reports section ──────────────────────
   Two-up grid of report cards. Visual style sits between
   fin-prompt (small inline pill) and fin-section (full content
   block) — these are content cards, not pills, but they're
   navigation rather than data. */
.fin-reports-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:.85rem;
}
.fin-report-card{
  display:flex;align-items:flex-start;gap:.85rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:1rem 1.1rem;
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.fin-report-card:hover{
  background:var(--surface-hi);
  border-color:var(--border2);
}
.fin-report-card:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.fin-report-card-icon{
  font-size:1.6rem;line-height:1;flex:0 0 auto;
  padding-top:.1rem;
}
.fin-report-card-body{
  flex:1;display:flex;flex-direction:column;gap:.25rem;
}
.fin-report-card-title{
  font-weight:700;color:var(--text);font-size:1rem;
  display:flex;align-items:center;gap:.4rem;
}
.fin-report-card-go{
  font-size:.85rem;color:var(--text3);font-weight:500;
  transition:color .12s, transform .12s;
}
.fin-report-card:hover .fin-report-card-go{
  color:var(--accent);
  transform:translate(1px, -1px);
}
.fin-report-card-sub{
  font-size:.82rem;color:var(--text2);line-height:1.45;
}

/* ── Tables (per-rate + invoice drill-down) ── */
/* Match the .invo-table look but scoped here — the parent widths
   are different (no fixed-height scroll region) so we don't reuse
   the invo-table class directly. */
.tax-rep-table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);border-radius:6px;
}
.tax-rep-table{
  width:100%;border-collapse:collapse;font-size:.88rem;
  font-variant-numeric:tabular-nums;
}
.tax-rep-table thead th{
  text-align:left;padding:.6rem .8rem;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text3);font-weight:600;
  border-bottom:1px solid var(--border);background:var(--surface2);
}
.tax-rep-table tbody td{
  padding:.6rem .8rem;border-bottom:1px solid var(--border);
  color:var(--text2);vertical-align:middle;
}
.tax-rep-table tbody tr:last-child td{border-bottom:none;}
.tax-rep-table tfoot td{
  padding:.7rem .8rem;
  border-top:2px solid var(--border2);
  background:var(--surface2);
  color:var(--text);
}
.tax-rep-rate-pct{
  color:var(--text3);font-weight:500;margin-left:.25rem;
}
.tax-rep-rate-exempt{
  color:var(--text3);font-style:italic;
}

/* ── Invoice drill-down ── */
.tax-rep-inv-table tbody tr.tax-rep-inv-row{
  cursor:pointer;transition:background .12s;
}
.tax-rep-inv-table tbody tr.tax-rep-inv-row:hover{
  background:var(--surface2);
}
.tax-rep-inv-table tbody td:first-child{color:var(--text);}
.tax-rep-inv-sub{
  font-size:.76rem;color:var(--text3);margin-top:.15rem;
  font-variant-numeric:tabular-nums;
}

/* ── Empty state ── */
.tax-rep-empty{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:2.5rem 1.2rem;
  text-align:center;
  color:var(--text2);
}
.tax-rep-empty-icon{
  font-size:2.4rem;margin-bottom:.5rem;opacity:.6;
}
.tax-rep-empty-title{
  font-weight:600;color:var(--text);font-size:1.05rem;margin-bottom:.4rem;
}
.tax-rep-empty-sub{
  font-size:.85rem;color:var(--text3);line-height:1.55;
}

/* ── Mobile ── */
@media (max-width:760px){
  .tax-rep-card,.tax-rep-summary{padding:.85rem;}
  .tax-rep-table thead th,.tax-rep-table tbody td,.tax-rep-table tfoot td{
    padding:.5rem .55rem;
  }
  .tax-rep-period{padding:.5rem .65rem;}
  /* Hide the secondary "client+job" line on the inv drill-down for
     mobile — keeps the table single-line per row. */
  .tax-rep-inv-sub{display:none;}
}

/* ── Print ── */
/* Same approach as the existing invoice-preview print rule:
   collapse the page chrome to whitespace and let the report breathe.
   The .tax-rep-no-print class on the Print button keeps it from
   self-printing; back button and CSV export buttons are hidden by
   targeting them via .invo-back / .page-head buttons not labeled
   .tax-rep-no-print would still print, so we hide the whole
   page-head-row and re-render a print-only title above. Simpler:
   hide the row entirely and let the header text live in the body
   via the period strip's range, which already shows From – To. */
@media print{
  body > *{display:none !important;}
  body > .view.active,
  body > .view.active *{display:revert !important;}
  .nav-tab,.nav-bar,.bottom-nav,
  .header,.drawer,.drawer-overlay,
  .invo-back,.tax-rep-no-print,
  .tax-rep-head .page-head-row .btn{display:none !important;}
  /* Render the period range and a "Tax Report" label clearly at
     the top — repurpose the existing .page-head-title which is
     already large + bold. */
  .tax-rep{gap:.6rem;}
  .tax-rep-period{
    border:none;background:transparent;padding:.2rem 0;
  }
  .tax-rep-card,.tax-rep-summary{
    border:1px solid #ddd !important;
    background:#fff !important;
    color:#000 !important;
    page-break-inside:avoid;
  }
  .tax-rep-stat-value,.tax-rep-card-title,
  .tax-rep-table tfoot td,
  .tax-rep-table tbody td:first-child{color:#000 !important;}
  .tax-rep-stat-hero .tax-rep-stat-value{color:#000 !important;}
  .tax-rep-table thead th{
    background:#f4f4f4 !important;color:#444 !important;
  }
  .tax-rep-table tfoot td{background:#f4f4f4 !important;}
  /* Pagination bar would just print as plain numbers — already
     hidden by the existing global @media print { .pgnr } rule. */
}

/* ==================================================================
   CONTACT MODAL — multi-company picker (v4.8.0)
   Each row is a single company link. The first row is "primary";
   its name becomes the denormalized contacts.company cache.
   ================================================================== */
.ce-companies-list{
  display:flex;flex-direction:column;gap:.4rem;
}
.ce-co-row{
  display:flex;align-items:center;gap:.5rem;
}
.ce-co-row select{
  flex:1;min-width:0;
}
.ce-co-primary{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text3);background:var(--surface3);
  padding:.15rem .4rem;border-radius:3px;
  white-space:nowrap;
}

/* ==================================================================
   INVOICE EDITOR — recipient picker (grid of compact 2-line cards)
   Container is a CSS grid that auto-fills with a min-width per card,
   so cards sit side-by-side when there's room and fall to one column
   when there isn't. Each card is a 2-row x 2-col inner grid:
     [checkbox] [name              ]
                [role · email      ]
   Sub-line aligns under the name (not under the checkbox) so the
   checkbox column reads as a single anchor for the whole card.
   ================================================================== */
.invo-recipient-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:.4rem;
  min-width:0;          /* (b628) don't let card min-content widen the column */
  max-width:100%;
}
.invo-rp-empty{
  grid-column:1/-1;
  color:var(--text3);font-size:.82rem;
  padding:.6rem .75rem;
  background:var(--surface2);
  border:1px dashed var(--border2);
  border-radius:5px;
}
.invo-rp-card{
  display:grid;
  grid-template-columns:20px minmax(0, 1fr);
  grid-template-rows:auto auto;
  column-gap:.5rem;
  row-gap:.05rem;
  align-items:center;
  padding:.4rem .6rem;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:5px;
  cursor:pointer;
  transition:border-color .12s, background .12s;
  min-width:0;
  /* (b628) Hard containment — long unbroken names/titles/emails must
     clip at the pill edge no matter what the ancestor layout does. */
  overflow:hidden;
  max-width:100%;
}
.invo-rp-card:hover{
  border-color:var(--border3);
  background:var(--surface);
}
.invo-rp-card.selected{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, var(--surface2));
}
.invo-rp-card input[type="checkbox"]{
  /* Span both rows so the checkbox is vertically centered against the
     full name+sub content block — sits in its own column to the left
     of the info, like a list-style ✓ marker. */
  grid-column:1; grid-row:1 / span 2;
  width:16px; height:16px; margin:0;
  cursor:pointer;
  align-self:center; justify-self:center;
}
.invo-rp-name{
  grid-column:2; grid-row:1;
  font-weight:600; font-size:.88rem; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0;
}
.invo-rp-sub{
  grid-column:2; grid-row:2;
  font-size:.76rem; color:var(--text3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0;
}
.invo-rp-role{
  color:var(--text2);
}
.invo-rp-email{
  color:var(--text3);
}
.invo-rp-noemail{
  color:#dc8a4a;font-style:italic;
}
.invo-rp-dot{
  margin:0 .3rem;color:var(--text3);opacity:.5;
}
.invo-rp-warn{
  grid-column:1/-1;
  margin-top:.2rem;
  font-size:.78rem;color:#fbbf24;
  background:rgba(124,45,18,.18);
  padding:.35rem .55rem;border-radius:4px;
  border:1px solid rgba(251,191,36,.25);
}
.invo-rp-actions{
  grid-column:1/-1;
  display:flex;gap:.5rem;flex-wrap:wrap;
  margin-top:.15rem;
}
.invo-rp-actions .btn{ font-size:.8rem; }

/* Link-existing-contact modal (invoice editor) */
.invo-link-search{
  width:100%;
  padding:.5rem .65rem;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:6px;
  color:var(--text);
  font-size:.9rem;
  margin-bottom:.6rem;
  box-sizing:border-box;
}
.invo-link-search:focus{ outline:none;border-color:var(--accent); }
.invo-link-list{
  display:flex;flex-direction:column;gap:.3rem;
  max-height:340px;overflow-y:auto;
}
.invo-link-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.45rem .6rem;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:5px;
}
.invo-link-meta{ flex:1;min-width:0;display:flex;flex-direction:column; }
.invo-link-name{
  font-weight:600;font-size:.88rem;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.invo-link-sub{
  font-size:.76rem;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.invo-link-dot{ margin:0 .3rem;color:var(--text3);opacity:.5; }
.invo-link-row .btn{ flex:0 0 auto; }
.invo-link-empty,.invo-link-more{
  color:var(--text3);font-size:.82rem;
  padding:.5rem .25rem;text-align:center;
}

.home-inv-recent{
  display:flex;flex-direction:column;gap:.15rem;
}
.home-inv-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto auto auto;
  gap:.65rem;
  align-items:center;
  padding:.45rem .55rem;
  border-radius:5px;
  cursor:pointer;
  transition:background .12s;
  font-size:.86rem;
}
.home-inv-row:hover{
  background:var(--surface2);
}
.hir-num{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:.82rem;color:var(--text2);
  font-weight:500;
}
.hir-client{
  color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.hir-date{
  font-size:.78rem;color:var(--text3);
  white-space:nowrap;
}
.hir-date.late{color:#ef4444;font-weight:500;}
.hir-amount{
  font-weight:600;color:var(--text);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.home-inv-pill{
  font-size:.7rem;font-weight:600;
  padding:.15rem .5rem;border-radius:10px;
  text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;
}
.hir-chev{
  color:var(--text3);
  font-size:1.1rem;
  line-height:1;
}

/* Stack the summary on narrow screens; the recent rows already
   wrap their client text via ellipsis so they're fine left to be. */
/* ==================================================================
   CREATE INVOICE FROM JOB — radio rows in the modal (v4.10)
   Each radio is a tappable row with bold label + muted hint, vertically
   stacked. Hover/checked state shifts the border to make selection
   obvious without needing a separate "selected" class. The :has()
   selector handles the checked-row styling natively.

   Uses explicit grid (instead of flex) because the inherited modal
   stylesheet cascades a few rules onto labels that fight with flex
   ordering. Two-column grid: radio in col 1, content in col 2.
   ================================================================== */
.cifj-radio{
  display:grid !important;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:.55rem;
  padding:.55rem .7rem; margin-bottom:.3rem;
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:5px; cursor:pointer;
  transition: border-color .12s, background .12s;
  font-weight:normal;
}
.cifj-radio:hover{
  border-color:var(--border3);
  background:var(--surface);
}
.cifj-radio:has(input:checked){
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, var(--surface2));
}
.cifj-radio input[type="radio"]{
  margin:0;
  margin-top:.18rem;
  cursor:pointer;
  width:16px; height:16px;
  flex-shrink:0;
}
.cifj-radio > span{
  /* The content column. Lets long hints wrap under the bold label
     instead of being truncated. */
  min-width:0;
  line-height:1.35;
}
.cifj-radio strong{
  color:var(--text); font-weight:600; font-size:.9rem;
}
.cifj-radio-hint{
  color:var(--text3); font-size:.82rem; margin-left:.25rem;
}

/* ── Edit Job — projected income / billing block (v4.52.0+) ──
   Three-mode picker (None / Breakdown / Flat) + a sub-section per
   mode. Designed to feel like a single field group rather than an
   intrusive panel — same surface tint as other modal inputs, just
   with a touch of structure for the rate × count rows. */
.ej-bill-block{ margin-top:.25rem; }
.ej-bill-modes{
  display:flex; gap:.4rem; margin-bottom:.5rem;
  flex-wrap:wrap;
}
.ej-bill-mode-btn{
  flex:1 1 0; min-width:5rem;
  padding:.4rem .6rem;
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:5px; cursor:pointer;
  font-size:.85rem; color:var(--text2); font-weight:500;
  text-align:center;
  transition: border-color .12s, background .12s, color .12s;
  display:block; margin:0;
}
.ej-bill-mode-btn:hover{
  border-color:var(--border3); background:var(--surface);
}
.ej-bill-mode-btn input[type="radio"]{
  /* Hide the native input — the label IS the button. The on-state
     is driven by .on (set in JS) since :has() isn't reliable here
     without the native radio in the layout. */
  position:absolute; opacity:0; pointer-events:none;
}
.ej-bill-mode-btn.on{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, var(--surface2));
  color:var(--text);
}
/* Free / non-billable option row — matches the bill-mode card look,
   with a title + helper line. Highlights when ticked. */
.ej-freejob{
  display:flex; align-items:flex-start; gap:.55rem; cursor:pointer;
  border:1px solid var(--border2); border-radius:6px; background:var(--surface2);
  padding:.55rem .65rem; margin:.1rem 0 .6rem;
  transition: border-color .12s, background .12s;
}
.ej-freejob:hover{ border-color:var(--border3); }
.ej-freejob input[type="checkbox"]{
  accent-color:var(--accent); width:16px; height:16px;
  margin:.05rem 0 0; flex-shrink:0; cursor:pointer;
}
.ej-freejob-text{ display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.ej-freejob-title{ font-size:.88rem; font-weight:600; color:var(--text); line-height:1.2; }
.ej-freejob-sub{ font-size:.75rem; color:var(--text3); line-height:1.3; }
.ej-freejob:has(input:checked){
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, var(--surface2));
}
.ej-bill-breakdown, .ej-bill-flat{
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:5px; padding:.55rem .7rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.ej-bill-row{
  display:flex; align-items:center; gap:.4rem;
  font-size:.85rem;
}
.ej-bill-row-lbl{
  flex:0 0 5.5rem; color:var(--text2); font-weight:500;
}
.ej-bill-rate, .ej-bill-count, .ej-bill-flat-label{
  background:var(--surface); border:1px solid var(--border2);
  border-radius:4px; padding:.3rem .45rem;
  color:var(--text); font-size:.85rem;
  font-variant-numeric:tabular-nums;
  min-width:0;     /* allow flex shrinking */
}
.ej-bill-rate{ flex:1 1 0; max-width:7rem; }
.ej-bill-count{ flex:0 0 4rem; }
.ej-bill-flat-label{ flex:1 1 0; }
.ej-bill-x{ color:var(--text3); font-weight:500; }
.ej-bill-row-units{ color:var(--text3); font-size:.78rem; }
.ej-bill-total{
  font-size:.85rem; color:var(--text); font-weight:600;
  text-align:right; padding-top:.2rem;
  border-top:1px dashed var(--border2);
  font-variant-numeric:tabular-nums;
}

/* CIFJ — Labour / Fee section (v4.52.0+). Per-line checkboxes drawn
   from the job's projected-income config, so the user can include /
   exclude any of the breakdown components. Mirrors the expense
   pass-through list visually for consistency. */
.cifj-bill-list{
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:5px; padding:.4rem .55rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.cifj-bill-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:.5rem;
  padding:.35rem .25rem;
  font-size:.85rem; color:var(--text2);
  cursor:pointer; margin:0;
  border-radius:4px;
}
.cifj-bill-row:hover{ background:var(--surface); }
.cifj-bill-row input[type="checkbox"]{
  width:16px; height:16px; margin:0; cursor:pointer;
}
.cifj-bill-row .cifj-bill-desc{ color:var(--text); }
.cifj-bill-row .cifj-bill-amt{
  font-variant-numeric:tabular-nums; color:var(--text);
  font-weight:500;
}

/* CIFJ — expense pass-through list (v4.39.0+).
   Each row is a clickable label so the entire surface toggles
   the checkbox. Grid columns: checkbox · date · vendor (grow) ·
   category · amount. List is bounded to ~3 rows of height with
   internal scroll so a job with many expenses doesn't blow out
   the modal. */
.cifj-exp-list{
  max-height:200px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:.25rem;
  padding:.15rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:5px;
}
.cifj-exp-row{
  display:grid;
  grid-template-columns:auto 80px 1fr auto auto auto;
  align-items:center;
  gap:.55rem;
  padding:.45rem .65rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  cursor:pointer;
  transition: border-color .12s, background .12s;
  font-weight:normal;
  font-size:.82rem;
}
.cifj-exp-row:hover{
  border-color:var(--border3);
}
/* Match only the MAIN expense checkbox (cifj-exp-check), not the
   receipt-attach toggle which now has no real <input> sibling. */
.cifj-exp-row:has(> input.cifj-exp-check:checked){
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.cifj-exp-row > input[type="checkbox"]{
  margin:0; cursor:pointer;
  width:15px; height:15px;
  flex-shrink:0;
}
.cifj-exp-date{
  color:var(--text3); font-size:.78rem;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.cifj-exp-vendor{
  color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0;
}
.cifj-exp-cat{
  color:var(--text2); font-size:.78rem;
  white-space:nowrap;
}
.cifj-exp-amt{
  color:var(--text); font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* Per-row receipt attach toggle (v4.40.0+). Span (not label) to
   avoid nested-label invalid HTML — the parent row is already a
   label. State held in data-on; click handler toggles. Sized so
   the column is uniform whether the toggle is rendered or just
   the placeholder. ON state uses a solid accent fill + white
   glyph for high-contrast "yes, this is selected" feedback;
   OFF state stays neutral grey. */
.cifj-exp-attach{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.25rem .45rem;border-radius:4px;
  background:var(--surface2);border:1px solid var(--border);
  cursor:pointer;font-size:.92rem;color:var(--text3);
  transition:border-color .12s, background .12s, color .12s, opacity .12s;
  user-select:none;
  filter:grayscale(1);
}
.cifj-exp-attach:hover{ border-color:var(--accent); filter:none; }
.cifj-exp-attach[data-on="1"]{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  filter:none;
}
.cifj-exp-attach-glyph{ line-height:1; }
/* When the parent line item is unchecked, the receipt toggle is
   meaningless — dim it and disable interaction. */
.cifj-exp-row:not(:has(> input.cifj-exp-check:checked)) .cifj-exp-attach{
  opacity:.35; pointer-events:none;
}
.cifj-exp-attach-empty{
  display:inline-block;width:34px;
}
@media (max-width:540px){
  .cifj-exp-row{ grid-template-columns:auto 70px 1fr auto auto; }
  .cifj-exp-cat{ display:none; }
}

/* Dashboard expense rows (Job Dashboard → Expenses card, v4.39.0+).
   Reuses .home-inv-row layout to feel consistent with the Invoices
   card above it, but redefines the grid so the columns fit the
   different shape: date · vendor · category-pill · amount. */
.dash-exp-row{
  grid-template-columns: 90px 1fr auto auto 14px !important;
  gap:.6rem !important;
}
.dash-exp-row .exp-cat-pill{
  /* v4.63.0+ — adopt the same coloured-pill treatment as the
     expenses list. Falls back to the neutral grey palette default
     when --cat-color isn't set (older callers, uncategorised). */
  align-self:center;
  background:color-mix(in srgb, var(--cat-color, #6b7280) 15%, transparent);
  color:var(--cat-color, var(--text2));
  border-color:color-mix(in srgb, var(--cat-color, #6b7280) 40%, transparent);
}
@media (max-width:540px){
  .dash-exp-row{ grid-template-columns: 70px 1fr auto 14px !important; }
  .dash-exp-row .exp-cat-pill{ display:none; }
}


/* ══════════════════════════════════════════════════════════
   PAGINATION (.pgnr) — used by every long list (inventory,
   shoot-day gear, all-jobs, invoices, contacts, activity log)
   ══════════════════════════════════════════════════════════ */
.pgnr{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.3rem;
  padding:.85rem .5rem 1rem;
  font-size:.82rem;
  color:var(--text2);
}
.pgnr-num,
.pgnr-arr{
  appearance:none;
  background:var(--bg2);
  color:var(--text2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.32rem .55rem;
  min-width:32px;
  font:inherit;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.pgnr-num:hover:not(:disabled),
.pgnr-arr:hover:not(:disabled){
  background:var(--bg3);
  border-color:var(--border3,var(--border));
  color:var(--text);
}
.pgnr-num.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  cursor:default;
}
.pgnr-arr{
  font-size:1rem;
  padding:.28rem .55rem;
}
.pgnr-arr:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.pgnr-ell{
  color:var(--text3);
  padding:0 .15rem;
  user-select:none;
}
.pgnr-info{
  color:var(--text3);
  font-size:.78rem;
  margin-left:.65rem;
  padding-left:.65rem;
  border-left:1px solid var(--border);
  font-variant-numeric:tabular-nums;
}
/* Pagination row inside the gear table — keep it visually quiet
   and centered, no row borders. */
tr.pgnr-row td{ background:transparent; border:none; padding:0; }
/* Mobile — drop the trailing info under the buttons so it doesn't
   wrap awkwardly next to the page numbers. */
@media (max-width: 640px){
  .pgnr-info{
    width:100%;
    margin:.4rem 0 0;
    padding:0;
    border:none;
    text-align:center;
  }
}
/* Hide the pagination bar entirely when printing — print should
   show all rows (printDay sets _pgBypass to expand the list). */
@media print{ .pgnr{ display:none !important; } }


/* ══════════════════════════════════════════════════════════
   SETTINGS SUB-TABS — segmented control just below the sticky
   header. Visually consistent with .dir-tabs in the directory
   view, but with extra room for icon + label on each tab.
   ══════════════════════════════════════════════════════════ */
/* (b790) Settings shell — sidebar nav + content column.
   Eleven tabs in a horizontal strip meant reading every label to find
   one. The sidebar groups them and keeps the whole set visible at
   once. Below 900px the sidebar is replaced by a native <select>,
   which is already thumb-friendly and needs no drawer machinery. */
/* (b791) Header tool strip. The user menu had become a junk drawer:
   AI chat, theme and the manual sat behind a person's own name, where
   nobody thinks to look for them, while the main nav stayed clean.
   These three are app-wide tools, so they get icon buttons in the
   right-hand cluster — the left nav is untouched.

   (b792) Theme moved to Settings -> Appearance and Help merged into a
   single dropdown entry, so the strip is just AI chat now. Below 820px
   it hides and the .hdr-user-dup copy in the menu takes over, so chat
   is never unreachable on a phone. Exactly one of the two shows at any
   width. */
/* (b792) Theme picker — Settings -> Appearance. Moved out of the
   header: it's a set-once preference, not something worth permanent
   real estate in a toolbar. */
/* (b793) Markdown output in the AI chat pane. The assistant writes
   structured answers — totals, breakdowns, tables — and they should
   look like the rest of the app rather than raw punctuation. Scoped
   to .chat-bubble-text so nothing here can leak into other views. */
.chat-bubble-text > *:first-child{ margin-top:0; }
.chat-bubble-text > *:last-child{ margin-bottom:0; }
.chat-bubble-text p{ margin:.5rem 0; }
.chat-bubble-text .md-h{
  margin:.9rem 0 .35rem;
  font-size:.88rem; font-weight:700; letter-spacing:.01em; color:var(--text);
}
.chat-bubble-text .md-list{ margin:.45rem 0; padding-left:1.15rem; }
.chat-bubble-text .md-list li{ margin:.2rem 0; }
.chat-bubble-text .md-sub{ margin:.15rem 0 .15rem .1rem; padding-left:1rem; list-style:circle; }
.chat-bubble-text .md-hr{ border:0; border-top:1px solid var(--border2); margin:.8rem 0; }

.chat-bubble-text code{
  font-family:var(--mono); font-size:.85em;
  padding:.08em .34em; border-radius:4px;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text);
}
.chat-bubble-text .md-pre{
  margin:.6rem 0; padding:.6rem .75rem; border-radius:8px;
  background:var(--surface2); border:1px solid var(--border);
  overflow-x:auto;
}
.chat-bubble-text .md-pre code{ background:none; border:0; padding:0; font-size:.78rem; line-height:1.5; }

/* Blockquote doubles as the assistant's callout: "> **Heads up:** …"
   reads as an aside in plain text and looks like one here. */
.chat-bubble-text .md-quote{
  margin:.6rem 0; padding:.5rem .7rem;
  border-left:3px solid var(--accent); border-radius:0 7px 7px 0;
  background:var(--surface2); color:var(--text2);
}

.chat-bubble-text .md-table-wrap{ margin:.6rem 0; overflow-x:auto; }
.chat-bubble-text .md-table{
  border-collapse:collapse; width:100%; font-size:.8rem;
  border:1px solid var(--border); border-radius:8px; overflow:hidden;
}
.chat-bubble-text .md-table th{
  text-align:left; font-weight:650; color:var(--text3);
  font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
  padding:.4rem .6rem; background:var(--surface2);
  border-bottom:1px solid var(--border2); white-space:nowrap;
}
.chat-bubble-text .md-table td{
  padding:.38rem .6rem; border-top:1px solid var(--border); color:var(--text2);
}
.chat-bubble-text .md-table td.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.chat-bubble-text .md-table tr:hover td{ background:var(--surface2); }

/* Money is usually the actual answer, so give it a little weight. */
.chat-bubble-text .md-money{ font-weight:650; color:var(--text); font-variant-numeric:tabular-nums; }
.chat-bubble-text strong{ color:var(--text); font-weight:650; }
.chat-bubble-text a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

.theme-choice{ display:flex; gap:.5rem; max-width:22rem; }
.theme-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.55rem .8rem; border-radius:8px; cursor:pointer;
  background:var(--surface2); border:1px solid var(--border2); color:var(--text2);
  font-family:var(--ui); font-size:.86rem; font-weight:500;
  transition:border-color .12s, color .12s, background .12s;
}
.theme-btn:hover{ color:var(--text); }
.theme-btn.active{ border-color:var(--accent); color:var(--text); font-weight:600; }
.theme-btn-sw{
  width:.85rem; height:.85rem; border-radius:50%;
  border:1px solid var(--border3); flex-shrink:0;
}
.theme-btn-sw.dark { background:#1b1d22; }
.theme-btn-sw.light{ background:#f4f5f7; }

/* (b792) Feedback bar at the top of the Help view. */
.help-fb-bar{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin:1rem auto 0; padding:.6rem .85rem;
  max-width:var(--page-max); width:calc(100% - 2.8rem);
  border:1px solid var(--border2); border-radius:9px;
  background:var(--surface2); color:var(--text2);
  font-size:.84rem; line-height:1.45;
}
.help-fb-bar b{ color:var(--text); }
.help-fb-bar .btn{ margin-left:auto; }
@media (max-width:560px){
  .help-fb-bar{ width:calc(100% - 1.8rem); }
  .help-fb-bar .btn{ margin-left:0; width:100%; justify-content:center; }
}

.hdr-tools{ display:flex; align-items:center; gap:.1rem; }
.hdr-tool{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; padding:0;
  background:transparent; border:none; border-radius:7px;
  color:var(--text3); cursor:pointer;
  transition:color .12s, background .12s;
}
.hdr-tool:hover{ color:var(--text); background:var(--surface2); }
.hdr-tool-ico{ display:inline-flex; }
/* (b834) Ask AI is a labelled pill, not a bare icon */
.hdr-ask{width:auto;gap:.4rem;padding:0 .75rem 0 .55rem;border:1px solid var(--surface-rim-strong);background:rgba(0,0,0,.18);color:var(--text2);font-family:var(--ui);font-size:.86rem;font-weight:600;}
.hdr-ask:hover{border-color:var(--accent);color:var(--text);background:var(--accent-dim);}
html.light .hdr-ask{background:var(--surface2);border-color:var(--border);}
@media (max-width:900px){.hdr-ask{width:2rem;padding:0;} .hdr-ask-txt{display:none;}}
.hdr-tool-ico svg{ width:1.05rem; height:1.05rem; display:block; }
.hdr-user-dup{ display:none; }

@media (max-width:820px){
  .hdr-tools{ display:none; }
  .hdr-user-dup{ display:flex; }
}

.set-layout{
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:1.4rem;
  align-items:start;
}
.set-nav{
  position:sticky; top:.5rem;
  display:flex; flex-direction:column; gap:1rem;
  padding:.2rem;
}
.set-nav-sec{ display:flex; flex-direction:column; gap:.1rem; }
.set-nav-sec-label{
  font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text3); padding:0 .55rem .3rem;
}
.set-navitem{
  display:flex; align-items:center; gap:.55rem;
  padding:.42rem .55rem;
  background:transparent; border:none; border-radius:7px;
  color:var(--text2); cursor:pointer; text-align:left; width:100%;
  font-family:var(--ui); font-size:.85rem; font-weight:500;
  transition:color .12s, background .12s;
}
.set-navitem:hover:not(.active){ color:var(--text); background:var(--surface2); }
.set-navitem.active{ background:var(--accent); color:#fff; font-weight:600; }
.set-navitem.danger:not(.active){ color:#c0605f; }
.set-navitem-icon{ font-size:.9rem; line-height:1; flex-shrink:0; }
.set-navitem-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.set-main{ min-width:0; }
.set-nav-select{ display:none; }
.set-nav-select select{
  width:100%; padding:.55rem .7rem; border-radius:8px;
  background:var(--surface2); color:var(--text);
  border:1px solid var(--border2);
  font-family:var(--ui); font-size:.9rem;
}

@media (max-width:900px){
  .set-layout{ grid-template-columns:minmax(0,1fr); gap:.9rem; }
  .set-nav{ display:none; }
  .set-nav-select{ display:block; }
}

.set-tabs{
  display:flex; gap:.2rem; padding:.22rem;
  margin:0 0 1rem;
  background:var(--surface2); border:1px solid var(--border); border-radius:9px;
  overflow-x:auto;                            /* mobile horizontal scroll */
  scrollbar-width:none;                       /* hide scrollbar (Firefox) */
}
.set-tabs::-webkit-scrollbar{display:none;}
.set-tab{
  flex:1 1 auto;                              /* equal-width on desktop */
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.5rem .9rem;
  background:transparent; border:none; border-radius:7px;
  color:var(--text3); cursor:pointer;
  font-family:var(--ui); font-size:.84rem; font-weight:500; letter-spacing:.005em;
  white-space:nowrap;
  transition:color .12s, background .12s, box-shadow .12s;
}
.set-tab:hover:not(.active){ color:var(--text); background:var(--surface); }
.set-tab.active{
  background:var(--accent); color:#fff; font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.set-tab.danger:not(.active){ color:var(--red); opacity:.78; }
.set-tab.danger:hover:not(.active){ background:rgba(224,72,72,.08); opacity:1; }
.set-tab.danger.active{
  background:var(--red); color:#fff;
}
.set-tab-icon{ font-size:1rem; line-height:1; }
.set-tab-label{ font-family:var(--ui); }

/* Settings tab content panel.
   The settings container (#settings-content) was widened to
   var(--page-max) in v4.38.2 so its header + tab nav line up with
   the rest of the app's content views. But that 1200px is too wide
   for form-style tabs (text inputs would stretch ~1080px). Cap the
   panel here at a readable form width. The Expenses tab — which
   shows tables of categories + bank accounts — uses .set-tab-panel-
   wide to opt out of the cap and use the full container width. */
.set-tab-panel{
  max-width:760px;width:100%;
}
.set-tab-panel-wide{
  max-width:none;
}

@media (max-width: 640px){
  .set-tab{ flex:0 0 auto; padding:.5rem .75rem; font-size:.8rem; }
  .set-tab-label{ display:none; }             /* icons-only on narrow screens */
  .set-tab.active .set-tab-label{ display:inline; }
}

/* Compact in-body header strip used when the Users management UI is
   rendered inline as a Settings tab (omitHead mode of
   _buildUsersBodyHtml). The standalone view shows its own page-head;
   here Settings owns the header, so we just need a row that pairs the
   summary line with the "Add User" affordance. (v5.1.0+) */
.set-users-strip{
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  padding:0 0 .85rem; margin-bottom:.6rem;
  border-bottom:1px solid var(--border);
}
.set-users-summary{
  flex:1 1 auto; min-width:0;
  font-size:.85rem; color:var(--text2);
}

/* ══════════════════════════════════════════════════════════
   TAX RATES — card-style inline-editable list, replaces the
   old .invo-li-table layout that visually borrowed from
   invoice line items and didn't feel at home in settings.
   ══════════════════════════════════════════════════════════ */
.tax-rate-list{
  display:flex; flex-direction:column; gap:.5rem;
  margin-bottom:.65rem;
}
.tax-rate-row{
  display:grid;
  grid-template-columns: 1fr 130px auto auto;
  align-items:center;
  gap:.55rem;
  padding:.55rem .65rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  transition:border-color .12s;
}
.tax-rate-row:hover{ border-color:var(--border2); }
.tax-rate-row .trr-name input{
  width:100%; padding:.42rem .6rem;
  background:transparent; border:1px solid transparent; border-radius:5px;
  color:var(--text); font-family:var(--ui); font-size:.9rem; font-weight:500;
  transition:border-color .12s, background .12s;
}
.tax-rate-row .trr-name input:hover{ border-color:var(--border); }
.tax-rate-row .trr-name input:focus{
  outline:none; border-color:var(--accent); background:var(--surface);
}
.trr-rate{
  display:inline-flex; align-items:center; gap:.15rem;
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
  padding:.15rem .55rem .15rem .15rem;
  transition:border-color .12s;
}
.trr-rate:focus-within{ border-color:var(--accent); }
.trr-rate input{
  width:80px; padding:.32rem .45rem;
  background:transparent; border:none; outline:none;
  color:var(--text); font-family:var(--mono); font-size:.88rem;
  text-align:right; font-variant-numeric:tabular-nums;
}
.trr-pct{
  color:var(--text3); font-size:.85rem; font-family:var(--mono);
  user-select:none;
}
.trr-default{
  display:inline-flex; align-items:center; gap:.32rem;
  padding:.4rem .7rem;
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
  color:var(--text3); font-family:var(--ui); font-size:.78rem; font-weight:500;
  cursor:pointer; white-space:nowrap;
  transition:all .12s;
}
.trr-default:hover:not(:disabled):not(.active){
  border-color:var(--border2); color:var(--text2); background:var(--bg2);
}
.trr-default.active{
  background:rgba(255,196,0,.12); border-color:rgba(255,196,0,.4);
  color:#d49b00; cursor:default;
}
.trr-default.active .trr-star{ color:#f5b800; }
.trr-default:disabled{ cursor:default; }
.trr-star{
  font-size:.95rem; line-height:1;
  color:var(--text3);
  transition:color .12s;
}
.trr-default:hover:not(:disabled):not(.active) .trr-star{ color:#d49b00; }
.trr-del{
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:6px;
  color:var(--text3); font-size:.95rem; line-height:1; cursor:pointer;
  transition:all .12s;
}
.trr-del:hover{
  background:rgba(224,72,72,.08); border-color:rgba(224,72,72,.3);
  color:var(--red);
}

/* Inline add form — same row layout as a real row, with the rate
   input pre-styled and Add/Cancel buttons in the trailing slots. */
.tax-rate-add-form{
  border-style:dashed;
  border-color:var(--accent);
  background:rgba(61,142,240,.04);
}
.tax-rate-add-form .trr-name input,
.tax-rate-add-form .trr-rate input{
  background:var(--bg);
}
.tax-rate-add-form .trr-name input{
  border-color:var(--border);
}

.tax-rate-add-host{
  margin-top:.4rem;
}
.tax-rate-add-btn{
  width:100%;
  font-size:.85rem;
}

/* Empty state — same overall layout language as other empty states
   in the app (.dir-empty, .inv-empty). */
.tax-rate-empty{
  text-align:center;
  padding:1.5rem 1rem;
  background:var(--bg);
  border:1px dashed var(--border);
  border-radius:8px;
  color:var(--text3);
}
.tax-rate-empty-icon{
  font-size:1.6rem; opacity:.5; margin-bottom:.4rem;
  font-family:var(--mono);
}
.tax-rate-empty-title{
  color:var(--text2); font-weight:500; font-size:.92rem; margin-bottom:.25rem;
}
.tax-rate-empty-hint{
  font-size:.82rem; line-height:1.4;
}

/* Mobile — collapse the row layout to two stacked rows. The
   default/delete buttons drop to a second visual row below the
   name+rate inputs. */
@media (max-width: 640px){
  .tax-rate-row{
    grid-template-columns: 1fr 110px;
    grid-template-areas:
      "name rate"
      "default delete";
    column-gap:.5rem; row-gap:.4rem;
    padding:.6rem .65rem;
  }
  .tax-rate-row .trr-name{ grid-area:name; }
  .tax-rate-row .trr-rate{ grid-area:rate; justify-self:end; }
  .tax-rate-row .trr-default{
    grid-area:default; justify-self:start;
  }
  .tax-rate-row .trr-del{
    grid-area:delete; justify-self:end;
  }
  .tax-rate-add-form{
    grid-template-columns: 1fr 110px;
    grid-template-areas:
      "name rate"
      "add cancel";
  }
  .tax-rate-add-form > button:nth-of-type(1){ grid-area:add; justify-self:start; }
  .tax-rate-add-form > button:nth-of-type(2){ grid-area:cancel; justify-self:end; }
  .trr-rate input{ width:60px; }
}


/* Hide native number spinner arrows on tax-rate inputs and the
   mileage-rate input. These fields are typed-in values (decimals
   like 0.70 or 5.000) where the spinner buttons don't add value
   and just clutter the UI. */
.trr-rate input[type="number"]::-webkit-outer-spin-button,
.trr-rate input[type="number"]::-webkit-inner-spin-button,
#biz-mileage_rate::-webkit-outer-spin-button,
#biz-mileage_rate::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.trr-rate input[type="number"],
#biz-mileage_rate{
  -moz-appearance:textfield;        /* Firefox */
}

/* ════════════════════════════════════════════════════════════
   FINANCES SECTION (v4.38.0+) — sub-tab nav, expenses list,
   expense modal, dashboard. Renders inside #view-invoices
   (the legacy DOM container, now branded "Finances").
   ════════════════════════════════════════════════════════════ */

/* ── Sub-tab nav inside the Finances shell ───────────────
   Visual language matches .set-tabs (the Settings page) — a
   pill-style segmented control inside a rounded container with
   the active button filled accent. Wrapped in .fin-tabs-wrap so
   the nav aligns to the same column width as .invo-shell-inner
   (--page-max), with matching horizontal padding. The wrap also
   stays outside the inner scroll region so the tabs remain
   pinned at the top of the section. */
.fin-tabs-wrap{
  flex-shrink:0;
  max-width:var(--page-max);
  width:100%;
  margin:0 auto;
  padding:1rem 1.4rem 0;
}
.fin-tabs{
  display:flex; gap:.2rem; padding:.22rem;
  margin:0;
  background:var(--surface2); border:1px solid var(--border); border-radius:9px;
  overflow-x:auto;
  scrollbar-width:none;
}
.fin-tabs::-webkit-scrollbar{display:none;}
.fin-tab{
  flex:1 1 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.5rem .9rem;
  background:transparent; border:none; border-radius:7px;
  color:var(--text3); cursor:pointer;
  font-family:var(--ui); font-size:.84rem; font-weight:500; letter-spacing:.005em;
  white-space:nowrap;
  transition:color .12s, background .12s, box-shadow .12s;
}
.fin-tab:hover:not(.active){ color:var(--text); background:var(--surface); }
.fin-tab.active{
  background:var(--accent); color:#fff; font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.fin-tab-icon{ font-size:1rem; line-height:1; }
/* (b866) SVG variant — the Taxes tab uses a line-drawn percent icon
   (stroke=currentColor) instead of an emoji; sized to sit exactly
   like the 1rem emoji glyphs beside it. */
.fin-tab-icon-svg{ display:inline-flex; align-items:center; }
.fin-tab-icon-svg svg{ width:1em; height:1em; display:block; }
.fin-tab-label{ font-family:var(--ui); }
@media (max-width:640px){
  .fin-tabs-wrap{ padding:.7rem .8rem 0; }
  .fin-tab{ flex:0 0 auto; padding:.5rem .75rem; font-size:.8rem; }
  .fin-tab-label{ display:none; }
  .fin-tab.active .fin-tab-label{ display:inline; }
}

/* ── Expenses list — filter bar ─────────────────────────── */
.exp-head{ margin-bottom:1.1rem; }
.exp-filters{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:10px;padding:.75rem .85rem;margin-bottom:1.1rem;
}
.exp-filter-row{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:.55rem;
}
.exp-filter-grp{
  display:flex;flex-direction:column;gap:.2rem;
  min-width:0;
}
.exp-filter-grp label{
  font-size:.74rem;color:var(--text3);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
}
.exp-filter-grp input[type="date"],
.exp-filter-grp select{
  background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:.4rem .5rem;color:var(--text);
  font-size:.86rem;min-height:34px;
}
.exp-filter-q{
  background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:.45rem .65rem;color:var(--text);
  font-size:.9rem;flex:1 1 240px;min-width:200px;
  height:34px;align-self:flex-end;
}
.exp-filter-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-top:.55rem;padding-top:.55rem;
  border-top:1px solid var(--border);
  color:var(--text2);font-size:.85rem;
}
.exp-filter-summary strong{ color:var(--text); }
.exp-filter-summary .dot{ color:var(--text3); }

/* ── Expenses list — table ─────────────────────────────── */

/* Bulk select + edit bar (v4.62.0+). Sticky above the table when
   ≥1 row is selected. Three field groups (tax type, tax-included
   flag, category) on the left; Clear/Apply buttons on the right.
   Wraps on narrow viewports — fields stack first, actions last. */
.exp-bulk-bar{
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  margin-bottom:.85rem;
  padding:.75rem 1rem;
  background:var(--surface);
  border:1px solid var(--accent);
  border-radius:8px;
  position:sticky;
  top:0;
  z-index:5;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.exp-bulk-count{
  font-weight:700;color:var(--accent);
  font-size:.88rem;white-space:nowrap;
  flex-shrink:0;
}
.exp-bulk-fields{
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  flex:1 1 auto;min-width:0;
}
.exp-bulk-field{
  display:flex;flex-direction:column;gap:.2rem;
  font-size:.74rem;color:var(--text3);
  text-transform:uppercase;letter-spacing:.03em;
  font-weight:600;
}
.exp-bulk-field select{
  padding:.35rem .55rem;
  background:var(--bg);
  border:1px solid var(--border);border-radius:5px;
  color:var(--text);
  font-size:.85rem;font-weight:400;
  text-transform:none;letter-spacing:0;
  min-width:170px;
}
.exp-bulk-field select:hover{ border-color:var(--border2); }
.exp-bulk-field select:focus{ outline:none;border-color:var(--accent); }
/* The "Tax included" checkbox lives inline with the others but
   has no separate label-above; flexbox alignment looks off
   without it, so this row uses a different layout. */
.exp-bulk-field.exp-bulk-incl{
  flex-direction:row;align-items:center;gap:.4rem;
  font-size:.85rem;color:var(--text2);
  text-transform:none;letter-spacing:0;
  font-weight:400;cursor:pointer;
  align-self:flex-end;       /* line up the baseline with the dropdown bottoms */
  padding-bottom:.4rem;
}
.exp-bulk-field.exp-bulk-incl input{
  margin:0;cursor:pointer;
  accent-color:var(--accent);
}
.exp-bulk-actions{
  display:flex;gap:.5rem;flex-shrink:0;
}

/* Per-row checkbox column. Narrow + centered. The header
   checkbox shows indeterminate state when only some visible
   rows are selected — purely visual; click resolves to either
   "select all visible" or "deselect all visible". */
.exp-table th.exp-col-bulk,
.exp-table td.exp-col-bulk{
  width:36px;
  text-align:center;
  padding-left:.55rem;padding-right:.25rem;
}
.exp-table .exp-bulk-cb,
.exp-table #exp-bulk-select-all{
  cursor:pointer;
  accent-color:var(--accent);
  margin:0;
}
/* Selected rows get a subtle accent tint so the user can scan
   their selection at a glance. Hover overrides it back to the
   row-hover surface to preserve hover affordance. */
.exp-table tbody tr.exp-row-selected td{
  background:rgba(245,166,35,.07);
}
.exp-table tbody tr.exp-row-selected:hover td{
  background:rgba(245,166,35,.12);
}

.exp-table-wrap{
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;
  /* Allow horizontal scroll on narrow viewports rather than wrap. */
  overflow-x:auto;
}
.exp-table{
  width:100%;border-collapse:collapse;
  font-size:.88rem;
}
.exp-table thead th{
  background:var(--surface2);
  text-align:left;padding:.6rem .75rem;
  font-weight:600;font-size:.78rem;color:var(--text2);
  text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.exp-table thead th.num{ text-align:right; }
.exp-table thead th.rec{ text-align:center;width:60px; }
.exp-table thead th.sortable{ cursor:pointer;user-select:none; }
.exp-table thead th.sortable:hover{ color:var(--text); }
.exp-table tbody td{
  padding:.55rem .75rem;
  border-bottom:1px solid var(--border);
  color:var(--text);
  vertical-align:top;
}
.exp-table tbody td.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.exp-table tbody td.rec{ text-align:center; }
.exp-table tbody tr.exp-row{ cursor:pointer; transition:background .1s; }
.exp-table tbody tr.exp-row:hover{ background:var(--surface2); }
.exp-table tbody tr:last-child td{ border-bottom:none; }
.exp-vendor{ font-weight:600; color:var(--text); }
.exp-desc{ font-size:.78rem; color:var(--text3); margin-top:.15rem; }
.exp-cat-pill{
  display:inline-block;padding:.18rem .55rem;
  background:var(--surface2);color:var(--text2);
  border:1px solid var(--border);border-radius:10px;
  font-size:.78rem;white-space:nowrap;
}
.exp-cat-pill.warn{
  background:rgba(245,166,35,.12);color:var(--accent);
  border-color:rgba(245,166,35,.35);
}
.exp-rec-btn{
  background:transparent;border:none;cursor:pointer;
  padding:.2rem .4rem;font-size:1.05rem;
  color:var(--text2);border-radius:6px;
}
.exp-rec-btn:hover{ background:var(--surface2);color:var(--text); }
.exp-rec-missing{ color:var(--text3); font-size:1.1rem; }
.exp-table .muted{ color:var(--text3); }

/* ────────────────────────────────────────────────────────────
   Expenses list — v2 redesign (v4.63.0+, refined v4.64.2)
   Collapsed from 10 columns to 6 for scannability:
     ☐ │ Date │ Description │ Category │ Total │ 📎

   v4.64.2 — table-layout fix #2:
   - Column widths set INLINE on each <th> via style="width:Xpx",
     belt-and-braces over the CSS class widths so they're
     guaranteed to apply to the first row (which determines all
     column widths under table-layout:fixed).
   - Stripe drawn via box-shadow:inset on the FIRST <td> of each
     row instead of a positioned ::before on the <tr>.
     position:relative on a <tr> can break table layout in some
     browsers (particularly under table-layout:fixed) since the
     row's display:table-row doesn't play well with positioning.
     The inset shadow approach has zero layout side-effects.
   - Description column has no fixed width — picks up the
     remaining space automatically under fixed layout.
   ──────────────────────────────────────────────────────────── */

/* Lock the table to its container's width and honour the inline
   column widths on the header row. */
.exp-table.exp-table-v2{
  table-layout:fixed;
  width:100%;
}

/* Padding override — match thead and tbody exactly so columns
   line up vertically. .exp-table.exp-table-v2 chains both
   classes for higher specificity than the .exp-table base. */
.exp-table.exp-table-v2 thead th,
.exp-table.exp-table-v2 tbody td{
  padding:.55rem .85rem;
  vertical-align:middle;
}

/* Override the legacy .exp-table thead th.rec width:60px. The
   inline style on the th is the real source of truth for column
   width, but this rule defends against any later CSS attempting
   to widen the cell beyond what colgroup decided. */
.exp-table.exp-table-v2 thead th.exp-col-rec{
  text-align:center;
}

.exp-table-v2 .exp-col-date{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  color:var(--text2);
  font-size:.85rem;
}
.exp-table-v2 .exp-col-total{ text-align:right; }
.exp-table-v2 .exp-col-rec  { text-align:center; }
.exp-table-v2 .exp-col-bulk { text-align:center; padding-left:.65rem !important; }

/* Description cell — vendor + description inline on one line,
   optional chips line below. Width is whatever's left after the
   fixed columns under table-layout:fixed. */
.exp-main-line{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  line-height:1.35;
}
.exp-main-vendor{
  font-weight:600;
  color:var(--text);
  font-size:.92rem;
}
.exp-main-desc{
  color:var(--text3);
  font-size:.85rem;
}
.exp-main-chips{
  display:flex;flex-wrap:wrap;gap:.3rem;
  margin-top:.25rem;
  max-width:100%;
}
.exp-chip{
  display:inline-block;
  padding:.08rem .42rem;
  background:var(--surface2);
  color:var(--text2);
  border:1px solid var(--border);
  border-radius:4px;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.01em;
  white-space:nowrap;
  line-height:1.4;
  /* Cap individual chip width so a long account name truncates
     instead of expanding the column. Hover shows full text via
     the title attr we set on each chip. */
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.exp-chip-job{
  background:rgba(99,102,241,.10);
  color:#a5b4fc;
  border-color:rgba(99,102,241,.30);
}
.exp-chip-tax{
  text-transform:uppercase;
  font-size:.66rem;
  letter-spacing:.05em;
  color:var(--text3);
  max-width:none;
}
.exp-chip-billed{
  background:rgba(16,185,129,.12);
  color:#34d399;
  border-color:rgba(16,185,129,.32);
  font-weight:600;
  max-width:none;
}

/* Category pill — coloured + tinted. */
.exp-table-v2 .exp-cat-pill{
  display:inline-block;
  padding:.18rem .6rem;
  border-radius:999px;
  font-size:.76rem;
  font-weight:500;
  white-space:nowrap;
  background:color-mix(in srgb, var(--cat-color) 15%, transparent);
  color:var(--cat-color);
  border:1px solid color-mix(in srgb, var(--cat-color) 40%, transparent);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.exp-table-v2 .exp-cat-pill.warn{
  background:rgba(245,166,35,.12);
  color:var(--accent);
  border-color:rgba(245,166,35,.35);
}

/* Total cell — bold total above, subtle tax sub-line below. */
.exp-total-amt{
  font-weight:700;
  font-size:.95rem;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  line-height:1.25;
}
.exp-total-tax{
  font-size:.7rem;
  color:var(--text3);
  font-variant-numeric:tabular-nums;
  margin-top:.1rem;
  white-space:nowrap;
  letter-spacing:.01em;
}
/* Foreign-currency provenance badge under the total (v2026.08.06+).
   Shows the receipt's own currency + amount when the row was
   converted; the ⚠ variant flags rows stored without a rate. */
.exp-total-fx{
  font-size:.68rem;
  color:var(--text3);
  font-variant-numeric:tabular-nums;
  margin-top:.1rem;
  white-space:nowrap;
  letter-spacing:.02em;
}
.exp-total-fx.warn{ color:var(--warn, #d9822b); }
/* Conversion helper line under the rate field in the expense modal */
.ex-fx-helper{
  font-size:.72rem;
  color:var(--text3);
  margin-top:.25rem;
  min-height:1em;
}

.exp-table-v2 tbody tr.exp-row{
  cursor:pointer;
  transition:background .1s;
}
.exp-table-v2 tbody tr.exp-row:hover{
  background:var(--surface2);
}
.exp-table-v2 tbody tr.exp-row-selected td{
  background:rgba(245,166,35,.07);
}
.exp-table-v2 tbody tr.exp-row-selected:hover td{
  background:rgba(245,166,35,.12);
}

/* Active-state for ghost button — used by the "Select" toggle in
   the expenses page header to indicate bulk-select mode is on. */
.btn-ghost.btn-active{
  background:rgba(245,166,35,.12);
  color:var(--accent);
  border-color:rgba(245,166,35,.4);
}
.btn-ghost.btn-active:hover{
  background:rgba(245,166,35,.18);
}

/* ── Settings → Categories: colour swatch alongside name ───── */
.fmr-name-row{
  display:flex;align-items:center;gap:.5rem;
}
.fmr-color{
  appearance:none;-webkit-appearance:none;
  width:32px;height:32px;
  padding:0;border:1px solid var(--border);
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
  overflow:hidden;
}
.fmr-color:hover{ border-color:var(--border2); }
.fmr-color::-webkit-color-swatch-wrapper{ padding:0; }
.fmr-color::-webkit-color-swatch{
  border:none;border-radius:5px;
}
.fmr-color::-moz-color-swatch{
  border:none;border-radius:5px;
}

/* Small tax-kind label rendered under the tax amount in the
   expenses table. Keeps the column narrow while still surfacing
   GST/PST/HST/etc. so the user can scan a list and see at a glance
   what kind of tax each row carries — which directly affects ITC
   reclaim. Numeric column is right-aligned so the label sits flush
   with the right edge under its amount. */
.exp-tax-kind{
  font-size:.66rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text3);
  margin-top:.1rem;
  font-variant-numeric:normal;
}

/* Inline tax-type select inside the CSV import preview's amount
   cell. Sits next to the "+ $X.XX" tax line so each row's auto-
   detected type is visible and overridable in one click. Compact
   styling so it doesn't bloat the row height. */
.exi-tax-type-sel{
  margin-left:.4rem;
  padding:.05rem .25rem;
  font-size:.7rem;
  background:var(--surface);
  color:var(--text2);
  border:1px solid var(--border);
  border-radius:4px;
  cursor:pointer;
  font-variant-numeric:normal;
}
.exi-tax-type-sel:hover{ background:var(--surface2); color:var(--text); }
.exi-tax-type-sel:focus{ outline:1px solid var(--accent); outline-offset:1px; }

/* ── Empty state ────────────────────────────────────────── */
.exp-empty{
  text-align:center;padding:3rem 1rem;
  background:var(--surface);border:1px dashed var(--border);
  border-radius:10px;
}
.exp-empty-art{ font-size:3rem; margin-bottom:.6rem; opacity:.55; }
.exp-empty-title{ font-size:1.15rem; font-weight:600; color:var(--text); }
.exp-empty-sub{ font-size:.9rem; color:var(--text2); margin-top:.4rem; }

/* ── Expense editor modal — receipt area + helpers ─────── */
.ex-tax-helper{
  font-size:.74rem;color:var(--text3);margin-top:.3rem;
}
.ex-tax-helper a{
  color:var(--accent);cursor:pointer;text-decoration:none;
}
.ex-tax-helper a:hover{ text-decoration:underline; }

/* "Tax is included in amount" toggle row (v4.61.0+). Sits
   directly under the amount/tax pair. Compact: checkbox + label
   on the left, computed-pre-tax helper on the right when
   relevant. Indented slightly so it visually associates with the
   amount field above. */
.ex-incl-tax{
  display:flex;align-items:baseline;flex-wrap:wrap;
  gap:.85rem;
  margin:-.35rem 0 .9rem;       /* tighten the gap to the .frow above */
  padding:0 .15rem;
  font-size:.82rem;
}
.ex-incl-tax-label{
  display:inline-flex;align-items:center;gap:.4rem;
  cursor:pointer;color:var(--text2);
  user-select:none;
}
.ex-incl-tax-label input{
  margin:0;cursor:pointer;
  accent-color:var(--accent);
}
.ex-incl-tax-helper{
  font-size:.78rem;color:var(--text3);
  flex:1 1 auto;min-width:0;
}

.ex-total-line{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:6px;padding:.5rem .75rem;
  margin:.5rem 0 1rem;
  font-size:.95rem;color:var(--text2);font-weight:600;
}
.ex-total-line span{ color:var(--text); font-size:1.05rem; }
.ex-receipt-area{ margin-top:.25rem; }

/* ── Expense CSV import modals (v4.47.0+) ─────────────────────
   Two-step flow:
     • #m-expense-import (upload) — file picker + bank/cat selects.
       The .exi-file-drop area doubles as both a click-target and a
       drag-drop zone. .drag class gets toggled via JS handlers.
     • #m-expense-import-review (review) — wide modal (max 1100px,
       capped at 90vw on smaller screens) so the per-row preview
       table doesn't compress to unreadable column widths. Vertical
       scroll is on .exi-review-tablewrap (max ~60vh) so the modal
       header + footer stay visible while scrubbing rows.
   Status pills (.exi-pill-*) match the 'auto-matched' / 'needs
   category' / 'duplicate' dispositions returned from the server. */
.exi-file-drop{
  display:flex;align-items:center;gap:.7rem;
  padding:1rem 1.1rem;
  border:2px dashed var(--border2);
  border-radius:8px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .12s, background .12s;
  user-select:none;
}
.exi-file-drop:hover{
  border-color:var(--accent);
  background:var(--surface2);
}
.exi-file-drop.drag{
  border-color:var(--accent);
  background:rgba(245,166,35,.08);
}
.exi-file-glyph{ font-size:1.4rem;line-height:1;flex-shrink:0; }
.exi-file-text{
  flex:1;min-width:0;
  font-size:.88rem;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Status pills used in both the summary strip + the per-row
   Status column. */
.exi-pill{
  display:inline-flex;align-items:center;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  padding:.18rem .55rem;border-radius:999px;
  border:1px solid var(--border2);
  color:var(--text2);background:var(--surface);
  white-space:nowrap;
}
.exi-pill-total{ color:var(--text2); }
.exi-pill-auto{
  /* Accent-tinted: server matched a vendor rule (or default cat). */
  color:var(--accent);
  background:rgba(245,166,35,.10);
  border-color:rgba(245,166,35,.45);
}
.exi-pill-warn{
  /* Yellow: row needs a category before it can be imported. */
  color:#d97706;
  background:rgba(245,166,35,.06);
  border-color:rgba(217,119,6,.45);
}
.exi-pill-dup{
  /* Muted: row will be skipped as a duplicate. */
  color:var(--text3);
  background:transparent;
  border-color:var(--border);
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
/* When the dup pill is rendered as a <button> (interactive in
   v4.48.2+), it gets hover/focus affordances + an "is-on" state
   for when all dups are opted in for re-entry. The strikethrough
   stays on the inactive state and goes away on .is-on so the user
   can see at a glance that the duplicates are no longer being
   skipped. */
button.exi-pill-dup{
  cursor:pointer;
  font:inherit;
  letter-spacing:.01em;
}
button.exi-pill-dup:hover{
  color:var(--text2);
  border-color:var(--border2);
  background:var(--surface);
}
button.exi-pill-dup:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
button.exi-pill-dup.is-on{
  color:#60a5fa;
  background:rgba(96,165,250,.10);
  border-color:rgba(96,165,250,.45);
  text-decoration:none;
}
button.exi-pill-dup.is-on:hover{
  background:rgba(96,165,250,.18);
}

/* Info pill — used for account mapping status ('? best guess') and
   the "N with tax" summary count. Cool blue tone keeps it visually
   distinct from the warm orange auto/csv-matched pills. */
.exi-pill-info{
  color:#60a5fa;
  background:rgba(96,165,250,.10);
  border-color:rgba(96,165,250,.45);
}

/* History-matched pill (v4.59.0+) — row's category was inferred
   from the user's previously-categorised expenses for the same
   vendor pattern, not from an explicit rule. Muted purple to
   distinguish from the warm-orange explicit-rule auto-matched
   pill, while still reading as "good signal". */
.exi-pill-hist{
  color:#a78bfa;
  background:rgba(167,139,250,.10);
  border-color:rgba(167,139,250,.45);
}

/* AI-suggested pill (v4.60.0+) — row's category was suggested
   by the Anthropic API based on merchant name. Cyan/teal
   distinguishes it from history (purple) and explicit rules
   (orange). User-reviewable like every other suggestion path. */
.exi-pill-ai{
  color:#22d3ee;
  background:rgba(34,211,238,.10);
  border-color:rgba(34,211,238,.50);
}

/* Likely-duplicate pill (v4.59.0+). Soft dupes — date + amount +
   normalised vendor matches an existing expense, but the strict
   ref doesn't (different memo / source / etc.). Default skip;
   user can opt-in per row or via the summary pill button. Amber-
   leaning yellow, slightly more saturated than .exi-pill-warn so
   the two warn-flavours are distinguishable in a busy header. */
.exi-pill-soft{
  color:#ca8a04;
  background:rgba(202,138,4,.10);
  border-color:rgba(202,138,4,.50);
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
button.exi-pill-soft{
  cursor:pointer;
  font:inherit;
  letter-spacing:.01em;
}
button.exi-pill-soft:hover{
  color:#a16207;
  background:rgba(202,138,4,.18);
}
button.exi-pill-soft:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
button.exi-pill-soft.is-on{
  /* When opted-in, render like the active auto-matched pill —
     no strikethrough, more saturated background. */
  color:#854d0e;
  background:rgba(202,138,4,.22);
  border-color:rgba(202,138,4,.65);
  text-decoration:none;
}
button.exi-pill-soft.is-on:hover{
  background:rgba(202,138,4,.30);
}

/* Account-mappings panel above the rows table (v4.48.0+). One row
   per distinct CSV account; the user confirms the mapping to a
   CineBase bank_account here, with a 'Save' toggle that defaults to
   on (creates an account_rule for future imports). Compact grid
   layout: name + status pill | arrow | dropdown | save toggle. */
/* AI categorisation toolbar (v4.60.0+). Sits in the review modal
   between the account-mappings panel and the rows table. Visible
   only when there are unmatched rows AND an API key is configured.
   Compact horizontal row: icon + copy + Action button. */
.exi-review-aibar{
  margin: 0 0 .85rem 0;
  padding: .65rem .85rem;
  border: 1px solid rgba(34,211,238,.35);
  border-radius: 6px;
  background: rgba(34,211,238,.06);
  flex-shrink: 0;
}
.exi-aibar-row{
  display: flex; align-items: center; gap: .85rem;
}
.exi-aibar-icon{ font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.exi-aibar-text{ flex: 1; min-width: 0; }
.exi-aibar-title{
  font-size: .88rem; font-weight: 600; color: var(--text);
}
.exi-aibar-sub{
  font-size: .78rem; color: var(--text3);
  margin-top: .12rem; line-height: 1.4;
}

/* ETA hint shown when batch count is non-trivial (v4.60.1+). */
.exi-aibar-eta{
  font-size: .74rem;
  color: var(--text3);
  margin-top: .35rem;
  font-style: italic;
}

/* Progress bar shown during a running AI categorisation
   (v4.60.1+). Sits in the same .exi-aibar-text slot the idle
   subtitle would otherwise occupy. The fill animates via a
   transition so updates between batches feel smooth. */
.exi-aibar-progress{
  margin-top: .4rem;
  height: 6px;
  background: rgba(34,211,238,.15);
  border-radius: 3px;
  overflow: hidden;
}
.exi-aibar-progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #22d3ee, #0891b2);
  border-radius: 3px;
  transition: width .3s ease-out;
}

/* AI categorisation settings section (v4.60.0+). Lives at the
   bottom of Settings → Expenses. Two rows: API key (with masked
   state when set + entry field) and Model (read-only display). */
.set-ai-keystate{
  display:flex;align-items:center;gap:.55rem;
  margin-bottom:.35rem;
}
.set-ai-keymask{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  padding: .25rem .55rem;
  border-radius: 4px;
  background: var(--surface2);
  color: var(--text2);
}
.set-ai-keyentry{
  display:flex;align-items:stretch;gap:.5rem;
}
.set-ai-keyentry input{ flex:1; min-width:0; }
.set-ai-model{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  color: var(--text2);
  display: inline-block;
  padding: .25rem .55rem;
  border-radius: 4px;
  background: var(--surface2);
}
/* (b259) free-text model field revealed under the selector when Custom is chosen */
.set-ai-model-custom{ margin-top:.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.exi-review-acct-mappings{
  margin: 0 0 .85rem 0;
  padding: .75rem .85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  flex-shrink: 0;
  max-height: 30vh;
  overflow-y: auto; /* if user has 6+ CSV accounts, scroll within the panel */
}
.exi-acct-head{
  margin-bottom: .55rem;
}
.exi-acct-title{
  font-size: .8rem;font-weight: 700;
  text-transform: uppercase;letter-spacing: .04em;
  color: var(--text2);
}
.exi-acct-sub{
  font-size: .78rem;color: var(--text3);
  margin-top: .15rem;line-height: 1.4;
}
.exi-acct-row{
  display: grid;
  grid-template-columns: 1fr auto minmax(180px, 1.2fr) auto;
  gap: .65rem;
  align-items: center;
  padding: .35rem 0;
  border-bottom: 1px solid var(--border);
}
.exi-acct-row:last-child{ border-bottom: none; }
.exi-acct-csv{
  display: flex;align-items: center;gap: .5rem;
  min-width: 0;
}
.exi-acct-csv-name{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;color: var(--text);
  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.exi-acct-arrow{
  color: var(--text3);font-size: .9rem;
}
.exi-acct-pick select{
  width: 100%;
  padding: .3rem .5rem;font-size: .82rem;
  background: var(--bg);
  border: 1px solid var(--border);border-radius: 4px;
  color: var(--text);
}
.exi-acct-pick select:hover{ border-color: var(--border2); }
.exi-acct-pick select:focus{ outline: none;border-color: var(--accent); }
.exi-acct-save{
  display: inline-flex;align-items: center;gap: .35rem;
  font-size: .78rem;color: var(--text3);
  cursor: pointer;user-select: none;
}
.exi-acct-save input{
  margin: 0;cursor: pointer;
  accent-color: var(--accent);
}
@media (max-width: 700px){
  /* On narrow viewports the 4-col grid collapses to two rows: */
  .exi-acct-row{
    grid-template-columns: 1fr auto;
    gap: .35rem .5rem;
  }
  .exi-acct-arrow{ display: none; }
  .exi-acct-pick{ grid-column: 1 / -1; }
}

/* Tax sub-line under the pre-tax amount in the rows table. Small,
   muted, italic — surfaces the tax info without dominating the
   amount cell. (v4.48.0+) */
.exi-col-amt-tax{
  font-size: .7rem;
  color: var(--text3);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* ── Parser diagnostic banner (v4.48.1+) ───────────────────────
   Shows what CSV columns the parser detected. Rendered as a
   collapsed <details> by default; opens automatically when key
   fields (Account, Category, Vendor) didn't get mapped, since
   that's almost always the reason an import lands without
   matches. The warning block lists each missing field; the body
   shows header → logical-field rows + an "ignored" list. */
.exi-review-diag{
  margin: 0 0 .85rem 0;
  flex-shrink: 0;
}
.exi-diag{
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.exi-diag-summary{
  cursor: pointer;
  padding: .55rem .85rem;
  display: flex;align-items: center;gap: .65rem;
  font-size: .82rem;
  user-select: none;
}
.exi-diag-summary:hover{ background: var(--surface2); }
.exi-diag-summary::marker,
.exi-diag-summary::-webkit-details-marker{
  color: var(--text3);
}
.exi-diag-title{
  font-weight: 600;color: var(--text2);
}
.exi-diag-count{
  font-size: .76rem;color: var(--text3);
}
.exi-diag-warn{
  margin: 0 .85rem;padding: .55rem .7rem;
  border-radius: 5px;
  background: rgba(217,119,6,.10);
  border: 1px solid rgba(217,119,6,.45);
  color: #d97706;
  font-size: .82rem;line-height: 1.45;
}
.exi-diag-warn > div + div{ margin-top: .25rem; }
.exi-diag-warn strong{ color: #d97706;font-weight: 700; }
.exi-diag-body{
  padding: .55rem .85rem .75rem;
  display: flex;flex-direction: column;gap: .5rem;
}
.exi-diag-mapped{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .25rem .65rem;
}
.exi-diag-row{
  display: inline-flex;align-items: baseline;gap: .35rem;
  font-size: .78rem;
}
.exi-diag-header{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text2);
  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.exi-diag-arrow{ color: var(--text3); }
.exi-diag-field{
  color: var(--accent);font-weight: 600;
}
.exi-diag-unmatched{
  font-size: .78rem;
  padding-top: .35rem;border-top: 1px dashed var(--border);
  display: flex;align-items: baseline;gap: .5rem;flex-wrap: wrap;
}
.exi-diag-label{
  color: var(--text3);
}
.exi-diag-skip{
  display: inline-block;
  padding: .1rem .4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem;
  background: var(--bg);
  color: var(--text3);
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-right: .25rem;
}

/* ── Format badge + skip block (v4.58.0+) ──────────────────────
   Surfaces parser-level info that doesn't fit the column-mapping
   model: which CSV format was detected (CIBC vs QB), which cards
   appeared in the file, and how many rows the parser skipped on
   purpose (card payments, merchant refunds). Both blocks live
   between the summary and the column map inside .exi-diag. */
.exi-diag-format{
  margin: 0 .85rem;padding: .5rem .7rem;
  border-radius: 5px;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;align-items: baseline;flex-wrap: wrap;gap: .55rem;
  font-size: .82rem;
}
.exi-diag-format-label{ color: var(--text3); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.exi-diag-format-value{ color: var(--text2); font-weight: 600; }
.exi-diag-format-meta{ color: var(--text3); font-size: .76rem; }
.exi-diag-skipped{
  margin: 0 .85rem;padding: .5rem .7rem;
  border-radius: 5px;
  background: var(--bg);
  border: 1px dashed var(--border);
  display: flex;flex-direction: column;gap: .25rem;
  font-size: .82rem;line-height: 1.45;
}
.exi-diag-skipped .exi-diag-label{
  font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: .15rem;
}
.exi-diag-skip-row{ color: var(--text2); }
.exi-diag-skip-row strong{ color: var(--text); font-weight: 700; }

/* ── Import Rules manager (Settings → Expenses, v4.48.0+) ─────
   Two sub-sections inside one .set-group card: vendor → category
   and CSV-account → bank-account. Each rule is one .ir-row with
   inline editable pattern + target dropdown + match count + save
   /delete buttons. Compact grid layout matches the in-flight
   account-mapping panel from the import modal. */
.ir-section{
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
}
.ir-section:first-of-type{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.ir-section-head{
  display:flex;align-items:baseline;gap:.7rem;
  margin-bottom:.55rem;
}
.ir-section-head h4{
  font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--text2);
  margin:0;
}
.ir-count{
  font-size:.74rem;color:var(--text3);
}
.ir-empty{
  font-size:.85rem;color:var(--text3);
  font-style:italic;
  padding:.55rem 0;
  line-height:1.45;
}
.ir-list{
  display:flex;flex-direction:column;gap:.35rem;
}
.ir-row{
  display:grid;
  grid-template-columns: 1.1fr auto minmax(180px, 1.2fr) auto auto;
  gap:.6rem;
  align-items:center;
  padding:.4rem .55rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:5px;
}
.ir-row .ir-pattern{
  width:100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.82rem;
  padding:.28rem .45rem;
  background:var(--surface);
  border:1px solid var(--border);border-radius:4px;
  color:var(--text);
}
.ir-row .ir-pattern:hover  { border-color:var(--border2); }
.ir-row .ir-pattern:focus  { outline:none;border-color:var(--accent); }
.ir-row-arrow{
  color:var(--text3);font-size:.9rem;
}
.ir-row .ir-target{
  width:100%;
  font-size:.82rem;
  padding:.28rem .45rem;
  background:var(--surface);
  border:1px solid var(--border);border-radius:4px;
  color:var(--text);
}
.ir-row .ir-target:hover { border-color:var(--border2); }
.ir-row .ir-target:focus { outline:none;border-color:var(--accent); }
.ir-row-meta{
  display:inline-flex;align-items:baseline;gap:.4rem;
  font-size:.74rem;color:var(--text3);
  white-space:nowrap;
}
.ir-meta-count{
  font-weight:600;color:var(--text2);
  font-variant-numeric:tabular-nums;
}
.ir-meta-when{ font-variant-numeric:tabular-nums; }
.ir-row-actions{
  display:inline-flex;gap:.3rem;
}
@media (max-width: 700px){
  /* On narrow viewports, fold meta + actions onto a second line */
  .ir-row{
    grid-template-columns: 1fr auto;
    gap:.35rem .5rem;
  }
  .ir-row-arrow{ display:none; }
  .ir-row-target{ grid-column: 1 / -1; }
  .ir-row-meta,
  .ir-row-actions{
    grid-column: auto;
  }
}

/* QB category hint inside the description cell (v4.47.1+). Renders
   only on rows that have a csv_category but didn't auto-match — so
   the user can see what QB called it ("Bank Charges", "Auto:Fuel")
   when picking a CineBase category from the dropdown. Inline with the
   description text rather than its own column to keep the table
   compact; truncates with ellipsis to fit. */
.exi-csv-hint{
  display:inline-block;
  margin-left:.4rem;
  padding:.05rem .35rem;
  font-size:.72rem;font-style:italic;
  color:var(--text3);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:3px;
  vertical-align:baseline;
  white-space:nowrap;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Review modal sizing — wider than default so the table doesn't
   crush. Flex-column so the table area auto-fills the remaining
   space below the summary + account mappings, with the footer
   pinned to the bottom. (v4.48.0+ — was a fixed 60vh tablewrap
   max-height in v4.47.x, but the new account mappings panel
   pushed total height past the viewport.) */
.exi-review-modal{
  max-width:1100px;
  width:90vw;
  /* Lock to 90vh (was max-height:90vh in v4.47.x — a cap, not a
     floor). With max-height alone, content shorter than 90vh
     leaves the flex-1 tablewrap with whatever happens to be
     left after summary+diag+acct-mappings+AI-bar+footer. On a
     CIBC import with the diag banner expanded by default, that
     left ~120px for the rows table — 3 visible rows. Locking
     the modal to a full 90vh AND overriding the base .modal's
     overflow-y:auto with overflow:hidden here makes the inner
     tablewrap (flex:1, overflow-y:auto) the actual scrolling
     surface. The modal frame stays put; only the table scrolls.
     (v4.60.2+) */
  height:90vh;
  max-height:90vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.exi-review-summary{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-bottom:.85rem;
  flex-shrink:0;
}
.exi-review-tablewrap{
  flex:1 1 auto;
  /* min-height was 120px before v4.60.2 — far too small once the
     diag banner + account mappings + AI bar all stacked above.
     280px ≈ 8 rows visible at the table's current row height.
     The flex-1 stretch handles taller viewports (the table
     expands to fill available space); this min-height is the
     squeeze floor for the rare narrow-viewport case. */
  min-height:280px;
  overflow-y:auto;overflow-x:auto;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
}
.exi-review-table{
  width:100%;border-collapse:collapse;
  font-size:.84rem;
}
.exi-review-table thead{
  position:sticky;top:0;z-index:1;
  background:var(--surface2);
}
.exi-review-table th{
  text-align:left;
  font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--text3);
  padding:.55rem .6rem;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.exi-review-table td{
  padding:.45rem .6rem;
  border-bottom:1px solid var(--border);
  color:var(--text2);
  vertical-align:middle;
}
.exi-review-table tr:last-child td{ border-bottom:none; }
.exi-review-table tr:hover td{ background:rgba(255,255,255,.02); }
.exi-col-import{ width:62px;text-align:center; }
.exi-col-date{   width:90px;white-space:nowrap;font-variant-numeric:tabular-nums; }
.exi-col-vendor{ min-width:140px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.exi-col-desc{   min-width:140px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.exi-col-amt{    width:90px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text); }
.exi-col-cat{    min-width:170px; }
.exi-col-cat select{
  width:100%;
  padding:.3rem .45rem;
  font-size:.8rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text);
}
.exi-col-cat select:hover{ border-color:var(--border2); }
.exi-col-cat select:focus{ outline:none;border-color:var(--accent); }
.exi-col-status{ width:1%;white-space:nowrap; }
.exi-col-import input[type="checkbox"]{
  cursor:pointer;
  accent-color:var(--accent);
}

/* Wealthsimple-format columns (v5.13.0+). The review table reshapes
   when the import is a WS chequing export — Kind column gets its own
   cell, the Description column drops out, and the Vendor column
   becomes a free-text input (for expenses) or a destination-account
   picker (for transfers). */
.exi-col-kind{ width:185px; }
/* WS-only: widen the Vendor / Destination column. Invoice-picker
   options can be long (number + payer + amount + date offset) and
   the QB/CIBC 200px cap truncates them with mid-word ellipsis. */
.exi-review-table-ws .exi-col-vendor{ max-width:none;min-width:240px;width:32%; }
/* (v5.16.0+) WS amount column hosts the tax-type picker + split
   breakdown alongside the gross figure, so it needs more room than
   the QB/CIBC 90px. Vertical-align top so the tax UI stacks under
   the amount cleanly. */
.exi-review-table-ws .exi-col-amt{ width:155px;vertical-align:top; }
/* Kind column gets a min-width in WS mode so the auto-table layout
   doesn't squeeze "📤 Expense" into "Expe". */
.exi-review-table-ws .exi-col-kind{ min-width:170px; }
.exi-col-kind select.exi-kind-select{
  width:100%;
  padding:.3rem .45rem;
  font-size:.8rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text);
  cursor:pointer;
}
.exi-col-kind select.exi-kind-select:hover{ border-color:var(--border2); }
.exi-col-kind select.exi-kind-select:focus{ outline:none;border-color:var(--accent); }
/* Tinted left border by kind so the eye scans column groupings
   without having to read the dropdown text on every row. */
.exi-kind-select.is-expense     { border-left:3px solid var(--red,#dc2626);    }
.exi-kind-select.is-transfer-out{ border-left:3px solid var(--amber,#f59e0b); }
.exi-kind-select.is-transfer-in { border-left:3px solid var(--amber,#f59e0b); }
.exi-kind-select.is-income      { border-left:3px solid var(--green,#10b981); }
.exi-kind-select.is-interest    { border-left:3px solid var(--accent);         }
.exi-kind-select.is-skip        { border-left:3px solid var(--border2);        }

/* Amount cell signing — positive (incoming) shows green, negative
   (outgoing) shows the muted reddish text used elsewhere for debits.
   Sub-type sub-line is the WS mechanical code (E_TRFIN, AFT_OUT…)
   shown small under the amount so the user has context for what the
   row represents without depending on a description column. */
.exi-col-amt.exi-amt-pos{ color:var(--green,#10b981); }
.exi-col-amt.exi-amt-neg{ color:var(--text); }
.exi-col-amt-sub{
  font-size:.68rem;
  color:var(--text3);
  font-variant-numeric:normal;
  letter-spacing:.02em;
  margin-top:.12rem;
  text-transform:none;
}
/* (v5.16.0+) WS expense rows show a tax-type picker and an
   inline gross→net+tax breakdown inside the amount cell. The
   picker mirrors .exi-tax-type-sel sizing so it fits beside the
   sub_type label. The breakdown sits below in a faint colour
   because it's derived information, not the bank's number. */
.exi-col-amt-tax-row{
  margin-top:.25rem;
  text-align:right;
}
.exi-col-amt-tax-row .exi-tax-type-sel{
  width:auto;
  max-width:100%;
  font-size:.68rem;
  text-align:left;
}
.exi-col-amt-split{
  margin-top:.2rem;
  font-size:.7rem;
  color:var(--text3);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  display:flex;
  gap:.25rem;
  justify-content:flex-end;
  align-items:baseline;
  flex-wrap:wrap;
}
.exi-col-amt-split .exi-col-amt-net{ color:var(--text2); }
.exi-col-amt-split .exi-col-amt-plus{ color:var(--text3); opacity:.7; }
.exi-col-amt-split .exi-col-amt-taxv{ color:var(--amber,#f59e0b); }

/* Vendor / destination inputs inside the table cell — match the
   compact look of the category dropdown so the row stays one line tall. */
.exi-vendor-input,
.exi-dest-select{
  width:100%;
  padding:.3rem .45rem;
  font-size:.8rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text);
}
.exi-vendor-input:focus,
.exi-dest-select:focus{ outline:none;border-color:var(--accent); }
.exi-vendor-input::placeholder{ color:var(--text3); }

/* Read-only cell content (interest / income / skip rows show a
   static label instead of an editable control). Muted so it
   visually deprioritises rows that won't commit. */
.exi-row-readonly{
  font-size:.78rem;
  color:var(--text3);
  font-style:italic;
}

/* Tax-pattern hint shown next to the destination picker when the
   server's auto-detector flagged a transfer-out as a candidate
   tax-savings skim. Rendered as a block element on its own line so
   it doesn't overflow the cell when the destination dropdown is
   showing a long account name. */
.exi-tax-hint{
  display:inline-block;
  margin-top:.3rem;
  padding:.1rem .42rem;
  font-size:.7rem;
  border-radius:10px;
  background:rgba(245,158,11,.12);
  color:var(--amber,#f59e0b);
  border:1px solid rgba(245,158,11,.3);
  white-space:nowrap;
}

/* Duplicate rows are dimmed so the eye skips them, but checkbox +
   select remain interactive in case the user wants to override. */
.exi-row-dim td{ opacity:.5; }
.exi-row-dim:hover td{ opacity:.85; }
.exi-row-dim .exi-col-import input,
.exi-row-dim .exi-col-cat select{ opacity:1; }

.exi-review-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  margin-top:.85rem;
  flex-shrink:0;
}
.exi-review-learn{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.85rem;color:var(--text2);
  cursor:pointer;user-select:none;
}
.exi-review-learn input{
  margin:0;cursor:pointer;
  accent-color:var(--accent);
}
.exi-review-foot-actions{
  display:flex;gap:.5rem;
}

/* ════════════════════════════════════════════════════════════════
   ICS Schedule Import (v4.82.0+)
   ──────────────────────────────────────────────────────────────
   Two-modal flow: upload → review. Step 1 reuses .exi-file-drop
   (same drag-and-drop visual). Step 2 has its own card-based
   layout — each suggested job is a card, each day inside is a
   compact grid row. Mobile collapses each row to a stacked
   layout via grid areas.
   ════════════════════════════════════════════════════════════════ */

.ici-review-modal{
  max-width:980px;
  width:96vw;
  /* Lock the modal to 92vh — same lesson as .exi-review-modal:
     max-height alone is a cap, not a floor, which lets flex
     children size to whatever's left after siblings claim space.
     Locking height + max-height + overflow:hidden makes the
     bodywrap (flex:1, overflow-y:auto) the only scrolling
     surface; the modal frame stays put. (v4.82.1+) */
  height:92vh;
  max-height:92vh;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.ici-review-summary{
  padding:.55rem .8rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
  font-size:.84rem;
  color:var(--text2);
  margin-bottom:.7rem;
  flex-shrink:0;
}
.ici-review-summary strong{ color:var(--text); }
.ici-review-bodywrap{
  flex:1 1 auto;min-height:280px;
  overflow-y:auto;
  padding:.1rem .25rem;
  margin:0 -.25rem;
}
.ici-review-foot{
  margin-top:.7rem;
  padding-top:.7rem;
  border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;
  flex-shrink:0;
}
.ici-review-foot-actions{ display:flex;gap:.5rem; }
.ici-empty{
  padding:2rem;text-align:center;
  color:var(--text3);font-size:.9rem;
}

/* Group card — one per suggested job */
.ici-group{
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  overflow:hidden;
  margin-bottom:.7rem;
  transition:opacity .15s;
}
.ici-group:last-child{ margin-bottom:0; }
.ici-group.is-skipped{
  opacity:.5;
}
.ici-group.is-skipped .ici-grp-name,
.ici-group.is-skipped .ici-day-row{
  text-decoration:line-through;
  text-decoration-color:var(--text3);
}
.ici-grp-head{
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem .65rem;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.ici-grp-skip{
  display:inline-flex;align-items:center;
  flex-shrink:0;cursor:pointer;
}
.ici-grp-skip input{
  width:1.05rem;height:1.05rem;cursor:pointer;
  accent-color:var(--accent);
}
.ici-grp-name{
  flex:1 1 220px;min-width:0;
  font-size:.98rem;font-weight:600;
  font-family:var(--ui);color:var(--text);
  background:transparent;
  border:1px solid transparent;
  padding:.32rem .5rem;border-radius:5px;
}
.ici-grp-name:hover:not(:disabled),
.ici-grp-name:focus{
  background:var(--surface);
  border-color:var(--border2);
  outline:none;
}
.ici-grp-name:disabled{
  opacity:.65;cursor:not-allowed;
  background:transparent;
}
.ici-grp-existing{
  flex:0 1 240px;
  font-size:.8rem;
  padding:.35rem .5rem;
  background:var(--bg2);color:var(--text2);
  border:1px solid var(--border);
  border-radius:5px;
  cursor:pointer;
  max-width:100%;
}
.ici-grp-foot{
  padding:.4rem .65rem;
  background:var(--bg2);
  border-top:1px solid var(--border);
  font-size:.78rem;
}
.ici-grp-apply{
  background:transparent;
  border:1px solid var(--border2);
  color:var(--text2);
  padding:.25rem .55rem;
  border-radius:5px;
  font-size:.76rem;
  cursor:pointer;
  font-family:var(--ui);
  transition:all .12s;
}
.ici-grp-apply:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* Day rows — table-like grid on desktop, stacked on mobile.
   Columns: skip, date, type-pills, label, mileage, summary
   spans full width on a 2nd visual row. */
.ici-day-table-head,
.ici-day-row{
  display:grid;
  grid-template-columns:24px 96px auto 1fr 100px;
  align-items:center;
  gap:.55rem;
  padding:.5rem .7rem;
}
.ici-day-table-head{
  font-size:.66rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--text3);
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding-top:.4rem;padding-bottom:.4rem;
}
.ici-th-summary{ display:none; }   /* desktop: summary on row-2 */
.ici-day-row{
  border-top:1px solid var(--border);
  font-size:.84rem;
}
.ici-day-row:first-of-type{ border-top:none; }
.ici-day-row.is-skipped{ opacity:.45; }
.ici-day-skip{
  display:inline-flex;align-items:center;cursor:pointer;
}
.ici-day-skip input{
  width:1rem;height:1rem;cursor:pointer;
  accent-color:var(--accent);
}
.ici-day-date-main{
  font-weight:600;color:var(--text);
}
.ici-day-date-time{
  font-size:.7rem;color:var(--text3);
  font-family:var(--mono);
}
.ici-day-types{
  display:flex;gap:.25rem;flex-shrink:0;
  align-items:center;
}
.ici-type-sep{
  display:inline-block;
  width:1px;height:1.4rem;
  background:var(--border2);
  margin:0 .15rem;
  flex-shrink:0;
}
.ici-type-btn{
  width:1.85rem;height:1.85rem;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.95rem;line-height:1;
  border:1px solid var(--border2);
  background:var(--surface2);
  border-radius:5px;cursor:pointer;
  transition:all .12s;
  padding:0;
  filter:grayscale(.6) opacity(.7);
}
.ici-type-btn:hover{
  border-color:var(--accent);
  background:var(--surface);
  filter:none;
}
.ici-type-btn.active{
  background:var(--accent);
  border-color:var(--accent);
  filter:none;
  box-shadow:0 0 0 1px var(--accent);
}
/* The mileage-only pill is green when active to distinguish it
   from the orange-accent day-type pills — it's a different mode,
   not a 5th day type. Hover also tints green so the affordance
   matches. */
.ici-type-btn.type-mileage:hover{
  border-color:var(--green);
  color:var(--green);
}
.ici-type-btn.type-mileage.active{
  background:var(--green);
  border-color:var(--green);
  box-shadow:0 0 0 1px var(--green);
}
.ici-day-label{
  font-size:.84rem;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:5px;
  padding:.32rem .5rem;
  min-width:0;
  font-family:var(--ui);
  color:var(--text);
}
.ici-day-label:focus{
  outline:none;
  border-color:var(--accent);
}
.ici-day-km{
  display:inline-flex;align-items:center;gap:.2rem;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:5px;
  padding:.18rem .4rem .18rem .55rem;
}
.ici-day-km:focus-within{ border-color:var(--accent); }
.ici-day-km input{
  width:60px;
  background:transparent;border:none;
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-size:.84rem;
  color:var(--text);
  padding:.15rem 0;
  font-family:var(--ui);
  -moz-appearance:textfield;
}
.ici-day-km input:focus{ outline:none; }
.ici-day-km input::-webkit-outer-spin-button,
.ici-day-km input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.ici-day-km-unit{
  font-size:.72rem;color:var(--text3);font-weight:500;
}
.ici-day-summary{
  grid-column:2 / -1;
  font-size:.74rem;color:var(--text3);
  font-style:italic;
  margin-top:-.15rem;margin-bottom:.05rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Already-imported date — Dan's "I never have two jobs in one day"
   rule. When the calendar event lands on a date the matched
   existing job already has a day for, surface that prominently
   (amber) and default the row to skipped. The full row gets
   .is-dupe added; the small "↻ Already in JobName" badge sits in
   the summary line so it's always visible even when skip is
   manually unchecked. */
.ici-day-row.is-dupe .ici-day-date-main{
  color:var(--accent);
}
.ici-day-dupe{
  display:inline-block;
  font-style:normal;
  font-weight:600;
  color:var(--accent);
  background:rgba(245,166,35,.10);
  border:1px solid rgba(245,166,35,.35);
  border-radius:4px;
  padding:.05rem .35rem;
  margin-right:.1rem;
  font-size:.7rem;
  letter-spacing:.01em;
}
.ici-summary-dupe{
  color:var(--accent);
  font-weight:500;
}
.ici-summary-dupe strong{ color:var(--accent); }

/* Mileage-only mode — the row creates a mileage_logs entry
   instead of a day record. Visually marked with a green badge in
   the summary line and a subtle green left-edge accent on the
   row so it scans differently from the day-record rows. */
.ici-day-row.is-mileage{
  background:var(--green-dim);
}
.ici-day-row.is-mileage .ici-day-date-main{
  color:var(--green);
}
.ici-day-milbadge{
  display:inline-block;
  font-style:normal;
  font-weight:600;
  color:var(--green);
  background:var(--green-dim);
  border:1px solid rgba(62,201,110,.35);
  border-radius:4px;
  padding:.05rem .35rem;
  margin-right:.1rem;
  font-size:.7rem;
  letter-spacing:.01em;
}

/* Mobile — stack the row's columns into a single-column card */
@media (max-width: 720px){
  .ici-review-modal{
    width:100vw;max-width:100vw;
    height:100dvh;max-height:100dvh;
    border-radius:0;
  }
  .ici-day-table-head{ display:none; }
  .ici-day-row{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "skip    date"
      "skip    types"
      "skip    label"
      "skip    km"
      "skip    summary";
    gap:.4rem .55rem;
    padding:.6rem .7rem;
  }
  .ici-day-skip{ grid-area:skip; align-self:start; padding-top:.3rem; }
  .ici-day-date{ grid-area:date; }
  .ici-day-types{ grid-area:types; }
  .ici-day-label{ grid-area:label; }
  .ici-day-km{ grid-area:km; justify-self:start; }
  .ici-day-summary{
    grid-column:auto;grid-area:summary;
    margin-top:.1rem;white-space:normal;
  }
  .ici-grp-head{ flex-wrap:wrap; }
  .ici-grp-existing{ flex:1 1 100%;max-width:100%; }
}

.ex-receipt-prompt{
  display:flex;align-items:center;gap:.55rem;
  padding:.85rem 1rem;border:2px dashed var(--border2);
  border-radius:8px;cursor:pointer;
  color:var(--text2);font-size:.9rem;
  transition:border-color .12s, background .12s;
}
.ex-receipt-prompt:hover{
  border-color:var(--accent);background:var(--accent-dim);
  color:var(--text);
}
.ex-receipt-row{
  display:flex;align-items:center;gap:.5rem;
  padding:.55rem .75rem;background:var(--surface2);
  border:1px solid var(--border);border-radius:6px;
  font-size:.9rem;flex-wrap:wrap;
}
.ex-receipt-name{ flex:1; color:var(--text); }
.ex-receipt-ico{ font-size:1.1rem; }

/* ── Receipt OCR (vision auto-fill, v4.74.0+) ──
   The "🤖 Auto-fill" button shares the .btn-ghost btn-sm chrome
   with its neighbours; we just give it a subtle accent-tinted
   focus + hover treatment so the user notices it's the
   intelligent one in the row. */
.ex-receipt-ai-btn{
  border-color:var(--border2) !important;
}
.ex-receipt-ai-btn:hover{
  background:var(--accent-dim);
  color:var(--accent);
  border-color:var(--accent) !important;
}
.ex-receipt-ai-btn:disabled{
  opacity:.7;cursor:wait;
}

/* AI scan in progress (v2026.05.22+) — replaces the receipt row
   while an Anthropic Vision call is in flight. Spinner + animated
   step text + elapsed counter keep the user oriented during the
   5-15s wait. On mobile this is critical: the previous indicator
   was a small inline button-text update that was easy to miss and
   made the app feel hung. Pattern mirrors .pg-loading-* used for
   proposal generation. */
.ex-receipt-scanning{
  display:flex;align-items:center;gap:.85rem;
  padding:.75rem .9rem;
  background:linear-gradient(180deg, rgba(99,155,235,.06), rgba(99,155,235,.11));
  border:1px solid rgba(99,155,235,.28);
  border-radius:8px;
  font-size:.9rem;
}
.ex-receipt-scanning-spin{
  /* Override .pg-loading-spinner's 2rem — too big for an inline
     row. Keep the accent colour and spin animation from the base
     class. */
  font-size:1.5rem !important;
  line-height:1;flex-shrink:0;
}
.ex-receipt-scanning-text{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:.15rem;
}
.ex-receipt-scanning-title{
  color:var(--text);font-weight:600;
  font-size:.92rem;
}
.ex-receipt-scanning-meta{
  display:flex;align-items:center;gap:.45rem;
  font-size:.78rem;color:var(--text2);
  font-variant-numeric:tabular-nums;
}
.ex-receipt-scanning-dot{ color:var(--text3); }
.ex-receipt-scanning-hint{
  font-size:.72rem;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Auto-fill banner — appears at the top of the editor body after
   a successful parse. Amber tint matches the broader "review me"
   convention used elsewhere (e.g. the T2125 uncategorised warn). */
.ex-autofill-banner{
  background:rgba(245,158,11,.08);
  border:1px solid rgba(245,158,11,.3);
  border-radius:6px;padding:.5rem .8rem;margin:0 0 .8rem;
  font-size:.85rem;color:var(--amber);font-weight:500;
  display:flex;align-items:center;gap:.4rem;
}

/* "Verify" tint on auto-filled fields with mid-range confidence.
   Outlines the field in soft amber so the user's eye lands there
   without making the text itself harder to read. The tint clears
   when the user starts editing (handled in JS). */
.ex-field-verify{
  border-color:rgba(245,158,11,.55) !important;
  box-shadow:0 0 0 2px rgba(245,158,11,.12);
}
.ex-field-verify:focus{
  border-color:var(--amber) !important;
  box-shadow:0 0 0 2px rgba(245,158,11,.25);
}

/* Vendor-rule badge — small accent pill rendered next to the
   Category dropdown when a stored vendor rule overrode the
   model's suggestion. Tooltip carries the full match details. */
.ex-rule-badge{
  display:inline-flex;align-items:center;
  font-size:.7rem;font-weight:600;letter-spacing:.01em;
  padding:.15rem .5rem;border-radius:99px;
  background:var(--accent-dim);color:var(--accent);
  margin-left:.4rem;white-space:nowrap;
  cursor:help;
}

/* ── Finance dashboard — KPIs, prompts, chart, top categories ── */
.fin-dash-loading,.fin-dash-error{
  text-align:center;padding:2.5rem 1rem;
  color:var(--text3);font-size:.95rem;
}
.fin-year-picker{
  background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:.35rem .55rem;color:var(--text);
  font-size:.9rem;font-weight:600;
}
.fin-kpi-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:.85rem;margin-bottom:1.5rem;
}
.fin-kpi-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:.95rem 1.05rem;
  display:flex;flex-direction:column;gap:.3rem;
  position:relative;
}
.fin-kpi-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:10px 0 0 10px;background:var(--border2);
}
.fin-kpi-card.income::before{   background:var(--green); }
.fin-kpi-card.expenses::before{ background:var(--red); }
.fin-kpi-card.net.positive::before{ background:var(--green); }
.fin-kpi-card.net.negative::before{ background:var(--red); }
.fin-kpi-card.tax::before{      background:var(--accent); }
/* Clickable variant — used on the GST/HST owed KPI to lead into the
   full Tax Report. Hover/focus styled to match the invo-dash-tax-card
   pattern so the affordance is recognisable across both dashboards. */
.fin-kpi-card.fin-kpi-clickable{
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.fin-kpi-card.fin-kpi-clickable:hover{
  background:var(--surface-hi);
  border-color:var(--border2);
}
.fin-kpi-card.fin-kpi-clickable:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.fin-kpi-card.fin-kpi-clickable .fin-kpi-label{
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;
}
/* Subtle north-east arrow in the label corner — quiet affordance,
   not a CTA. The explicit "Open Tax Report →" line below carries
   the action label. */
.fin-kpi-go{
  font-size:.85rem;color:var(--text3);font-weight:500;
  transition:color .12s, transform .12s;
}
.fin-kpi-card.fin-kpi-clickable:hover .fin-kpi-go{
  color:var(--accent);
  transform:translate(1px, -1px);
}
.fin-kpi-cta{
  margin-top:.35rem;
  font-size:.78rem;color:var(--accent);
  font-weight:600;letter-spacing:.01em;
  opacity:.85;
}
.fin-kpi-card.fin-kpi-clickable:hover .fin-kpi-cta{
  opacity:1;
}
.fin-kpi-label{
  font-size:.78rem;color:var(--text3);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
}
.fin-kpi-value{
  font-size:1.7rem;font-weight:700;color:var(--text);
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.fin-kpi-value.amber{ color:var(--accent); }
.fin-kpi-value.good{  color:var(--green); }
.fin-kpi-sub{
  font-size:.78rem;color:var(--text2);
  display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
}
/* Potential-income line under the Income KPI (b900). Sits below the
   year-over-year comparison, deliberately quieter than it — the
   headline number stays the money actually received. */
.fin-kpi-potential{
  font-size:.78rem;color:var(--green);font-weight:600;
  display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;
}
.fin-kpi-potential .muted{ color:var(--text3);font-weight:500; }
.fin-trend{
  display:inline-block;padding:.08rem .35rem;border-radius:4px;
  font-size:.7rem;font-weight:600;
}
.fin-trend.good{ background:var(--green-dim); color:var(--green); }
.fin-trend.bad{  background:var(--red-dim);   color:var(--red); }

.fin-prompts{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;
}
.fin-prompt{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .85rem;border-radius:8px;
  font-size:.85rem;font-weight:500;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text);
}
.fin-prompt.warn{
  background:rgba(245,166,35,.1);border-color:rgba(245,166,35,.4);
  color:var(--text);cursor:pointer;
}
.fin-prompt.warn:hover{ background:rgba(245,166,35,.18); }
.fin-prompt.info{
  background:var(--surface2);color:var(--text2);
}

/* ── Section blocks (chart, top categories) ────────────── */
.fin-section{
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:1rem 1.05rem;margin-bottom:1.25rem;
}
.fin-section-head{
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:.85rem;
}
.fin-section-head h3{
  margin:0;font-size:1.05rem;font-weight:650;color:var(--text);
}
.fin-section-action{
  margin-left:auto;font-size:.85rem;color:var(--accent);
  cursor:pointer;text-decoration:none;
}
.fin-section-action:hover{ text-decoration:underline; }

/* ── Job Profitability (v4.77.0+) ─────────────────────────────
   Per-job dashboard card. Hero = net cash, color-coded; below is
   a 4-cell breakdown (Paid / Outstanding / Costs / Drafts) with
   semantic colors per cell so the user can read the bottom line
   at a glance. */
.dash-prof{
  display:flex;flex-direction:column;gap:.85rem;padding:1rem 1.1rem;
}
/* Projected Income sub-section inside the Profitability card
   (v4.79.0+). Sits above the hero so the financial story reads
   top-to-bottom: 'what we expected' → 'what we actually netted'.
   Visually demarcated with a subtle border so the eye groups it
   as a distinct block; not boxed too heavily since it's still
   part of the same card. */
.dash-prof-section{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.65rem .85rem .55rem;
}
.dash-prof-section-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;margin-bottom:.4rem;
}
.dash-prof-section-label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);font-weight:600;
}
/* Tighten the projected breakdown rows so they sit comfortably
   inside the smaller sub-section frame. The standalone Projected
   Income card had its own card padding; here the parent already
   provides padding so we shave the extra vertical air. */
.dash-prof-section .dash-pi-list{
  gap:.2rem;
}
.dash-prof-section .dash-pi-row{
  padding:.2rem 0;font-size:.85rem;
}
.dash-prof-hero{
  text-align:center;padding:1rem;
  background:var(--surface2);border-radius:8px;
  border:1px solid var(--border);
}
.dash-prof-hero.pos{
  background:rgba(34,197,94,.06);
  border-color:rgba(34,197,94,.3);
}
.dash-prof-hero.neg{
  background:rgba(224,72,72,.06);
  border-color:rgba(224,72,72,.3);
}
.dash-prof-hero-label{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);font-weight:600;
}
.dash-prof-hero-value{
  font-size:1.85rem;font-weight:700;
  color:var(--text);margin:.2rem 0;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.dash-prof-hero.pos .dash-prof-hero-value{ color:var(--green); }
.dash-prof-hero.neg .dash-prof-hero-value{ color:var(--red); }
.dash-prof-hero-margin{
  font-size:.85rem;color:var(--text3);font-variant-numeric:tabular-nums;
}
.dash-prof-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
  gap:.6rem;
}
.dash-prof-cell{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:.6rem .75rem;
}
.dash-prof-cell-label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text3);font-weight:600;margin-bottom:.2rem;
}
.dash-prof-cell-value{
  font-size:1.05rem;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.dash-prof-cell-value.pos{ color:var(--green); }
.dash-prof-cell-value.neg{ color:var(--red); }
.dash-prof-cell-value.amber{ color:var(--accent); }
.dash-prof-cell-sub{
  font-size:.72rem;color:var(--text3);margin-top:.15rem;
}
.dash-prof-accrual{
  font-size:.85rem;color:var(--text2);
  text-align:center;padding-top:.3rem;
  border-top:1px dashed var(--border);
}

/* Finance Dashboard — Job Profitability ranking. Cross-job bar
   list. Same visual rhythm as fin-cat-list (Top Expense Categories)
   so the two sections feel related. */
.fin-job-list{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;overflow:hidden;
}
.fin-job-row{
  display:grid;grid-template-columns:1fr minmax(60px, 100px) auto;
  gap:.85rem;align-items:center;
  padding:.7rem 1rem;cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.fin-job-row:last-child{ border-bottom:none; }
.fin-job-row:hover{ background:var(--surface-hi); }
.fin-job-name{
  display:flex;flex-direction:column;gap:.1rem;min-width:0;
}
.fin-job-title{
  font-weight:600;color:var(--text);font-size:.92rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fin-job-sub{
  font-size:.75rem;color:var(--text3);
  font-variant-numeric:tabular-nums;
}
.fin-job-bar{
  height:8px;background:var(--surface2);border-radius:4px;
  overflow:hidden;border:1px solid var(--border);
  display:flex;                /* paid + outstanding segments side-by-side */
}
.fin-job-bar > span{
  display:block;height:100%;
  background:linear-gradient(90deg, rgba(125,156,255,.5), var(--accent));
  border-radius:3px;
}
/* Solid "paid" (realised) segment — full radius when it's alone,
   left-only when an outstanding segment follows it. */
.fin-job-bar > span.paid{ border-radius:3px 0 0 3px; }
.fin-job-bar > span.paid:last-child{ border-radius:3px; }
/* Hatched amber "outstanding" segment — invoiced but not yet
   collected, i.e. potential profit still in play. Reads visually
   distinct from the solid paid revenue to its left. */
.fin-job-bar > span.owed{
  background:var(--amber-dim);
  background-image:repeating-linear-gradient(45deg,
    var(--amber) 0 3px, transparent 3px 7px);
  border-radius:0 3px 3px 0;
}
.fin-job-net{
  text-align:right;font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;gap:.1rem;align-items:flex-end;
}
.fin-job-net strong{
  font-size:.95rem;font-weight:700;color:var(--text);
}
.fin-job-net.pos strong{ color:var(--green); }
.fin-job-net.neg strong{ color:var(--red); }
.fin-job-margin{
  font-size:.7rem;color:var(--text3);
  font-variant-numeric:tabular-nums;
}
.fin-job-net.pos .fin-job-margin{ color:var(--green); }
.fin-job-net.neg .fin-job-margin{ color:var(--red); }
/* "→ $X potential" — accrual net once outstanding invoices land.
   Always amber regardless of the row's cash-net pos/neg colour, so
   it reads as money-not-yet-in rather than as realised profit. */
.fin-job-potential{
  font-size:.7rem;color:var(--amber);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fin-job-foot-potential{ color:var(--amber); }
.fin-job-foot{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:.55rem .25rem 0;font-size:.82rem;color:var(--text3);
}
.fin-job-foot .muted{ color:var(--text3); }

/* Chart legend + bars */
.fin-legend{
  margin-left:auto;display:flex;gap:.85rem;
  font-size:.8rem;color:var(--text2);
}
.fin-legend .leg{
  display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-right:.35rem;vertical-align:middle;
}
.fin-legend .leg-income{ background:var(--green); }
.fin-legend .leg-expense{ background:var(--red); }
/* Potential-income swatch (b900): hatched green, matching the
   <pattern> the chart fills the stacked segment with. */
.fin-legend .leg-projected{
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--green) 55%, transparent) 0 2px,
      color-mix(in srgb, var(--green) 14%, transparent) 2px 4px);
}
/* Net-line legend swatch: render as a short horizontal bar with a
   dot in the middle, mirroring the chart's polyline + circle
   markers. (v4.67.0+) */
.fin-legend .leg-net{
  background:transparent;
  width:18px; height:10px;
  position:relative;
}
.fin-legend .leg-net::before{
  content:'';
  position:absolute;
  left:0; right:0; top:50%;
  height:2px;
  background:#f5b400;
  transform:translateY(-50%);
}
.fin-legend .leg-net::after{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:6px; height:6px;
  background:#f5b400;
  border-radius:50%;
  transform:translate(-50%, -50%);
}
.fin-chart-wrap{
  width:100%;overflow-x:auto;
}
.fin-chart{
  width:100%;height:auto;display:block;
  min-width:600px; /* monthly bars never crammed below readability */
}
/* ────────────────────────────────────────────────────────────
   Expense duplicate cleanup modal (v4.68.0+)

   One-time tool. Lists clusters of likely-duplicate expenses
   detected server-side. User picks ONE row to keep per cluster
   via radio button; everything else gets deleted on Apply.
   ──────────────────────────────────────────────────────────── */
.exp-dupes-controls{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:1rem;
  flex-wrap:wrap;
}
.exp-dupes-tol{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.85rem;
  color:var(--text2);
}
.exp-dupes-tol select{
  padding:.35rem .55rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--text);
  font-size:.85rem;
}
.exp-dupes-summary{
  font-size:.85rem;
  color:var(--text3);
}
.exp-dupes-spacer{ flex:1 1 auto; }

.exp-dupes-list{
  max-height:60vh;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
}
.exp-dupes-loading,
.exp-dupes-empty{
  padding:2.5rem 1rem;
  text-align:center;
  color:var(--text3);
}
.exp-dupes-empty-icon{
  font-size:2rem;
  margin-bottom:.5rem;
  color:var(--green);
}
.exp-dupes-empty-sub{
  font-size:.82rem;
  color:var(--text3);
  margin-top:.5rem;
}

/* ── Email import log modal (v?.?.0+) ───────────────────────────
   Read-only audit of the expense auto-import pipeline. A controls
   row (outcome tallies + filter + raw-log toggle), a scrollable
   list of per-message outcome rows, and a raw flat-file tail. */
.ingest-log-controls{
  display:flex; align-items:center; gap:.5rem;
  flex-wrap:wrap; margin-bottom:.7rem;
}
.ingest-log-tally{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.ingest-log-spacer{ flex:1; }
.ingest-log-controls select{
  padding:.3rem .5rem; font-size:.82rem;
  background:var(--bg); border:1px solid var(--border);
  border-radius:6px; color:var(--text);
}
.ilog-tally-bit{
  font-size:.74rem; font-weight:600;
  padding:.15rem .5rem; border-radius:999px;
  background:var(--surface2); color:var(--text2);
  font-variant-numeric:tabular-nums;
}
.ilog-tally-bit.ilog-ingested{ background:rgba(16,185,129,.16); color:#10b981; }
.ilog-tally-bit.ilog-rejected{ background:rgba(245,158,11,.16); color:#f59e0b; }
.ilog-tally-bit.ilog-error{    background:rgba(220,38,38,.16);  color:#ef4444; }

.ingest-log-list{
  max-height:60vh; overflow-y:auto;
  border:1px solid var(--border); border-radius:6px; background:var(--surface);
}
.ingest-log-loading,
.ingest-log-empty{
  padding:2.5rem 1rem; text-align:center; color:var(--text3); font-size:.9rem;
}
.ilog-row{ padding:.6rem .8rem; border-bottom:1px solid var(--border); }
.ilog-row:last-child{ border-bottom:0; }
.ilog-row-head{ display:flex; align-items:center; gap:.5rem; }
.ilog-pill{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:.12rem .45rem; border-radius:4px; flex:none; white-space:nowrap;
}
.ilog-pill.ilog-ingested{  background:#10b981; color:#04241b; }
.ilog-pill.ilog-duplicate{ background:#64748b; color:#f4f6fa; }
.ilog-pill.ilog-rejected{  background:#f59e0b; color:#3a2600; }
.ilog-pill.ilog-empty{     background:#475569; color:#cbd5e1; }
.ilog-pill.ilog-error{     background:#dc2626; color:#fff; }
.ilog-subj{
  flex:1; min-width:0; font-weight:600; color:var(--text); font-size:.88rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ilog-time{
  flex:none; color:var(--text3); font-size:.76rem;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ilog-meta{ margin-top:.2rem; color:var(--text2); font-size:.78rem; }
.ilog-detail{
  margin:.4rem 0 0; padding:.45rem .6rem;
  background:var(--bg); border:1px solid var(--border); border-radius:5px;
  color:var(--text2); font-size:.76rem; line-height:1.5;
  white-space:pre-wrap; word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.ingest-log-raw{
  max-height:62vh; overflow:auto; margin:0;
  padding:.7rem .8rem; background:var(--bg);
  border:1px solid var(--border); border-radius:6px;
  color:var(--text2); font-size:.74rem; line-height:1.5;
  white-space:pre-wrap; word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.exp-dupes-cluster{
  border-bottom:1px solid var(--border);
}
.exp-dupes-cluster:last-child{ border-bottom:none; }
.exp-dupes-cluster-head{
  display:flex;
  align-items:baseline;
  gap:.85rem;
  padding:.75rem 1rem .5rem;
  background:var(--surface2);
  font-size:.95rem;
}
.exp-dupes-cluster-head strong{
  color:var(--text);
  flex-shrink:0;
}
.exp-dupes-cluster-amt{
  font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.exp-dupes-cluster-meta{
  font-size:.78rem;
  color:var(--text3);
  margin-left:auto;
}
/* Multi-vendor cluster (only possible in amount-only mode).
   Soft amber accent on the header bar signals "be careful here —
   different vendors share this amount, manual review needed".
   The body of the cluster uses checkboxes (mark for delete)
   instead of radios, with nothing pre-checked. (v4.69.0+) */
.exp-dupes-cluster.is-multi-vendor .exp-dupes-cluster-head{
  background: color-mix(in srgb, #f59e0b 12%, var(--surface2));
  border-left: 3px solid #f59e0b;
}
.exp-dupes-cluster-multi{
  font-size:.78rem;
  color:#f59e0b;
  font-weight:600;
}
.exp-dupes-cluster-rows{
  padding:.25rem 0;
}

/* Each member row is rendered as a <label> wrapping a radio
   input + meta. Clicking anywhere on the row selects this row as
   the one to KEEP. */
.exp-dupes-row{
  display:grid;
  grid-template-columns: 22px 56px 90px 1fr auto;
  gap:.7rem;
  align-items:center;
  padding:.55rem 1rem;
  cursor:pointer;
  font-size:.88rem;
  border-bottom:1px solid var(--border);
  transition:background .1s;
}
.exp-dupes-row:last-child{ border-bottom:none; }
.exp-dupes-row:hover{ background:var(--surface2); }
.exp-dupes-row input[type="radio"]{
  margin:0;
  accent-color:var(--accent);
  cursor:pointer;
}

/* Visual fate indicator — small pill that changes label + colour
   when the user picks this row to keep. Default state is the
   "delete" look; the keeper gets the green "KEEP" treatment. */
.exp-dupes-keep-pill{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.18rem .42rem;
  border-radius:4px;
  text-align:center;
  background:rgba(239,68,68,.15);
  color:#ef4444;
  border:1px solid rgba(239,68,68,.35);
  white-space:nowrap;
}
.exp-dupes-row.is-keep .exp-dupes-keep-pill{
  background:rgba(34,197,94,.15);
  color:#22c55e;
  border-color:rgba(34,197,94,.35);
}
.exp-dupes-row.is-delete{
  /* Subtle strikethrough cue + slight desaturation so the row
     reads as "this will go away". Hover still works normally. */
  opacity:.78;
}
.exp-dupes-row.is-delete .exp-dupes-vendor strong,
.exp-dupes-row.is-delete .exp-dupes-amt{
  text-decoration:line-through;
  text-decoration-color:rgba(239,68,68,.5);
}

.exp-dupes-date{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  color:var(--text2);
  font-size:.82rem;
}
.exp-dupes-vendor{
  min-width:0;
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
  overflow:hidden;
}
.exp-dupes-vendor strong{ color:var(--text); }
.exp-dupes-desc{ color:var(--text3); font-size:.82rem; }
.exp-dupes-meta{
  display:inline-flex;
  gap:.3rem;
  align-items:center;
}
.exp-dupes-receipt{
  font-size:.85rem;
  opacity:.7;
}
.exp-dupes-amt{
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  white-space:nowrap;
}

/* ────────────────────────────────────────────────────────────
   Finance Dashboard — Bar drill-down modal (v4.66.0+)

   Modal lists transactions for a clicked income or expense bar
   in the monthly chart. Each row is clickable → opens the
   source record (invoice preview / expense editor). Visually
   echoes the expenses-list compact-row pattern: date column,
   primary+secondary main cell, right-aligned amount, chev.
   ──────────────────────────────────────────────────────────── */
.fin-drill-summary{
  font-size:.92rem;
  color:var(--text2);
  padding:.5rem .75rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  margin-bottom:1rem;
}
.fin-drill-summary strong{ color:var(--text); }
.fin-drill-empty{ color:var(--text3); font-weight:400; }

.fin-drill-list{
  max-height:50vh;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
}
.fin-drill-row{
  display:grid;
  grid-template-columns: 90px 1fr auto 14px;
  gap:.75rem;
  align-items:center;
  padding:.6rem .85rem;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .1s;
}
.fin-drill-row:last-child{ border-bottom:none; }
.fin-drill-row:hover{ background:var(--surface2); }

.fin-drill-date{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  color:var(--text2);
  font-size:.85rem;
}
.fin-drill-main{ min-width:0; }
.fin-drill-primary{
  font-weight:600;
  color:var(--text);
  font-size:.92rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fin-drill-secondary{
  font-size:.78rem;
  color:var(--text3);
  margin-top:.15rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Partial-payment note inside the secondary line. Styled as a
   small inline tag rather than a full pill — it's a contextual
   hint, not a status badge. (v4.66.1+) */
.fin-drill-partial{
  display:inline-block;
  margin-left:.45rem;
  padding:.05rem .35rem;
  font-size:.66rem;
  letter-spacing:.02em;
  color:var(--text3);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:3px;
  text-transform:uppercase;
}
.fin-drill-amt{
  font-weight:700;
  font-size:.95rem;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.fin-drill-amt-income{  color:var(--green); }
.fin-drill-amt-expense{ color:var(--red); }
/* Dimmer than realised income — this money hasn't landed. (b900) */
.fin-drill-amt-projected{ color:var(--green); opacity:.72; }
/* (b901) The projected drill mixes two kinds of row — invoices out
   awaiting payment, and jobs with no invoice yet. A small pill on the
   primary line tells them apart without a second list. */
.fin-drill-src-pill{
  display:inline-block;margin-left:.4rem;
  padding:.05rem .32rem;border-radius:4px;
  font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  vertical-align:middle;
  background:var(--green-dim);color:var(--green);
}
.fin-drill-src-pill.overdue{ background:var(--red-dim); color:var(--red); }
.fin-drill-src-pill.ghost{
  background:transparent;color:var(--text3);
  box-shadow:inset 0 0 0 1px var(--border);
}
.fin-drill-chev{
  color:var(--text3);
  font-size:1.2rem;
  line-height:1;
}

.fin-drill-empty-state{
  padding:2.5rem 1rem;
  text-align:center;
  color:var(--text3);
}
.fin-drill-empty-icon{
  font-size:2rem;
  opacity:.6;
  margin-bottom:.5rem;
}


.fin-bar{ rx:2px; cursor:pointer; transition:filter .12s; }
.fin-bar-income{  fill:var(--green); }
.fin-bar-expense{ fill:var(--red); }
/* Potential income (b900) — scheduled work with a budget and no
   invoice yet. Stacked on top of the income bar and filled with the
   in-SVG hatch pattern so it reads as the same money-in column
   while staying visibly provisional. The pattern's own colours are
   set here (rather than as SVG attributes) so it follows the theme. */
.fin-bar-projected{ fill:url(#fin-proj-hatch); }
.fin-proj-bg{     fill:var(--green);   opacity:.14; }
.fin-proj-stripe{ stroke:var(--green); stroke-width:2.5; opacity:.55; }
.fin-bar:hover{ filter:brightness(1.25) drop-shadow(0 0 3px currentColor); }
.fin-bar-label{
  fill:var(--text3);font-size:10px;font-family:var(--ui);
}
.fin-axis-label{
  fill:var(--text3);font-size:10px;font-family:var(--ui);
  font-variant-numeric:tabular-nums;
}
.fin-grid{
  stroke:var(--border);stroke-width:1;opacity:.5;
}
/* Zero-line gridline gets slightly stronger styling so the user
   can see the income/expense divide at a glance — especially
   useful when the net line crosses below it. (v4.67.0+) */
.fin-grid-zero{
  stroke:var(--text3);
  opacity:.5;
}
.fin-axis{ stroke:var(--border); stroke-width:1; }

/* Net-income line overlay (v4.67.0+). Yellow against the
   green/red bars so it reads clearly against either. Stroke
   width and join are tuned for the 220px-tall chart — thicker
   would look heavy at the small monthly intervals. */
.fin-net-line{
  stroke:#f5b400;
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
  /* drop-shadow filter gives a subtle halo so the line stays
     readable when it crosses through a green or red bar. Pure
     CSS — no extra SVG defs needed. */
  filter: drop-shadow(0 0 1.5px rgba(0,0,0,.55));
  pointer-events:none;
}
.fin-net-pt{
  fill:#f5b400;
  stroke:var(--surface);
  stroke-width:1.5;
  cursor:default;
}
/* Negative-net points get the red tint so a glance at a
   below-zero point reinforces the loss. */
.fin-net-pt-neg{
  fill:var(--red);
}

/* Top categories list */
.fin-cat-list{ display:flex;flex-direction:column;gap:.5rem; }
.fin-cat-row{
  display:grid;grid-template-columns:1fr 100px auto;gap:.85rem;
  align-items:center;padding:.5rem .65rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:6px;cursor:pointer;
  transition:background .12s;
}
.fin-cat-row:hover{ background:var(--surface3); }
.fin-cat-name{ display:flex;flex-direction:column;gap:.15rem;min-width:0; }
.fin-cat-name > span:first-child{
  color:var(--text);font-weight:600;font-size:.9rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fin-cat-line{
  font-size:.7rem;color:var(--text3);font-weight:500;
}
.fin-cat-bar{
  width:100px;height:6px;background:var(--surface3);
  border-radius:3px;overflow:hidden;
}
.fin-cat-bar > span{
  display:block;height:100%;background:var(--accent);
}
.fin-cat-amt{
  font-size:.88rem;color:var(--text);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fin-cat-amt .muted{ color:var(--text3);font-weight:normal; }

/* Empty dashboard */
.fin-empty{
  text-align:center;padding:3rem 1rem;
  background:var(--surface);border:1px dashed var(--border);
  border-radius:10px;
}
.fin-empty-art{ font-size:3rem;margin-bottom:.6rem;opacity:.55; }
.fin-empty-title{ font-size:1.15rem;font-weight:600;color:var(--text); }
.fin-empty-sub{ font-size:.9rem;color:var(--text2);margin-top:.4rem; }
.fin-empty-actions{ display:flex;justify-content:center;gap:.6rem;margin-top:1rem;flex-wrap:wrap; }

/* ── Mobile tweaks ────────────────────────────────────── */
@media (max-width:640px){
  .fin-kpi-value{ font-size:1.4rem; }
  .fin-cat-row{ grid-template-columns:1fr auto; }
  .fin-cat-bar{ display:none; } /* makes room for amt on narrow screens */
  .exp-table{ font-size:.82rem; }
  .exp-table thead th, .exp-table tbody td{ padding:.45rem .55rem; }
}

/* ── Manage Categories / Bank Accounts (Settings → Expenses) ───
   Inline-edit row markup used by Settings → Expenses (v4.38.2+).
   Previously powered the standalone m-fin-manage modal (removed
   in v4.38.2 in favour of a Settings tab — matches how Invoicing
   manages business profile and tax rates). The .fin-mgr-tabs /
   .fin-mgr-content wrappers were removed alongside the modal;
   only the row + list styles below are still in use. */
.fin-mgr-list{
  display:flex;flex-direction:column;gap:.5rem;
  margin-bottom:.85rem;
}
.fin-mgr-row{
  display:flex;align-items:flex-start;gap:.5rem;
  padding:.6rem .7rem;background:var(--surface2);
  border:1px solid var(--border);border-radius:6px;
}
/* Warning treatment for category rows missing a T2125 line code.
   Subtle amber edge — present, but not so loud the user can't get
   their work done. The chip in the name row carries the explicit
   message. */
.fin-mgr-row-warn{
  border-color:rgba(245,158,11,.4);
  background:rgba(245,158,11,.04);
}
.fmr-no-line-chip{
  display:inline-flex;align-items:center;
  font-size:.7rem;font-weight:600;letter-spacing:.01em;
  padding:.15rem .5rem;border-radius:99px;
  background:rgba(245,158,11,.15);color:var(--amber);
  margin-left:.4rem;white-space:nowrap;
  cursor:help;
}
/* Header banner — single summary line above the row list when at
   least one category has no T2125 line. Same amber palette as the
   row warning so the relationship is obvious. */
.fin-mgr-banner-warn{
  background:rgba(245,158,11,.08);
  border:1px solid rgba(245,158,11,.3);
  border-radius:6px;padding:.55rem .8rem;
  font-size:.82rem;color:var(--amber);
  margin:0 0 .8rem;font-weight:500;
}
.fmr-grow{ flex:1;display:flex;flex-direction:column;gap:.4rem;min-width:0; }
.fmr-name{
  background:var(--surface);border:1px solid var(--border);
  border-radius:5px;padding:.4rem .55rem;color:var(--text);
  font-size:.92rem;font-weight:600;width:100%;
}
.fmr-meta{
  display:flex;flex-wrap:wrap;gap:.55rem;font-size:.75rem;
  color:var(--text3);align-items:center;
}
.fmr-meta label{
  display:flex;flex-direction:column;gap:.15rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.04em;
}
.fmr-meta input[type="text"], .fmr-meta input[type="number"], .fmr-meta select{
  background:var(--surface);border:1px solid var(--border);
  border-radius:4px;padding:.25rem .4rem;color:var(--text);
  font-size:.82rem;font-weight:normal;text-transform:none;letter-spacing:0;
}
.fmr-meta input[type="number"]{ width:75px; }
.fmr-meta input[type="text"]{ width:100px; }
.fmr-meta select{ width:auto; }
.fmr-flag{
  flex-direction:row !important;align-items:center;gap:.3rem;
  text-transform:none !important;font-weight:normal !important;
  letter-spacing:0 !important;color:var(--text2) !important;
  font-size:.78rem;
}
.fmr-flag input[type="checkbox"]{ margin:0; }
.fmr-actions{
  display:flex;flex-direction:column;gap:.3rem;flex-shrink:0;
}
.fin-mgr-empty{
  text-align:center;padding:1.2rem;color:var(--text3);
  font-size:.88rem;font-style:italic;
  background:var(--surface2);border:1px dashed var(--border);border-radius:6px;
}
.fin-mgr-add{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding-top:.65rem;border-top:1px solid var(--border);
}
@media (max-width:640px){
  .fin-mgr-row{ flex-direction:column; }
  .fmr-actions{ flex-direction:row;align-self:flex-end; }
}

/* ───────────────────────────────────────────────────────────────
   MILEAGE / VEHICLE LOG  (v4.79.0+)
   Per-trip business kilometres view. Three KPI cards in the
   summary banner (business km, total km, business-use %),
   styled close to .fin-kpi-card but as a horizontal triplet
   above the trip list. The .ml-sum-attn variant flags the
   Total km card when it's missing — this is the user-action
   signal that gates the business-use % calculation.
   ─────────────────────────────────────────────────────────────── */
/* ── (b861) Finances → Taxes / Vehicle / Rentals tabs ─────────────
   fx- = shared analytics-tab furniture, veh- = category/renter bar
   rows (shared by Vehicle + Rentals), rn- = rentals-specific bits. */
.fx-tab .fx-kpis{ grid-template-columns:repeat(4, 1fr); }
.fx-kpis.veh-kpis{ grid-template-columns:repeat(3, 1fr) !important; }
.ml-sum-card.fx-owing{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.fx-delta{ font-size:.72rem; font-weight:600; white-space:nowrap; margin-left:.3rem; }
.fx-delta.good{ color:var(--green); }
.fx-delta.bad{ color:#d97706; }
.fx-chart{ width:100%; height:auto; display:block; margin-top:.4rem; }
.fx-chart-card{ margin-bottom:1rem; }
.fx-chart-title{ font-size:.92rem; font-weight:700; }
.fx-chart-sub{ font-size:.78rem; color:var(--text3); margin-top:.15rem; }
.fx-health{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.1rem; }
.fx-health-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; padding:.42rem .7rem; border-radius:8px;
  background:var(--surface); border:1px solid var(--border); color:var(--text2);
}
.fx-health-chip[onclick]{ cursor:pointer; transition:border-color .1s; }
.fx-health-chip[onclick]:hover{ border-color:var(--border3); }
.fx-health-chip.warn{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.fx-health-chip.ok{ border-color:color-mix(in srgb, var(--green) 40%, transparent); color:var(--green); }
.veh-cost-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.veh-cat-row{
  display:grid; grid-template-columns:minmax(7rem, 14rem) 1fr auto;
  align-items:center; gap:.7rem; padding:.32rem 0; font-size:.82rem;
}
.veh-cat-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.veh-cat-bar-wrap{ height:9px; background:var(--surface2); border-radius:5px; overflow:hidden; }
.veh-cat-bar{ display:block; height:100%; border-radius:5px; background:var(--accent); }
.veh-cat-val{ font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.rn-ops{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
.rn-ops-chip{
  font-size:.8rem; padding:.42rem .7rem; border-radius:8px;
  background:var(--surface); border:1px solid var(--border); color:var(--text2);
}
.rn-ops-chip strong{ color:var(--text); }
.rn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; margin-top:1rem; }
.rn-repeat{ font-size:.7rem; color:var(--green); font-weight:700; }
.rn-out{ font-size:.72rem; color:#d97706; font-weight:500; }
.rn-tab .br-fin{ margin-bottom:0; }
@media (max-width: 760px){
  .fx-tab .fx-kpis, .fx-kpis.veh-kpis{ grid-template-columns:1fr 1fr !important; }
  .veh-cost-grid, .rn-grid{ grid-template-columns:1fr; }
}

.ml-summary{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.85rem;
  margin:1rem 0 1.4rem;
}
.ml-sum-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.95rem 1.1rem;
  display:flex;flex-direction:column;gap:.3rem;
}
.ml-sum-card.ml-sum-attn{
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(255,165,0,0.04), transparent);
}
.ml-sum-label{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text2);
}
.ml-sum-value{
  font-size:1.7rem;
  font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.ml-sum-sub{
  font-size:.78rem;
  color:var(--text3);
  display:flex;
  align-items:center;
  min-height:1.6rem;
}
.ml-sum-loading{
  padding:1.1rem;color:var(--text3);
}
@media (max-width: 720px){
  .ml-summary{
    grid-template-columns:1fr;
    gap:.65rem;
  }
  .ml-sum-card{
    padding:.8rem .95rem;
  }
  .ml-sum-value{ font-size:1.4rem; }
}

/* ── T2125 Vehicle business-use banner (v4.79.0+) ──
   Sibling to .tax-rep-card with a 🚗 emoji header. Three variants:
   - default (computed): green-tinged "deduction" footer
   - .t2125-veh-attn (needs total km): orange accent border
   - multi-year period: plain card with help text only.
*/
.t2125-vehicle-card{
  margin-bottom:1.1rem;
}
.t2125-vehicle-card.t2125-veh-attn{
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(255,165,0,0.04), transparent);
}
.t2125-veh-help{
  font-size:.88rem;
  color:var(--text2);
  line-height:1.5;
  margin:.4rem 0 .8rem;
}
.t2125-veh-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.75rem;
  margin:.7rem 0;
}
.t2125-veh-stat{
  background:var(--surface-hi);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.7rem .85rem;
  display:flex;flex-direction:column;gap:.15rem;
}
.t2125-veh-stat.good{
  border-color:rgba(34,197,94,0.4);
  background:linear-gradient(180deg, rgba(34,197,94,0.06), transparent);
}
.t2125-veh-stat-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text2);
}
.t2125-veh-stat-value{
  font-size:1.35rem;font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--text);line-height:1.1;
}
.t2125-veh-stat-sub{
  font-size:.74rem;color:var(--text3);
}
.t2125-veh-deduction{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem .7rem;
  padding:.7rem .85rem;
  background:var(--surface-hi);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:.92rem;color:var(--text2);
  font-variant-numeric:tabular-nums;
}
.t2125-veh-arrow{color:var(--text3);font-weight:600}
.t2125-veh-ded-final{
  margin-left:auto;color:var(--text);
}
.t2125-veh-ded-final strong{color:var(--accent)}
.t2125-veh-actions{
  display:flex;gap:.5rem;
  margin-top:.7rem;
  flex-wrap:wrap;
}
@media (max-width: 720px){
  .t2125-veh-grid{
    grid-template-columns:1fr;
  }
  .t2125-veh-deduction{
    font-size:.85rem;
  }
  .t2125-veh-ded-final{
    margin-left:0;width:100%;
    margin-top:.3rem;padding-top:.5rem;
    border-top:1px solid var(--border);
  }
}

/* ───────────────────────────────────────────────────────────────
   VENDOR ANALYTICS  (v4.80.0+)
   Top-vendors table with sparkline + percentage bar + category
   pill. Sparklines and pct-bars share a common scale across rows
   so they're visually comparable.
   ─────────────────────────────────────────────────────────────── */
.vena-table tr.tax-rep-inv-row{ cursor:pointer; }
.vena-rank{
  text-align:right;
  color:var(--text3);
  font-variant-numeric:tabular-nums;
  font-size:.82rem;
}
.vena-name{
  max-width:260px;
}
.vena-name strong{
  display:block;
  font-weight:600;
  color:var(--text);
  /* truncate so a really long raw vendor string doesn't blow up
     the column width and push the sparkline off screen */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vena-name-sub{
  font-size:.72rem;
  color:var(--text3);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-top:.1rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vena-pct{
  display:flex;align-items:center;gap:.45rem;
  font-variant-numeric:tabular-nums;
  font-size:.85rem;
  color:var(--text2);
}
.vena-pct-bar{
  flex:1;height:6px;
  background:var(--surface-hi);
  border-radius:3px;overflow:hidden;
  min-width:60px;
}
.vena-pct-fill{
  height:100%;background:var(--accent);
  opacity:.7;
}
.vena-spark{
  /* sparkline cell — keeps its column width fixed so all rows
     align vertically. */
  white-space:nowrap;
  vertical-align:middle;
  text-align:left;
}
.vena-spark svg{
  display:block;
  /* baseline alignment in tables tends to drift; block fixes it */
}
.vena-cat-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.15rem .55rem;
  border-radius:999px;
  background:var(--surface-hi);
  border:1px solid var(--border);
  font-size:.78rem;
  color:var(--text);
  white-space:nowrap;
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vena-cat-dot{
  width:.55rem;height:.55rem;border-radius:50%;
  background:var(--cat, var(--border2));
  flex-shrink:0;
}
.vena-truncated-note{
  padding:.7rem 1rem;
  font-size:.82rem;
  color:var(--text3);
  border-top:1px solid var(--border);
  background:var(--surface-hi);
}
@media (max-width: 900px){
  /* On narrow screens, hide the sparkline column — it's the most
     compact graphic but the table is dense enough that something
     has to give. The full breakdown is still available via row
     drill-down. */
  .vena-table th:nth-child(6),
  .vena-table td:nth-child(6){ display:none; }
}
@media (max-width: 700px){
  /* Hide last-txn-date too on phones. Rank column already narrow. */
  .vena-table th:nth-child(8),
  .vena-table td:nth-child(8){ display:none; }
  .vena-name{ max-width:160px; }
}

/* ── Mileage list — day-derived rows (v4.81.0+) ──
   Synthetic rows that pull km from the days table instead of
   mileage_logs. Tinted slightly different so the user knows
   they're auto-counted (and not editable from this surface).
   The 📅 badge in the purpose column carries the same signal. */
.tax-rep-inv-row.ml-row-day{
  background:linear-gradient(180deg, rgba(99,102,241,0.05), transparent);
}
.tax-rep-inv-row.ml-row-day:hover{
  background:rgba(99,102,241,0.10);
}
.ml-day-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.05rem .45rem;
  border-radius:4px;
  background:rgba(99,102,241,0.18);
  color:var(--text);
  font-size:.78rem;
  font-weight:500;
  white-space:nowrap;
}

/* ─── Predicted (forecast) mileage styling (b74+) ───────────
   Future-dated trips, days, and events still render in the
   mileage list and on job dashboards, but with a visual hint
   that the amount is a forecast rather than a confirmed
   business km. Server-side totals exclude these so the T2125
   business-use % stays honest. */
.ml-predicted-badge{
  display:inline-flex;align-items:center;
  padding:.05rem .4rem;
  margin-left:.35rem;
  border-radius:4px;
  background:rgba(250,204,21,0.22);
  color:var(--text);
  font-size:.7rem;
  font-weight:600;
  text-transform:lowercase;
  letter-spacing:.01em;
  white-space:nowrap;
}
.ml-row-predicted td{
  /* Slightly muted so the eye groups confirmed rows together. */
  opacity:.82;
}
.ml-row-predicted:hover td{
  opacity:1;
}
.ml-sum-predicted{
  margin-top:.4rem;
  font-size:.72rem;
  color:var(--amber, #d97706);
  font-weight:500;
}
.ri-km-predicted{
  /* Lower-contrast tint so the forecast nature reads at a glance
     without competing with the confirmed-km badges. */
  background:rgba(250,204,21,0.18);
  color:var(--text2);
  font-style:italic;
}
.dash-event-km-predicted{
  background:rgba(250,204,21,0.18);
  color:var(--text2);
  font-style:italic;
  margin-left:.4rem;
}

/* ─── Mileage monthly trend chart (b75+) ────────────────────
   Vertical bars Jan→Dec for the selected year. Each bar stacks
   the predicted segment (top, amber) over the confirmed segment
   (bottom, accent). Past months are pure accent; current month
   is the partial mix; future months are pure amber. */
.ml-trend-card{
  background:var(--surface);
  border-radius:8px;
  padding:1rem 1.1rem 1.2rem;
  margin-bottom:1rem;
  border:1px solid var(--border);
}
.ml-trend-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.85rem;
  flex-wrap:wrap;
}
.ml-trend-title{
  font-size:.92rem;
  font-weight:600;
  color:var(--text);
}
.ml-trend-legend{
  display:flex;
  gap:.9rem;
  font-size:.74rem;
  color:var(--text2);
}
.ml-trend-legend-item{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.ml-trend-legend-swatch{
  width:10px;
  height:10px;
  border-radius:2px;
  display:inline-block;
}
.ml-trend-legend-swatch.confirmed{ background:var(--accent); }
.ml-trend-legend-swatch.predicted{ background:rgba(250,204,21,0.6); }
.ml-trend-chart{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:.4rem;
  height:140px;
  padding:0 .25rem;
}
.ml-trend-col{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-end;
  min-width:0;
  position:relative;
  cursor:default;
}
.ml-trend-col.is-current .ml-trend-lbl{
  color:var(--accent);
  font-weight:600;
}
.ml-trend-stack{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height:100%;
  border-radius:3px 3px 0 0;
  overflow:hidden;
  background:transparent;
  /* Reserve at least a hairline so empty months have a visible
     baseline indicator. */
  min-height:2px;
}
.ml-trend-seg{
  width:100%;
  transition:opacity .15s;
}
.ml-trend-seg.confirmed{ background:var(--accent); }
.ml-trend-seg.predicted{
  background:rgba(250,204,21,0.55);
  border-bottom:1px dashed rgba(250,204,21,0.85);
}
.ml-trend-col:hover .ml-trend-seg{
  opacity:.85;
}
.ml-trend-lbl{
  font-size:.7rem;
  color:var(--text3);
  text-align:center;
  margin-top:.35rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.ml-trend-empty{
  font-size:.85rem;
  color:var(--text3);
  text-align:center;
  padding:2rem 0;
}

/* ============================================================
   ESTIMATES (v4.89.0+)
   ============================================================
   Phase 1: list view + editor + preview. Reuses .invo-li-card
   and .invo-rp-card from invoices wherever possible — these
   classes are line-item / recipient layouts, not invoice-
   specific. Estimate-specific styling lives under .est-* below. */

/* List ---------------------------------------------------- */
/* Width is inherited from the parent .invo-shell-inner (which is
   max-width: var(--page-max), centred). The list adds only its own
   vertical padding — horizontal padding comes from the parent's
   1.4rem rule, same as invoices. (v4.92.0+: previously added its
   own max-width:1280px + horizontal padding which made the
   estimate page visibly wider than every other admin page.) */
.est-list{
  padding: 1rem 0 2rem;
}

/* KPI strip — four cards across desktop; stacks 2x2 on mobile. */
.est-kpi-strip{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.7rem;
  margin: 0 0 1.1rem;
}
.est-kpi{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.7rem .9rem;
  display:flex; flex-direction:column; gap:.18rem;
}
.est-kpi-num{
  font-size:1.55rem; font-weight:700; line-height:1;
  color:var(--text);
}
.est-kpi-lbl{
  font-size:.78rem; color:var(--text3);
  letter-spacing:.01em;
}
.est-kpi-warn{ border-color:#f59e0b; }
.est-kpi-warn .est-kpi-num{ color:#f59e0b; }
.est-kpi-good{ border-color:#10b981; }
.est-kpi-good .est-kpi-num{ color:#10b981; }
@media (max-width: 700px){
  .est-kpi-strip{ grid-template-columns: repeat(2, 1fr); }
}

/* Empty state */
.est-empty{
  background:var(--surface2);
  border:1px dashed var(--border);
  border-radius:12px;
  padding:2.5rem 1.5rem;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  margin-top:1rem;
}
.est-empty-icon{ font-size:2.4rem; line-height:1; }
.est-empty-title{ font-size:1.15rem; font-weight:600; }
.est-empty-sub{ color:var(--text3); max-width:38ch; margin-bottom:.5rem; }

/* Table */
.est-table-wrap{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  margin-top:.8rem;
}
.est-table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
}
.est-table thead th{
  background:var(--surface);
  text-align:left;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text3);
  padding:.6rem .8rem;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.est-table thead th.sortable{ cursor:pointer; user-select:none; }
.est-table thead th.sortable:hover{ color:var(--text); }
.est-table tbody td{
  padding:.7rem .8rem;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.est-table tbody tr:last-child td{ border-bottom:none; }
.est-row{ cursor:pointer; transition:background .1s; -webkit-tap-highlight-color:rgba(255,255,255,.06); }  /* (b749) */
.est-row:hover{ background:var(--surface); }
.est-td-num{ font-weight:600; color:var(--text); }
.est-td-amount{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.est-th-amount{ text-align:right; }
.est-td-actions{ text-align:right; }
.est-td-for{ color:var(--text2); }

@media (max-width: 720px){
  /* Mobile: hide the "for" and "issued" columns to keep the row
     readable. Status pill, total, and client stay. */
  .est-th-job, .est-td-for{ display:none; }
  .est-table thead th:nth-child(4), /* Issued */
  .est-table tbody td.est-td-issued{ display:none; }
}

/* (v5.16.1+) Phone-width card layout. At ≤560px the standard
   table layout overflows even with two columns hidden — # +
   client + expires + total + status pill + convert button
   simply won't fit on a 375px viewport without the wrap clipping
   (.est-table-wrap had overflow:hidden, which is why the user
   saw rows "cut off"). So at this width we break the table
   semantics with display:block and use a 2-column grid to stack
   the cells into a card: number+status on top, client+total
   below, expires+actions at the bottom. */
@media (max-width: 560px){
  .est-table-wrap{ background:transparent; border:none; border-radius:0; overflow:visible; margin-top:.5rem; }
  .est-table{ font-size:.9rem; }
  .est-table thead{ display:none; }   /* card layout — no column headers */
  .est-table, .est-table tbody{ display:block; width:100%; }
  .est-row{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "num    status"
      "client total"
      "exp    actions";
    gap:.2rem .6rem;
    padding:.7rem .85rem;
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:10px;
    margin-bottom:.55rem;
    align-items:center;
  }
  .est-row:hover{ background:var(--surface2); }
  .est-table tbody tr:last-child{ margin-bottom:0; }
  /* Cells become block so the grid-area assignments work. */
  .est-row td{ display:block; padding:0; border:none; white-space:normal; }
  /* But the cells we don't show on mobile must stay hidden — the
     720px rule above sets display:none on .est-td-for and
     .est-td-issued, but our blanket display:block above is at
     higher specificity (.est-row td) and would re-enable them
     and they'd auto-place into a 4th implicit grid row. Match
     specificity by qualifying with .est-row so display:none
     wins. */
  .est-row .est-td-for, .est-row .est-td-issued{ display:none; }
  .est-td-num{ grid-area:num; font-size:.78rem; color:var(--text3); font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
  .est-td-client{ grid-area:client; font-size:.95rem; font-weight:600; color:var(--text); line-height:1.25; word-break:break-word; }
  .est-td-expires{ grid-area:exp; font-size:.78rem; color:var(--text3); }
  .est-td-expires::before{ content:"Expires "; }
  .est-td-amount{ grid-area:total; text-align:right; font-size:1rem; }
  .est-td-status{ grid-area:status; text-align:right; }
  .est-td-actions{ grid-area:actions; text-align:right; }
  /* When the actions cell is empty the actions row collapses to
     0 height — keep it that way so the card doesn't have an
     awkward trailing gap. */
  .est-td-actions:empty{ display:none; }
}

.est-pager{ margin-top:.7rem; display:flex; justify-content:center; }

/* Editor -------------------------------------------------- */
/* Same width-inheritance pattern as .est-list — parent shell
   provides max-width and horizontal padding. The body below
   becomes a 2-col grid (form | sticky side card) on desktop and
   collapses to single-col with the side card pinned to the top
   on mobile. (v4.92.0+) */
.est-edit-shell{
  padding: 1rem 0 3rem;
}
.est-edit-head{
  display:flex; align-items:center; gap:.7rem;
  flex-wrap:wrap;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--border);
  margin-bottom:1rem;
}
.est-edit-back{ flex:0 0 auto; }
.est-edit-title{
  flex:1 1 auto;
  font-size:1.05rem;
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem;
}

/* 2-column body. Sticky right rail holds the action card + the
   public-link panel so the primary actions stay reachable as the
   left column scrolls. The 320px right column matches the invoice
   editor's sidebar width (.invo-edit-body grid-template-columns:
   1fr 320px) so muscle memory carries over.

   Mobile: single column. The action card moves ABOVE the form
   (CSS grid order:-1) so the user lands on it first, since it's
   the highest-priority surface for an estimate that already exists. */
.est-edit-body{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 1.2rem;
  align-items: flex-start;
}
.est-edit-main{
  min-width: 0;  /* prevents grid blowout from long content */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.est-edit-side{
  position: sticky;
  top: .8rem;       /* tucks under the parent scroll container */
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
@media (max-width: 900px){
  .est-edit-body{ grid-template-columns: 1fr; }
  .est-edit-side{
    position: static;
    order: -1;          /* action card lands above the form on mobile */
  }
}

/* Side card — generic chrome, used by .est-actions-card and
   reusable for any future right-rail card (e.g. activity summary,
   linked job link, etc.). */
.est-side-card{
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}
.est-side-card-title{
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text3);
  margin-bottom: .7rem;
}
.est-actions-card{
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.est-side-action{
  width: 100%;
  justify-content: center;
  text-align: center;
}
/* Primary save button — visually distinct from the accent buttons
   below. Saving is the safe, neutral op; sending and converting
   are the higher-stakes ops, so accent (orange) attention goes to
   them rather than to Save. */
.est-side-action-primary{
  /* leans on the existing .btn-primary base; just sized full-width */
}
/* Delete sits at the bottom with a separator + soft red text colour
   so it's reachable but visually deprioritised. Same idiom as the
   "Danger zone" pattern in settings pages. */
.est-side-action-danger{
  color: #dc2626;
  margin-top: .6rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
.est-side-action-danger:hover{
  background: rgba(220,38,38,.08);
  color: #b91c1c;
}

/* Already-converted notice banner */
.est-converted-notice{
  background:rgba(126,34,206,.08);
  border:1px solid rgba(126,34,206,.35);
  color:var(--text);
  padding:.65rem .9rem;
  border-radius:8px;
  margin-bottom:1rem;
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem;
}

/* Form sections */
.est-form-section{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1rem 1.1rem;
}
.est-form-section-title{
  font-size:.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text3);
  margin-bottom:.7rem;
}
.est-form-section-title-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.7rem;
}
.est-form-section-title-row .est-form-section-title{ margin-bottom:0; }

.est-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.7rem .9rem;
}
.est-field{ display:flex; flex-direction:column; gap:.25rem; }
.est-field label{
  font-size:.78rem; color:var(--text3);
  font-weight:500;
}
.est-field input, .est-field select, .est-form-section textarea{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:6px;
  padding:.5rem .65rem;
  font-size:.95rem;
  font-family:inherit;
  width:100%;
  box-sizing:border-box;
}
.est-form-section textarea{ resize:vertical; min-height:80px; }
.est-field-wide{ grid-column: 1 / -1; }
@media (max-width: 720px){
  .est-form-grid{ grid-template-columns: 1fr; }
}

/* Recipient picker — reuses .invo-rp-* card styling. Just a grid. */
.est-recipient-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:.5rem;
}

/* Line items section uses .invo-li-card from invoices.
   Stack them vertically with consistent gap. */
#est-line-items-tbody{
  display:flex; flex-direction:column; gap:.55rem;
}

/* Totals block */
.est-totals-block{
  margin-top:.9rem;
  padding-top:.85rem;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:.3rem;
  align-items:flex-end;
}
/* Estimate discount controls (b696) */
.est-disc-add{background:none;border:none;padding:0;cursor:pointer;font-size:.8rem;font-weight:700;color:var(--accent);}
.est-disc-add:hover{text-decoration:underline;}
.est-disc-ctl{padding:.45rem 0 .2rem;}
.est-disc-ctl-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.est-disc-ctl-row select{flex:0 0 auto;padding:.4rem .5rem;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.8rem;}
.est-disc-val-wrap{position:relative;flex:0 0 110px;}
.est-disc-val-wrap input{width:100%;padding:.4rem .5rem .4rem 1.35rem;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.8rem;}
.est-disc-cur{position:absolute;left:.55rem;top:50%;transform:translateY(-50%);color:var(--text3);font-size:.78rem;pointer-events:none;}
.est-disc-pctsign{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);color:var(--text3);font-size:.78rem;pointer-events:none;}
.est-disc-label{flex:1 1 180px;min-width:140px;padding:.4rem .55rem;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.8rem;}
.est-disc-row{color:var(--green);font-weight:600;}
.est-disc-row .est-disc-pct{font-weight:700;font-size:.78rem;}

.est-totals-row{
  display:flex;
  gap:1.5rem;
  justify-content:space-between;
  min-width:240px;
  font-variant-numeric:tabular-nums;
}
.est-totals-row span:first-child{ color:var(--text3); }
.est-totals-row span:last-child{  font-weight:600; }
.est-totals-grand{
  font-size:1.15rem;
  margin-top:.3rem;
  padding-top:.4rem;
  border-top:1px dashed var(--border);
  width:240px;
}
.est-totals-grand span:first-child{ color:var(--text); }

/* ============================================================
   ESTIMATES PHASE 2 (v4.90.0+) — public-link panel, response
   banner, activity log
   ============================================================ */

/* Public link block — readonly URL + Copy + Open buttons. */
.est-publink-block{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.75rem .9rem;
  margin-bottom:.85rem;
}
.est-publink-label{
  font-size:.78rem;
  font-weight:600;
  color:var(--text2);
  letter-spacing:.02em;
  margin-bottom:.4rem;
}
.est-publink-row{
  display:flex; gap:.4rem; align-items:center;
}
.est-publink-url{
  flex:1; min-width:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:5px;
  padding:.45rem .6rem;
  font-family:var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size:.78rem;
  color:var(--text2);
  cursor:text;
}
.est-publink-url:focus{ outline:1px solid var(--border3); }
@media (max-width: 540px){
  .est-publink-row{ flex-wrap:wrap; }
  .est-publink-url{ flex:1 1 100%; margin-bottom:.4rem; }
}

/* Conversation block (v4.93.0+) — replaces the v4.90 single-shot
   response banner. Surfaces an iMessage-style thread plus a reply
   composer when the conversation is live. Border colour is set
   inline by the JS so the same chrome variants by status (amber for
   queried, green for approved, red for rejected). */
.est-conv-block{
  border:1px solid;            /* colour set inline */
  background:var(--surface2);
  border-radius:10px;
  padding:.95rem 1.1rem 1rem;
  margin-bottom:1rem;
}
.est-conv-head{
  display:flex; align-items:center; gap:.4rem;
  font-size:1rem;
  flex-wrap:wrap;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--border);
  margin-bottom:.85rem;
}
.est-conv-emoji{
  font-size:1.2rem;
  line-height:1;
  margin-right:.15rem;
}

/* Thread — iMessage-style. Owner bubbles right + accent, client
   bubbles left + neutral. Bubble width capped so a long client
   message can't push past the right edge. */
.est-conv-thread{
  display:flex; flex-direction:column; gap:.7rem;
  margin-bottom:.95rem;
  /* Cap the visual height so an unusually long thread doesn't push
     the reply box (the most important affordance) below the fold —
     the user can scroll within the thread to see history. */
  max-height: 420px;
  overflow-y: auto;
  padding-right: .25rem;
}
.est-msg{
  display:flex; flex-direction:column;
  max-width:78%;
  gap:3px;
}
.est-msg.est-msg-side-client{
  align-self:flex-start; align-items:flex-start;
}
.est-msg.est-msg-side-owner{
  align-self:flex-end;   align-items:flex-end;
}
.est-msg-bubble{
  padding:.55rem .75rem;
  border-radius:14px;
  font-size:.92rem;
  line-height:1.5;
  word-wrap:break-word; overflow-wrap:break-word;
  white-space:pre-wrap;
}
.est-msg-side-client .est-msg-bubble{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;        /* tail toward sender side */
}
.est-msg-side-owner .est-msg-bubble{
  background:var(--accent,#f5a623);
  color:#0a0a0c;
  border:1px solid var(--accent,#f5a623);
  border-bottom-right-radius:4px;
}
.est-msg-meta{
  font-size:.72rem;
  color:var(--text3);
  padding:0 .25rem;
}

/* Reply composer — sits below the thread. Textarea grows, Send button
   is the primary affordance on the right. Hint copy left of the button
   helps the owner know what they're committing to ("client is waiting"). */
.est-conv-reply{
  display:flex; flex-direction:column; gap:.4rem;
  padding-top:.7rem;
  border-top:1px solid var(--border);
}
.est-conv-reply textarea{
  width:100%;
  min-height:48px;
  resize:vertical;
  padding:.55rem .7rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
  font:inherit;
  font-size:.92rem;
  line-height:1.5;
  color:var(--text);
}
.est-conv-reply textarea:focus{
  outline:none; border-color:var(--accent,#f5a623);
  box-shadow:0 0 0 2px rgba(245,166,35,.18);
}
.est-conv-reply-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem;
}
.est-conv-reply-hint{
  font-size:.78rem;
  color:var(--text3);
}
.est-conv-reply-error{
  font-size:.85rem;
  color:var(--red,#dc2626);
  min-height:1em;
}

/* Mobile — same single-column thread, max-height tightened. */
@media (max-width: 540px){
  .est-msg{ max-width: 88%; }
  .est-conv-thread{ max-height: 320px; }
  .est-conv-reply-row{ flex-direction:column; align-items:stretch; gap:.45rem; }
  .est-conv-reply-row .btn{ width:100%; }
}

/* Activity log section. Lives at the bottom of the editor; one row
   per event, three columns: icon · text · meta. The meta cell
   shrinks to its content; text takes the rest. Mobile: drops the
   meta to a second line under text. */
.est-activity-section .est-activity-list{
  display:flex; flex-direction:column;
}
.est-activity-row{
  display:grid;
  grid-template-columns: 1.4rem 1fr auto;
  gap:.55rem;
  align-items:baseline;
  padding:.45rem 0;
  border-bottom:1px solid var(--border);
  font-size:.88rem;
  line-height:1.45;
}
.est-activity-row:last-child{ border-bottom:none; }
.est-activity-icon{
  font-size:.95rem;
  line-height:1.2;
  text-align:center;
  user-select:none;
}
.est-activity-text{
  color:var(--text);
  word-break:break-word;
}
.est-activity-meta{
  color:var(--text3);
  font-size:.78rem;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.est-activity-empty{
  color:var(--text3);
  font-size:.88rem;
  font-style:italic;
  padding:.3rem 0;
}
@media (max-width: 540px){
  .est-activity-row{
    grid-template-columns: 1.4rem 1fr;
  }
  .est-activity-meta{
    grid-column: 2;
    margin-top:.1rem;
  }
}

/* ════════════════════════════════════════════════════════════
   CRM activity panel — Notes timeline + Tasks (v5.2.0+)
   ════════════════════════════════════════════════════════════
   Embedded inside contact / company / job edit modals. Layout
   mirrors the estimate activity log (.est-activity-*) but adds:
     - Pinned open-tasks block at the top
     - Quick-add tabs (note / task)
     - Done-task rows interleaved with notes
*/
.crm-activity-section{
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
}
.crm-activity-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.5rem;
}
.crm-activity-title{
  font-size:.78rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color: var(--accent);
}

/* Pinned open-tasks block. Each row is a checkbox + body + delete X.
   Body contains title, optional one-line note, and a meta strip
   with due date + author. */
.crm-tasks-list{
  display:flex; flex-direction:column;
  gap:.4rem;
  margin-bottom:.65rem;
}
.crm-tasks-list:empty{ margin-bottom: 0; }
.crm-task{
  display:grid;
  grid-template-columns: 1.25rem 1fr auto;
  gap:.55rem;
  align-items:flex-start;
  padding:.55rem .65rem;
  background: var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  font-size:.88rem;
  line-height:1.4;
}
.crm-task.overdue{ border-color: #c14040; background: rgba(193,64,64,.08); }
.crm-task.today  { border-color: var(--accent); background: var(--accent-dim); }
.crm-task.soon   { border-color: var(--border2); }

.crm-task-check{
  margin-top:.18rem;
  width:1.05rem; height:1.05rem;
  cursor:pointer;
  accent-color: var(--accent);
}
.crm-task-body{ min-width:0; }
.crm-task-title{
  font-weight:600;
  color: var(--text);
  word-break: break-word;
}
.crm-task-note{
  font-size:.82rem;
  color: var(--text2, var(--text3));
  margin-top:.15rem;
  word-break: break-word;
}
.crm-task-meta{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin-top:.25rem;
  font-size:.75rem;
  color: var(--text3);
}
.crm-task-due{ font-variant-numeric: tabular-nums; }
.crm-task.overdue .crm-task-due{ color: #d97070; font-weight:600; }
.crm-task.today   .crm-task-due{ color: var(--accent); font-weight:600; }
.crm-task-who{ color: var(--text3); }

/* Tiny round delete/reopen button — hover-revealed on its parent
   row to keep the timeline visually quiet by default. */
.crm-row-x{
  background:none; border:none;
  color: var(--text3);
  font-size: 1rem; line-height: 1;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  cursor:pointer;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
  align-self:flex-start;
}
.crm-task:hover .crm-row-x,
.crm-activity-row:hover .crm-row-x{ opacity: 1; }
.crm-row-x:hover{ background: var(--surface3); color: var(--text); }

/* Chronological list — notes + done tasks. Same 3-col grid as
   est-activity-row plus a 4th implicit col for the delete X.
   Grid template uses auto for the meta + X so they shrink-fit. */
.crm-activity-list{ display:flex; flex-direction:column; }
.crm-activity-list:empty{ display:none; }
.crm-activity-row{
  display:grid;
  grid-template-columns: 1.4rem 1fr auto auto;
  gap:.55rem;
  align-items:baseline;
  padding:.5rem 0;
  border-bottom:1px solid var(--border);
  font-size:.88rem;
  line-height:1.45;
}
.crm-activity-row:last-child{ border-bottom:none; }
.crm-activity-icon{
  font-size:.95rem;
  line-height:1.2;
  text-align:center;
  user-select:none;
  color: var(--text3);
}
.crm-row-task-done .crm-activity-icon{ color: var(--accent); }
.crm-activity-text{
  color: var(--text);
  word-break: break-word;
  min-width: 0;
}
.crm-activity-subtext{
  font-size:.82rem;
  color: var(--text3);
  margin-top:.15rem;
}
.crm-task-strike{ text-decoration: line-through; color: var(--text3); }
.crm-activity-meta{
  color: var(--text3);
  font-size:.78rem;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
}
.crm-activity-empty{
  color: var(--text3);
  font-size:.88rem;
  font-style: italic;
  padding:.4rem 0;
}

/* Quick-add: note tab is default, task tab expands to show due-date
   row. Both forms share padding + border so the panel feels like a
   single capture area. */
.crm-activity-add{
  margin-top:.7rem;
  padding-top:.6rem;
  border-top:1px solid var(--border);
}
.crm-add-tabs{
  display:flex; gap:.4rem;
  margin-bottom:.5rem;
}
.crm-add-tab{
  flex:0 0 auto;
  background: var(--surface2);
  border:1px solid var(--border);
  color: var(--text3);
  padding:.32rem .65rem;
  border-radius:5px;
  font-size:.82rem;
  cursor:pointer;
  font-family:inherit;
}
.crm-add-tab:hover{ color: var(--text); }
.crm-add-tab.active{
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  font-weight:600;
}
.crm-add-form textarea,
.crm-add-form input[type=text]{
  width:100%;
  padding:.5rem .65rem;
  background: var(--surface3);
  border:1px solid var(--border2);
  border-radius:5px;
  color: var(--text);
  font-family:inherit;
  font-size:.88rem;
  box-sizing: border-box;
  resize: vertical;
}
.crm-add-form input[type=date]{
  padding:.45rem .55rem;
  background: var(--surface3);
  border:1px solid var(--border2);
  border-radius:5px;
  color: var(--text);
  font-family:inherit;
  font-size:.85rem;
  flex: 0 0 auto;
}
.crm-add-foot{
  display:flex; justify-content:flex-end;
  margin-top:.4rem;
}
.crm-add-row{
  display:flex; align-items:center; gap:.5rem;
  margin-top:.4rem;
}
.crm-add-row > input[type=date]{ flex: 1 1 auto; min-width: 0; }

/* Mobile: drop the activity-row meta to a second line under the
   text — same trick the estimate log uses. The delete X stays
   aligned to the icon column. */
@media (max-width: 540px){
  .crm-activity-row{
    grid-template-columns: 1.4rem 1fr auto;
  }
  .crm-activity-meta{
    grid-column: 2 / span 2;
    margin-top:.1rem;
  }
  .crm-task{
    grid-template-columns: 1.25rem 1fr auto;
  }
  .crm-row-x{ opacity: 1; }  /* hover-reveal isn't a thing on touch */
}

/* ════════════════════════════════════════════════════════════
   Gear section sub-tabs (v5.4.0+)
   ════════════════════════════════════════════════════════════
   Visual + behavioural sibling of .fin-tabs. Lives at the top
   of both #view-inventory and #view-borrow — _gearSyncActiveTab()
   keeps the active highlight in sync across the two copies as
   the user moves between sub-views.
*/
.gear-tabs-wrap{
  flex-shrink:0;
  max-width:var(--page-max);
  width:100%;
  margin:0 auto;
  padding:1rem 1.4rem 0;
}
.gear-tabs{
  display:flex; gap:.2rem; padding:.22rem;
  margin:0;
  background:var(--surface2); border:1px solid var(--border); border-radius:9px;
  overflow-x:auto;
  scrollbar-width:none;
}
.gear-tabs::-webkit-scrollbar{display:none;}
.gear-tab{
  flex:1 1 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.5rem .9rem;
  background:transparent; border:none; border-radius:7px;
  color:var(--text3); cursor:pointer;
  font-family:var(--ui); font-size:.84rem; font-weight:500; letter-spacing:.005em;
  white-space:nowrap;
  transition:color .12s, background .12s, box-shadow .12s;
}
.gear-tab:hover:not(.active){ color:var(--text); background:var(--surface); }
.gear-tab.active{
  background:var(--accent); color:#fff; font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.gear-tab-icon{ font-size:1rem; line-height:1; }
.gear-tab-label{ font-family:var(--ui); }
@media (max-width:640px){
  .gear-tabs-wrap{ padding:.7rem .8rem 0; }
  .gear-tab{ flex:0 0 auto; padding:.5rem .75rem; font-size:.8rem; }
  .gear-tab-label{ display:none; }
  .gear-tab.active .gear-tab-label{ display:inline; }
}

/* The inventory shell loses its top padding when sitting under
   the gear-tabs bar — the bar's wrap already contributes 1rem
   above. Same goes for the borrow content host. */
#view-inventory > .gear-tabs-wrap + .inv-shell .inv-shell-inner{
  padding-top:.6rem;
}
#view-borrow > .gear-tabs-wrap + #borrow-admin-content{
  padding-top:.6rem;
}


/* ════════════════════════════════════════════════════════════
   LEFT NAV RAIL (b825)
   ════════════════════════════════════════════════════════════ */
:root{--rail-w:52px;--rail-w-open:200px;}
.nrail{
  display:none;position:fixed;left:0;top:var(--rail-top,var(--header-h));bottom:0;width:var(--rail-w);z-index:150;
  background:var(--header-bg);border-right:1px solid var(--header-border);
  flex-direction:column;overflow:visible;
  transition:width .16s ease;
}
html.rail-on .nrail:not(:empty){display:flex;}
html.rail-on .app-body{padding-left:var(--rail-w);}
html.rail-on.rail-pinned .app-body{padding-left:var(--rail-w-open);}
html.rail-on.rail-pinned .nrail{width:var(--rail-w-open);}
html.rail-on .nrail:hover{width:var(--rail-w-open);box-shadow:8px 0 24px rgba(0,0,0,.28);}
html.rail-on .hdr-tabs{display:none!important;}
html.rail-on header{padding-left:1.25rem;}
.nrail-items{display:flex;flex-direction:column;gap:2px;padding:.5rem .4rem;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}
.nrail-items::-webkit-scrollbar{display:none;}
/* (b837) Fades + chevron marking that the list continues */
.nrail-items::before,.nrail-items::after{
  content:"";position:sticky;left:0;z-index:2;display:block;flex-shrink:0;
  height:18px;pointer-events:none;opacity:0;transition:opacity .15s;
}
.nrail-items::before{top:0;margin:0 0 -18px;background:linear-gradient(180deg,var(--header-bg) 15%,transparent);}
.nrail-items::after{
  bottom:0;margin:-18px 0 0;background:linear-gradient(0deg,var(--header-bg) 15%,transparent);
  content:"⌄";font-size:12px;line-height:20px;text-align:center;color:var(--text3);
}
.nrail.can-up .nrail-items::before{opacity:1;}
.nrail.can-down .nrail-items::after{opacity:1;}
.nrail-foot{display:flex;flex-direction:column;gap:.15rem;padding:.35rem .4rem .45rem;border-top:1px solid var(--header-border);}
.nrail-foot .nrail-item-wrap{--rt:var(--accent);}
.nrail-foot .nrail-pin{align-self:flex-end;}
.nrail-pin{
  width:26px;height:26px;border-radius:6px;border:none;background:transparent;color:var(--text3);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:.55;
  transition:opacity .12s,background .12s,color .12s;
}
.nrail-pin svg{width:15px;height:15px;}
.nrail-pin:hover{opacity:1;background:rgba(255,255,255,.07);color:var(--text);}
html.light .nrail-pin:hover{background:rgba(0,0,0,.06);}
html.rail-on:not(.rail-pinned) .nrail:not(:hover) .nrail-foot .nrail-pin{align-self:center;}
.nrail-item-wrap{position:relative;}
.nrail-item{
  display:flex;align-items:center;gap:.65rem;width:100%;flex-shrink:0;
  padding:.44rem .55rem;border-radius:8px;border:1px solid transparent;
  background:transparent;color:var(--text2);cursor:pointer;font:inherit;
  font-family:var(--ui);font-size:.9rem;font-weight:550;letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;text-align:left;
  transition:background .12s,color .12s;
}
/* Section colours (b826) — each item carries its section tone. Icon
   is tinted at rest, hover washes the row in the tone, active fills
   it. */
.nrail-item-wrap{--rt:var(--text2);}
.nrail-item-wrap[data-rail="Home"]{--rt:var(--tone-home);}
.nrail-item-wrap[data-rail="Calendar"]{--rt:var(--tone-calendar);}
.nrail-item-wrap[data-rail="Jobs"]{--rt:var(--tone-jobs);}
.nrail-item-wrap[data-rail="Finances"]{--rt:var(--tone-money);}
.nrail-item-wrap[data-rail="Tasks"]{--rt:var(--tone-tasks);}
.nrail-item-wrap[data-rail="Gear"]{--rt:var(--tone-gear);}
.nrail-item-wrap[data-rail="Rentals"]{--rt:var(--tone-rentals);}
.nrail-item-wrap[data-rail="People"]{--rt:var(--tone-people);}
.nrail-item-wrap[data-rail="Tools"]{--rt:var(--tone-tools);}
.nrail-item-wrap[data-rail="Scripts"]{--rt:var(--tone-creative);}
.nrail-item-wrap[data-rail="Image Library"]{--rt:var(--tone-shots);}
.nrail-item-wrap[data-rail="Lighting Diagrams"]{--rt:var(--tone-diagrams);}
.nrail-item-wrap>.nrail-item .nrail-ico{color:var(--rt);}
.nrail-item:hover{background:color-mix(in srgb,var(--rt) 14%,transparent);color:var(--text);}
/* Active: the dark-theme tones are mid-bright (amber, sky, teal,
   green) — white text fails on them, so use near-black there; the
   light theme's tones are deep enough for white. */
.nrail-item-wrap.active>.nrail-item{background:var(--rt);color:#15171c;font-weight:650;}
.nrail-item-wrap.active>.nrail-item .nrail-ico{color:#15171c;}
.nrail-item-wrap.active>.nrail-item .nrail-chev{color:#15171c;}
html.light .nrail-item-wrap.active>.nrail-item,
html.light .nrail-item-wrap.active>.nrail-item .nrail-ico,
html.light .nrail-item-wrap.active>.nrail-item .nrail-chev{color:#fff;}
.nrail-item-wrap.active .nrail-badge{border-color:var(--rt);}
.nrail-fly{border-top:3px solid var(--rt);}
.nrail-fly-head{color:var(--rt);}
.nrail-fly-item.active{color:var(--rt);}
html.rail-on.rail-pinned .nrail-item-wrap.active .nrail-fly{border-top:none;}
.nrail-ico{position:relative;flex-shrink:0;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;}
.nrail-ico svg{width:20px;height:20px;}
.nrail-label{opacity:0;transition:opacity .12s;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.nrail-chev{opacity:0;font-size:1rem;color:inherit;flex-shrink:0;}
html.rail-on .nrail:hover .nrail-label,html.rail-on .nrail:hover .nrail-chev,
html.rail-on.rail-pinned .nrail-label,html.rail-on.rail-pinned .nrail-chev{opacity:1;}
.nrail-item-wrap.active .nrail-chev{opacity:.85;}
.nrail-badge{
  position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--red);color:#fff;font-size:.62rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  font-variant-numeric:tabular-nums;border:1.5px solid var(--header-bg);
}
/* Flyout of sub-tabs — appears to the right of a hovered section */
.nrail-fly{
  display:none;position:fixed;left:calc(var(--rail-w-open) + 6px);top:0;min-width:170px;
  background:var(--surface);border:1px solid var(--border2);border-radius:10px;
  padding:.35rem;box-shadow:0 8px 28px rgba(0,0,0,.35);z-index:5;
}
.nrail-fly::before{content:"";position:absolute;left:-14px;top:0;bottom:0;width:14px;}
.nrail-item-wrap.fly-open .nrail-fly{display:block;}
.nrail-fly-head{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);padding:.3rem .6rem .25rem;}
.nrail-fly-item{
  display:block;width:100%;text-align:left;padding:.42rem .6rem;border-radius:6px;border:none;
  background:transparent;color:var(--text2);font:inherit;font-size:.86rem;cursor:pointer;
}
.nrail-fly-item:hover{background:var(--surface2);color:var(--text);}
.nrail-fly-item.active{font-weight:650;}
/* Pinned + wide: sub-tabs render inline under the active section
   instead of as a flyout */
html.rail-on.rail-pinned .nrail-item-wrap.active .nrail-fly{
  display:block;position:static;margin:2px 0 4px 0;min-width:0;box-shadow:none;border:none;background:transparent;padding:0 0 0 2.2rem;
}
html.rail-on.rail-pinned .nrail-item-wrap.active .nrail-fly-head{display:none;}
html.rail-on.rail-pinned .nrail-item-wrap.active .nrail-fly-item{padding:.3rem .55rem;font-size:.82rem;}
html.rail-on.rail-pinned .nrail-item-wrap:not(.active) .nrail-fly{display:none;}
html.rail-on.rail-pinned .nrail-item-wrap:not(.active).fly-open .nrail-fly{display:block;}
/* Renter portal + phones: no rail (bottom nav takes over) */
body.is-renter .nrail{display:none!important;}
html.rail-on body.is-renter .app-body{padding-left:0!important;}
@media (max-width:700px){
  html.rail-on .nrail{display:none!important;}
  html.rail-on .app-body{padding-left:0!important;}
  html.rail-on .hdr-tabs{display:none!important;}
}

/* ════════════════════════════════════════════════════════════
   Tasks view + home dashboard tile (v5.5.0+)
   ════════════════════════════════════════════════════════════
   Top-level Tasks list view (#view-tasks) uses .tasks-* classes;
   the home dashboard tile uses .home-tasks-* / .home-task-* to
   keep specificity scoped. Both share the colour-coding vocabulary
   the CRM activity panel established (overdue=red, today=accent,
   soon=neutral).
*/

/* ── Top-level Tasks view ──────────────────────────────────── */
#tasks-content{
  max-width:var(--page-max);
  width:100%;
  margin:0 auto;
  padding:1rem 1.4rem 1.5rem;
}
/* (v5.xx+) List-mode content pane — mirrors .dash-pane so the List
   tab gets the same page-max width cap, centering and horizontal
   padding as every other top-level view (the Tasks dashboard tab
   already used .dash-pane; list mode rendered edge-to-edge). */
.tasks-pane{
  padding:1rem 1.4rem;
  max-width:var(--page-max);
  margin:0 auto;
  width:100%;
}
.tasks-toolbar{
  display:inline-flex; gap:.2rem; padding:.22rem;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:9px; margin-bottom:.85rem;
}
.tasks-filter{
  background:transparent; border:none; border-radius:7px;
  padding:.4rem .85rem;
  font-family:var(--ui); font-size:.84rem; font-weight:500;
  color:var(--text3); cursor:pointer;
  transition:color .12s, background .12s, box-shadow .12s;
}
.tasks-filter:hover:not(.active){ color:var(--text); background:var(--surface); }
.tasks-filter.active{
  background:var(--accent); color:#fff; font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.tasks-counter-strip{
  display:flex; gap:.65rem; flex-wrap:wrap;
  margin-bottom:.85rem;
  font-size:.78rem;
}
.tasks-counter{
  padding:.18rem .55rem; border-radius:11px;
  background:var(--surface2); color:var(--text3);
  border:1px solid var(--border);
}
.tasks-counter-red{
  background:var(--red-dim);
  color:var(--red);
  border-color:var(--red);
}
.tasks-counter-accent{
  background:var(--accent-dim);
  color:var(--accent);
  border-color:var(--accent);
}

/* Tasks list rows. Mirrors .crm-task layout with a wider parent
   chip area (the top-level view shows the parent name where the
   activity-panel context already implied it).
   (v5.34.4+) Auto-fit grid so the list uses screen width to show
   MORE tasks side-by-side rather than stretching each row into a
   wide single column. At 1200px page-max that's typically 3
   columns of ~370px each; on narrow / mobile it collapses to 1
   column. Solves the 'too much horizontal screen space' complaint
   without losing any per-row info. */
.tasks-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:.45rem;
  align-items:start;
}
.tasks-row{
  display:grid;
  grid-template-columns:1.25rem 1fr auto;
  gap:.6rem;
  align-items:flex-start;
  padding:.65rem .8rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:7px;
  font-size:.9rem;
  line-height:1.4;
}
.tasks-row.overdue{ border-color:var(--red); background:var(--red-dim); }
.tasks-row.today  { border-color:var(--accent); background:var(--accent-dim); }
.tasks-row.soon   { border-color:var(--border2); }
.tasks-row-done   { opacity:.65; }
.tasks-row-done .tasks-row-title{ text-decoration:line-through; color:var(--text3); }

.tasks-row-check{
  margin-top:.18rem;
  width:1.05rem; height:1.05rem;
  cursor:pointer;
  accent-color:var(--accent);
}
.tasks-row-body{ min-width:0; }
.tasks-row-title{
  font-weight:600;
  color:var(--text);
  word-break:break-word;
}
.tasks-row-note{
  font-size:.82rem;
  color:var(--text2, var(--text3));
  margin-top:.2rem;
  word-break:break-word;
}
.tasks-row-meta{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:.3rem;
  font-size:.76rem;
  color:var(--text3);
}
.tasks-row-due{ font-variant-numeric: tabular-nums; }
.tasks-row.overdue .tasks-row-due{ color:var(--red); font-weight:600; }
.tasks-row.today   .tasks-row-due{ color:var(--accent); font-weight:600; }
.tasks-row-parent{
  background:var(--surface3);
  border:1px solid var(--border);
  padding:.05rem .45rem;
  border-radius:4px;
  color:var(--text2, var(--text));
  font-size:.74rem;
}
.tasks-row-x{
  background:none; border:none;
  color:var(--text3);
  font-size:1.1rem; line-height:1;
  width:1.5rem; height:1.5rem;
  border-radius:50%;
  cursor:pointer;
  opacity:0; transition:opacity .12s, background .12s, color .12s;
  align-self:flex-start;
}
.tasks-row:hover .tasks-row-x{ opacity:1; }
.tasks-row-x:hover{ background:var(--surface3); color:var(--text); }
.tasks-empty{
  padding:2rem 1rem;
  text-align:center;
  color:var(--text3);
  font-style:italic;
  background:var(--surface2);
  border:1px dashed var(--border);
  border-radius:8px;
}
.tasks-error{
  padding:1rem;
  background:var(--red-dim);
  border:1px solid var(--red);
  border-radius:8px;
  color:var(--red);
}

/* ── Home dashboard tasks tile ─────────────────────────────── */
/* (v5.34.4+) Auto-fit grid — matches the Tasks-view grid so the
   home tile uses screen width to show MORE tasks rather than
   stretching each row. The minmax floor is tighter (260px) since
   the home tile sits in a narrower column on the dashboard. */
.home-tasks-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:.4rem;
  align-items:start;
}
.home-task-row{
  display:grid;
  grid-template-columns:1.15rem 1fr;
  gap:.55rem;
  align-items:flex-start;
  padding:.55rem .7rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  font-size:.88rem;
  line-height:1.35;
  transition:border-color .12s;
}
.home-task-row:hover{ border-color:var(--border2); }
.home-task-row.overdue{ border-color:#c14040; background:rgba(193,64,64,.08); }
.home-task-row.today  { border-color:var(--accent); background:var(--accent-dim); }
.home-task-row.soon   { /* default neutral */ }
.home-task-check{
  margin-top:.18rem;
  width:1rem; height:1rem;
  cursor:pointer;
  accent-color:var(--accent);
}
.home-task-body{ min-width:0; }
.home-task-title{
  font-weight:600;
  color:var(--text);
  word-break:break-word;
}
.home-task-meta{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin-top:.2rem;
  font-size:.75rem;
  color:var(--text3);
}
.home-task-due{ font-variant-numeric: tabular-nums; }
.home-task-row.overdue .home-task-due{ color:#d97070; font-weight:600; }
.home-task-row.today   .home-task-due{ color:var(--accent); font-weight:600; }
.home-task-parent{
  background:var(--surface3);
  border:1px solid var(--border);
  padding:.02rem .4rem;
  border-radius:4px;
  color:var(--text2, var(--text));
  font-size:.72rem;
}
.home-tasks-more{
  grid-column:1/-1;  /* span all columns in the auto-fit grid */
  padding:.45rem .7rem;
  text-align:center;
  font-size:.78rem;
  color:var(--text3);
  cursor:pointer;
  border-radius:6px;
  transition:background .1s, color .1s;
}
.home-tasks-more:hover{ background:var(--surface2); color:var(--text); }
.home-tasks-empty{
  display:flex; align-items:center; gap:.6rem;
  padding:.85rem 1rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:7px;
  color:var(--text3);
  font-size:.85rem;
}
.home-tasks-empty-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.5rem; height:1.5rem;
  background:var(--green-dim, rgba(19,117,52,.12));
  color:var(--green, #137534);
  border-radius:50%;
  font-weight:700;
  font-size:.85rem;
}

@media (max-width:540px){
  #tasks-content{ padding:.7rem .8rem 1rem; }
  .tasks-row-x{ opacity:1; }  /* no hover on touch */
}

/* ════════════════════════════════════════════════════════════
   Task Detail modal (v5.34.0+)
   ════════════════════════════════════════════════════════════
   Focused view that opens when a task row is clicked from the
   Tasks list or the Home task tile. Replaces the old "click =
   open parent edit modal" workflow — that took users to the
   wrong page when they just wanted to see the task content.

   Layout reads top-to-bottom: header (check + title + close) →
   dates strip → body → AI suggestions → context (notes / other
   tasks / contact info / linked jobs) → follow-up forms →
   actions. Width caps at 680px so the AI bullets and context
   stay scannable on big monitors; mobile drops paddings and
   stacks the action row.
*/
.modal-task-detail{
  width:680px; max-width:96vw;
  padding:0;  /* sections handle their own padding */
  display:flex; flex-direction:column;
  max-height:90vh;
}
#td-body{ overflow-y:auto; }
.td-loading,.td-error,.td-ai-loading,.td-ai-empty,.td-ai-error,.td-ai-setup{
  padding:2rem 1.25rem; text-align:center; color:var(--text3); font-size:.9rem;
}
.td-error{ color:var(--red); }

/* Header — sticky so the title + complete checkbox stay anchored
   when the context section scrolls. */
.td-header{
  display:flex; align-items:center; gap:.65rem;
  padding:1rem 1.25rem .75rem;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--surface);
  z-index:2;
}
.td-check{
  width:20px; height:20px; flex-shrink:0;
  accent-color:var(--accent); cursor:pointer;
}
.td-title{
  flex:1; min-width:0;
  font-size:1.12rem; font-weight:600; line-height:1.35;
  color:var(--text);
}
.td-title-done{ text-decoration:line-through; color:var(--text3); }
.td-title-input{
  flex:1; min-width:0;
  font-size:1.05rem; font-weight:600;
  padding:.4rem .55rem; border:1px solid var(--border2); border-radius:5px;
  background:var(--surface2); color:var(--text);
}
.td-close{
  background:transparent; border:none; color:var(--text3);
  font-size:1.5rem; line-height:1; cursor:pointer;
  width:32px; height:32px; border-radius:5px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.td-close:hover{ background:var(--surface2); color:var(--text); }

/* Dates strip — chips for created/due, plus a parent chip if linked. */
.td-dates{
  display:flex; flex-wrap:wrap; gap:.4rem;
  padding:.7rem 1.25rem; border-bottom:1px solid var(--border);
  background:var(--surface2);
}
.td-date-chip{
  font-family:var(--mono); font-size:.74rem;
  padding:.22rem .55rem; border-radius:11px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text2);
  white-space:nowrap;
}
.td-date-chip.overdue{ background:rgba(193,64,64,.12); border-color:rgba(193,64,64,.4); color:#d97070; font-weight:600; }
.td-date-chip.today  { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); font-weight:600; }
.td-date-chip.soon   { background:var(--surface); border-color:var(--border2); color:var(--text); }
.td-date-nodue       { font-style:italic; color:var(--text3); }
.td-date-parent      { font-weight:500; color:var(--text); }
.td-date-edit{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; color:var(--text3);
}
.td-date-edit input[type=date]{
  padding:.18rem .35rem; border:1px solid var(--border2); border-radius:4px;
  background:var(--surface); color:var(--text); font-size:.78rem;
}

/* Task body (the note attached to the task itself). */
.td-body-text{
  padding:.85rem 1.25rem;
  font-size:.92rem; line-height:1.5; color:var(--text2);
  white-space:pre-wrap; word-break:break-word;
  border-bottom:1px solid var(--border);
}

/* Sections — wrap each context block + the AI panel. */
.td-section{
  padding:.85rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.td-section:last-child{ border-bottom:none; }
.td-section-head{
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.55rem;
}
.td-section-icon{ font-size:.95rem; }
.td-section-title{
  font-size:.74rem; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; color:var(--text3);
}
.td-section-count{
  font-family:var(--mono); font-size:.7rem;
  padding:.1rem .42rem; border-radius:9px;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text2);
}
.td-section-label{
  display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; color:var(--text3); margin-bottom:.35rem;
}
.td-section textarea, .td-section input[type=text], .td-section input[type=date],
.td-followup textarea, .td-followup input[type=text], .td-followup input[type=date]{
  width:100%; box-sizing:border-box;
  padding:.45rem .6rem;
  border:1px solid var(--border2); border-radius:5px;
  background:var(--surface2); color:var(--text);
  font:inherit; font-size:.9rem; line-height:1.4;
  font-family:var(--ui);
}
.td-section textarea{ resize:vertical; min-height:60px; }

/* AI suggestions panel — visually distinguished with a subtle
   accent tint so it reads as "different / generated" content. */
.td-ai-section{
  background:linear-gradient(180deg, rgba(245,166,35,.04), transparent);
}
.td-ai-section .td-section-head{ position:relative; }
.td-ai-refresh{
  margin-left:auto;
  background:transparent; border:1px solid var(--border); color:var(--text3);
  width:24px; height:24px; border-radius:5px; cursor:pointer;
  font-size:.85rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.td-ai-refresh:hover{ background:var(--surface2); color:var(--text); }
.td-ai-loading{ padding:.75rem 0; text-align:left; }
.td-spinner{ display:inline-block; animation:tdspin 1s linear infinite; }
@keyframes tdspin{ to{ transform:rotate(360deg); } }
.td-ai-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.4rem;
}
.td-ai-list li{
  padding:.5rem .7rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:5px;
  font-size:.88rem; line-height:1.45; color:var(--text);
}
.td-ai-list li strong{ color:var(--text); font-weight:600; }
.td-ai-list li code{
  font-family:var(--mono); font-size:.82rem;
  background:var(--surface3); padding:.05rem .3rem; border-radius:3px;
}
.td-ai-extra,.td-ai-prose{
  margin-top:.5rem; padding:.4rem 0;
  font-size:.85rem; color:var(--text2); line-height:1.5;
}
.td-ai-setup{ text-align:left; }
.td-ai-setup > div{ margin-bottom:.5rem; color:var(--text2); }
.td-ai-error{ text-align:left; color:var(--text2); }

/* Recent notes — vertical stack, newest first. */
.td-notes{ display:flex; flex-direction:column; gap:.55rem; }
.td-note{
  padding:.5rem .7rem;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:5px;
}
.td-note-event{ opacity:.78; }
.td-note-meta{
  font-family:var(--mono); font-size:.7rem; color:var(--text3);
  margin-bottom:.18rem;
}
.td-note-body{
  font-size:.88rem; line-height:1.45; color:var(--text);
  white-space:pre-wrap; word-break:break-word;
}

/* Other open tasks — each row is clickable to swap detail focus. */
.td-other-tasks{ display:flex; flex-direction:column; gap:.35rem; }
.td-other-task{
  display:flex; align-items:center; gap:.6rem;
  padding:.4rem .65rem;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:5px; cursor:pointer;
  transition:border-color .1s, background .1s;
}
.td-other-task:hover{ border-color:var(--accent); background:var(--surface3); }
.td-other-task-title{ flex:1; min-width:0; font-size:.88rem; color:var(--text); }
.td-other-task-due{
  font-family:var(--mono); font-size:.72rem;
  padding:.12rem .42rem; border-radius:9px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text3); white-space:nowrap;
}
.td-other-task.overdue .td-other-task-due{ background:rgba(193,64,64,.12); border-color:rgba(193,64,64,.4); color:#d97070; font-weight:600; }
.td-other-task.today   .td-other-task-due{ background:var(--accent-dim); border-color:var(--accent); color:var(--accent); font-weight:600; }
.td-other-task.overdue{ border-left:3px solid #c14040; }
.td-other-task.today  { border-left:3px solid var(--accent); }

/* Contact info — labeled key/value chips, phone/email become real links. */
.td-info-grid{
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.td-info-bit{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.32rem .55rem;
  background:var(--surface2); border:1px solid var(--border); border-radius:5px;
  font-size:.85rem; color:var(--text);
  text-decoration:none;
}
.td-info-link:hover{ border-color:var(--accent); color:var(--accent); }
.td-info-key{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text3); font-weight:700;
}

/* Linked jobs — compact rows showing name + date range. */
.td-jobs{ display:flex; flex-direction:column; gap:.3rem; }
.td-job-row{
  display:flex; align-items:center; gap:.6rem;
  padding:.35rem .6rem;
  background:var(--surface2); border:1px solid var(--border); border-radius:5px;
}
.td-job-name{ flex:1; min-width:0; font-size:.86rem; color:var(--text); }
.td-job-dates{ font-family:var(--mono); font-size:.72rem; color:var(--text3); }

/* Follow-up inline forms — same chrome as a section, shown by their
   trigger button. */
.td-followup{
  padding:.85rem 1.25rem;
  border-top:1px solid var(--border);
  background:var(--surface2);
}
.td-followup-row{
  display:flex; align-items:center; gap:.5rem;
  margin-top:.4rem; font-size:.85rem; color:var(--text3);
}
.td-followup-row input[type=date]{
  flex:1; max-width:200px;
}
.td-followup-actions{
  display:flex; gap:.4rem; justify-content:flex-end;
  margin-top:.5rem;
}
/* Stack title + date inputs neatly in the follow-up task form */
#td-followup-task > input[type=text]{ margin-bottom:.35rem; }

/* Action row — sticky bottom so the primary actions stay reachable
   even as context scrolls. */
.td-actions{
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  padding:.7rem 1.25rem;
  border-top:1px solid var(--border);
  background:var(--surface);
  position:sticky; bottom:0;
  z-index:2;
}
.td-actions-spacer{ flex:1; }

@media (max-width:540px){
  .modal-task-detail{ max-height:96vh; border-radius:6px; }
  .td-header        { padding:.75rem .9rem .6rem; }
  .td-dates         { padding:.6rem .9rem; }
  .td-body-text     { padding:.7rem .9rem; }
  .td-section       { padding:.7rem .9rem; }
  .td-followup      { padding:.7rem .9rem; }
  .td-actions       { padding:.6rem .9rem; }
  .td-title         { font-size:1.02rem; }
  .td-actions .btn  { flex:1 1 auto; }
  .td-actions-spacer{ display:none; }
}

/* ════════════════════════════════════════════════════════════
   Contact Detail modal (v5.37.0+)
   ════════════════════════════════════════════════════════════
   Opens by default when a contact is clicked. Shows recent
   activity, stats, and an AI "where you stand" summary FIRST;
   editing is a secondary affordance behind a button. Layout
   mirrors the task-detail modal — sticky header, scrollable
   body, sticky action row — with the same dimensions so both
   modals feel like the same chrome with different content.

   .cd-clickable on the .contact-card surfaces the new
   clickable-card affordance (cursor: pointer + hover bg) so
   users learn the card body is the primary action, not the ✎
   inner button. */
.modal-contact-detail{
  max-width:680px;
  width:96%;
  max-height:88vh;
  display:flex; flex-direction:column;
  padding:0;
  overflow:hidden;
}

/* (v5.42.0+) Invoice detail modal — same chrome as contact detail
   (header / scroll / sections / sticky actions), so we reuse the
   .cd-* classes inside. Width is a touch wider since invoices carry
   a stat grid that wants more horizontal room. */
.modal-invoice-detail{
  max-width:760px;
  width:96%;
  max-height:88vh;
  display:flex; flex-direction:column;
  padding:0;
  overflow:hidden;
}

/* Inventory-item detail modal — same chrome as contact/invoice
   detail. Width matches contact (narrower than invoice; the stats
   tile sits comfortably at 680). */
.modal-inv-detail{
  max-width:680px;
  width:96%;
  max-height:88vh;
  display:flex; flex-direction:column;
  padding:0;
  overflow:hidden;
}

/* (v5.42.1+) Inner-wrapper flex bridge. The modal shells inject all
   their content into a wrapper div (#cd-body / #id-body), so the
   modal's direct child is that wrapper — not the header / scroll /
   actions trio. Without a flex layout on the wrapper, the inner
   `.cd-scroll { flex:1 }` rule had no flex parent to grow within,
   and the scroll region just expanded to fit content with the
   excess clipped by the modal's overflow:hidden. Making the
   wrapper a flex column with min-height:0 lets the cd-scroll
   actually take remaining vertical space and scroll its overflow,
   while cd-header and cd-actions sit naturally at top and bottom.
   Contact detail technically had the same bug pre-v5.42.1; just
   harder to notice because contact bodies are typically shorter. */
.modal-contact-detail > #cd-body,
.modal-invoice-detail > #id-body,
.modal-inv-detail     > #igd-body {
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Invoice-detail-specific bits. The rest of the modal (header,
   scroll, sections, ai, events, actions) re-uses cd-* generic
   styles. Prefix is id- (invoice detail). */
.id-header-amount{
  flex-shrink:0;
  text-align:right;
}
.id-header-total{
  font-size:1.15rem; font-weight:700; color:var(--text);
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.id-header-balance{
  font-size:.8rem; color:var(--text3);
  margin-top:.2rem;
}
.id-header-balance strong{
  color:var(--accent);
  font-weight:700;
}
.id-header-balance.paid strong{ color:var(--green); }
.id-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:.55rem;
}
.id-stat{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.55rem .7rem;
}
.id-stat-lbl{
  font-size:.7rem; color:var(--text3);
  text-transform:uppercase; letter-spacing:.04em;
  margin-bottom:.18rem;
}
.id-stat-val{
  font-size:.95rem; font-weight:600; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.id-stat-val.is-warn{ color:var(--accent); }
.id-stat-val.is-bad{  color:var(--red); }
.id-stat-val.is-good{ color:var(--green); }
/* (b798) Line items in the invoice glance: a 4-column grid so Type /
   Qty × Rate / Amount align down the list. Rows use display:contents
   so the grid tracks are shared across every row. */
.id-li-table{
  display:grid;
  grid-template-columns:fit-content(38%) minmax(0,1fr) max-content max-content;
  font-size:.85rem;
}
.id-li-row{ display:contents; }
.id-li-row > span{
  padding:.35rem .9rem .35rem 0; border-bottom:1px dashed var(--border);
  min-width:0; align-self:baseline;
}
.id-li-row > span:last-child{ padding-right:0; }
.id-li-type{ overflow:hidden; text-overflow:ellipsis; }
.id-li-row:last-child > span{ border-bottom:none; }
.id-li-head > span{
  color:var(--text3); font-size:.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--border); padding-bottom:.25rem;
}
.id-li-type{
  color:var(--text3); font-size:.8rem;
  white-space:nowrap;
}
.id-li-desc{
  color:var(--text2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.id-li-qty{
  color:var(--text3); font-variant-numeric:tabular-nums;
  white-space:nowrap; text-align:right;
}
.id-li-amt{
  font-variant-numeric:tabular-nums; color:var(--text);
  white-space:nowrap; text-align:right;
}
@media (max-width:560px){
  /* Narrow: drop Qty × Rate; Type stacks above the description. */
  .id-li-table{ grid-template-columns:minmax(0,1fr) max-content; }
  .id-li-qty{ display:none; }
  .id-li-type{ grid-column:1 / -1; padding:.3rem 0 0; border-bottom:none; font-size:.7rem; }
  .id-li-head .id-li-type{ display:none; }
  .id-li-type + .id-li-desc, .id-li-type + .id-li-desc + .id-li-qty + .id-li-amt{ padding-top:.05rem; }
}
.id-pmt-row{
  display:flex; align-items:center; gap:.6rem;
  padding:.4rem 0;
  border-bottom:1px dashed var(--border);
  font-size:.85rem;
}
.id-pmt-row:last-child{ border-bottom:none; }
.id-pmt-date{ color:var(--text3); font-size:.78rem; min-width:88px; }
.id-pmt-method{ color:var(--text2); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.id-pmt-ref{ color:var(--text3); font-size:.78rem; }
.id-pmt-amt{
  color:var(--green); font-weight:600;
  font-variant-numeric:tabular-nums;
}
.id-recipient-row{
  display:flex; align-items:center; gap:.5rem;
  padding:.25rem 0;
  font-size:.85rem;
  color:var(--text2);
}
.id-recipient-row .id-rcp-badge{
  font-size:.62rem; padding:.05rem .4rem;
  border-radius:8px;
  background:rgba(61,142,240,.14); color:#3d8ef0;
  text-transform:uppercase; letter-spacing:.03em;
}
.id-job-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem;
  padding:.5rem .65rem;
  background:var(--surface2);
  border:1px solid var(--border); border-radius:7px;
  cursor:pointer;
  transition:background .1s, border-color .1s;
}
.id-job-row:hover{ background:var(--surface-hi); border-color:var(--border2); }
.id-job-name{
  font-weight:600; color:var(--text); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.id-job-meta{ font-size:.8rem; color:var(--text3); }
.id-share-link{
  display:flex; align-items:center; gap:.4rem;
  padding:.45rem .55rem;
  background:var(--surface2);
  border:1px solid var(--border); border-radius:6px;
  font-size:.82rem;
}
.id-share-link code{
  flex:1; min-width:0;
  font-family:var(--mono, monospace); font-size:.74rem;
  color:var(--text3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

@media (max-width:540px){
  .modal-invoice-detail{ max-height:96vh; border-radius:6px; }
}
.cc-clickable{ cursor:pointer; transition:background .12s, transform .08s; }
.cc-clickable:hover{ background:var(--surface2); }
.cc-clickable:active{ transform:scale(.997); }

/* Header — sticky at the top of the modal. Avatar + name strip
   + close button. The header is taller than task-detail's because
   it carries contact info chips (email / phone). */
.cd-header{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:1rem 1.25rem .8rem;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  position:sticky; top:0;
  z-index:2;
}
.cd-avatar{
  flex-shrink:0;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--surface2);
  color:var(--text2);
  font-weight:700; font-size:1.05rem; letter-spacing:.04em;
  border:1px solid var(--border);
}
.cd-header-text{ flex:1; min-width:0; }
.cd-name{
  font-size:1.15rem; font-weight:700; line-height:1.2;
  color:var(--text);
  margin-bottom:.18rem;
}
.cd-meta{
  font-size:.84rem; color:var(--text3);
  margin-bottom:.32rem;
}
.cd-contact-info{
  display:flex; flex-wrap:wrap; gap:.55rem .9rem;
  font-size:.84rem;
}
.cd-contact-link{
  color:var(--text2);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:.25rem;
}
.cd-contact-link:hover{ color:var(--accent); text-decoration:underline; }

/* Scrollable body wrap — the action row sticks below it. */
.cd-scroll{
  flex:1;
  overflow-y:auto;
  padding:0;
}

/* Sections — each card is a horizontal band with its own head row. */
.cd-section{
  padding:.9rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.cd-section:last-of-type{ border-bottom:none; }
.cd-section-tight{ padding:.7rem 1.25rem; }  /* analytics tile already has internal padding */
.cd-section-head{
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.55rem;
  font-size:.85rem; color:var(--text2);
}
.cd-section-icon{ font-size:.95rem; margin-right:.1rem; }
.cd-section-title{ font-weight:600; letter-spacing:.005em; }
.cd-section-count{
  margin-left:.25rem;
  font-size:.7rem; font-weight:600;
  background:var(--surface2); color:var(--text3);
  border:1px solid var(--border);
  padding:.08rem .42rem; border-radius:10px;
}

/* AI status section — slightly elevated visually since it's the
   centrepiece of "where you stand". */
.cd-ai-section{
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
}

/* (v5.68.0+) CRM hygiene "suggested links" tile. Tinted to read
   as a quiet nudge — not an error or warning, just a suggestion. */
.cd-section-hygiene{
  background:linear-gradient(180deg, rgba(99,155,235,.04), rgba(99,155,235,.07));
}
.cd-hygiene-sub{
  font-size:.74rem; color:var(--text3); margin:-.25rem 0 .45rem;
}
.cd-hygiene-list{ display:flex; flex-direction:column; gap:.35rem; }
.cd-hygiene-row{
  display:flex; align-items:center; gap:.65rem;
  padding:.4rem .55rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
}
.cd-hygiene-body{ flex:1; min-width:0; }
.cd-hygiene-name{
  font-size:.86rem; font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cd-hygiene-sub2{
  font-size:.72rem; color:var(--text3); margin-top:.08rem;
}
.cd-ai-body{
  margin-top:.15rem;
  font-size:.92rem; color:var(--text); line-height:1.45;
}
.cd-ai-bullets{
  list-style:none;
  margin:0; padding:0;
}
.cd-ai-bullets li{
  position:relative;
  padding:.32rem 0 .32rem 1.1rem;
  /* (v5.41.0+) flex so the bullet text wraps and the action
     button stays right-aligned on its own column. align-start
     keeps the button level with the first line of long bullets. */
  display:flex;
  align-items:flex-start;
  gap:.55rem;
}
.cd-ai-bullets li::before{
  content:'•';
  position:absolute; left:.2rem; top:.32rem;
  color:var(--accent);
  font-weight:700;
}
.cd-ai-bullet-text{flex:1;min-width:0;}
.cd-ai-bullet-task{
  flex-shrink:0;
  background:transparent;
  border:1px solid var(--border2);
  color:var(--text2);
  border-radius:6px;
  padding:.2rem .5rem;
  font-size:.72rem;font-weight:600;font-family:var(--ui);
  cursor:pointer;
  white-space:nowrap;
  transition:all .12s;
  /* Slight up-shift to align baseline with bullet text — the
     button has padding so without this it sits a bit low. */
  margin-top:.05rem;
}
.cd-ai-bullet-task:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.cd-ai-loading{
  color:var(--text3); font-size:.85rem;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem 0;
}
.cd-ai-text{ white-space:pre-wrap; }
.cd-ai-err{ color:var(--text3); font-size:.85rem; }
.cd-ai-err a{ color:var(--accent); }
.cd-ai-foot{
  margin-top:.45rem;
  font-size:.7rem; color:var(--text3);
}
.cd-refresh-btn{
  margin-left:auto;
  background:transparent; border:none;
  color:var(--text3); cursor:pointer;
  font-size:1rem; line-height:1; padding:.18rem .32rem; border-radius:5px;
}
.cd-refresh-btn:hover{ color:var(--accent); background:var(--surface2); }

/* Inventory-detail stats tile — sits above the AI section, four
   small stats laid out in a single row (responsive wrap on narrow
   viewports). Reuses the cd-section container so border + padding
   are consistent with the rest of the modal. */
.igd-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(115px, 1fr));
  gap:.7rem;
}
.igd-stat{
  display:flex; flex-direction:column; gap:.15rem;
  min-width:0;
}
.igd-stat-label{
  font-size:.7rem; letter-spacing:.02em;
  color:var(--text3); text-transform:uppercase;
}
.igd-stat-value{
  font-size:1.05rem; font-weight:600;
  color:var(--text); font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.igd-stat-value.igd-stat-muted{ color:var(--text3); font-weight:500; }
.igd-meta-row{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-top:.35rem;
}
.igd-meta-chip{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.18rem .55rem;
  border-radius:999px;
  background:var(--surface2);
  border:1px solid var(--border);
  font-size:.74rem; color:var(--text2);
  font-family:var(--mono);
}
.igd-meta-chip.igd-meta-out{
  background:rgba(239,68,68,.1);
  border-color:rgba(239,68,68,.3);
  color:var(--red);
}

/* Muted footnote under the stats grid — used for lifetime revenue
   since it's not always meaningful (Dan doesn't always invoice
   per-item). Quiet by design. */
.igd-stat-foot{
  margin-top:.55rem;
  font-size:.7rem; color:var(--text3);
  letter-spacing:.01em;
  cursor:help;
}

/* 24-month usage chart. SVG fills horizontal width via the wrapper's
   width:100%; height is fixed so the chart stays a consistent
   reading-band. preserveAspectRatio="none" on the SVG + vector-
   effect="non-scaling-stroke" on strokes keeps lines crisp without
   distortion as the viewBox stretches. */
.igd-chart{ width:100%; }
.igd-chart-svg{ width:100%; height:130px; display:block; }
.igd-chart-dot{
  fill:var(--accent); stroke:var(--surface); stroke-width:1.2;
}
.igd-chart-dot-zero{
  fill:var(--surface); stroke:var(--text3); stroke-width:1.2;
}
.igd-chart-dot-last{
  /* Slightly larger + brighter to anchor "where we are now" */
  stroke:var(--surface); stroke-width:1.6;
}
.igd-chart-axis{
  fill:var(--text3); font-size:10px; font-family:inherit;
}
.igd-chart-peak{
  fill:var(--text3); font-size:10px; font-family:inherit;
  font-variant-numeric:tabular-nums;
}
.igd-chart-empty{
  padding:1.1rem .75rem;
  text-align:center;
  color:var(--text3);
  font-size:.82rem;
  background:var(--surface2);
  border:1px dashed var(--border);
  border-radius:8px;
}

/* Recent activity rows */
.cd-events{ display:flex; flex-direction:column; gap:.35rem; }
.cd-event-row{
  display:flex; align-items:flex-start; gap:.55rem;
  padding:.4rem 0;
}
.cd-event-icon{
  flex-shrink:0;
  width:1.5rem; text-align:center;
  font-size:.95rem;
  margin-top:.05rem;
}
.cd-event-body{ flex:1; min-width:0; }
.cd-event-top{
  display:flex; align-items:baseline; gap:.5rem;
  font-size:.88rem;
}
.cd-event-title{
  color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1; min-width:0;
}
.cd-event-when{
  flex-shrink:0;
  font-size:.72rem; color:var(--text3);
}
.cd-event-tail{
  font-size:.78rem; color:var(--text3);
  margin-top:.1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* (2026.05.19+) Inline Reply button on contact-detail email events.
   Aligns with the icon row at the start of the event — top-aligned
   so it stays visually tied to the email's first line even when
   the preview tail wraps below. Compact .btn-sm sizing keeps the
   row height steady. */
.cd-event-reply{
  flex-shrink:0;
  margin-top:.05rem;
  padding:.28rem .55rem;
  font-size:.76rem;
}

/* Open tasks list — click-to-open semantics surfaced via hover. */
.cd-tasks{ display:flex; flex-direction:column; gap:.3rem; }
.cd-task-row{
  display:flex; align-items:center; gap:.55rem;
  padding:.5rem .7rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  transition:background .1s, border-color .1s;
}
.cd-task-row:hover{ background:var(--surface2); border-color:var(--accent-dim, var(--border)); }
.cd-task-row.overdue{ border-left:3px solid #d35a5a; }
.cd-task-row.today  { border-left:3px solid #d3a85a; }
.cd-task-row.soon   { border-left:3px solid var(--accent); }
.cd-task-check{ color:var(--text3); font-size:1rem; }
.cd-task-body{ flex:1; min-width:0; }
.cd-task-title{
  font-size:.88rem; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cd-task-due{
  font-size:.72rem; color:var(--text3); margin-top:.1rem;
}

/* Linked jobs list — same visual weight as tasks. */
.cd-jobs{ display:flex; flex-direction:column; gap:.3rem; }
.cd-job-row{
  display:flex; align-items:baseline; gap:.6rem;
  padding:.45rem .7rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  transition:background .1s;
}
.cd-job-row:hover{ background:var(--surface2); }
.cd-job-name{
  font-size:.88rem; color:var(--text);
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cd-job-dates{
  font-size:.72rem; color:var(--text3);
  flex-shrink:0;
}

/* Inline add-note / add-task forms — collapse by default, only
   surface when the user explicitly hits the action button. */
.cd-add-form{
  margin:.9rem 1.25rem;
  padding:.85rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:7px;
}
.cd-add-form-head{
  font-size:.78rem; color:var(--text2); font-weight:600;
  letter-spacing:.02em; text-transform:uppercase;
  margin-bottom:.45rem;
}
.cd-add-textarea, .cd-add-input{
  width:100%;
  padding:.5rem .65rem;
  background:var(--surface);
  border:1px solid var(--border); border-radius:5px;
  color:var(--text);
  font-family:var(--ui); font-size:.88rem;
  margin-bottom:.45rem;
}
.cd-add-textarea{ resize:vertical; min-height:64px; }
.cd-add-form-actions{
  display:flex; gap:.4rem; justify-content:flex-end;
  margin-top:.2rem;
}

.cd-link{
  background:transparent; border:none;
  color:var(--accent); font-size:.78rem;
  padding:.35rem 0; margin-top:.2rem;
  cursor:pointer;
}
.cd-link:hover{ text-decoration:underline; }

.cd-empty{
  font-size:.83rem; color:var(--text3);
  padding:.5rem 0;
  font-style:italic;
}
.cd-loading, .cd-error{
  padding:1.5rem; text-align:center; color:var(--text3); font-size:.9rem;
}

/* Sticky action row — Edit is a secondary affordance per the
   v5.37.0 redesign. Add note / Add task are primary CTAs; Edit
   is a btn-ghost equivalent so it visually steps back. */
.cd-actions{
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  padding:.7rem 1.25rem;
  border-top:1px solid var(--border);
  background:var(--surface);
  position:sticky; bottom:0;
  z-index:2;
}
.cd-actions-spacer{ flex:1; }

@media (max-width:540px){
  .modal-contact-detail{ max-height:96vh; border-radius:6px; }
  .cd-header        { padding:.75rem .9rem .65rem; }
  .cd-section       { padding:.75rem .9rem; }
  .cd-section-tight { padding:.55rem .9rem; }
  .cd-actions       { padding:.6rem .9rem; }
  .cd-add-form      { margin:.75rem .9rem; }
  .cd-name          { font-size:1.05rem; }
  .cd-actions .btn  { flex:1 1 auto; }
  .cd-actions-spacer{ display:none; }
}

/* ════════════════════════════════════════════════════════════
   User Detail panel (b100+)
   ════════════════════════════════════════════════════════════
   Layout chrome (header / scroll / sections / sticky actions) is
   inherited from the cd-* classes; this block defines only the
   user-specific bits: the stats strip, rental rows, and activity
   list. */

.ud-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(86px, 1fr));
  gap:.5rem;
}
.ud-stat{
  border:1px solid var(--border);
  border-radius:6px;
  padding:.55rem .65rem;
  background:var(--surface-2, var(--surface));
  text-align:center;
}
.ud-stat-num{
  font-size:1.4rem; font-weight:700; line-height:1.1;
  color:var(--text1);
}
.ud-stat-label{
  font-size:.7rem;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-top:.18rem;
}

.ud-rentals{ display:flex; flex-direction:column; gap:.5rem; }
.ud-rental-row{
  border:1px solid var(--border);
  border-radius:6px;
  padding:.55rem .65rem;
  background:var(--surface-2, var(--surface));
  cursor:pointer;
  transition:background .12s;
}
.ud-rental-row:hover{ background:var(--surface-3, var(--accent-dim)); }
.ud-rental-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem;
  margin-bottom:.3rem;
}
.ud-rental-dates{ font-size:.86rem; font-weight:600; color:var(--text1); }
.ud-rental-items{ font-size:.82rem; color:var(--text2); line-height:1.35; }
.ud-rental-budget{ font-size:.74rem; color:var(--text3); margin-top:.25rem; }

.ud-pill{
  display:inline-block;
  font-size:.7rem;
  font-weight:600;
  padding:.12rem .5rem;
  border-radius:99px;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:var(--border);
  color:var(--text2);
  white-space:nowrap;
}
.ud-pill-pending  { background:rgba(245,166,35,.18); color:var(--accent); }
.ud-pill-approved { background:rgba(85,153,255,.18); color:#5599ff; }
.ud-pill-out      { background:rgba(224,72,72,.18);  color:var(--red); }
.ud-pill-returned { background:rgba(120,176,96,.20); color:var(--green, #78b060); }
.ud-pill-denied   { background:rgba(140,140,140,.20); color:var(--text3); }
.ud-pill-archived { background:rgba(140,140,140,.15); color:var(--text3); }

.ud-activity-list{
  display:flex; flex-direction:column; gap:.4rem;
}
.ud-activity-row{
  display:flex; gap:.6rem;
  padding:.4rem .5rem;
  border-radius:5px;
  background:var(--surface-2, var(--surface));
  font-size:.82rem;
  line-height:1.35;
}
.ud-activity-row:hover{ background:var(--surface-3, var(--accent-dim)); }
.ud-activity-time{
  flex:0 0 auto;
  min-width:80px;
  color:var(--text3);
  font-size:.74rem;
  font-variant-numeric:tabular-nums;
}
.ud-activity-body{ flex:1; color:var(--text2); word-break:break-word; }

@media (max-width:540px){
  .ud-stats{ grid-template-columns:repeat(auto-fit, minmax(72px, 1fr)); }
  .ud-stat-num{ font-size:1.15rem; }
  .ud-activity-row{ flex-direction:column; gap:.15rem; }
  .ud-activity-time{ min-width:0; }
}

/* ════════════════════════════════════════════════════════════
   Cron activity tile (v5.34.6+)
   ════════════════════════════════════════════════════════════
   Home dashboard tile listing recent auto-import (cron) runs.
   Rows are clickable to open a detail modal. Each row's left
   border colour reflects status — green=ok, red=fail, dim=skip
   — so the user can scan for problems at a glance. Auto-fit grid
   so wide screens get 2-3 columns; mobile collapses to 1.

   (v5.36.1+) Section is collapsed by default. The toggle reuses
   .home-act-toggle from the Recent activity section. Status pill
   in the header summarises what's hidden so the user can decide
   whether to expand. */
.home-cron-section .home-cron-body{ margin-top:.45rem; }
.home-cron-status{
  margin-left:.45rem;
  display:inline-flex;align-items:center;
}
.home-cron-pill{
  font-family:var(--ui);font-size:.7rem;font-weight:600;
  letter-spacing:.02em;
  padding:.14rem .5rem;border-radius:11px;
  background:var(--surface2);color:var(--text2);
  border:1px solid var(--border);
}
.home-cron-pill-fail{
  background:rgba(193,64,64,.12);
  border-color:rgba(193,64,64,.4);
  color:#d97070;
}
.home-cron-pill-quiet{
  background:transparent;
  border-color:var(--border);
  color:var(--text3);
  font-weight:500;
}
.cron-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:.4rem;
}
.cron-loading,.cron-error{
  grid-column:1 / -1;
  padding:1rem;
  text-align:center;
  color:var(--text3);
  font-size:.85rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
}
.cron-empty{
  grid-column:1 / -1;
  padding:1.1rem 1.2rem;
  font-size:.85rem;
  color:var(--text3);
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
}
/* Stale variant — orange tinge so a stopped cron doesn't blend in
   with the calm "ticking quietly" state. Matches the home-cron-pill
   fail colour family so the badge + body read as the same signal. */
.cron-empty-stale{
  background:rgba(245,166,35,.08);
  border-color:rgba(245,166,35,.45);
  color:var(--text);
}
.cron-empty-stale .cron-empty-icon{
  background:rgba(245,166,35,.18);
  color:#c97509;
}
.cron-empty-stale code{
  font-family:var(--mono, ui-monospace, monospace);
  font-size:.78rem;
  padding:.05rem .35rem;
  background:rgba(0,0,0,.05);
  border-radius:3px;
}
.cron-empty-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--surface2);color:var(--text3);font-size:.95rem;
  flex-shrink:0;
}
.cron-row{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:.6rem;
  align-items:center;
  padding:.55rem .7rem .55rem .55rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--border);
  border-radius:7px;
  cursor:pointer;
  transition:background .1s, border-color .1s;
}
.cron-row:hover{ background:var(--surface-hi); border-color:var(--border2); }
.cron-row.cron-status-ok   { border-left-color:var(--green, #48b85c); }
.cron-row.cron-status-fail { border-left-color:#c14040; background:rgba(193,64,64,.05); }
.cron-row.cron-status-skip { border-left-color:var(--border2); opacity:.7; }
.cron-row.cron-status-fail:hover{ background:rgba(193,64,64,.1); }

.cron-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--surface2);color:var(--text3);
  font-size:.85rem;font-weight:700;
  flex-shrink:0;
}
.cron-row.cron-status-ok   .cron-icon{ background:rgba(72,184,92,.18);color:var(--green, #48b85c); }
.cron-row.cron-status-fail .cron-icon{ background:rgba(193,64,64,.18);color:#d97070; }
.cron-row.cron-status-skip .cron-icon{ background:var(--surface2);color:var(--text3); }
.cron-emoji{ font-size:1rem; flex-shrink:0; }
.cron-body{ min-width:0; }
.cron-row-top{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:.5rem;
}
.cron-task{
  font-weight:600;color:var(--text);font-size:.88rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cron-when{
  font-family:var(--mono);font-size:.72rem;color:var(--text3);
  white-space:nowrap;flex-shrink:0;
}
.cron-summary{
  font-size:.8rem;color:var(--text2);
  margin-top:.12rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cron-row.cron-status-fail .cron-summary{ color:#d97070; font-weight:500; }

/* ── Cron detail modal ──
   Read-only inspector for one cron run. Mirrors the task-detail
   modal chrome but lighter — no actions, just data. */
.modal-cron-detail{
  width:600px; max-width:96vw;
  padding:0;
  display:flex; flex-direction:column;
  max-height:88vh;
}
#cron-detail-body{ overflow-y:auto; padding:0; }
.cron-detail-head{
  display:flex; align-items:center; gap:.65rem;
  padding:1rem 1.25rem .75rem;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--surface);
  z-index:2;
}
.cron-detail-emoji{ font-size:1.2rem; margin-right:.4rem; }
.cron-detail-title{
  flex:1; min-width:0;
  font-size:1.05rem; font-weight:600; color:var(--text);
}
.cron-detail-meta{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  padding:.65rem 1.25rem;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
}
.cron-detail-badge{
  font-family:var(--mono);font-size:.7rem;font-weight:700;
  letter-spacing:.06em;
  padding:.18rem .5rem;border-radius:11px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text2);
}
.cron-detail-badge.cron-status-ok{
  background:rgba(72,184,92,.12); border-color:rgba(72,184,92,.35);
  color:var(--green, #48b85c);
}
.cron-detail-badge.cron-status-fail{
  background:rgba(193,64,64,.12); border-color:rgba(193,64,64,.35);
  color:#d97070;
}
.cron-detail-badge.cron-status-skip{
  background:var(--surface);border-color:var(--border2);color:var(--text3);
}
.cron-detail-time, .cron-detail-dur{
  font-family:var(--mono);font-size:.78rem;color:var(--text3);
}
.cron-detail-desc{
  padding:.75rem 1.25rem;
  font-size:.86rem;color:var(--text2);line-height:1.5;
  border-bottom:1px solid var(--border);
  font-style:italic;
}
.cron-detail-section{
  padding:.85rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.cron-detail-section:last-of-type{ border-bottom:none; }
.cron-detail-label{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700; color:var(--text3); margin-bottom:.4rem;
}
.cron-detail-msg{
  font-size:.9rem; color:var(--text); line-height:1.5;
  white-space:pre-wrap; word-break:break-word;
}
.cron-detail-grid{
  display:grid; grid-template-columns:auto 1fr;
  gap:.35rem .85rem;
  font-size:.85rem;
}
.cron-detail-row{
  display:contents;
}
.cron-detail-key{
  font-family:var(--mono);font-size:.78rem;color:var(--text3);
  white-space:nowrap;
}
.cron-detail-val{
  font-family:var(--mono);font-size:.85rem;color:var(--text);
  word-break:break-word;
}
.cron-detail-json{
  font-family:var(--mono);font-size:.78rem;
  background:var(--surface2);border:1px solid var(--border);
  padding:.55rem .7rem;border-radius:5px;
  margin:.5rem 0 0;
  white-space:pre-wrap; word-break:break-word;
  color:var(--text2);
  max-height:220px; overflow:auto;
}
.cron-detail-foot{
  padding:.65rem 1.25rem;
  border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;
  position:sticky;bottom:0;background:var(--surface);
}

@media (max-width:540px){
  .modal-cron-detail{ max-height:96vh; border-radius:6px; }
  .cron-detail-head    { padding:.75rem .9rem .6rem; }
  .cron-detail-meta    { padding:.55rem .9rem; }
  .cron-detail-section { padding:.7rem .9rem; }
  .cron-detail-foot    { padding:.55rem .9rem; }
}

/* ════════════════════════════════════════════════════════════
   Tags — chips, panel, picker, list filter (v5.6.0+)
   ════════════════════════════════════════════════════════════
   Used in three contexts:
     1. Read-only chip strip on directory + jobs list rows
        (.tag-chip-strip)
     2. Editor panel inside contact/company/job edit modals
        (.tag-panel) — shows attached + a clickable picker
     3. Filter bar at the top of list views (.tag-filter-bar)

   Color tokens — gray/red/orange/amber/green/blue/indigo/purple/
   pink — map to a chip background + border via .tag-chip-{color}.
   Each uses a dim background + saturated border so chips read
   clearly in both themes without theme-specific overrides.
*/

/* ── Chip base ──────────────────────────────────────────── */
.tag-chip{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.16rem .55rem;
  border-radius:11px;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text2, var(--text));
  font:inherit; font-size:.74rem; font-weight:500;
  letter-spacing:.005em; line-height:1.3;
  white-space:nowrap;
  vertical-align:middle;
}
.tag-chip-x{
  background:none; border:none;
  color:inherit; opacity:.5;
  cursor:pointer;
  font-size:.95rem; line-height:1;
  padding:0; margin-left:.05rem;
  width:.95rem; height:.95rem;
  display:inline-flex; align-items:center; justify-content:center;
}
.tag-chip-x:hover{ opacity:1; }

/* Chip strip — used inline in list rows. Compact variant trims
   margin so the strip slots cleanly into a meta line. */
.tag-chip-strip{
  display:inline-flex; flex-wrap:wrap; gap:.3rem;
  vertical-align:middle;
  align-items:center;
}
/* (b116+) Compact tag-chip dimensions match the inventory row
   status badges (.inv-item-out-badge, .inv-item-cond, etc.) so a
   tag sitting next to a badge in the same meta line reads as a
   peer rather than a bigger neighbour. The .62rem font + .1rem
   .35rem padding + 1.2 line-height matches the badge stack. */
.tag-chip-strip-compact{
  gap:.25rem;
}
.tag-chip-strip-compact .tag-chip{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:.1rem .42rem;
  border-radius:4px;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
}

/* Pickable chips (in the entity-edit picker dropdown) — same
   visual but with a subtle hover lift to read as actionable. */
.tag-chip-pickable{ cursor:pointer; transition:transform .08s, box-shadow .12s; }
.tag-chip-pickable:hover{ transform:translateY(-1px); box-shadow:0 1px 4px rgba(0,0,0,.12); }

/* Filter chips — same chip family but render as toggle buttons.
   .active gets the saturated treatment to distinguish from
   pickable + read-only modes. */
.tag-chip-filter{
  cursor:pointer;
  border:1px solid var(--border);
  transition:filter .12s, border-color .12s;
}
.tag-chip-filter:hover{ filter:brightness(1.1); }
.tag-chip-filter.active{
  outline:2px solid var(--accent);
  outline-offset:1px;
}

/* ── Color tokens ───────────────────────────────────────── */
.tag-chip-gray   { background:rgba(128,131,140,.14); border-color:#80838c; color:#a8acb4; }
.tag-chip-red    { background:rgba(193,64,64,.14);   border-color:#c14040; color:#d97070; }
.tag-chip-orange { background:rgba(232,108,44,.14);  border-color:#e86c2c; color:#f08a4d; }
.tag-chip-amber  { background:rgba(245,166,35,.14);  border-color:#c97509; color:#f5a623; }
.tag-chip-green  { background:rgba(19,117,52,.14);   border-color:#137534; color:#3aa063; }
.tag-chip-blue   { background:rgba(60,128,200,.14);  border-color:#3c80c8; color:#5fa3e0; }
.tag-chip-indigo { background:rgba(96,86,180,.14);   border-color:#6056b4; color:#8a82d4; }
.tag-chip-purple { background:rgba(140,72,180,.14);  border-color:#8c48b4; color:#b07ed4; }
.tag-chip-pink   { background:rgba(208,80,140,.14);  border-color:#d0508c; color:#e98ab1; }
/* Light theme override — saturated colors don't read on white the
   same way they do on the dark surface. Ramp text down + border up
   so chips stay legible. */
html.light .tag-chip-gray   { color:#5a5d65; }
html.light .tag-chip-red    { color:#a02525; }
html.light .tag-chip-orange { color:#a04510; }
html.light .tag-chip-amber  { color:#a55c0a; }
html.light .tag-chip-green  { color:#0e5326; }
html.light .tag-chip-blue   { color:#2a5e94; }
html.light .tag-chip-indigo { color:#3e377d; }
html.light .tag-chip-purple { color:#603480; }
html.light .tag-chip-pink   { color:#963465; }

/* ── Editor panel inside entity modals ─────────────────── */
.tag-panel{
  margin-top:1rem;
  padding-top:.85rem;
  border-top:1px solid var(--border);
}
.tag-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.45rem;
}
.tag-panel-title{
  font-size:.78rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent);
}
.tag-attached-list{
  display:flex; flex-wrap:wrap; gap:.35rem;
  min-height:1.5rem;
  margin-bottom:.55rem;
}
.tag-empty{
  color:var(--text3); font-size:.82rem; font-style:italic;
}
.tag-picker-controls{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:7px;
  padding:.6rem .7rem;
}
.tag-picker-row{
  display:flex; flex-wrap:wrap; gap:.4rem;
  align-items:center;
  margin-bottom:.55rem;
}
.tag-picker-row:last-child{ margin-bottom:0; }
.tag-picker-label{
  font-size:.74rem; color:var(--text3);
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  flex:0 0 auto;
}
.tag-picker-list{
  display:flex; flex-wrap:wrap; gap:.3rem;
  flex:1 1 auto;
}
.tag-create-row{
  display:flex; gap:.4rem; align-items:center;
  padding-top:.55rem;
  border-top:1px dashed var(--border);
}
.tag-create-row .tag-create-input{
  flex:1 1 auto; min-width:0;
  padding:.35rem .55rem;
  background:var(--surface3);
  border:1px solid var(--border2);
  border-radius:5px;
  color:var(--text);
  font:inherit; font-size:.85rem;
}
.tag-create-row .tag-create-color{
  padding:.35rem .45rem;
  background:var(--surface3);
  border:1px solid var(--border2);
  border-radius:5px;
  color:var(--text);
  font:inherit; font-size:.82rem;
  flex:0 0 auto;
}

/* ── Filter bar in list views ────────────────────────────── */
.tag-filter-bar{
  display:flex; flex-wrap:wrap; gap:.35rem;
  align-items:center;
  margin-bottom:.7rem;
  padding:.45rem .6rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:7px;
}
.tag-filter-label{
  font-size:.74rem; color:var(--text3);
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  flex:0 0 auto;
}
.tag-filter-clear{
  background:none; border:none;
  color:var(--text3);
  font:inherit; font-size:.74rem;
  cursor:pointer;
  padding:.2rem .55rem;
  border-radius:11px;
  transition:color .12s, background .12s;
}
.tag-filter-clear:hover{ color:var(--text); background:var(--surface3); }

@media (max-width:540px){
  .tag-create-row{ flex-wrap:wrap; }
  .tag-create-row .tag-create-input{ flex:1 0 100%; }
}

/* Tag chip strip placement tweaks for table/card contexts (v5.6.0+).
   Compact-strip-inline = sits inside a table-view name cell next to
   the existing name + sub text. Tag chips render as inline-flex
   already; this just gives them a tiny left margin so they breathe
   away from the name. */
.dir-td-name .tag-chip-strip,
.jt-name-stack .tag-chip-strip{
  margin-left:.4rem;
}
.jt-name-stack .tag-chip-strip{
  margin-left:0; margin-top:.15rem;
}
/* (v5.18.0+) Tag chips on inventory rows — same treatment as the
   directory + jobs-table rows. List view inline after the name; card
   view as just another chip in the meta line.
   (b116+) The list-view margin-left rule was retired — tags now
   sit inside .inv-lr-meta which provides its own gap. The card-meta
   placeholder rule is also removed (no-op). */
.cc-tags{ margin-top:.2rem; }
.aj-card-tags{ margin-top:.2rem; margin-bottom:.15rem; }

/* ════════════════════════════════════════════════════════════
   Pipeline analytics tile + decision-reason editor (v5.7.0+)
   ════════════════════════════════════════════════════════════
   Renders at the top of the Estimates view (Finances → Estimates).
   Composed of:
     1. <details> wrapper that can collapse to a one-line summary
     2. Range picker bar (all / 30d / 90d / YTD / 12m)
     3. KPI grid (value-in-flight / conversion% / avg decide / won)
     4. Funnel bar (sent → viewed → queried → approved → converted → declined)
     5. Two side-by-side sections: loss-reasons breakdown + top clients
*/

/* ── Wrapper ─────────────────────────────────────────────── */
.pipe-tile{
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  /* (v5.16.1+) Top margin matters now that the tile sits below
     the estimates list (v5.15.1 moved it). Without breathing
     room the tile presses up against the pager and the
     visual hierarchy reads as one continuous block. */
  margin: 1.6rem 0 1rem 0;
  padding: .9rem 1.1rem 1rem;
}
.pipe-tile-summary{
  display: flex; align-items: baseline; gap: .8rem;
  cursor: pointer;
  list-style: none;
  font-size: .92rem;
  margin: -.2rem 0 .3rem;
  user-select: none;
}
.pipe-tile-summary::-webkit-details-marker{ display: none; }
.pipe-tile-summary::after{
  content: '▾';
  margin-left: auto;
  color: var(--text3);
  transition: transform .15s;
  font-size: .85rem;
}
.pipe-tile:not([open]) .pipe-tile-summary::after{ transform: rotate(-90deg); }
.pipe-tile-title{
  font-weight: 700;
  color: var(--text);
  font-size: .94rem;
}
.pipe-tile-sub{
  color: var(--text3);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

/* ── Range picker ────────────────────────────────────────── */
.pipe-range-bar{
  display: inline-flex; gap: .2rem;
  padding: .22rem;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: .5rem 0 .9rem;
  flex-wrap: wrap;
}
.pipe-range-btn{
  background: transparent; border: none;
  padding: .35rem .75rem;
  border-radius: 6px;
  color: var(--text3);
  font: inherit; font-size: .8rem; font-weight: 500;
  cursor: pointer;
  transition: color .12s, background .12s;
}
.pipe-range-btn:hover:not(.active){ color: var(--text); background: var(--surface); }
.pipe-range-btn.active{
  background: var(--accent); color: #fff; font-weight: 600;
}

/* ── KPI cards ───────────────────────────────────────────── */
.pipe-kpi-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .55rem;
  margin-bottom: .9rem;
}
.pipe-kpi{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: .65rem .8rem;
}
.pipe-kpi-good{ border-color: var(--green, #137534); }
.pipe-kpi-accent{ border-color: var(--accent); }
.pipe-kpi-lbl{
  font-size: .72rem;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pipe-kpi-val{
  font-size: 1.45rem;
  font-weight: 750;
  color: var(--text);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  margin-top: .2rem;
}
.pipe-kpi-good .pipe-kpi-val{ color: var(--green, #137534); }
.pipe-kpi-accent .pipe-kpi-val{ color: var(--accent); }
.pipe-kpi-foot{
  font-size: .75rem;
  color: var(--text3);
  margin-top: .15rem;
}

/* ── Funnel bar ──────────────────────────────────────────── */
.pipe-funnel{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: .4rem;
  margin-bottom: 1rem;
}
.pipe-stage{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .5rem .55rem .6rem;
  display: flex; flex-direction: column; gap: .25rem;
  min-width: 0;
}
.pipe-stage-head{
  display: flex; justify-content: space-between; align-items: baseline;
}
.pipe-stage-label{
  font-size: .72rem;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.pipe-stage-count{
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pipe-stage-bar{
  height: 4px;
  background: var(--surface3);
  border-radius: 2px;
  overflow: hidden;
}
.pipe-stage-fill{
  height: 100%;
  background: var(--text3);
  border-radius: 2px;
  transition: width .25s;
}
.pipe-stage-total{
  font-size: .72rem;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}
/* Stage colour vocabulary — matches estimate status pill colours
   established elsewhere in the app. */
.pipe-stage-sent      .pipe-stage-fill{ background: #6b7280; }
.pipe-stage-viewed    .pipe-stage-fill{ background: #3c80c8; }
.pipe-stage-queried   .pipe-stage-fill{ background: #c97509; }
.pipe-stage-approved  .pipe-stage-fill{ background: #137534; }
.pipe-stage-converted .pipe-stage-fill{ background: var(--accent); }
.pipe-stage-rejected  .pipe-stage-fill{ background: #c14040; }

/* ── Two-up grid for loss reasons + top clients ──────────── */
.pipe-section-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.pipe-section{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: .75rem .85rem;
}
.pipe-section-title{
  font-size: .76rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .55rem;
}
.pipe-empty{
  color: var(--text3);
  font-size: .82rem;
  font-style: italic;
  padding: .4rem 0;
}

/* Loss reason rows — bars styled like .pipe-stage-fill but neutral
   red since they're all "lost". */
.pipe-loss-list{ display: flex; flex-direction: column; gap: .35rem; }
.pipe-loss-row{
  display: grid;
  grid-template-columns: minmax(80px,1fr) minmax(60px,2fr) auto;
  gap: .55rem;
  align-items: center;
  font-size: .82rem;
}
.pipe-loss-name{
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipe-loss-bar{
  height: 6px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
}
.pipe-loss-fill{
  height: 100%;
  background: #c14040;
  border-radius: 3px;
}
.pipe-loss-meta{
  font-size: .76rem;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pipe-loss-other .pipe-loss-name{ font-style: italic; color: var(--text3); }
.pipe-loss-other .pipe-loss-fill{ background: var(--text3); }

/* Top clients — flat list with name + count + total. */
.pipe-top-list{ display: flex; flex-direction: column; gap: .3rem; }
.pipe-top-row{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .65rem;
  align-items: baseline;
  font-size: .85rem;
  padding: .25rem 0;
  border-bottom: 1px dashed var(--border);
}
.pipe-top-row:last-child{ border-bottom: none; }
.pipe-top-name{
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipe-top-count{
  font-size: .74rem;
  color: var(--text3);
  background: var(--surface2);
  padding: .05rem .45rem;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}
.pipe-top-total{
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pipe-loading{
  padding: 1.5rem;
  text-align: center;
  color: var(--text3);
  font-size: .85rem;
  font-style: italic;
}

/* Mobile — collapse two-up grid, shrink KPIs */
@media (max-width: 720px){
  .pipe-section-grid{ grid-template-columns: 1fr; }
  .pipe-kpi-val{ font-size: 1.25rem; }
  .pipe-kpi-grid{ grid-template-columns: 1fr 1fr; }
}

/* ── Decision-reason editor (in the estimate form) ─────────── */
.est-decision-reason-row{
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px dashed var(--border);
}
.est-decision-reason-controls{
  display: flex; gap: .5rem; align-items: center;
}
.est-decision-reason-controls select,
.est-decision-reason-controls input{
  flex: 1 1 auto; min-width: 0;
  padding: .42rem .55rem;
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--text);
  font: inherit; font-size: .87rem;
}
.est-decision-reason-controls select{ flex: 0 0 200px; }
.est-field-hint{
  font-size: .75rem;
  color: var(--text3);
  margin-top: .3rem;
  font-style: italic;
}
@media (max-width: 540px){
  .est-decision-reason-controls{ flex-wrap: wrap; }
  .est-decision-reason-controls select{ flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════
   CRM analytics + rate-card editor (v5.8.0+)
   ════════════════════════════════════════════════════════════
   Two surfaces:
     1. .anly-tile — full analytics breakdown inside the contact /
        company edit modals (LTV / jobs / pay-time grid + badges).
     2. .anly-strip — compact one-liner on directory rows so users
        can spot dormant + high-value clients at a glance.
   Plus a .rate-card-panel for the company edit modal's default
   rate card editor.
*/

/* ── Analytics tile ─────────────────────────────────────── */
.anly-tile{
  margin-top:1rem;
  padding:.9rem 1rem 1rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
}
.anly-tile-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem;
  margin-bottom:.6rem;
}
.anly-tile-title{
  font-size:.78rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent);
}
.anly-tile-badges{
  display:flex; flex-wrap:wrap; gap:.35rem;
}
.anly-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.18rem .55rem;
  border-radius:11px;
  font-size:.74rem; font-weight:500;
  border:1px solid var(--border);
}
.anly-badge-dormant{
  background:rgba(128,131,140,.14);
  border-color:#80838c;
  color:var(--text2,var(--text3));
}
.anly-badge-warn{
  background:rgba(193,64,64,.14);
  border-color:#c14040;
  color:#d97070;
}
html.light .anly-badge-warn{ color:#a02525; }

.anly-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:.5rem;
}
.anly-kpi{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.55rem .7rem;
}
.anly-kpi-lbl{
  font-size:.7rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--text3);
}
.anly-kpi-val{
  font-size:1.2rem; font-weight:700;
  color:var(--text);
  letter-spacing:-.005em;
  font-variant-numeric:tabular-nums;
  margin-top:.15rem;
}
.anly-kpi-foot{
  font-size:.74rem;
  color:var(--text3);
  margin-top:.1rem;
}

/* ── Compact one-liner on directory rows ────────────────── */
.anly-strip{
  display:flex; flex-wrap:wrap;
  gap:.35rem;
  margin-top:.25rem;
}
.anly-pip{
  display:inline-flex; align-items:center;
  padding:.08rem .45rem;
  border-radius:9px;
  background:var(--surface3);
  border:1px solid var(--border);
  color:var(--text2,var(--text));
  font-size:.7rem; font-weight:500;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.anly-pip-warn{
  background:rgba(193,64,64,.12);
  border-color:#c14040;
  color:#d97070;
}
.anly-pip-dormant{
  background:rgba(128,131,140,.14);
  border-color:#80838c;
  color:var(--text3);
}
html.light .anly-pip-warn{ color:#a02525; }

/* ── Rate-card editor (company edit modal) ──────────────── */
.rate-card-panel{
  margin-top:1rem;
  padding:.9rem 1rem 1rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
}
.rate-card-head{
  margin-bottom:.7rem;
}
.rate-card-title{
  font-size:.78rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent);
}
.rate-card-sub{
  font-size:.78rem;
  color:var(--text3);
  margin-top:.15rem;
}
.rate-card-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:.55rem;
  margin-bottom:.55rem;
}
.rate-card-row:last-child{ margin-bottom:0; }
.rate-card-field label{
  display:block;
  font-size:.72rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--text3);
  margin-bottom:.2rem;
}
.rate-card-field input,
.rate-card-field select{
  width:100%;
  padding:.42rem .55rem;
  background:var(--surface3);
  border:1px solid var(--border2);
  border-radius:5px;
  color:var(--text);
  font:inherit; font-size:.88rem;
  box-sizing:border-box;
}
.rate-card-field-wide{ grid-column: 1 / -1; }
.rc-breakdown-block,
.rc-flat-block{
  padding-top:.4rem;
  border-top:1px dashed var(--border);
  margin-top:.4rem;
}

@media (max-width:540px){
  .anly-grid{ grid-template-columns:1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════
   CRM documents panel (v5.9.0+)
   ════════════════════════════════════════════════════════════
   Lives below the tag panel inside contact/company/job edit
   modals. Visual idiom mirrors the activity panel — list above,
   add-form below — so the three panels feel like siblings.
*/
.doc-panel{
  margin-top:1rem;
  padding-top:.85rem;
  border-top:1px solid var(--border);
}
.doc-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.5rem;
}
.doc-panel-title{
  font-size:.78rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent);
}
.doc-list{
  display:flex; flex-direction:column;
  gap:.4rem;
  margin-bottom:.65rem;
}
.doc-empty{
  padding:.7rem .9rem;
  background:var(--surface2);
  border:1px dashed var(--border);
  border-radius:6px;
  color:var(--text3);
  font-size:.82rem;
  font-style:italic;
  text-align:center;
}
.doc-row{
  display:grid;
  grid-template-columns:1.6rem 1fr auto;
  gap:.6rem;
  align-items:flex-start;
  padding:.55rem .75rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
}
.doc-icon{
  font-size:1.2rem;
  line-height:1.2;
  margin-top:.05rem;
}
.doc-body{ min-width:0; }
.doc-name-row{
  display:flex; flex-wrap:wrap; gap:.45rem;
  align-items:baseline;
}
.doc-name{
  color:var(--text);
  font-weight:600;
  text-decoration:none;
  word-break:break-word;
}
.doc-name:hover{ text-decoration:underline; color:var(--accent); }
.doc-type-chip{
  background:var(--surface3);
  border:1px solid var(--border);
  color:var(--text2,var(--text));
  font-size:.7rem; font-weight:500;
  padding:.05rem .45rem;
  border-radius:9px;
}
.doc-desc{
  font-size:.82rem;
  color:var(--text2,var(--text3));
  margin-top:.15rem;
  word-break:break-word;
}
/* (b291) Per-doc share toggle (scripts). */
.doc-share-toggle{
  font-size:.68rem; font-weight:600; letter-spacing:.01em;
  padding:.06rem .5rem; border-radius:9px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface3); color:var(--text3);
  transition:background .12s,color .12s,border-color .12s;
}
.doc-share-toggle:hover{ border-color:var(--border3); color:var(--text); }
.doc-share-toggle.on{
  background:var(--accent-dim); border-color:var(--accent); color:var(--accent);
}
/* (b291) Add-link row: URL grows, label fixed, button auto. */
.doc-link-row .doc-link-input{ flex:1 1 auto; min-width:0; }
.doc-link-row .doc-link-label{ flex:0 1 40%; min-width:0; }
/* (b291) Documents section on the public combined "Production Pack" page. */
.bd-docs{ display:flex; flex-direction:column; gap:.5rem; }
.bd-doc{
  display:flex; align-items:center; gap:.7rem;
  background:var(--surface); border:1px solid var(--border); border-radius:9px;
  padding:.6rem .8rem; text-decoration:none; color:var(--text);
  transition:border-color .12s, background .12s;
}
.bd-doc:hover{ border-color:var(--accent); background:var(--accent-dim); }
.bd-doc-ic{ font-size:1.2rem; flex-shrink:0; }
.bd-doc-main{ min-width:0; flex:1; display:flex; flex-direction:column; }
.bd-doc-name{ font-weight:600; font-size:.9rem; color:var(--text); word-break:break-word; }
.bd-doc-desc{ font-size:.78rem; color:var(--text2); margin-top:.1rem; }
.bd-doc-type{
  flex-shrink:0; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  padding:.1rem .45rem; border-radius:6px; background:var(--surface3); border:1px solid var(--border); color:var(--text2);
}
.bd-doc-sub{ flex-shrink:0; font-size:.74rem; color:var(--text3); font-variant-numeric:tabular-nums; }
.bd-doc-arrow{ flex-shrink:0; color:var(--text3); font-size:.95rem; }
/* (b293) Script versions modal. */
.scrver-list{ display:flex;flex-direction:column;gap:.4rem; }
.scrver-row{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem .75rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);
}
.scrver-row.scrver-current{ border-color:var(--accent);background:var(--accent-dim); }
.scrver-main{ flex:1;min-width:0; }
.scrver-no{ font-weight:700;font-size:.9rem;color:var(--text);display:flex;align-items:center;gap:.4rem; }
.scrver-badge{ font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:.02rem .35rem; }
.scrver-label{ font-size:.82rem;color:var(--text2);margin-top:.1rem; }
.scrver-meta{ font-size:.74rem;color:var(--text3);margin-top:.15rem;font-variant-numeric:tabular-nums; }
/* ── (b851) Version change summary — versions modal ── */
.scrver-changes{margin:.15rem 0 .7rem;padding:.65rem .8rem;background:var(--surface2);border:1px solid var(--border);border-radius:9px;}
.scrver-changes:empty{display:none;}
.scrch-head{font-size:.8rem;font-weight:700;color:var(--text);margin-bottom:.35rem;display:flex;align-items:center;gap:.5rem;}
.scrch-overview{font-size:.83rem;color:var(--text2);line-height:1.5;margin-bottom:.45rem;}
.scrch-list{display:flex;flex-direction:column;gap:.35rem;}
.scrch-row{display:flex;gap:.5rem;align-items:flex-start;}
.scrch-kind{flex-shrink:0;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.12rem .38rem;border-radius:999px;background:color-mix(in srgb,var(--text3) 14%,transparent);color:var(--text2);margin-top:.1rem;}
.scrch-added{background:rgba(16,185,129,.14);color:#34d399;}
.scrch-removed{background:rgba(220,38,38,.14);color:#f87171;}
.scrch-revised,.scrch-dialogue{background:rgba(59,130,246,.14);color:#60a5fa;}
.scrch-structure{background:rgba(245,166,35,.16);color:var(--accent);}
.scrch-heading{font-size:.74rem;font-weight:650;color:var(--text);letter-spacing:.02em;}
.scrch-note{font-size:.8rem;color:var(--text2);line-height:1.45;}
.scrch-impact{margin-top:.55rem;padding-top:.5rem;border-top:1px dashed var(--border);}
.scrch-impact-lbl{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:.25rem;}
.scrch-impact-row{font-size:.8rem;color:var(--text2);line-height:1.5;}
.scrch-dim{font-size:.8rem;color:var(--text3);line-height:1.5;}
.scrch-err{font-size:.8rem;color:var(--red);line-height:1.5;}
.scrver-changes-mini{font-size:.74rem;color:var(--text3);line-height:1.45;margin-top:.2rem;max-width:52ch;}
.scrver-empty{ padding:.9rem;color:var(--text3);font-size:.82rem;line-height:1.5;border:1px dashed var(--border);border-radius:8px; }
.doc-meta{
  display:flex; flex-wrap:wrap;
  gap:.55rem;
  margin-top:.25rem;
  font-size:.74rem;
  color:var(--text3);
}
.doc-meta > * { font-variant-numeric:tabular-nums; }
.doc-expiry{
  padding:.02rem .4rem;
  border-radius:9px;
  background:var(--surface3);
  border:1px solid var(--border);
  color:var(--text3);
}
.doc-expiry-soon{
  background:rgba(245,166,35,.14);
  border-color:#c97509;
  color:#f5a623;
  font-weight:600;
}
.doc-expiry-past{
  background:rgba(193,64,64,.14);
  border-color:#c14040;
  color:#d97070;
  font-weight:600;
}
html.light .doc-expiry-soon{ color:#a55c0a; }
html.light .doc-expiry-past{ color:#a02525; }
.doc-row-x{
  background:none; border:none;
  color:var(--text3);
  font-size:1.1rem; line-height:1;
  width:1.5rem; height:1.5rem;
  border-radius:50%;
  cursor:pointer;
  opacity:0; transition:opacity .12s, background .12s, color .12s;
}
.doc-row:hover .doc-row-x{ opacity:1; }
.doc-row-x:hover{ background:var(--surface3); color:var(--text); }

/* Upload form — two rows. Top: type select + description. Bottom:
   file input + expires_at + upload button. Stacks on narrow. */
.doc-upload-controls{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:7px;
  padding:.55rem .65rem;
}
.doc-upload-row{
  display:flex; gap:.45rem; align-items:center;
  margin-bottom:.4rem;
  flex-wrap:wrap;
}
.doc-upload-row:last-child{ margin-bottom:0; }
.doc-upload-row > select,
.doc-upload-row > input[type="text"],
.doc-upload-row > input[type="date"]{
  padding:.35rem .55rem;
  background:var(--surface3);
  border:1px solid var(--border2);
  border-radius:5px;
  color:var(--text);
  font:inherit; font-size:.85rem;
}
.doc-upload-row .doc-type-select{ flex:0 0 200px; }
.doc-upload-row .doc-desc-input{ flex:1 1 auto; min-width:0; }
.doc-upload-row .doc-file-input{
  flex:1 1 auto; min-width:0;
  font:inherit; font-size:.82rem;
  color:var(--text3);
}
.doc-upload-row .doc-expires-input{ flex:0 0 150px; }
.doc-upload-btn:disabled{ opacity:.6; cursor:wait; }

@media (max-width:540px){
  .doc-upload-row .doc-type-select,
  .doc-upload-row .doc-expires-input{ flex:1 0 100%; }
  .doc-row-x{ opacity:1; }
}

/* ════════════════════════════════════════════════════════════
   Referrals (v5.10.0+)
   ════════════════════════════════════════════════════════════
   "Good" variants of the existing analytics pip/badge family
   — used for referral counts (positive signal: this contact
   brings us work). Same hue as the pipe-stage-approved/converted
   green used in the pipeline funnel so the visual vocabulary
   stays coherent.

   Plus a home-dashboard "Top referrers" section that mirrors
   the layout of the existing Tasks tile so it slots in without
   visual friction.
*/

.anly-pip-good{
  background: rgba(19, 117, 52, .14);
  border-color: #137534;
  color: #3aa063;
}
html.light .anly-pip-good{ color: #0e5326; }

.anly-badge-good{
  background: rgba(19, 117, 52, .14);
  border-color: #137534;
  color: #3aa063;
}
html.light .anly-badge-good{ color: #0e5326; }

/* KPI "good" treatment — green accent on the value. Borrowed from
   .pipe-kpi-good (already established in v5.7.0). Inlined here so
   the analytics tile doesn't need to know about pipeline styles. */
.anly-kpi-good{ border-color: var(--green, #137534); }
.anly-kpi-good .anly-kpi-val{ color: var(--green, #137534); }
html.light .anly-kpi-good .anly-kpi-val{ color: #0e5326; }

/* ── Home dashboard: Top referrers tile ───────────────────── */
/* (v5.34.5+) Multi-column auto-fit grid. Rows were already
   self-contained tiles (background + border + radius) so only the
   wrapper changes — minimal disruption. */
.referrer-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap: .4rem;
}
.referrer-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem;
  padding: .55rem .7rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.referrer-row:hover{
  border-color: var(--border2);
  background: var(--surface);
}
.referrer-body{ min-width: 0; flex: 1; }
.referrer-name{
  font-weight: 600;
  color: var(--text);
  font-size: .9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.referrer-role{
  font-size: .75rem;
  color: var(--text3);
  margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.referrer-stats{
  display: flex; align-items: baseline; gap: .55rem;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.referrer-jobs{
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
}
.referrer-rev{
  font-size: .8rem;
  color: var(--green, #3aa063);
  font-weight: 500;
}
html.light .referrer-rev{ color: #0e5326; }

@media (max-width: 540px){
  .referrer-row{ flex-wrap: wrap; gap: .35rem; }
  .referrer-stats{ width: 100%; justify-content: flex-end; }
}

/* ════════════════════════════════════════════════════════════
   CRM auto-events (v5.11.0+)
   ════════════════════════════════════════════════════════════
   System-generated rows in the activity timeline — estimate
   sends, invoice sends/reminders. Same row geometry as notes
   and completed tasks; muted text + accent-toned icon to
   distinguish at a glance from human-typed notes.
*/
.crm-row-event .crm-activity-icon{
  color: var(--accent);
  opacity: .9;
}
.crm-row-event .crm-activity-text{
  color: var(--text2, var(--text3));
  font-style: italic;
}
/* Slightly tinted background to give events their own visual
   weight without being shouty. Pulls from the same green
   token used for the pipeline funnel and referral KPIs so the
   "system action happened" cue is consistent across the app. */
.crm-row-event{
  background: rgba(19, 117, 52, .04);
}
html.light .crm-row-event{ background: rgba(19, 117, 52, .045); }

/* ════════════════════════════════════════════════════════════
   Email viewer (v5.31.0+)
   ════════════════════════════════════════════════════════════
   In-app reader for ingested .eml messages. The "View full
   message" button surfaces on email_ingest timeline events and
   on email rows in the Documents panel. Clicking opens
   m-email-viewer — a wide modal that lays out the headers and
   renders the body inside a sandboxed iframe (HTML) or a
   monospaced <pre> (plain text fallback).
*/

/* "View full message" button — sits below the AI summary on
   email-ingest timeline events. Slightly indented so it visually
   belongs to the note, not to the row meta. */
.crm-email-view-wrap{
  margin-top:.45rem;
}
.crm-email-view-btn{
  font-size:.78rem;
  padding:.25rem .6rem;
}

/* Documents-panel: email rows use a button as the primary label
   (opens viewer) plus a small ⬇ link for raw download. The button
   inherits .doc-name styling so the row layout stays identical to
   non-email attachments. */
.doc-name-btn{
  background:none;
  border:none;
  padding:0;
  color:var(--text);
  font:inherit;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  word-break:break-word;
}
.doc-name-btn:hover{ text-decoration:underline; color:var(--accent); }
.doc-name-dl{
  color:var(--text3);
  text-decoration:none;
  font-size:.85rem;
  padding:0 .15rem;
  line-height:1;
}
.doc-name-dl:hover{ color:var(--text); }

/* The modal itself — wider than default so HTML emails get room
   to breathe but capped so it doesn't bleed off screen on small
   laptops. Internal sections (head/headers/body) each handle their
   own overflow so the chrome stays put when the body scrolls. */
.email-viewer-modal{
  max-width: 820px;
  width: 95vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.email-viewer-head{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.5rem;
}
.email-viewer-head .modal-title{
  flex:1 1 auto;
  min-width:0;
  margin-bottom:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.email-viewer-head-actions{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex-shrink:0;
}

/* Headers strip — From / To / Cc / Date stacked as key/value
   rows. Tabular alignment via fixed key column for fast scanning. */
.email-viewer-headers{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.5rem .7rem;
  margin-bottom:.55rem;
  font-size:.85rem;
  line-height:1.45;
  flex-shrink:0;
}
.email-viewer-headers:empty{ display:none; }
.em-hdr-row{
  display:grid;
  grid-template-columns: 3.5rem 1fr;
  gap:.5rem;
  padding:.12rem 0;
}
.em-hdr-key{
  color:var(--text3);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding-top:.18rem;
}
.em-hdr-val{
  color:var(--text);
  word-break:break-word;
  min-width:0;
}
.em-hdr-val .em-addr{
  color:var(--text3);
  font-size:.86em;
}

/* Body wrapper — flex-grows to fill the modal so the iframe has
   somewhere to render into. The iframe is given an inline height
   by the load handler in _emPaint (capped at 70vh); fallback height
   keeps the layout intact if the auto-grow misses. */
.email-viewer-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
}
.email-viewer-iframe{
  display:block;
  width:100%;
  min-height:240px;
  border:none;
  background:#fff;
  border-radius:6px;
}
.email-viewer-text{
  margin:0;
  padding:.85rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.85rem;
  line-height:1.5;
  color:var(--text);
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.email-viewer-loading{
  padding:1.5rem 1rem;
  text-align:center;
  color:var(--text3);
  font-size:.9rem;
}
.email-viewer-error{
  padding:1rem;
  color:var(--text2,var(--text3));
  font-size:.88rem;
}
.email-viewer-notice{
  padding:.4rem .75rem;
  background:rgba(245,166,35,.10);
  border-bottom:1px solid var(--border);
  color:var(--text2,var(--text3));
  font-size:.78rem;
  border-radius:6px 6px 0 0;
}

@media (max-width: 600px){
  .email-viewer-modal{
    max-width:100vw;
    width:100vw;
    max-height:100dvh;
    border-radius:0;
  }
  .em-hdr-row{
    grid-template-columns: 3rem 1fr;
  }
  .email-viewer-head .modal-title{ font-size:1rem; }
}

/* ────────────────────────────────────────────────────────────
 *  Multi-currency display pill (v5.45.0+)
 *  Compact uppercase badge that marks foreign-currency invoices
 *  in the list, editor head, detail modal, preview, and totals
 *  card. Small enough to sit inline next to titles/numbers
 *  without crowding; uses the orange accent at low alpha so it
 *  reads as informational rather than alarming.
 * ──────────────────────────────────────────────────────────── */
.invo-fx-pill{
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.42rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: 0.05em;
}
.invo-row .invo-fx-pill{
  /* Slightly tighter in dense list rows. */
  font-size: 0.62rem;
  padding: 0.08rem 0.34rem;
  margin-left: 0.3rem;
}

/* ────────────────────────────────────────────────────────────
 *  CLIENT-ENGAGEMENT CHIPS — invoice list status column.
 *  Tiny neutral pills beside the status pill: 👁 Viewed (client
 *  opened the online invoice page) and 📬 Opened (email tracking
 *  pixel fired). Informational, so they use the muted text color
 *  rather than a status hue; the exact timestamp lives in the
 *  title tooltip. On the ≤560px card layout the status cell is
 *  right-aligned — chips wrap under the pill and stay right.
 * ──────────────────────────────────────────────────────────── */
.invo-track-chip{
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.08rem 0.34rem;
  margin-left: 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text3) 10%, transparent);
  color: var(--text2);
  border: 1px solid color-mix(in srgb, var(--text3) 26%, transparent);
  line-height: 1.25;
  white-space: nowrap;
  vertical-align: 0.05em;
  cursor: default;
}
.invo-td-status{white-space: nowrap;}
@media (max-width: 560px){
  /* Card layout: pill + chips stack right-aligned; allow wrap. */
  .invo-td-status{white-space: normal;}
  .invo-td-status .invo-track-chip{margin: 0.15rem 0 0 0.3rem;}
}

/* ============================================================
   CRM EMAIL REPLY COMPOSER (v2026.05.19+)
   Small modal: read-only "To" pill, editable subject + body, and
   a hint line under the body that explains the IMAP labelling
   behaviour. Sits inside a stock .modal — these are just the
   internal-element rules.
   ============================================================ */
.er-meta-row{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.5rem .7rem;
  margin-bottom:.85rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:.9rem;
}
.er-meta-label{
  color:var(--text3);
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  flex-shrink:0;
}
.er-meta-value{
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
}
.er-hint{
  margin-top:.45rem;
  font-size:.78rem;
  color:var(--text3);
  line-height:1.4;
}

/* ── Email reply → mark tasks complete prompt (2026.05.19+) ──
   Stacked over the composer when sending finds open tasks on the
   contact. Each row is a label-wrapped checkbox so the entire row
   is a tap target — accommodates thumb use on mobile. */
.ert-intro{
  font-size:.92rem;
  color:var(--text2);
  line-height:1.45;
  margin-bottom:.9rem;
}
.ert-list{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-bottom:1rem;
  max-height:50vh;
  overflow-y:auto;
}
.ert-task-row{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding:.6rem .75rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  transition:background .12s, border-color .12s;
  line-height:1.4;
}
.ert-task-row:hover{
  background:var(--surface-hi);
  border-color:var(--border2);
}
.ert-task-cb{
  margin-top:.18rem;
  width:18px;
  height:18px;
  flex-shrink:0;
  accent-color:var(--accent);
  cursor:pointer;
}
.ert-task-title{
  color:var(--text);
  font-size:.92rem;
  flex:1;
  min-width:0;
  word-wrap:break-word;
}
.ert-task-due{
  color:var(--text3);
  font-size:.82rem;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   MOBILE HOME (v5.50.0+) — on-the-go layout
   The desktop home (.home-* classes) is hidden on mobile via the
   render-side branch in renderHome() → renderMobileHome(). Mobile
   classes are scoped under the 700px breakpoint so they never
   touch desktop rendering.
   ============================================================ */
@media (max-width:700px){

  .mh-wrap{
    padding:1rem 1rem 1.25rem;
    display:flex;flex-direction:column;gap:1rem;
  }

  /* Greeting */
  .mh-hello{
    font-size:1.55rem;
    font-weight:600;
    letter-spacing:-.022em;
    line-height:1.15;
    margin-bottom:-.15rem;
  }

  /* ── ZONE 1: Today hero card ─────────────────────────── */
  /* (b652) Quiet surface card — the solid accent wash was too loud.
     "Today" reads from the accent left rule + accent kicker line. */
  .mh-today{
    position:relative;
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border);
    border-left:4px solid var(--accent);
    border-radius:18px;
    padding:1.1rem 1.35rem;
    cursor:pointer;
    transition:transform .12s, background .12s;
    overflow:hidden;
  }
  .mh-today:active{transform:scale(.985);background:var(--surface2);}
  .mh-today-quiet{
    border-left:1px solid var(--border);
  }
  .mh-today-quiet:active{background:var(--surface2);}

  .mh-today-rel{
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.09em;
    font-weight:700;
    color:var(--accent);
    margin-bottom:.2rem;
  }
  .mh-today-quiet .mh-today-rel{
    opacity:1;color:var(--text3);
  }
  .mh-today-job{
    font-size:1.35rem;
    font-weight:600;
    line-height:1.2;
    margin-bottom:.15rem;
    padding-right:1.5rem; /* room for arrow */
  }
  .mh-today-empty{opacity:.75;font-weight:500;}
  .mh-today-sub{
    font-size:.88rem;
    color:var(--text3);
    margin-bottom:.75rem;
    line-height:1.3;
  }
  .mh-today-quiet .mh-today-sub{opacity:1;color:var(--text3);}
  .mh-today-stats{
    display:flex;
    align-items:baseline;
    gap:.35rem;
    font-size:.88rem;
    flex-wrap:wrap;
  }
  .mh-stat-num{font-size:1.35rem;font-weight:700;line-height:1;}
  .mh-stat-num.is-warn{color:var(--orange,#e08a2a);}
  .mh-stat-lbl{color:var(--text3);font-size:.78rem;}
  .mh-today-quiet .mh-stat-lbl{opacity:1;color:var(--text3);}
  .mh-stat-divider{opacity:.5;margin:0 .2rem;}
  .mh-today-arrow{
    position:absolute;
    right:1.1rem;top:1.1rem;
    font-size:1.5rem;
    color:var(--text3);
    line-height:1;
  }

  /* ── ZONE 2: Action tiles (2×2) ──────────────────────── */
  .mh-tiles{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.65rem;
  }
  .mh-tile{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:1.1rem .8rem;
    min-height:96px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    cursor:pointer;
    font-family:var(--ui);
    font-size:.92rem;
    font-weight:500;
    color:var(--text);
    transition:transform .1s, background .12s, border-color .12s;
    -webkit-tap-highlight-color:transparent;
  }
  .mh-tile:active{transform:scale(.96);background:var(--surface2);border-color:var(--border2);}
  .mh-tile-icon{
    font-size:1.75rem;
    line-height:1;
  }
  .mh-tile-lbl{
    line-height:1.2;
    text-align:center;
  }
  .mh-tile-lbl em{
    font-style:normal;
    opacity:.65;
    font-weight:400;
    font-size:.82rem;
  }

  /* ── ZONE 3: Coming up — list + section head ─────────── */
  .mh-section-head{
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.09em;
    color:var(--text3);
    font-weight:700;
    margin-top:.4rem;
    margin-bottom:-.35rem;
    padding-left:.15rem;
  }
  .mh-list{
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .mh-row{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:.7rem .85rem .7rem .7rem;
    display:flex;
    align-items:center;
    gap:.75rem;
    cursor:pointer;
    transition:transform .1s, background .12s;
    -webkit-tap-highlight-color:transparent;
  }
  .mh-row:active{transform:scale(.985);background:var(--surface2);}
  .mh-row.is-warn{border-color:rgba(220,150,40,.4);}
  .mh-row.is-bad{border-color:rgba(220,60,60,.4);}
  .mh-row.is-more{opacity:.85;}
  .mh-row-icon{
    width:38px;height:38px;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface2);
    border-radius:10px;
    font-size:1.2rem;
    line-height:1;
  }
  .mh-row.is-warn .mh-row-icon{background:rgba(220,150,40,.14);color:var(--orange,#e08a2a);}
  .mh-row.is-bad  .mh-row-icon{background:rgba(220,60,60,.14);color:var(--red,#dc3c3c);}
  .mh-row.is-cal  .mh-row-icon{background:rgba(80,140,220,.14);}
  .mh-row.is-more .mh-row-icon{background:transparent;font-size:.95rem;letter-spacing:.05em;color:var(--text3);}
  .mh-row-body{flex:1;min-width:0;}
  .mh-row-title{
    font-weight:500;
    font-size:.95rem;
    line-height:1.25;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mh-row-sub{
    font-size:.78rem;
    color:var(--text3);
    margin-top:.1rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mh-row-arrow{
    font-size:1.35rem;
    color:var(--text3);
    opacity:.55;
    flex-shrink:0;
    line-height:1;
  }

  /* (2026.05.19+) Email rows on mobile home — Reply button to the
     right of the body. Replaces the .mh-row-arrow chevron with an
     actionable button so the most common email action (reply) is
     one tap from the home screen. Tap row still opens the contact
     for full context. */
  .mh-row.mh-row-email{
    padding-right:.5rem;  /* tighter so the button doesn't crowd the edge */
  }
  .mh-row.mh-row-email .mh-row-icon{
    background:rgba(61,142,240,.14);
    color:#3d8ef0;
  }
  .mh-row-action{
    flex-shrink:0;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:.45rem .7rem;
    font-size:.82rem;
    font-weight:600;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .1s, filter .12s;
  }
  .mh-row-action:active{transform:scale(.94);filter:brightness(1.1);}

  /* Ghost variant — quieter secondary action (e.g. "Dismiss" on the
     expense-backlog rollups in the decisions-queue sheet) so the
     row's primary tap stays the obvious move. */
  .mh-row-action.mh-row-action-ghost{
    background:var(--surface2);
    color:var(--text2);
    border:1px solid var(--border2);
  }
  .mh-row-action.mh-row-action-ghost:active{transform:scale(.94);filter:none;background:var(--surface3);}

  /* (b691) ✕ dismiss on the mobile Emails rows — square-ish ghost
     button, narrower than the Reply pill so it reads as secondary. */
  .mh-row-action.mh-row-dismiss{
    padding:.45rem .55rem;
    color:var(--text3);
  }

  /* ── Mobile decisions queue sheet (full "Needs you" inbox) ──
     Reuses the standard .modal chrome (centered, floating ✕, body
     scroll) but widened toward the viewport edges and given a taller
     ceiling so a long queue scrolls comfortably. Rows are plain
     .mh-row items (styled above), stacked in a flex column. */
  .mob-decisions-modal{
    width:100%;
    max-width:96vw;
    max-height:90vh;
    padding:1.25rem 1rem 1.1rem;
  }
  .mob-decisions-modal .modal-title{
    margin-bottom:.85rem;
  }
  .mob-decisions-list{
    display:flex;
    flex-direction:column;
    gap:1rem;  /* (vN+) wider gap now that contents are grouped */
  }

  /* (vN+) Category grouping inside the mobile "Needs you" sheet —
     mirrors the desktop home-inbox split (Urgent / Awaiting review
     / Finances). Each group is a header + its own stacked rows. */
  .mh-decisions-group{
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .mh-decisions-group-head{
    display:flex;align-items:center;gap:.45rem;
    padding:0 .15rem;
  }
  .mh-dg-lbl{
    font-size:.72rem;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;color:var(--text2);
  }
  .mh-decisions-group-urgent  .mh-dg-lbl{color:var(--red,#dc3c3c);}
  .mh-decisions-group-review  .mh-dg-lbl{color:var(--accent);}
  .mh-decisions-group-finance .mh-dg-lbl{color:var(--green,#5bbb6a);}
  .mh-dg-count{
    font-family:var(--mono);font-weight:500;font-size:.68rem;
    padding:.03rem .4rem;border-radius:8px;
    background:var(--surface2);border:1px solid var(--border);
    color:var(--text3);line-height:1.4;
  }
  /* The decisions sheet is the one place mobile rows must show full
     detail — let the title + sub wrap here instead of clipping with
     the ellipsis the shared .mh-row styling uses elsewhere (e.g. the
     home "Coming up" teaser, which stays single-line on purpose). */
  .mob-decisions-list .mh-row{align-items:flex-start;}
  .mob-decisions-list .mh-row-icon{margin-top:.05rem;}
  .mob-decisions-list .mh-row-title,
  .mob-decisions-list .mh-row-sub{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .mob-decisions-list .mh-row-arrow{align-self:center;}

  /* All-clear empty state for Zone 3 */
  .mh-clear{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    padding:1.15rem;
    background:var(--surface);
    border:1px dashed var(--border2);
    border-radius:14px;
    color:var(--text3);
    font-size:.9rem;
  }
  .mh-clear-icon{
    width:26px;height:26px;
    background:rgba(60,180,90,.18);
    color:var(--green,#5bbb6a);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;
    font-size:.85rem;
  }

  /* Fresh-install empty state */
  .mh-empty{
    padding:2.5rem 1rem 1.5rem;
    text-align:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
  }
  .mh-empty-icon{font-size:3rem;margin-bottom:.85rem;line-height:1;}
  .mh-empty-title{font-size:1.2rem;font-weight:600;margin-bottom:.4rem;}
  .mh-empty-sub{
    color:var(--text3);
    font-size:.9rem;
    margin-bottom:1.4rem;
    line-height:1.45;
    max-width:280px;
    margin-left:auto;margin-right:auto;
  }
  .mh-empty-cta{
    background:var(--accent);
    color:#fff;
    border:none;
    padding:.85rem 1.5rem;
    border-radius:12px;
    font-size:.98rem;
    font-weight:500;
    cursor:pointer;
    font-family:var(--ui);
  }
  .mh-empty-cta:active{transform:scale(.97);}
}

/* ============================================================
   MOBILE JOBS + INVENTORY (v5.52.0+) — Phase 2 of mobile UX
   Desktop layouts above (.aj-shell/.jt-row/.aj-card, .inv-scroll/
   .inv-item/.inv-list-row, etc.) are preserved as-is. Mobile
   branches in renderAllJobsGrid() and renderInventoryView() write
   completely different markup (.mj-* and .mi-* classes) so the
   rules below can't bleed into desktop rendering.
   ============================================================ */
@media (max-width:700px){

  /* Desktop-only chrome inside the inventory page-head primary row
     gets the .inv-desk-only class on the static HTML so we can hide
     it on mobile without complex selectors. */
  .inv-desk-only{display:none !important;}

  /* Inventory page-head primary row: reflow so title+count sit on
     the first line, search drops to its own full-width row. */
  .inv-head .page-head-row.primary{
    flex-wrap:wrap;
    gap:.5rem .65rem;
    padding:.7rem .9rem .55rem;
  }
  .inv-head .page-head-spacer{display:none;}
  .inv-head .search-wrap{
    flex-basis:100%;
    order:99; /* drop to a new row */
  }
  .inv-head .search-wrap .aj-search{width:100%;}
  .inv-head .btn.btn-accent.btn-sm{
    /* The static "+ Add Item" button is hidden on mobile —
       replaced by the bigger .mi-actions row injected into
       #inv-summary by renderMobileInventory(). */
    display:none;
  }
  /* Category chips: horizontal scroller on mobile so a long list
     doesn't force a wrap. Hides the scrollbar. */
  .inv-cat-chips{
    flex-wrap:nowrap !important;
    overflow-x:auto;
    padding:.4rem .9rem .55rem;
    scrollbar-width:none;
    gap:.4rem;
    /* (b708) Stick to the top of the scrolling #view-inventory so
       category/OUT filtering stays one thumb away while the list
       scrolls. Opaque bg so rows slide underneath cleanly. */
    position:sticky;top:0;z-index:5;
    background:var(--bg);
  }
  .inv-cat-chips::-webkit-scrollbar{display:none;}
  .inv-cat-chip{flex-shrink:0;}


  /* ── MOBILE JOBS (.mj-*) ───────────────────────────────── */

  .mj-shell{
    padding:.85rem .85rem 1.25rem;
    display:flex;flex-direction:column;gap:.85rem;
  }

  .mj-head{
    display:flex;flex-direction:column;gap:.6rem;
  }
  .mj-head-row{
    display:flex;align-items:baseline;gap:.6rem;
    padding:0 .15rem;
  }
  .mj-title{
    font-size:1.55rem;font-weight:600;
    letter-spacing:-.022em;line-height:1.15;
  }
  .mj-count{
    font-size:.78rem;color:var(--text3);
    font-weight:500;
  }

  .mj-search-row{
    position:relative;display:flex;align-items:center;
  }
  .mj-search{
    width:100%;
    padding:.7rem .85rem .7rem 2.4rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:11px;
    color:var(--text);
    font-family:var(--ui);
    font-size:.95rem;
    transition:border-color .12s;
    -webkit-appearance:none;
  }
  .mj-search:focus{
    outline:none;
    border-color:var(--accent);
  }
  .mj-search-row::before{
    content:"🔍";
    position:absolute;left:.85rem;top:50%;
    transform:translateY(-50%);
    font-size:.95rem;
    opacity:.7;
    pointer-events:none;
  }
  .mj-search-clear{
    position:absolute;right:.4rem;top:50%;
    transform:translateY(-50%);
    background:var(--surface2);
    border:none;
    width:30px;height:30px;
    border-radius:50%;
    color:var(--text3);
    cursor:pointer;
    font-size:.95rem;
    display:flex;align-items:center;justify-content:center;
  }
  .mj-search-clear:active{background:var(--surface3);}

  .mj-actions-row{
    display:flex;gap:.55rem;align-items:stretch;
  }
  .mj-new-btn{
    flex:1;
    background:var(--accent);
    color:#fff;border:none;
    padding:.7rem 1rem;
    border-radius:11px;
    font-family:var(--ui);
    font-size:.95rem;font-weight:500;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    gap:.35rem;
    -webkit-tap-highlight-color:transparent;
  }
  .mj-new-btn:active{transform:scale(.97);}
  .mj-new-icon{font-size:1.1rem;line-height:1;}
  .mj-arch-toggle{
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text3);
    padding:.7rem 1rem;
    border-radius:11px;
    font-family:var(--ui);
    font-size:.85rem;font-weight:500;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    white-space:nowrap;
  }
  .mj-arch-toggle.on{
    background:var(--surface2);
    color:var(--text);
    border-color:var(--border2);
  }
  .mj-arch-toggle:active{transform:scale(.97);}

  /* List */
  .mj-list{
    display:flex;flex-direction:column;gap:.6rem;
  }

  /* Phase section header (lifecycle bucket) — mirrors the desktop
     table's phase groups so the phone shows the same Plan → Schedule
     → Gear → Shoot → Wrap pipeline. */
  .mj-phase-head{
    display:flex;align-items:center;gap:.5rem;
    margin:1.15rem .15rem .55rem;
  }
  #mj-body > .mj-phase-head:first-child{ margin-top:.35rem; }
  .mj-phase-dot{
    width:.5rem;height:.5rem;border-radius:50%;
    background:var(--text3);flex-shrink:0;
  }
  .mj-phase-label{
    font-size:.72rem;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;color:var(--text2);
  }
  .mj-phase-count{
    font-size:.68rem;font-weight:700;color:var(--text3);
    background:var(--surface2);border:1px solid var(--border);
    border-radius:5px;padding:.05rem .4rem;
    font-variant-numeric:tabular-nums;
  }
  .mj-phase-dot-plan    { background:var(--text3);opacity:.7; }
  .mj-phase-dot-schedule{ background:var(--accent);opacity:.55; }
  .mj-phase-dot-gear    { background:var(--amber); }
  .mj-phase-dot-shoot   { background:var(--accent); }
  .mj-phase-dot-wrap    { background:var(--green);opacity:.75; }
  .mj-phase-dot-archived{ background:var(--text3);opacity:.4; }

  /* Card */
  .mj-card{
    position:relative;
    display:flex;
    align-items:stretch;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:13px;
    overflow:hidden;
    cursor:pointer;
    transition:transform .1s, background .12s;
    -webkit-tap-highlight-color:transparent;
  }
  .mj-card:active{transform:scale(.99);background:var(--surface2);}
  .mj-card.archived{opacity:.65;}

  .mj-card-accent{
    width:6px;flex-shrink:0;
    background:var(--border2);
  }
  .mj-card.live     .mj-card-accent{background:var(--red,#dc4242);}
  .mj-card.overdue  .mj-card-accent{background:var(--red,#dc4242);}
  .mj-card.soon     .mj-card-accent{background:var(--orange,#e89a2c);}
  .mj-card.future   .mj-card-accent{background:var(--green,#5bbb6a);}
  .mj-card.archived .mj-card-accent{background:var(--border2);}

  .mj-card-body{
    flex:1;min-width:0;
    padding:.75rem .85rem .7rem;
  }
  .mj-card-top{
    display:flex;align-items:center;gap:.4rem;
    margin-bottom:.2rem;
  }
  .mj-card-status{
    font-size:.65rem;font-weight:700;
    letter-spacing:.07em;
    padding:.18rem .42rem;
    border-radius:5px;
    color:var(--text3);
    background:var(--surface2);
    line-height:1.2;
  }
  .mj-card-status.live{background:var(--red,#dc4242);color:#fff;}
  .mj-card-status.overdue{background:rgba(220,60,60,.18);color:var(--red,#dc4242);}
  .mj-card-status.soon{background:rgba(220,150,40,.18);color:var(--orange,#e89a2c);}
  .mj-card-status.future{background:rgba(60,180,90,.18);color:var(--green,#5bbb6a);}
  .mj-card-status.archived{background:var(--surface2);color:var(--text3);}
  .mj-card-out{
    margin-left:auto;
    font-size:.65rem;font-weight:700;
    letter-spacing:.06em;
    padding:.18rem .42rem;
    border-radius:5px;
    background:rgba(220,60,60,.14);
    color:var(--red,#dc4242);
  }
  .mj-card-name{
    font-size:1.05rem;font-weight:600;
    line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;
    padding-right:1.3rem; /* room for arrow */
  }
  .mj-card-sub{
    font-size:.8rem;color:var(--text3);
    margin-top:.08rem;
    overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mj-card-foot{
    display:flex;justify-content:space-between;align-items:center;
    gap:.5rem;
    margin-top:.55rem;
    font-size:.78rem;color:var(--text3);
  }
  .mj-card-foot-date{
    overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;min-width:0;
  }
  .mj-card-foot-faint{opacity:.7;}
  .mj-card-foot-days{
    flex-shrink:0;
    font-variant-numeric:tabular-nums;
  }
  .mj-card-arrow{
    position:absolute;right:.8rem;top:50%;
    transform:translateY(-50%);
    font-size:1.4rem;color:var(--text3);
    opacity:.5;
    line-height:1;
  }

  .mj-empty{
    padding:2.25rem 1rem 1.5rem;
    text-align:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
  }
  .mj-empty-icon{font-size:2.5rem;margin-bottom:.6rem;line-height:1;}
  .mj-empty-title{font-size:1.05rem;font-weight:600;margin-bottom:.35rem;}
  .mj-empty-sub{
    color:var(--text3);font-size:.88rem;
    margin-bottom:1.1rem;line-height:1.4;
    max-width:260px;margin-left:auto;margin-right:auto;
  }


  /* ── MOBILE INVENTORY (.mi-*) ──────────────────────────── */

  /* Action row (Add + Scan) injected into #inv-summary on mobile.
     The desktop stats strip is replaced by this on phones. */
  .inv-summary{
    /* Clear desktop padding/gap, .mi-actions provides its own. */
    padding:.5rem .85rem .55rem !important;
    gap:0 !important;
    background:transparent !important;
    border-bottom:none !important;
    flex-wrap:nowrap !important;
  }
  .mi-actions{
    display:flex;gap:.55rem;width:100%;
  }
  .mi-action{
    flex:1;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    padding:.7rem .85rem;
    border-radius:11px;
    font-family:var(--ui);
    font-size:.93rem;font-weight:500;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    gap:.4rem;
    -webkit-tap-highlight-color:transparent;
  }
  .mi-action:active{transform:scale(.97);background:var(--surface2);}
  .mi-action-primary{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }
  .mi-action-primary:active{background:var(--accent);filter:brightness(1.1);}
  .mi-action-icon{font-size:1.1rem;line-height:1;}

  /* Override the existing .inv-scroll 1-col grid (line 6208) with
     a flex list so my row layout works cleanly. */
  .inv-scroll.mi-list{
    display:flex !important;
    flex-direction:column !important;
    gap:.5rem !important;
    padding:0 .85rem .5rem !important;
  }

  .mi-rows{display:flex;flex-direction:column;gap:.5rem;}

  .mi-row{
    position:relative;
    display:flex;align-items:stretch;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    transition:transform .1s, background .12s;
    -webkit-tap-highlight-color:transparent;
  }
  .mi-row:active{transform:scale(.99);background:var(--surface2);}
  .mi-row-stripe{
    width:5px;flex-shrink:0;
  }
  .mi-row-body{
    flex:1;min-width:0;
    padding:.65rem .85rem;
  }
  .mi-row-top{
    display:flex;align-items:baseline;gap:.5rem;
    margin-bottom:.25rem;
  }
  .mi-row-name{
    flex:0 1 auto;min-width:0;
    font-size:.95rem;font-weight:500;
    line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mi-row-val{
    flex-shrink:0;
    font-size:.85rem;font-weight:600;
    color:var(--text);
    font-variant-numeric:tabular-nums;
    padding-right:1.1rem; /* room for arrow */
  }
  .mi-row-meta{
    display:flex;align-items:center;gap:.4rem;
    flex-wrap:wrap;
    line-height:1.2;
  }
  .mi-row-id{
    font-size:.7rem;
    font-family:var(--mono,ui-monospace,monospace);
    background:var(--surface2);
    color:var(--text3);
    padding:.12rem .42rem;
    border-radius:4px;
    letter-spacing:.02em;
  }
  .mi-row-qty{
    font-size:.72rem;color:var(--text3);
    font-weight:500;
    font-variant-numeric:tabular-nums;
  }
  .mi-row-out{
    font-size:.65rem;font-weight:700;
    letter-spacing:.06em;
    padding:.15rem .4rem;
    border-radius:4px;
    background:rgba(220,60,60,.15);
    color:var(--red,#dc4242);
  }
  /* BOOKED badge (b115+) — mobile sibling to .inv-item-booked-badge.
     Cool-blue to distinguish from OUT (red on mobile, amber on
     desktop). Same shape and sizing as the OUT/COND chips on this
     row so the meta strip reads as a uniform pill set. */
  .mi-row-booked{
    font-size:.65rem;font-weight:700;
    letter-spacing:.06em;
    padding:.15rem .4rem;
    border-radius:4px;
    background:rgba(100,140,255,.15);
    color:#7090e8;
    white-space:nowrap;
  }
  .mi-row-cond{
    font-size:.65rem;font-weight:700;
    letter-spacing:.05em;
    padding:.15rem .4rem;
    border-radius:4px;
    background:rgba(220,150,40,.15);
    color:var(--orange,#e89a2c);
  }
  .mi-row-cond-Damaged{
    background:rgba(220,60,60,.15);
    color:var(--red,#dc4242);
  }
  .mi-row-arrow{
    position:absolute;right:.7rem;top:50%;
    transform:translateY(-50%);
    font-size:1.3rem;color:var(--text3);
    opacity:.5;line-height:1;
  }

  .mi-empty{
    padding:2.5rem 1rem;text-align:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    margin:0 .85rem;
  }
  .mi-empty-icon{font-size:2.6rem;margin-bottom:.6rem;line-height:1;}
  .mi-empty-title{font-size:1.05rem;font-weight:600;margin-bottom:.35rem;}
  .mi-empty-sub{color:var(--text3);font-size:.85rem;line-height:1.4;}
}

/* ============================================================
   MOBILE CALENDAR + TRUCK (v5.56.0+) — Phase 3 of mobile UX
   Desktop calendar (.cal-*, .week-*, .month-*, .year-*) and the
   desktop truck picker (.truck-picker-*) are preserved as-is.
   Mobile renderers branch in renderCalendarView / renderTruck-
   Picker and write completely different markup (.mc-*, .mtp-*).
   Truck *session* keeps its existing markup — we just add a
   sticky-header CSS treatment + a quick filter input shown for
   loads of 15+ items.
   ============================================================ */
@media (max-width:700px){

  /* ── MOBILE CALENDAR (.mc-*) ────────────────────────────── */
  .mc-shell{
    padding:.85rem .85rem 1.25rem;
    display:flex;flex-direction:column;gap:.85rem;
  }
  .mc-head{
    display:flex;flex-direction:column;gap:.55rem;
  }
  .mc-head-row{padding:0 .15rem;}
  .mc-title{
    font-size:1.55rem;font-weight:600;
    letter-spacing:-.022em;line-height:1.15;
  }
  .mc-tabs{
    display:flex;background:var(--surface);
    border:1px solid var(--border);
    border-radius:11px;padding:.18rem;
    gap:.18rem;
  }
  .mc-tab{
    flex:1;border:none;
    background:transparent;color:var(--text3);
    padding:.55rem .8rem;
    border-radius:9px;
    font-family:var(--ui);font-size:.88rem;font-weight:500;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mc-tab.active{
    background:var(--accent);color:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
  }
  .mc-nav{
    display:flex;align-items:center;gap:.4rem;
  }
  .mc-nav-btn{
    width:44px;height:38px;
    border:1px solid var(--border);
    background:var(--surface);color:var(--text);
    border-radius:9px;
    font-size:1.3rem;line-height:1;
    cursor:pointer;
    font-family:var(--ui);
    -webkit-tap-highlight-color:transparent;
    flex-shrink:0;
  }
  .mc-nav-btn:active{transform:scale(.96);background:var(--surface2);}
  .mc-nav-today{
    flex:1;
    border:1px solid var(--border);
    background:var(--surface);color:var(--text);
    border-radius:9px;
    height:38px;
    font-family:var(--ui);font-size:.88rem;font-weight:500;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mc-nav-today:active{transform:scale(.98);background:var(--surface2);}

  /* Week label ("May 12 – May 18") */
  .mc-week-label,
  .mc-month-label{
    font-size:.78rem;font-weight:600;
    color:var(--text3);
    text-transform:uppercase;letter-spacing:.07em;
    padding:0 .15rem;
    margin-top:-.2rem;
  }

  /* Week agenda */
  .mc-week{
    display:flex;flex-direction:column;
    gap:.55rem;
  }
  .mc-day{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
  }
  .mc-day.is-today{
    border-color:rgba(52,120,246,.55);
    box-shadow:0 0 0 1px rgba(52,120,246,.25);
  }
  .mc-day.is-past:not(.is-today){opacity:.7;}
  .mc-day.empty .mc-day-head{
    color:var(--text3);
    padding:.55rem .85rem;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mc-day.empty .mc-day-head:active{background:var(--surface2);}
  .mc-day.has-events .mc-day-head{
    padding:.55rem .85rem .25rem;
  }
  .mc-day-head{
    display:flex;align-items:center;gap:.5rem;
    font-size:.8rem;font-weight:600;
    line-height:1.2;
    color:var(--text3);
  }
  .mc-day-name{
    font-size:.85rem;
    color:var(--text);
    letter-spacing:.01em;
  }
  .mc-day.is-today .mc-day-name{color:var(--accent);}
  .mc-day-today-pill{
    font-size:.62rem;font-weight:700;
    letter-spacing:.08em;
    padding:.12rem .42rem;
    background:var(--accent);color:#fff;
    border-radius:4px;
  }
  .mc-day-empty{
    margin-left:auto;
    font-weight:400;
    font-size:.78rem;
    opacity:.7;
  }
  /* (b692) Day sheet variant — chips render inside the modal, so
     drop the agenda's horizontal inset (the modal has its own
     padding) and give rows a touch more breathing room. */
  .mc-day-events.mc-day-events-sheet{
    padding:.1rem 0 .2rem;
    gap:.4rem;
  }
  .mc-day-events{
    display:flex;flex-direction:column;
    gap:.3rem;
    padding:.2rem .55rem .55rem;
  }

  /* Day chips (events) */
  .mc-chip{
    position:relative;
    display:flex;align-items:center;gap:.55rem;
    padding:.55rem .65rem;
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:9px;
    cursor:pointer;
    transition:transform .1s, background .12s;
    -webkit-tap-highlight-color:transparent;
  }
  .mc-chip:active{transform:scale(.985);background:var(--surface3,var(--surface2));}
  .mc-chip-shoot   { border-left:3px solid var(--cal-shoot,#3d8ef0); }
  .mc-chip-prep    { border-left:3px solid var(--cal-prep,#20b8a0); }
  .mc-chip-wrap    { border-left:3px solid var(--cal-wrap,#9060d8); }
  .mc-chip-travel  { border-left:3px solid var(--cal-travel,#e05848); }
  .mc-chip-post    { border-left:3px solid var(--cal-post,#4a7de8); }
  .mc-chip-hold    { border-left:3px solid #d97706; }
  .mc-chip-blackout{ border-left:3px solid #dc2626; }
  .mc-chip-event   { border-left:3px solid #0891b2; }
  .mc-chip-external{ border-left:3px dashed var(--cf-color,#8b5cf6); }
  .mc-chip-pending { border-left:3px solid rgba(240,160,32,.85); }
  .mc-chip-approved{ border-left:3px solid var(--green,#5bbb6a); }
  .mc-chip-icon{
    font-size:1.05rem;line-height:1;
    width:24px;text-align:center;
    flex-shrink:0;
  }
  .mc-chip-body{
    flex:1;min-width:0;
  }
  .mc-chip-title{
    font-size:.88rem;font-weight:500;
    line-height:1.2;
    overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mc-chip-sub{
    font-size:.74rem;color:var(--text3);
    margin-top:.1rem;
    overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mc-chip-out{
    flex-shrink:0;
    font-size:.62rem;font-weight:700;
    letter-spacing:.05em;
    padding:.14rem .38rem;
    border-radius:4px;
    background:rgba(220,60,60,.15);
    color:var(--red,#dc4242);
  }
  .mc-chip-arrow{
    font-size:1.1rem;color:var(--text3);
    opacity:.5;line-height:1;
    flex-shrink:0;
  }

  /* Month heatmap */
  .mc-month-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:.25rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:.45rem;
  }
  .mc-month-dow{
    font-size:.65rem;font-weight:700;
    letter-spacing:.07em;
    color:var(--text3);
    text-align:center;
    padding:.2rem 0 .35rem;
  }
  .mc-month-cell{
    aspect-ratio:1;
    display:flex;flex-direction:column;
    align-items:center;justify-content:flex-start;
    gap:.18rem;
    padding:.3rem .15rem .25rem;
    border-radius:8px;
    background:transparent;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .12s;
  }
  .mc-month-cell:active{background:var(--surface2);}
  .mc-month-cell.is-other{opacity:.35;}
  .mc-month-cell.is-today{
    background:var(--accent);
  }
  .mc-month-cell.is-today .mc-month-num{color:#fff;}
  .mc-month-cell.has-events:not(.is-today){
    background:var(--surface2);
  }
  .mc-month-num{
    font-size:.85rem;font-weight:500;
    color:var(--text);
    line-height:1.1;
  }
  .mc-month-dots{
    display:flex;gap:.18rem;
    margin-top:.1rem;
  }
  .mc-dot{
    width:5px;height:5px;border-radius:50%;
    flex-shrink:0;
    display:inline-block;
  }
  .mc-month-cell.is-today .mc-dot{
    /* Keep the dots visible against the accent background */
    box-shadow:0 0 0 1px rgba(255,255,255,.5);
  }
  .mc-dot-shoot { background:var(--cal-shoot,#3d8ef0); }
  .mc-dot-prep  { background:var(--cal-prep,#20b8a0); }
  .mc-dot-wrap  { background:var(--cal-wrap,#9060d8); }
  .mc-dot-travel{ background:var(--cal-travel,#e05848); }
  .mc-dot-post  { background:var(--cal-post,#4a7de8); }
  .mc-dot-hold  { background:#d97706; }
  .mc-dot-blackout{ background:#dc2626; }
  .mc-dot-event { background:#0891b2; }
  .mc-dot-external{ background:#8b5cf6; }
  .mc-dot-borrow{ background:var(--green,#5bbb6a); }

  .mc-legend{
    display:flex;flex-wrap:wrap;gap:.5rem .85rem;
    font-size:.7rem;color:var(--text3);
    padding:0 .15rem;
  }
  .mc-legend-item{
    display:inline-flex;align-items:center;gap:.3rem;
  }


  /* ── MOBILE TRUCK PICKER (.mtp-*) ───────────────────────── */
  .mtp-shell{
    padding:.85rem .85rem 1.25rem;
    display:flex;flex-direction:column;gap:.65rem;
  }
  .mtp-head{
    padding:0 .15rem .15rem;
  }
  .mtp-title{
    font-size:1.55rem;font-weight:600;
    letter-spacing:-.022em;line-height:1.15;
  }
  .mtp-sub{
    font-size:.85rem;color:var(--text3);
    margin-top:.15rem;
  }
  .mtp-sec-head{
    font-size:.7rem;font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text3);
    margin-top:.55rem;
    padding:0 .15rem .1rem;
  }
  .mtp-sec-overdue{color:var(--red,#dc4242);}
  .mtp-sec-today  {color:var(--accent);}
  .mtp-list{
    display:flex;flex-direction:column;gap:.55rem;
  }
  .mtp-card{
    position:relative;
    display:flex;align-items:stretch;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:13px;
    overflow:hidden;
    cursor:pointer;
    transition:transform .1s, background .12s;
    -webkit-tap-highlight-color:transparent;
  }
  .mtp-card:active{transform:scale(.99);background:var(--surface2);}
  .mtp-card-accent{
    width:6px;flex-shrink:0;
    background:var(--border2);
  }
  .mtp-card.live    .mtp-card-accent{background:var(--red,#dc4242);}
  .mtp-card.overdue .mtp-card-accent{background:var(--red,#dc4242);}
  .mtp-card.soon    .mtp-card-accent{background:var(--orange,#e89a2c);}
  .mtp-card.future  .mtp-card-accent{background:var(--green,#5bbb6a);}
  .mtp-card-datebox{
    flex-shrink:0;
    width:62px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:.55rem .3rem;
    border-right:1px solid var(--border);
    background:var(--surface2);
  }
  .mtp-card-dow{
    font-size:.6rem;font-weight:700;
    letter-spacing:.08em;
    color:var(--text3);
    line-height:1.2;
  }
  .mtp-card-day{
    font-size:1.55rem;font-weight:700;
    line-height:1.05;
    color:var(--text);
    font-variant-numeric:tabular-nums;
  }
  .mtp-card-mo{
    font-size:.62rem;font-weight:600;
    letter-spacing:.08em;
    color:var(--text3);
    line-height:1.2;
  }
  .mtp-card.live .mtp-card-day,
  .mtp-card.overdue .mtp-card-day{color:var(--red,#dc4242);}
  .mtp-card-body{
    flex:1;min-width:0;
    padding:.6rem .85rem;
  }
  .mtp-card-top{
    display:flex;align-items:center;gap:.4rem;
    margin-bottom:.2rem;
  }
  .mtp-card-status{
    font-size:.62rem;font-weight:700;
    letter-spacing:.07em;
    padding:.16rem .4rem;
    border-radius:5px;
    color:var(--text3);
    background:var(--surface2);
    line-height:1.2;
  }
  .mtp-card-status.live    { background:var(--red,#dc4242); color:#fff; }
  .mtp-card-status.overdue { background:rgba(220,60,60,.18); color:var(--red,#dc4242); }
  .mtp-card-status.soon    { background:rgba(220,150,40,.18); color:var(--orange,#e89a2c); }
  .mtp-card-status.future  { background:rgba(60,180,90,.18); color:var(--green,#5bbb6a); }
  .mtp-card-out{
    margin-left:auto;
    font-size:.62rem;font-weight:700;
    letter-spacing:.05em;
    padding:.14rem .38rem;
    border-radius:4px;
    background:rgba(220,60,60,.14);
    color:var(--red,#dc4242);
  }
  .mtp-card-title{
    font-size:1rem;font-weight:600;
    line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;
    padding-right:1.2rem; /* arrow */
  }
  .mtp-card-sub{
    font-size:.83rem;color:var(--text);
    margin-top:.08rem;
    overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;
    padding-right:1.2rem;
  }
  .mtp-card-foot{
    font-size:.74rem;color:var(--text3);
    margin-top:.25rem;
    overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mtp-card-arrow{
    position:absolute;right:.75rem;top:50%;
    transform:translateY(-50%);
    font-size:1.35rem;color:var(--text3);
    opacity:.5;line-height:1;
  }

  .mtp-empty{
    padding:2.5rem 1rem 1.5rem;
    text-align:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    margin-top:.55rem;
  }
  .mtp-empty-icon{font-size:2.6rem;margin-bottom:.55rem;line-height:1;}
  .mtp-empty-title{font-size:1.05rem;font-weight:600;margin-bottom:.3rem;}
  .mtp-empty-sub{color:var(--text3);font-size:.88rem;line-height:1.4;}


  /* ── TRUCK SESSION (sticky header + filter) ────────────── */
  /* The wrapper makes the header, mode toggle, progress bar,
     done banner, and optional filter all stick together at the
     top of the viewport as the user scrolls through a long load
     list. Done banner stays in flow when not active so we don't
     burn vertical real estate. */
  .truck-sticky{
    /* Override the display:contents desktop default — sticky
       needs a real block box to position against. */
    display:block;
    position:sticky;
    top:0;
    z-index:8;
    background:var(--bg);
    /* Subtle separator from the scrolling content below */
    box-shadow:0 1px 0 var(--border);
  }
  /* On mobile we let the natural page-scroll handle the gear list
     rather than the nested-overflow desktop pattern — sticky only
     works when the sticky element and its sibling share a scroll
     container (the app body in this case). */
  #view-truck .truck-view{
    height:auto;
    overflow:visible;
  }
  #view-truck .truck-gear-list{
    flex:none;
    overflow:visible;
  }
  /* Bigger checkboxes — Apple HIG min is 44pt. The desktop
     .truck-check is ~36px; bump to 44 on mobile. */
  .truck-check{
    min-width:44px !important;
    min-height:44px !important;
  }
  /* Quick filter — only rendered when total >= 15. */
  .truck-filter-row{
    display:block;   /* override desktop's hide */
    position:relative;
    padding:.4rem .75rem .55rem;
    background:var(--bg);
    border-top:1px solid var(--border);
  }
  .truck-filter{
    width:100%;
    padding:.55rem .85rem .55rem 2.3rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--text);
    font-family:var(--ui);
    font-size:.9rem;
    -webkit-appearance:none;
  }
  .truck-filter:focus{
    outline:none;
    border-color:var(--accent);
  }
  .truck-filter-row::before{
    content:"🔍";
    position:absolute;left:1.05rem;top:50%;
    transform:translateY(-50%);
    font-size:.9rem;
    opacity:.7;
    pointer-events:none;
  }
  .truck-filter-clear{
    position:absolute;right:1rem;top:50%;
    transform:translateY(-50%);
    background:var(--surface2);
    border:none;
    width:28px;height:28px;
    border-radius:50%;
    color:var(--text3);
    cursor:pointer;
    font-size:.85rem;
    display:flex;align-items:center;justify-content:center;
  }
  .truck-filter-clear:active{background:var(--surface3,var(--surface2));}
}

/* ── CHAT DRAWER (v5.60.0+) ─────────────────────────────────────
   Right-side slide-in panel for the in-app AI assistant. Backdrop
   sits behind it on mobile; on desktop the backdrop is transparent
   and just intercepts clicks-outside. The drawer transitions on
   transform so opening feels snappy. */
.chat-drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:400px; max-width:100vw;
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:-8px 0 28px rgba(0,0,0,.25);
  z-index:9000;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .22s ease-out;
  font-family:var(--font);
}
.chat-drawer.open{ transform:translateX(0); }
.chat-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.18);
  z-index:8999;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.chat-drawer-header{
  display:flex; align-items:center; gap:.5rem;
  padding:.8rem 1rem .55rem;
  border-bottom:1px solid var(--border);
}
.chat-drawer-title{
  flex:1;
  font-size:1rem; font-weight:600; color:var(--text);
  display:flex; align-items:center; gap:.4rem;
}
.chat-drawer-icon-btn{
  background:none; border:none; cursor:pointer;
  color:var(--text3); font-size:.95rem;
  padding:.3rem .5rem; border-radius:6px;
  transition:background .12s, color .12s;
}
.chat-drawer-icon-btn:hover{ background:var(--surface2); color:var(--text); }
.chat-drawer-disclosure{
  padding:.5rem 1rem;
  font-size:.7rem; color:var(--text3);
  border-bottom:1px solid var(--border);
  background:var(--bg);
  line-height:1.4;
}
.chat-messages{
  flex:1; overflow-y:auto;
  padding:.9rem 1rem;
  display:flex; flex-direction:column; gap:.65rem;
  scroll-behavior:smooth;
}
/* ── Empty state ── */
.chat-empty{
  margin:auto 0;
  padding:1rem .3rem;
  display:flex; flex-direction:column; gap:.65rem;
}
.chat-empty-title{
  font-size:1rem; font-weight:600; color:var(--text);
}
.chat-empty-sub{
  font-size:.82rem; color:var(--text3); line-height:1.4;
}
.chat-examples{
  display:flex; flex-direction:column; gap:.4rem; margin-top:.3rem;
}
.chat-example{
  text-align:left;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text2);
  padding:.55rem .7rem;
  font:inherit; font-size:.82rem;
  border-radius:8px;
  cursor:pointer;
  line-height:1.35;
  transition:background .12s, border-color .12s, color .12s;
}
.chat-example:hover{
  background:var(--accent-dim);
  border-color:var(--accent);
  color:var(--text);
}
/* ── Bubbles ── */
.chat-bubble{
  max-width:88%;
  padding:.55rem .8rem;
  border-radius:14px;
  font-size:.88rem; line-height:1.45;
  word-wrap:break-word;
}
.chat-bubble.chat-user{
  align-self:flex-end;
  background:var(--accent-dim);
  color:var(--text);
  border:1px solid var(--accent);
  border-bottom-right-radius:4px;
}
.chat-bubble.chat-assistant{
  align-self:flex-start;
  background:var(--surface2);
  color:var(--text);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;
}
.chat-bubble-text p{ margin:.25rem 0; }
.chat-bubble-text p:first-child{ margin-top:0; }
.chat-bubble-text p:last-child{ margin-bottom:0; }
.chat-bubble-text ul{ margin:.3rem 0 .3rem 1.2rem; padding:0; }
.chat-bubble-text li{ margin:.12rem 0; }
.chat-bubble-text strong{ color:var(--text); }
/* ── Tool-call audit chips ── */
.chat-toolcalls{
  display:flex; flex-wrap:wrap; gap:.3rem;
  margin-top:.5rem;
  padding-top:.4rem;
  border-top:1px dashed var(--border);
}
.chat-toolchip{
  font-size:.65rem;
  color:var(--text3);
  padding:.12rem .45rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  font-family:var(--mono);
}
.chat-toolchip-sum{ opacity:.75; }
/* ── Thinking indicator ── */
.chat-thinking{
  display:flex; align-items:center; gap:.5rem;
  color:var(--text3); font-size:.82rem;
}
.chat-thinking-dots{ display:inline-flex; gap:3px; }
.chat-thinking-dots span{
  width:6px; height:6px; border-radius:50%;
  background:var(--text3);
  animation:chat-dot 1.2s infinite ease-in-out;
}
.chat-thinking-dots span:nth-child(2){ animation-delay:.18s; }
.chat-thinking-dots span:nth-child(3){ animation-delay:.36s; }
@keyframes chat-dot{
  0%,80%,100%{ opacity:.3; transform:scale(.8); }
  40%{ opacity:1; transform:scale(1); }
}
/* ── Input ── */
.chat-input-wrap{
  display:flex; gap:.5rem; align-items:flex-end;
  padding:.7rem .85rem .85rem;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.chat-input{
  flex:1;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font:inherit; font-size:.88rem;
  padding:.55rem .7rem;
  resize:none;
  min-height:38px; max-height:140px;
  line-height:1.4;
  font-family:inherit;
}
.chat-input:focus{ outline:none; border-color:var(--accent); }
.chat-send-btn{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-size:1rem;
  padding:0 .9rem;
  height:38px;
  transition:opacity .15s, background .15s;
}
.chat-send-btn:hover{ background:var(--accent); opacity:.9; }
.chat-drawer.busy .chat-send-btn{
  opacity:.4; pointer-events:none;
}
.chat-drawer.busy .chat-input{
  opacity:.6;
}
/* ── Mobile: full-screen drawer ── */
@media (max-width:700px){
  .chat-drawer{
    width:100vw; border-left:none;
    box-shadow:none;
  }
  .chat-bubble{ max-width:92%; font-size:.92rem; }
}

/* ── Chat: errored bubble + Retry button (v5.60.1+) ── */
.chat-bubble.chat-errored{
  background:rgba(220,80,80,.06);
  border-color:rgba(220,80,80,.35);
}
.chat-bubble.chat-errored .chat-bubble-text{ color:var(--text2); }
.chat-error-actions{
  margin-top:.45rem;
  padding-top:.4rem;
  border-top:1px dashed rgba(220,80,80,.25);
  display:flex; gap:.4rem;
}

/* ── Chat: fallback disclosure note (v5.60.4+) ──
   Shown when an answer was produced by the Haiku fallback because
   Sonnet was overloaded. Soft amber band — informational, not
   alarming. */
.chat-fallback-note{
  margin-top:.5rem;
  padding:.4rem .6rem;
  font-size:.7rem;
  color:#c97509;
  background:rgba(245,166,35,.08);
  border:1px solid rgba(245,166,35,.3);
  border-radius:6px;
  line-height:1.4;
}

/* ── Chat: mutation confirmation cards (v5.62.0+) ──
   Used when the model proposes an action that requires user
   approval. Pending = amber Approve/Decline. Resolved states
   tint differently and lose the action buttons. */
.chat-mut-card{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  margin-top:.5rem;
  padding:.65rem .75rem;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg);
  font-size:.85rem;
  line-height:1.4;
}
.chat-mut-card.busy{ opacity:.6; pointer-events:none; }
.chat-mut-icon{
  font-size:1.1rem;
  line-height:1.2;
  flex-shrink:0;
  width:1.4rem;
  text-align:center;
}
.chat-mut-body{ flex:1; min-width:0; }
.chat-mut-title{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text3);
  font-weight:600;
  margin-bottom:.2rem;
}
.chat-mut-summary{
  color:var(--text);
  word-wrap:break-word;
}
.chat-mut-actions{
  margin-top:.5rem;
  display:flex;
  gap:.4rem;
}
.chat-mut-actions .btn{
  font-size:.78rem;
  padding:.3rem .7rem;
}
.chat-mut-error{
  margin-top:.35rem;
  font-size:.72rem;
  color:var(--danger,#e44);
  font-family:var(--mono);
}
.chat-mut-pending{
  border-color:rgba(245,166,35,.45);
  background:rgba(245,166,35,.06);
}
.chat-mut-pending .chat-mut-title{ color:var(--accent); }
.chat-mut-done{
  border-color:rgba(80,200,120,.35);
  background:rgba(80,200,120,.06);
}
.chat-mut-done .chat-mut-icon{ color:#3a8;}
.chat-mut-done .chat-mut-title{ color:#3a8; }
.chat-mut-declined{
  border-color:var(--border);
  background:var(--surface2);
  opacity:.75;
}
.chat-mut-declined .chat-mut-title{ color:var(--text3); }
.chat-mut-failed{
  border-color:rgba(220,80,80,.45);
  background:rgba(220,80,80,.06);
}
.chat-mut-failed .chat-mut-icon,
.chat-mut-failed .chat-mut-title{ color:var(--danger,#e44); }

/* (v5.69.0+) Undone state — done card after the user hit Undo
   within the 5-minute window. Strikes through the lines so it's
   visually clear the action was reversed. */
.chat-mut-undone{
  border-color:var(--border);
  background:var(--surface2);
  opacity:.8;
}
.chat-mut-undone .chat-mut-title{ color:var(--text3); }
.chat-mut-undone .chat-mut-icon{ color:var(--text3); }
.chat-mut-undone .chat-mut-summary,
.chat-mut-undone .chat-mut-line-value{
  text-decoration:line-through;
  color:var(--text3);
}

/* Head row pairs the title with an optional inline action (currently
   just the Undo button on done cards). */
.chat-mut-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.15rem;
}
.chat-mut-head .chat-mut-title{ margin-bottom:0; }
.chat-mut-undo{
  font-size:.7rem !important;
  padding:.18rem .55rem !important;
  color:var(--text2);
}

/* Structured summary block — a tight label/value grid for proposals
   like create_job whose plain one-line summary doesn't read well. */
.chat-mut-lines{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.18rem .65rem;
  margin-top:.1rem;
}
.chat-mut-line{
  display:contents; /* lets label + value sit as siblings in the grid */
}
.chat-mut-line-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text3);
  font-weight:600;
  align-self:start;
  padding-top:.04rem;
}
.chat-mut-line-value{
  color:var(--text);
  word-wrap:break-word;
  min-width:0;
}

/* ── Settings → AI Activity (v5.63.0+) ───────────────────────── */
.set-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:.2rem 0;
}
.set-chip{
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text2);
  font:inherit;
  font-size:.78rem;
  padding:.3rem .65rem;
  border-radius:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  transition:all .1s;
  white-space:nowrap;
}
.set-chip:hover{
  background:var(--surface3);
  color:var(--text);
  border-color:var(--border3);
}
.set-chip.active{
  background:var(--accent-dim);
  border-color:var(--accent);
  color:var(--accent);
  font-weight:600;
}
.set-chip-n{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--text3);
  padding:.05rem .35rem;
  background:var(--bg);
  border-radius:8px;
  min-width:1.4em;
  text-align:center;
}
.set-chip.active .set-chip-n{
  background:var(--accent);
  color:#fff;
}

.ai-audit-list{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.ai-audit-row{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  padding:.55rem .7rem;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg);
  font-size:.85rem;
  line-height:1.4;
}
.ai-audit-icon{
  font-size:1.05rem;
  line-height:1.3;
  flex-shrink:0;
  width:1.4rem;
  text-align:center;
}
.ai-audit-main{ flex:1; min-width:0; }
.ai-audit-summary{
  color:var(--text);
  word-wrap:break-word;
  margin-bottom:.2rem;
}
.ai-audit-meta{
  font-size:.72rem;
  color:var(--text3);
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  align-items:center;
}
.ai-audit-meta .ai-audit-state{ color:var(--text2); }
.ai-audit-meta .ai-audit-tool{ font-family:var(--mono); }
.ai-audit-meta .ai-audit-sep{ opacity:.5; }
.ai-audit-error{
  margin-top:.35rem;
  font-size:.72rem;
  color:var(--danger,#e44);
  font-family:var(--mono);
}
.ai-audit-pending{
  border-color:rgba(245,166,35,.45);
  background:rgba(245,166,35,.05);
}
.ai-audit-pending .ai-audit-icon{ color:var(--accent); }
.ai-audit-done{
  border-color:rgba(80,200,120,.35);
  background:rgba(80,200,120,.04);
}
.ai-audit-done .ai-audit-icon{ color:#3a8; }
.ai-audit-declined{
  border-color:var(--border);
  background:var(--surface2);
  opacity:.78;
}
.ai-audit-failed{
  border-color:rgba(220,80,80,.4);
  background:rgba(220,80,80,.05);
}
.ai-audit-failed .ai-audit-icon{ color:var(--danger,#e44); }

/* ── Settings: collapsible sub-sections (v5.64.0+) ───────────────
   Used for noisy lists (expense categories, import rules) so they
   don't dominate the Expenses tab. <details>/<summary> for native
   keyboard + accessibility behaviour. */
.set-collapsible{
  /* Override default <details> arrow marker; we render our own
     rotation via the .set-group-icon area or a CSS pseudo-element. */
  list-style:none;
}
.set-collapsible > summary::-webkit-details-marker{ display:none; }
.set-collapsible > summary{
  cursor:pointer;
  /* When closed, the head shouldn't carry the bottom border that
     separates head from content — no content follows. */
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:none;
  user-select:none;
  position:relative;
}
.set-collapsible[open] > summary{
  /* Restore the head separator when content is showing. */
  margin-bottom:1rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--border);
}
/* Chevron indicator on the right side of the summary. Rotates
   when open. Sits in the spacer created by justify-content:space-between
   from the original .set-group-head. */
.set-collapsible > summary::after{
  content:'⌃';
  display:inline-block;
  margin-left:auto;
  font-size:.95rem;
  color:var(--text3);
  transform:rotate(180deg);
  transition:transform .15s ease;
  line-height:1;
}
.set-collapsible[open] > summary::after{ transform:rotate(0deg); }
.set-collapsible > summary:hover::after{ color:var(--text); }

/* Item-count badge inside the title — tells the user how many
   entries are tucked away without opening the section. */
.set-group-count{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:600;
  color:var(--text3);
  padding:.1rem .42rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  letter-spacing:0;        /* override uppercase tracking from title */
  text-transform:none;
  min-width:1.4em;
  text-align:center;
}

/* ════════════════════════════════════════════════════════════
 * ADDRESS AUTOCOMPLETE (2026.05.20+b61)
 * Floating dropdown attached to any <input data-address-autocomplete>.
 * Lives at document.body level (positioned absolutely) so it floats
 * above modals and isn't clipped by overflow:hidden parents. z-index
 * sits above the typical overlay (.overlay is z-index ~1000) so it
 * works inside the event modal too.
 * ════════════════════════════════════════════════════════════ */
.addr-ac-box{
  position:absolute;
  display:none;
  z-index:10000;        /* above .overlay */
  background:var(--surface);
  border:1px solid var(--border2,var(--border));
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  max-height:340px;
  overflow-y:auto;
  font-size:.86rem;
  /* Subtle "lift" — matches the toast / popover look */
}
.addr-ac-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem .7rem;
  cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background .08s;
}
.addr-ac-row:last-child{ border-bottom:none; }
.addr-ac-row:hover,
.addr-ac-row.active{
  background:var(--surface2);
}
.addr-ac-pin{
  font-size:.95rem;
  flex-shrink:0;
  width:1.4em;
  text-align:center;
  opacity:.7;
}
.addr-ac-text{
  flex:1;
  min-width:0;          /* let children truncate */
}
.addr-ac-head{
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.addr-ac-sub{
  font-size:.74rem;
  color:var(--text3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:.1rem;
}

@media (max-width:600px){
  /* On mobile keep the dropdown a touch larger and easier to tap. */
  .addr-ac-row    { padding:.7rem .8rem; }
  .addr-ac-head   { font-size:.92rem; }
  .addr-ac-sub    { font-size:.78rem; }
  .addr-ac-box    { max-height:60vh; }
}

/* ════════════════════════════════════════════════════════════
 * JOB-DASHBOARD EVENTS CARD (2026.05.20+b62)
 * Compact row list of events linked to a job. Same vertical
 * rhythm as the dash-activity list — small icon left, title +
 * meta center, optional km tag + chevron right.
 * ════════════════════════════════════════════════════════════ */
.dash-event-list{ padding:0; }
.dash-event-group-head{
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text3);
  padding:.55rem .85rem .25rem;
  border-top:1px solid var(--border);
}
.dash-event-list .dash-event-group-head:first-child{ border-top:none; }
.dash-event-row{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.6rem .85rem;
  border-top:1px solid var(--border);
  cursor:pointer;
  transition:background .1s;
}
.dash-event-row:hover{ background:var(--surface2); }
.dash-event-row.is-past{ opacity:.62; }
.dash-event-row.is-past:hover{ opacity:1; }
.dash-event-icon{
  font-size:1.05rem;
  width:1.5em;
  text-align:center;
  flex-shrink:0;
  opacity:.85;
}
.dash-event-body{
  flex:1;
  min-width:0;
}
.dash-event-title{
  font-weight:600;
  font-size:.88rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dash-event-meta{
  font-size:.74rem;
  color:var(--text3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:.1rem;
}
.dash-event-km{
  font-size:.72rem;
  font-family:var(--mono);
  color:#0891b2;
  background:rgba(8,145,178,.12);
  border:1px solid rgba(8,145,178,.3);
  border-radius:4px;
  padding:.12rem .42rem;
  flex-shrink:0;
}
/* (b63) Per-job km subtotal — same colour family as the per-row
   tag but slightly larger, sized to sit in the card title row
   alongside the event count chip. */
.dash-event-km-total{
  font-size:.74rem;
  font-family:var(--mono);
  color:#0891b2;
  background:rgba(8,145,178,.12);
  border:1px solid rgba(8,145,178,.3);
  border-radius:6px;
  padding:.18rem .55rem;
  margin-left:.5rem;
  white-space:nowrap;
  cursor:help;  /* tooltip-hint */
  font-weight:600;
  letter-spacing:.01em;
}
.dash-event-arrow{
  color:var(--text3);
  font-size:1.1rem;
  flex-shrink:0;
  width:.8em;
  text-align:center;
}
.dash-event-more{
  padding:.5rem .85rem;
  font-size:.78rem;
  color:var(--accent);
  border-top:1px solid var(--border);
  cursor:pointer;
  text-align:center;
}
.dash-event-more:hover{ background:var(--surface2); }

/* ════════════════════════════════════════════════════════════
 * JOB TYPEAHEAD (2026.05.20+b64)
 * Shares the .addr-ac-* dropdown shell with address autocomplete.
 * Just adds the archived-job tag and a small clear button next
 * to the input.
 * ════════════════════════════════════════════════════════════ */
.job-ta-arch{
  display:inline-block;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text3);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:3px;
  padding:.04rem .35rem;
  margin-left:.15rem;
}
.event-job-clear{
  position:absolute;
  right:.45rem;
  top:50%;
  transform:translateY(-50%);
  width:1.4rem;
  height:1.4rem;
  background:transparent;
  border:none;
  border-radius:50%;
  color:var(--text3);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .12s,color .12s;
}
.event-job-clear:hover{
  background:var(--surface2);
  color:var(--text);
}

/* ═══════════════════════════════════════════════════════════════
 *  SCOPED DASHBOARDS — Jobs / Tasks / Contacts / Expenses
 * ═══════════════════════════════════════════════════════════════
 * Shared styling for the at-a-glance dashboards. Most of the visual
 * vocabulary (KPI tiles, alert banners, section heads) is borrowed
 * from the home view via .home-kpi / .home-section / .home-alert.
 * The classes below are dashboard-specific additions only.
 */
.dash-pane{
  padding:1rem 1.4rem;
  max-width:var(--page-max);
  margin:0 auto;
  width:100%;
}
.dash-loading,
.dash-error{
  padding:2rem;
  color:var(--text3);
  text-align:center;
  font-size:.95rem;
}
.dash-error{ color:var(--red); }

/* Two-column grid for top-N pairings. Collapses to one column on
 * narrow viewports so the bars stay readable. */
.dash-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem;
  margin-bottom:1.4rem;
}
@media (max-width:900px){
  .dash-two-col{ grid-template-columns:1fr; gap:.8rem; }
}

/* Bar list — used for "top N" sections. Bars scale to the local
 * max so even small datasets stay readable. Hover state on rows
 * with an onclick handler is signalled with a subtle background. */
.dash-bars{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.dash-bar-row{
  display:grid;
  grid-template-columns:minmax(120px, 1fr) 2fr auto;
  align-items:center;
  gap:.6rem;
  padding:.3rem .15rem;
  border-radius:5px;
  transition:background .12s;
}
.dash-bar-row[style*="cursor:pointer"]:hover{ background:var(--surface); }
.dash-bar-lbl{
  font-size:.85rem;
  color:var(--text2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-bar-track{
  height:.55rem;
  background:var(--surface2);
  border-radius:99px;
  overflow:hidden;
}
.dash-bar-fill{
  height:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent2, var(--accent)));
  border-radius:99px;
  transition:width .3s ease-out;
}
.dash-bar-val{
  font-size:.85rem;
  font-family:var(--mono);
  font-weight:600;
  color:var(--text);
  text-align:right;
  white-space:nowrap;
}

/* Row list — used for "recent" / "upcoming" / "worst overdue".
 * Each row has a body (title + meta) and an optional arrow. */
.dash-list{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.dash-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .55rem;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .12s, background .12s, transform .12s;
}
.dash-row:hover{
  border-color:var(--border3);
  background:var(--surface2);
  transform:translateX(2px);
}
.dash-row-body{ flex:1; min-width:0; }
.dash-row-title{
  font-size:.9rem;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-row-meta{
  font-size:.78rem;
  color:var(--text3);
  margin-top:.1rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-row-arrow{
  color:var(--text3);
  font-size:1.1rem;
  flex-shrink:0;
}

/* ── Jobs Dashboard › "Next up" (b350) ──────────────────────────────
 * Scoped to .nextup-* so the shared .dash-row primitives above stay
 * untouched for the Tasks / Gear / Rentals dashboards.
 *
 * The panel now renders one row per JOB rather than one per shoot day,
 * so each row needs a third tier summarising the rest of the run:
 *   [Day 2 of 12]  11 days left · thru Fri Aug 21
 * Rows landing on today get an accent edge so the eye finds them first. */
.nextup-row{
  align-items:flex-start;
  padding-top:.5rem;
  padding-bottom:.5rem;
}
/* Compensate the 3px edge so today rows don't jog left of their
 * neighbours — total left inset stays .55rem either way. */
.nextup-row.is-today{
  border-left:3px solid var(--accent);
  padding-left:calc(.55rem - 2px);
  background:var(--accent-soft);
}
.nextup-row.is-today:hover{
  background:var(--accent-dim);
}
/* .nextup-row overrides .dash-row's align-items:center with
 * flex-start so the three text tiers stack from the top; the arrow
 * opts back into centring so it stays optically balanced. */
.nextup-row .dash-row-arrow{
  align-self:center;
}

.nextup-when{ font-weight:600; }
.nextup-when.is-today{ color:var(--accent); }
.nextup-when.is-tomorrow{ color:var(--text2); }

.nextup-run{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem .45rem;
  margin-top:.3rem;
}
.nextup-run-txt{
  font-size:.75rem;
  color:var(--text3);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nextup-chip{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.35;
  padding:.08rem .4rem;
  border-radius:5px;
  white-space:nowrap;
  flex-shrink:0;
}
/* Position within a real multi-day run — the headline fact. */
.nextup-chip.is-shoot{
  background:var(--accent-dim);
  border:1px solid var(--accent-rim);
  color:var(--accent);
}
/* One-and-done job: present but deliberately quiet. */
.nextup-chip.is-single{
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text3);
}
/* Support days (prep/travel/wrap). Dashed edge reads as "not the main
 * event" without competing with the accent chip — deliberately NOT
 * amber, which is nearly the same hue as --accent in both themes. */
.nextup-chip.is-prep,
.nextup-chip.is-travel,
.nextup-chip.is-wrap{
  background:transparent;
  border:1px dashed var(--border3);
  color:var(--text3);
  font-weight:500;
}

/* ── Mini run timeline (b351) ──────────────────────────────────────
 * One cell per dated day, sequential left-to-right. Cells flex so a
 * 3-day promo and a 30-day block both fill the row width; min-width
 * keeps the long runs from collapsing into a hairline. */
.nextup-tl{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  overflow:hidden;
  gap:2px;
  margin-top:.4rem;
  width:100%;
}
/* Fixed basis, shrink-only. Cells deliberately do NOT flex-grow: if
 * they filled the row, a 2-day job and a 28-day job would draw strips
 * of identical length and the whole thing would read as a progress
 * bar. Sized instead so strip LENGTH is proportional to run length and
 * comparable down the column — a long block looks long. Runs past
 * ~40 days shrink to fit rather than overflow. */
.nextup-tl-cell{
  flex:0 1 8px;
  min-width:2px;
  height:6px;
  border-radius:1.5px;
  background:var(--border);
}
/* Already shot — present for context, deliberately recessive. Uses
 * --border3 rather than --border: at --border's value the cell all but
 * vanished on the light theme's white surface, so a run already three
 * days in read as if it started with a gap. */
.nextup-tl-cell.is-past{
  background:var(--border3);
  opacity:.45;
}
/* Shooting today. Taller so it reads as a playhead, not just a
 * brighter cell — position should survive a squint. */
.nextup-tl-cell.is-now{
  background:var(--accent);
  height:10px;
  min-width:5px;
  border-radius:2.5px;
}
/* The row's nearest upcoming day, when that isn't today. */
.nextup-tl-cell.is-next{
  background:var(--accent);
  height:8px;
  opacity:.9;
}
/* Further out — same hue, stepped back. */
.nextup-tl-cell.is-later{
  background:var(--accent);
  opacity:.4;
}
/* Support days keep their slot but read as lighter marks: half-height,
 * neutral. A prep day shouldn't look like a shoot day on the strip any
 * more than it should in the run summary above it. */
.nextup-tl-cell.tl-prep,
.nextup-tl-cell.tl-travel,
.nextup-tl-cell.tl-wrap{
  background:var(--text3);
  height:3px;
  opacity:.5;
}
.nextup-tl-cell.tl-prep.is-now,
.nextup-tl-cell.tl-travel.is-now,
.nextup-tl-cell.tl-wrap.is-now{
  height:10px;
  opacity:.95;
}
.nextup-tl-cell.tl-prep.is-next,
.nextup-tl-cell.tl-travel.is-next,
.nextup-tl-cell.tl-wrap.is-next{
  height:6px;
  opacity:.85;
}
/* A real break in the run (4+ clear days). Fixed width so it reads as
 * a pause rather than another day. */
.nextup-tl-gap{
  flex:0 0 auto;
  width:10px;
  height:6px;
  border-top:1px dotted var(--text3);
  align-self:center;
}
.nextup-tl-more{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:.62rem;
  line-height:1;
  color:var(--text3);
  padding-left:.2rem;
}

@media (max-width:600px){
  .nextup-run-txt{ font-size:.72rem; }
  /* Fewer pixels to spend — drop the cell floor so a long run still
   * fits on one strip instead of overflowing the row. */
  .nextup-tl-cell{ min-width:2px; }
}

/* AI insights card. Sits between the KPI row and the top-N grid.
 * Bullets render as a tight list with a soft accent-tinted bg. */
.dash-ai-section{
  margin-bottom:1.6rem;
}
.dash-ai-list{
  list-style:none;
  margin:0;
  padding:.75rem 1rem;
  background:rgba(var(--accent-rgb, 31, 122, 255), .04);
  border:1px solid rgba(var(--accent-rgb, 31, 122, 255), .15);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.dash-ai-list li{
  position:relative;
  padding-left:1.1rem;
  font-size:.9rem;
  line-height:1.5;
  color:var(--text);
}
.dash-ai-list li::before{
  content:"✦";
  position:absolute;
  left:0;
  top:.05rem;
  color:var(--accent);
  font-size:.9rem;
}
.dash-ai-meta{
  margin-top:.5rem;
  font-size:.72rem;
  color:var(--text3);
  font-family:var(--mono);
  text-align:right;
}
.dash-ai-empty{
  padding:1rem;
  background:var(--surface);
  border:1px dashed var(--border2);
  border-radius:8px;
  color:var(--text3);
  font-size:.88rem;
  line-height:1.5;
}
.dash-ai-loading{
  padding:1rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text3);
  font-size:.9rem;
  text-align:center;
  font-style:italic;
}

/* Sparkline strip for the 6-month expense trend. The SVG itself is
 * sized inline; the wrap adds the small x-axis under it. */
.dash-spark-wrap{
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.dash-spark{
  width:100%;
  height:56px;
  display:block;
}
.dash-spark-axis{
  display:flex;
  justify-content:space-between;
  font-size:.7rem;
  font-family:var(--mono);
  color:var(--text3);
}

/* The Tasks shell mirrors the .invo-shell — outer flex container so
 * the tab bar stays pinned above an inner scroll area. */
.tasks-shell{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}
.tasks-shell-inner{
  flex:1;
  overflow-y:auto;
  padding:0 0 1rem;
}

/* ═══════════════════════════════════════════════════════════════
 *  SNAP RECEIPT ACTION SHEET (b67+)
 * ═══════════════════════════════════════════════════════════════
 * Two-choice picker — Take Photo / Choose from Library — that
 * appears when the user taps any Snap Receipt entry point. Each
 * button mirrors the .home-snap-cta visual language (amber accent
 * tile + body) but at a smaller scale that fits the sheet width.
 */
.snap-sheet-btn{
  display:flex;align-items:center;gap:.85rem;width:100%;
  padding:.7rem .85rem;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:10px;cursor:pointer;
  font-family:var(--ui);text-align:left;color:var(--text);
  transition:border-color .12s, background .12s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.snap-sheet-btn:hover{
  border-color:rgba(245,166,35,.55);
  background:linear-gradient(135deg, rgba(245,166,35,.08), rgba(245,166,35,.03));
}
.snap-sheet-btn:active{ transform:scale(.985); }
.snap-sheet-icon{
  font-size:1.4rem;line-height:1;flex-shrink:0;
  width:44px;height:44px;border-radius:9px;
  background:rgba(245,166,35,.15);
  display:inline-flex;align-items:center;justify-content:center;
}
.snap-sheet-body{
  flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0;
}
.snap-sheet-title{
  font-size:.95rem;font-weight:600;color:var(--text);
  letter-spacing:-.005em;
}
.snap-sheet-sub{
  font-size:.78rem;color:var(--text2);
}

/* ── Job Phase tabs (v2026.05.27+) ────────────────────────────
   Big, bold top-level navigation for the per-job page. Replaces
   the old Overview-vs-day-detail toggle with a five-phase system:
   Plan · Schedule · Gear · Shoot · Wrap. Lives inside the
   .job-panel-header alongside contact pills, above the (now
   shoot-phase-only) day-tabs-row.

   Tabs are visually distinct from .day-tab — larger, bolder, with
   an icon and label stacked under it on the active tab. Each
   phase has its own accent color used for the bottom indicator
   bar on the active tab; the rest stays neutral so the user can
   tell at a glance which phase they're in. */
/* ── Job Phase tabs (v2026.05.27+ b131) ───────────────────────
   Five individual pills laid out as a full-width 5-column grid
   with gaps between them. Each pill carries its own background +
   border, hover, and active treatment — distinct buttons, not a
   segmented control. Larger and bolder than the v2 segmented
   version, sized to feel like the primary nav for the job page.

   Active pill uses --accent fill (matches the rest of the app's
   tab convention); inactive is --surface2 with --text2. */
.phase-tabs-row{
  flex-shrink:0;width:100%;
  background:var(--bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:.7rem 1rem;
  display:grid;grid-template-columns:repeat(5, 1fr);
  gap:.55rem;
}
.phase-tab{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1rem;
  background:var(--surface-grad);
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text2);cursor:pointer;
  font-family:var(--ui);font-size:1rem;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;
  transition:color .14s, background .14s, border-color .14s, box-shadow .14s;
  position:relative;
  box-shadow:inset 0 1px 0 var(--surface-rim);
}
.phase-tab:hover:not(.active){
  background:var(--surface2-grad);color:var(--text);
  border-color:var(--border2);
}
.phase-tab.active{
  background:linear-gradient(180deg,
    color-mix(in oklch, var(--accent), white 7%) 0%,
    var(--accent) 100%);
  color:#fff;
  border-color:var(--accent);
  font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 1px 4px var(--accent-rim),
    0 2px 10px var(--accent-dim);
}
.phase-tab-icon{ font-size:1.15rem;line-height:1; }
.phase-tab-label{ font-family:var(--ui); }
.phase-tab-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.45em;height:1.45em;padding:0 .4rem;
  background:var(--surface3);color:var(--text2);
  border:1px solid var(--border2);border-radius:999px;
  font-size:.72rem;font-family:var(--mono);font-weight:700;
}
.phase-tab-badge.alert{
  background:var(--red);color:#fff;border-color:var(--red);
}
.phase-tab-badge.amber,
.phase-tab-badge.warn{
  background:var(--amber);color:#000;border-color:var(--amber);
}
.phase-tab.active .phase-tab-badge{
  background:rgba(255,255,255,.25);color:#fff;border-color:rgba(255,255,255,.4);
}

/* Compact mode (header scrolled) — shrink the pills slightly. */
.jph-inner.jph-compact .phase-tabs-row{
  padding:.35rem 1rem;gap:.4rem;
}
.jph-inner.jph-compact .phase-tab{
  padding:.5rem .75rem;font-size:.88rem;
}
.jph-inner.jph-compact .phase-tab-icon{ font-size:1rem; }

/* Mobile: the 5-column grid can't shrink a pill below its label's
   min-content width, so once labels show (≈421-700px, e.g. iPhone
   Plus/Pro Max) the row overflows past the viewport with no way to
   reach the cut-off pills. Switch to a horizontally scrollable flex
   strip — same pattern as the .day-tabs-row directly beneath it —
   so every phase stays reachable by swiping, labels and all. */
@media(max-width:680px){
  .phase-tabs-row{
    display:flex;flex-wrap:nowrap;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:.55rem .6rem;gap:.4rem;
  }
  .phase-tabs-row::-webkit-scrollbar{ display:none; }
  .phase-tab{
    flex:0 0 auto;
    padding:.65rem .7rem;font-size:.88rem;gap:.35rem;
  }
  .phase-tab-icon{ font-size:1.05rem; }
}
@media(max-width:420px){
  .phase-tabs-row{ padding:.5rem .45rem;gap:.3rem; }
  .phase-tab{ padding:.6rem .55rem;font-size:.82rem;gap:.25rem; }
  .phase-tab-icon{ font-size:1rem; }
}

/* ── Job Phase content area ───────────────────────────────────
   v2026.05.27+ b130: phase content uses the standard .dash-card
   sizing for look-and-feel parity with the rest of the app. The
   phase tabs (a pill above) are the wayfinding; the content area
   stays calm. */
.phase-scroll{
  /* Inherits .dash-scroll; explicit class for greppability. */
}

/* Phase-content status strip — slim row above the cards. Holds a
   one-line state summary and the forward-action button. Compact,
   never the visual focus. */
.phase-status{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:0 .25rem .15rem;
}
.phase-status-text{
  font-size:.92rem;color:var(--text2);font-weight:500;
}
.phase-status-text strong{ color:var(--text);font-weight:700; }
.phase-status-actions{
  display:flex;gap:.5rem;align-items:center;flex-shrink:0;
}

@media(max-width:680px){
  .phase-status{
    flex-direction:column;align-items:stretch;gap:.5rem;
  }
  .phase-status-actions{ justify-content:flex-end; }
}

/* Key/value rows used by the Plan phase Brief card */
.phase-kv{
  display:flex;flex-direction:column;gap:.45rem;
}
.phase-kv-row{
  display:flex;gap:1rem;align-items:baseline;
  padding:.4rem 0;border-bottom:1px dashed var(--border);
}
.phase-kv-row:last-child{ border-bottom:none; }
.phase-kv-k{
  flex-shrink:0;width:92px;
  font-size:.72rem;font-weight:600;color:var(--text3);
  text-transform:uppercase;letter-spacing:.05em;
}
.phase-kv-v{
  flex:1;font-size:.92rem;color:var(--text);
  word-break:break-word;
}
.phase-kv-notes .phase-kv-v{
  font-size:.88rem;color:var(--text2);white-space:pre-wrap;
}
.phase-kv-name .phase-kv-v{
  font-size:1.1rem;font-weight:700;letter-spacing:-.012em;line-height:1.2;
}

/* Empty-state card for phases — calm and small. */
.phase-empty{
  padding:1.5rem 1rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.phase-empty-icon{
  font-size:2rem;line-height:1;opacity:.7;margin-bottom:.2rem;
}
.phase-empty-title{
  font-size:1rem;font-weight:700;color:var(--text);
}
.phase-empty-sub{
  font-size:.85rem;color:var(--text2);max-width:38em;
  line-height:1.45;
}
.phase-empty .btn{ margin-top:.6rem; }

/* Contacts grid for the Plan phase */
.phase-contacts-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:.5rem;padding:.1rem 0;
}
.phase-contact-card{
  padding:.65rem .8rem;
  background:var(--surface2);
  border:1px solid var(--border);border-radius:8px;
  cursor:pointer;transition:all .1s;
}
.phase-contact-card:hover{
  background:var(--surface3);border-color:var(--border2);
}
.phase-contact-name{
  font-size:.92rem;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:.35rem;
}
.phase-contact-role{
  font-size:.78rem;color:var(--text2);margin-top:.15rem;
}
.phase-contact-email{
  color:var(--accent);font-size:.85rem;
}

/* Wrap-phase to-do task list — proper rows, not huge tiles. */
.phase-task-list{
  display:flex;flex-direction:column;gap:.4rem;
}
.phase-task{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem .9rem;
  background:var(--surface2);
  border:1px solid var(--border);border-radius:8px;
  cursor:pointer;transition:all .1s;
}
.phase-task:hover{
  background:var(--surface3);border-color:var(--border2);
}
.phase-task.alert{
  border-color:rgba(255,80,80,.35);
  background:rgba(255,80,80,.05);
}
.phase-task.amber{
  border-color:rgba(245,158,11,.35);
  background:rgba(245,158,11,.05);
}
.phase-task-icon{
  font-size:1.15rem;line-height:1;flex-shrink:0;
  width:30px;text-align:center;
}
.phase-task-label{
  flex:1;font-size:.92rem;color:var(--text);font-weight:500;
}
.phase-task-chev{
  color:var(--text3);font-size:1.1rem;flex-shrink:0;
}

/* Hide phase tabs on print — print output is per-day-detail
   anyway, and the tabs would just be visual noise. */
@media print{
  .phase-tabs-row{ display:none !important; }
  .phase-status{ display:none !important; }
}

/* ══════════════════════════════════════════════════════════
   HELP VIEW (b135+) — User manual + FAQ surface. Layout reuses
   .page-head / .set-tabs / .set-tab-panel-wide from Settings;
   these rules style the help-specific content elements (typed
   headings, definition lists, keyboard tables, step lists).
   ══════════════════════════════════════════════════════════ */
.help-panel{
  max-width:880px;width:100%;
  padding:.4rem 0 1.5rem;
  font-size:.95rem;line-height:1.6;color:var(--text2);
}
.help-section{
  margin-bottom:2.2rem;
  padding-bottom:1.6rem;
  border-bottom:1px solid var(--border);
}
.help-section:last-child{ border-bottom:none; }
.help-section p{ margin:.55rem 0; }
.help-section ul,
.help-section ol{ margin:.6rem 0 .85rem;padding-left:1.4rem; }
.help-section li{ margin:.3rem 0; }
.help-section strong{ color:var(--text); }
.help-section a{ color:var(--accent); text-decoration:underline; }
.help-section code{
  font-family:var(--mono);font-size:.85em;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:4px;padding:.05rem .35rem;color:var(--text);
}
.help-h2{
  font-size:1.32rem;font-weight:700;color:var(--text);
  letter-spacing:-.014em;line-height:1.25;
  margin:0 0 .8rem;
}
.help-h3{
  font-size:1.05rem;font-weight:650;color:var(--text);
  letter-spacing:-.008em;
  margin:1.1rem 0 .4rem;
}
.help-steps{
  counter-reset:helpstep;list-style:none;padding-left:0;
}
.help-steps > li{
  counter-increment:helpstep;
  position:relative;padding:.15rem 0 .15rem 2.2rem;
  margin:.6rem 0;
}
.help-steps > li::before{
  content:counter(helpstep);
  position:absolute;left:0;top:.05rem;
  width:1.55rem;height:1.55rem;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:650;font-family:var(--ui);
}
.help-dl{ margin:.6rem 0; }
.help-dl dt{
  font-weight:650;color:var(--text);
  margin-top:.85rem;font-size:.97rem;
}
.help-dl dt:first-child{ margin-top:0; }
.help-dl dd{
  margin:.15rem 0 0;padding-left:0;
  color:var(--text2);
}
.help-note{
  margin:.85rem 0;padding:.6rem .8rem;
  background:var(--surface2);border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:6px;
  font-size:.88rem;color:var(--text2);
}
.help-empty{
  margin:.5rem 0 1.5rem;padding:1rem 1.1rem;
  background:var(--surface2);border:1px dashed var(--border);
  border-radius:8px;color:var(--text3);font-size:.92rem;
}
.help-kbd-table{
  width:100%;border-collapse:collapse;margin:.5rem 0 1rem;
}
.help-kbd-table td{
  padding:.4rem .65rem;border-bottom:1px solid var(--border);
  font-size:.9rem;vertical-align:middle;
}
.help-kbd-table td:first-child{
  white-space:nowrap;width:1%;text-align:left;
}
.help-kbd-table tr:last-child td{ border-bottom:none; }

/* kbd styling — small, slightly raised pill. Reused for both
   the shortcut table and any inline <kbd> in help body text. */
.help-section kbd,
.help-kbd-table kbd{
  display:inline-block;
  font-family:var(--mono);font-size:.78em;font-weight:600;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-bottom-width:2px;
  border-radius:4px;padding:.05rem .4rem;
  line-height:1.4;min-width:1.5em;text-align:center;
  vertical-align:baseline;
  margin:0 .08rem;
}
/* The shortcut popover (m-shortcuts) already styles .kbd inline,
   so this scoped rule won't conflict. */
.help-section .kbd{
  display:inline-block;font-family:var(--mono);font-size:.92em;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:4px;padding:.02rem .3rem;
  vertical-align:baseline;
}

#help-version-pill{
  font-family:var(--mono);font-size:.72rem;
  color:var(--text3);
}

@media (max-width:640px){
  .help-h2{ font-size:1.15rem; }
  .help-h3{ font-size:1rem; }
  .help-section{ margin-bottom:1.6rem;padding-bottom:1.2rem; }
}

/* ============================================================
   Scripts section
   The screenplay reader runs in an isolated same-origin iframe
   (grip-screenplay.html). The host only sizes the frame to fill
   the view; the reader owns its own layout, theming + scrolling.
   ============================================================ */
#view-scripts{padding:0;}
#view-scripts.view.active{overflow:hidden;}

/* Library dashboard — fills the view; page-head fixed, card grid scrolls. */
.scr-dash{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;padding:1.5rem 1.8rem 0;} /* (b467) unified rhythm */
.scr-dash > .page-head{padding:0;margin:0 auto 1.5rem;max-width:var(--page-max);width:100%;}
.scr-dash-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 0 1.5rem;}
.scr-dash-body > *{max-width:var(--page-max);width:100%;margin-left:auto;margin-right:auto;}
.scr-grid{
  display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(244px,1fr));
}
.scr-card{
  position:relative;display:flex;flex-direction:column;gap:.15rem;
  min-height:122px;cursor:pointer;
  background:var(--surface-grad);
  border:1px solid var(--border);border-radius:12px;
  padding:1rem 1.1rem 1.05rem;
  box-shadow:inset 0 1px 0 var(--surface-rim), var(--depth-1);
  transition:border-color .12s, transform .12s;
}
.scr-card:hover{border-color:var(--border2);transform:translateY(-1px);}
/* (b253) Status-coloured left border on cards — a quiet, always-on cue that
   reinforces the pill in the card footer + the group header above it. Uses the
   same scr-st-{cls} palette (--scrc-bd) applied by the card's status class. */
.scr-card.scr-stl{border-left:3px solid var(--scrc-bd,var(--border));}

/* (b253) Status grouping — headers + spacing. Each .scr-group is one status
   bucket: a header (dot + label + count) followed by its cards/rows. Groups
   stack with breathing room so the funnel reads as distinct sections. */
.scr-group{margin-bottom:1.4rem;}
.scr-group:last-child{margin-bottom:0;}
/* (b255) Status-coloured header band — reads like the old status chip, scaled
   up into a section divider: status-tinted fill (--scrc-bg), coloured left
   accent + hairline (--scrc-bd), and the label/dot in the status colour
   (--scrc-fg). The scr-st-{cls} class on the header supplies all three vars. */
.scr-group-head{
  display:flex;align-items:center;gap:.5rem;
  margin:0 0 .8rem;padding:.42rem .7rem;
  background:var(--scrc-bg, var(--surface2));
  border:1px solid var(--scrc-bd, var(--border));
  border-left-width:3px;
  border-radius:8px;
}
.scr-group-head .scr-st-dot{width:9px;height:9px;}
.scr-group-label{
  font-size:.76rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  color:var(--scrc-fg,var(--text2));
}
.scr-group-count{
  font-family:var(--mono);font-size:.68rem;font-weight:700;
  color:var(--scrc-fg,var(--text3));
  background:color-mix(in srgb, var(--scrc-fg,var(--text3)) 12%, transparent);
  border:1px solid var(--scrc-bd,var(--border));border-radius:8px;
  padding:.03rem .42rem;line-height:1.5;
}
/* In list view the header band sits inside the bordered .scr-table between the
   shared column-header strip and the group's rows — square off the outer edges
   and carry the colour cue as a left accent so it reads as a section band. */
.scr-table .scr-group-head{
  margin:0;padding:.5rem .7rem;border-radius:0;
  border:0;border-left:3px solid var(--scrc-bd,var(--border));
  border-bottom:1px solid var(--border);
}
.scr-table .scr-group + .scr-group > .scr-group-head{border-top:1px solid var(--border);}
.scr-card-ico{font-size:1.45rem;line-height:1;margin-bottom:.4rem;opacity:.95;}
.scr-card-title{font-size:1.02rem;font-weight:650;color:var(--text);letter-spacing:-.012em;line-height:1.25;}
.scr-card-author{font-size:.84rem;color:var(--text2);margin-top:.05rem;}
.scr-card-author.scr-muted{color:var(--text3);font-style:italic;}
.scr-card-meta{font-size:.8rem;color:var(--text3);margin-top:.35rem;}
.scr-read-pct{color:var(--accent);}
/* (b247+) card notes button — mirrors .scr-card-del, sits beside it */
.scr-card-notes{position:absolute;top:.5rem;right:2.2rem;background:none;border:none;color:var(--text3);
  font-size:.85rem;cursor:pointer;padding:.15rem .3rem;border-radius:6px;opacity:0;transition:opacity .15s;}
.scr-card:hover .scr-card-notes{opacity:1;}
.scr-card-notes:hover{background:var(--bg3);color:var(--text1);}
.scr-card-tags{margin-top:.3rem;}
.scr-st-age{font-size:.72rem;color:var(--text3);border:1px solid var(--line);border-radius:8px;
  padding:.05rem .4rem;margin-left:.35rem;}
.scr-detail-modal{width:min(560px,94vw);}
/* (b255) status control row inside the script detail modal */
.scr-detail-status-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.2rem;}
.scr-detail-status-lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);}
.scr-detail-body{display:flex;flex-direction:column;gap:1rem;max-height:70vh;overflow-y:auto;padding:.2rem .1rem;}
.scr-detail-body .tag-panel,.scr-detail-body .crm-activity-section{display:block !important;}
/* ── Breakdown v2 chips (b248+) ── */
.bd-scene-chiprow{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.2rem;}
.bd-dn,.bd-eighths,.bd-flag{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.02em;
  padding:.08rem .4rem;border-radius:8px;border:1px solid var(--line);color:var(--text2);background:var(--bg3);}
.bd-dn-day  {color:#e8b93f;border-color:#8a6d1f;background:rgba(232,185,63,.12);}
.bd-dn-night{color:#7f97e8;border-color:#44518c;background:rgba(127,151,232,.13);}
.bd-dn-dusk,.bd-dn-dawn{color:#c98bd9;border-color:#7a4a8a;background:rgba(201,139,217,.12);}
.bd-eighths{color:var(--text3);}
.bd-flag{color:#d98a5f;border-color:#8a4f2d;background:rgba(217,138,95,.12);text-transform:capitalize;}
.bd-cxs{display:flex;flex-direction:column;gap:.5rem;}
.bd-cx{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;}
.bd-cx-scenes{font-size:.74rem;color:var(--text3);}
.bd-cx-note{flex-basis:100%;font-size:.8rem;color:var(--text2);margin-top:.1rem;}
.bd-matrix-btn{margin-left:.6rem;font-weight:normal;}
/* ── Character × scene matrix (b248+) ── */
.scr-matrix-modal{width:min(900px,94vw);}
.scr-matrix-body{max-height:70vh;overflow:auto;}
.scr-matrix{border-collapse:collapse;font-size:.76rem;}
.scr-matrix th,.scr-matrix td{border:1px solid var(--line);padding:.22rem .45rem;text-align:center;white-space:nowrap;}
.scr-matrix thead th{position:sticky;top:0;background:var(--bg2);z-index:2;}
.scr-mx-name{position:sticky;left:0;background:var(--bg2);text-align:left !important;z-index:1;max-width:180px;overflow:hidden;text-overflow:ellipsis;}
.scr-matrix thead .scr-mx-name{z-index:3;}
.scr-mx-tot{color:var(--text3);}
.scr-mx-cell.on{color:var(--accent);}
/* ── Script → job + shoot-day estimate (b249+) ── */
.scr-card-job{font-size:.78rem;color:var(--accent);margin-top:.3rem;cursor:pointer;}
.scr-card-job:hover{text-decoration:underline;}
.scr-card-from{font-size:.78rem;color:var(--text3);margin-top:.3rem;cursor:pointer;}
.scr-card-from:hover{color:var(--accent);text-decoration:underline;}
.scr-detail-actions{display:flex;gap:.5rem;flex-wrap:wrap;}
.scr-detail-actions:empty{display:none;}
.scr-sched-zone{display:flex;flex-direction:column;gap:.6rem;}
.bd-sched-assume{font-size:.8rem;color:var(--text3);font-style:italic;}
.bd-sched-days{display:flex;flex-direction:column;gap:.55rem;}
.bd-sched-day{border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;background:var(--bg2);}
.bd-sched-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.bd-sched-num{font-weight:700;font-size:.8rem;color:var(--accent);}
.bd-sched-lbl{font-weight:600;font-size:.84rem;}
.bd-sched-scenes{font-size:.76rem;color:var(--text2);margin-top:.2rem;}
.bd-sched-loc{font-size:.74rem;color:var(--text3);margin-top:.1rem;}
.bd-sched-note{font-size:.78rem;color:var(--text3);margin-top:.2rem;}
.bd-sched-foot{display:flex;gap:.5rem;flex-wrap:wrap;}
.scr-push-modal{width:min(420px,94vw);}
.scr-push-body{display:flex;flex-direction:column;gap:.7rem;padding:.2rem .1rem;}
.scr-push-hint{font-size:.76rem;color:var(--text3);}
.scr-push-foot{display:flex;justify-content:flex-end;}
.scr-dot{margin:0 .4rem;opacity:.55;}
.scr-card-foot{font-size:.72rem;color:var(--text3);margin-top:auto;padding-top:.55rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.scr-card-badge{font-size:.6rem;font-weight:700;letter-spacing:.06em;color:var(--text3);background:var(--surface3);border:1px solid var(--border);border-radius:5px;padding:.1rem .3rem;}
.scr-card-del{
  position:absolute;top:.5rem;right:.5rem;
  width:24px;height:24px;border-radius:6px;
  border:1px solid transparent;background:transparent;
  color:var(--text3);font-size:.82rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .12s, background .12s, color .12s, border-color .12s;
}
.scr-card:hover .scr-card-del{opacity:1;}
.scr-card-del:hover{background:var(--surface3);color:var(--red);border-color:var(--border);}

/* ── Dashboard view toggle (reuses the .jvt-btn segmented styling) ── */
.scr-view-toggle{display:flex;background:var(--surface2);border:1px solid var(--border2);border-radius:5px;overflow:hidden;gap:0;}

/* ── List view: a denser, sortable table with more metadata per script ── */
.scr-table{width:100%;border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--surface);box-shadow:var(--depth-1);}
.scr-thead,.scr-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 66px 66px 60px 78px 116px 38px;align-items:center;}
.scr-thead{background:var(--surface2);border-bottom:1px solid var(--border);}
.scr-th{appearance:none;background:none;border:0;cursor:pointer;font:inherit;font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);padding:.6rem .55rem;display:flex;align-items:center;gap:.25rem;white-space:nowrap;overflow:hidden;}
.scr-th:hover{color:var(--text2);}
.scr-th.active{color:var(--accent);}
.scrh-num{justify-content:flex-end;}
.scrh-fmt,.scrh-score{justify-content:center;}
.scrh-act{cursor:default;}
.scr-sort-ar{font-size:.58rem;line-height:1;}
.scr-rows .scr-row{border-bottom:1px solid var(--border);}
.scr-rows .scr-row:last-child{border-bottom:0;}
.scr-row{position:relative;cursor:pointer;transition:background .1s;}
.scr-row:hover{background:var(--surface-hi);}
.scr-c{padding:.5rem .55rem;font-size:.84rem;color:var(--text2);min-width:0;overflow:hidden;}
.scrc-num{text-align:right;font-variant-numeric:tabular-nums;}
.scrc-fmt,.scrc-score{text-align:center;}
.scrc-date{font-size:.78rem;color:var(--text3);white-space:nowrap;}
.scrc-act{text-align:center;padding:.5rem .35rem;}
.scrc-title{display:flex;flex-direction:column;gap:.04rem;}
.scr-row-title{font-size:.92rem;font-weight:600;color:var(--text);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scr-row-author{font-size:.76rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scr-row-author.scr-muted{color:var(--text3);font-style:italic;}
.scr-row-metamob{display:none;font-size:.74rem;color:var(--text3);margin-top:.1rem;}
.scr-score-chip{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:.1rem .32rem;border-radius:6px;font-size:.78rem;font-weight:750;font-variant-numeric:tabular-nums;}
.scr-chip-good{color:var(--green);background:var(--green-dim);}
.scr-chip-ok{color:var(--amber);background:var(--amber-dim);}
.scr-chip-mid{color:var(--accent);background:var(--accent-dim);}
.scr-chip-bad{color:var(--red);background:var(--red-dim);}
.scr-score-pending{font-size:.72rem;color:var(--text3);font-style:italic;}
.scr-score-na{color:var(--text3);}
.scr-row .scr-card-del{position:static;top:auto;right:auto;width:24px;height:24px;opacity:0;}
.scr-row:hover .scr-card-del{opacity:1;}

@media (max-width:700px){
  .scr-vt-lbl{display:none;}                       /* icon-only toggle to save header space */
  .scr-table{max-width:none;}
  .scr-thead{display:none;}                         /* no column headers on mobile */
  .scr-row{display:flex;align-items:center;gap:.7rem;padding:.1rem .35rem;}
  .scrc-fmt,.scrc-num,.scrc-date{display:none;}     /* folded into the meta line */
  .scrc-title{flex:1 1 auto;min-width:0;padding:.6rem .25rem;}
  .scr-row-metamob{display:block;}
  .scrc-score{flex:0 0 auto;padding:.6rem .15rem;}
  .scrc-act{flex:0 0 auto;}
  .scr-row .scr-card-del{opacity:1;}                /* always tappable on mobile */
}

/* Empty state */
.scr-empty-state{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:3rem 1.5rem;min-height:0;
}
.scr-empty-ico{font-size:2.7rem;margin-bottom:.65rem;opacity:.9;}
.scr-empty-h{font-size:1.18rem;font-weight:650;color:var(--text);}
.scr-empty-p{font-size:.9rem;color:var(--text3);max-width:30rem;line-height:1.5;margin:.45rem 0 1.15rem;}
.scr-empty-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;}
.scr-loading{padding:2.2rem;text-align:center;color:var(--text3);font-size:.9rem;}

/* ════ Scripts dashboard: status pills, filter chips, search, results ════ */

/* Pipeline-status colour vocabulary (dark defaults). Mirrors the .tag-chip
   palette: gray / blue / green / amber / purple / red. Each pill/dot/chip
   pulls its colour from these three custom props. */
.scr-st-inbox      { --scrc-fg:#a8acb4; --scrc-bd:#80838c; --scrc-bg:rgba(128,131,140,.14); }
.scr-st-reading    { --scrc-fg:#5fa3e0; --scrc-bd:#3c80c8; --scrc-bg:rgba(60,128,200,.14); }
.scr-st-accepted   { --scrc-fg:#3aa063; --scrc-bd:#137534; --scrc-bg:rgba(19,117,52,.16); }
.scr-st-production  { --scrc-fg:#f5a623; --scrc-bd:#c97509; --scrc-bg:rgba(245,166,35,.15); }
.scr-st-produced   { --scrc-fg:#b07ed4; --scrc-bd:#8c48b4; --scrc-bg:rgba(140,72,180,.15); }
.scr-st-passed     { --scrc-fg:#d97070; --scrc-bd:#c14040; --scrc-bg:rgba(193,64,64,.14); }
/* Production-side off-ramps: slate (parked), rust (killed), rose (went elsewhere). */
.scr-st-pushed              { --scrc-fg:#8493b0; --scrc-bd:#5a6786; --scrc-bg:rgba(90,103,134,.15); }
.scr-st-cancelled           { --scrc-fg:#c07b4a; --scrc-bd:#965526; --scrc-bg:rgba(150,85,38,.15); }
.scr-st-different-direction { --scrc-fg:#cf6f9c; --scrc-bd:#a83f70; --scrc-bg:rgba(168,63,112,.15); }
html.light .scr-st-inbox     { --scrc-fg:#5a5d65; }
html.light .scr-st-reading   { --scrc-fg:#2563a8; }
html.light .scr-st-accepted  { --scrc-fg:#0e5326; }
html.light .scr-st-production { --scrc-fg:#a55c0a; }
html.light .scr-st-produced  { --scrc-fg:#6f329c; }
html.light .scr-st-passed    { --scrc-fg:#a02525; }
html.light .scr-st-pushed              { --scrc-fg:#4e5a78; }
html.light .scr-st-cancelled           { --scrc-fg:#82471f; }
html.light .scr-st-different-direction { --scrc-fg:#a02c60; }

/* The pill button (cards, rows, search results, reader bar). */
.scr-status-pill{
  display:inline-flex;align-items:center;gap:.32rem;flex:0 0 auto;
  padding:.18rem .5rem;border-radius:999px;cursor:pointer;
  font-size:.72rem;font-weight:650;line-height:1;white-space:nowrap;
  color:var(--scrc-fg,#a8acb4);
  background:var(--scrc-bg,rgba(128,131,140,.14));
  border:1px solid var(--scrc-bd,#80838c);
  transition:filter .12s, transform .05s;
}
.scr-status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.scr-status-pill:hover{filter:brightness(1.12);}
.scr-status-pill:active{transform:translateY(1px);}

/* Small colour dot used in chips + the status menu. */
.scr-st-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--scrc-fg,#a8acb4);box-shadow:0 0 0 1px var(--scrc-bd,#80838c) inset;}

/* Floating status picker (appended to <body>, positioned in JS). */
.scr-status-menu{
  position:fixed;z-index:2147483600;min-width:184px;padding:.35rem;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  animation:scrMenuIn .1s ease-out;
}
@keyframes scrMenuIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.scr-status-opt{
  display:flex;align-items:center;gap:.55rem;width:100%;
  padding:.5rem .55rem;border:0;border-radius:8px;background:transparent;cursor:pointer;
  font-size:.86rem;color:var(--text);text-align:left;
}
.scr-status-opt:hover{background:var(--surface-hi);}
.scr-status-opt.active{background:var(--surface2);}
.scr-status-opt-lbl{flex:1 1 auto;}
.scr-status-check{color:var(--accent);font-weight:800;}

/* (b254) Status-change reason prompt — the status menu morphs into this. */
.scr-status-menu.scr-menu-reason{ width:264px; padding:.7rem; }
.scr-reason-head{
  display:flex;align-items:center;gap:.45rem;
  font-size:.86rem;color:var(--text);margin-bottom:.5rem;
}
.scr-reason-head strong{font-weight:700;}
.scr-reason-input{
  width:100%;resize:vertical;min-height:3.4rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font:inherit;font-size:.86rem;padding:.5rem .6rem;
  outline:none;transition:border-color .12s;
}
.scr-reason-input:focus{border-color:var(--accent);}
.scr-reason-input::placeholder{color:var(--text3);}
.scr-reason-hint{font-size:.68rem;color:var(--text3);margin:.35rem .1rem .55rem;}
.scr-reason-actions{display:flex;justify-content:flex-end;gap:.45rem;}

/* (b254) d20-included score chip — a hint of accent so a die-shifted score
   reads as "fate-adjusted" rather than a raw AI read. */
.scr-score-chip.scr-chip-d20{ box-shadow:inset 0 0 0 1px var(--accent-rim); }

/* (b254) base-score caption under the effective number in the assess panel. */
.scr-assess-base{
  display:block;margin-top:.15rem;
  font-size:.68rem;font-weight:600;color:var(--text3);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}

/* (b254) d20 control row inside the assessment panel. */
.scr-d20-ctl{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin:.7rem 0 .2rem;padding:.55rem .7rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:9px;
}
.scr-d20-ctl-empty{ justify-content:space-between; }
.scr-d20-ctl-hint{font-size:.82rem;color:var(--text3);}
.scr-d20-ctl-sp{flex:1 1 auto;}
.scr-d20-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.82rem;font-weight:750;color:var(--accent);
  background:var(--accent-dim);border:1px solid var(--accent-rim);
  border-radius:8px;padding:.15rem .5rem;font-variant-numeric:tabular-nums;
}
.scr-d20-toggle{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.82rem;color:var(--text2);cursor:pointer;user-select:none;
}
.scr-d20-toggle input{accent-color:var(--accent);cursor:pointer;}

/* ── (b254) The d20 roll modal ─────────────────────────────────── */
.scr-d20-overlay{
  position:fixed;inset:0;z-index:2147483620;
  background:rgba(4,5,10,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
  animation:scrD20Fade .16s ease-out;
}
@keyframes scrD20Fade{from{opacity:0;}to{opacity:1;}}
.scr-d20-modal{
  width:min(360px,92vw);
  background:var(--surface);border:1px solid var(--border2);border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  padding:1.8rem 1.6rem 1.4rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.scr-d20-die{
  position:relative;width:132px;height:132px;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
.scr-d20-svg{width:100%;height:100%;overflow:visible;}
.scr-d20-body{
  fill:var(--surface2);stroke:var(--accent);stroke-width:2.5;
  stroke-linejoin:round;
}
.scr-d20-edge{ fill:none;stroke:var(--accent-rim);stroke-width:1.4;stroke-linejoin:round; }
.scr-d20-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:800;font-size:2.6rem;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
/* Tumble while rolling: spin + wobble + blur the number. */
.scr-d20-die.is-tumbling{ animation:scrD20Tumble 1.55s cubic-bezier(.5,.05,.3,1) both; }
.scr-d20-die.is-tumbling .scr-d20-num{ filter:blur(1.5px);opacity:.85; }
@keyframes scrD20Tumble{
  0%   {transform:rotate(0deg)   scale(.9)  translateY(0);}
  15%  {transform:rotate(240deg) scale(1.08) translateY(-14px);}
  35%  {transform:rotate(560deg) scale(.96) translateY(4px);}
  55%  {transform:rotate(900deg) scale(1.04) translateY(-8px);}
  75%  {transform:rotate(1180deg) scale(1)   translateY(2px);}
  100% {transform:rotate(1440deg) scale(1)   translateY(0);}
}
/* Settle: a satisfied little bounce as it locks in. */
.scr-d20-die.is-settled{ animation:scrD20Settle .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes scrD20Settle{
  0%{transform:scale(1.18);}
  60%{transform:scale(.94);}
  100%{transform:scale(1);}
}
.scr-d20-die.is-crit .scr-d20-body{ fill:rgba(62,201,110,.16);stroke:var(--green);animation:scrD20Crit 1s ease-in-out infinite; }
.scr-d20-die.is-crit .scr-d20-num{ color:var(--green); }
@keyframes scrD20Crit{
  0%,100%{filter:drop-shadow(0 0 2px rgba(62,201,110,.5));}
  50%{filter:drop-shadow(0 0 14px rgba(62,201,110,.9));}
}
.scr-d20-die.is-fail .scr-d20-body{ fill:rgba(255,80,80,.14);stroke:var(--red); }
.scr-d20-die.is-fail .scr-d20-num{ color:var(--red); }
.scr-d20-caption{ min-height:2.2rem;color:var(--text2);font-size:.9rem;line-height:1.45; }
.scr-d20-caption.scr-d20-rolling{ color:var(--text3);font-style:italic; }
.scr-d20-result{ display:flex;flex-direction:column;gap:.25rem;animation:scrD20Reveal .3s ease-out both; }
@keyframes scrD20Reveal{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.scr-d20-verdict{ font-size:1.15rem;font-weight:750;color:var(--text);letter-spacing:-.01em; }
.scr-d20-result.is-crit .scr-d20-verdict{ color:var(--green); }
.scr-d20-result.is-fail .scr-d20-verdict{ color:var(--red); }
.scr-d20-flavor{ font-size:.84rem;color:var(--text3);line-height:1.45; }
.scr-d20-flavor b{ color:var(--text2);font-weight:650; }
.scr-d20-actions{ display:flex;gap:.5rem;justify-content:center;margin-top:.2rem; }

/* Tools row: search + filter chips */
.scr-tools{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin:0 auto 1.05rem;}
.scr-search{
  position:relative;flex:1 1 260px;min-width:200px;max-width:440px;display:flex;align-items:center;
}
.scr-search-ico{position:absolute;left:.7rem;font-size:.82rem;opacity:.65;pointer-events:none;}
.scr-search-input{
  width:100%;padding:.56rem .8rem .56rem 2.05rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  color:var(--text);font-size:.88rem;outline:none;transition:border-color .12s, box-shadow .12s;
}
.scr-search-input::placeholder{color:var(--text3);}
.scr-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.scr-search-clear{
  position:absolute;right:.4rem;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:transparent;color:var(--text3);cursor:pointer;font-size:.82rem;
}
.scr-search-clear:hover{background:var(--surface-hi);color:var(--text);}
.scr-chips{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.scr-fchip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .65rem;border-radius:999px;cursor:pointer;
  font-size:.8rem;font-weight:600;line-height:1;
  color:var(--text2);background:var(--surface2);border:1px solid var(--border);
  transition:background .12s, color .12s, border-color .12s;
}
.scr-fchip:hover{background:var(--surface-hi);color:var(--text);}
.scr-fchip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}
.scr-fchip-n{font-variant-numeric:tabular-nums;font-weight:750;opacity:.85;}

/* Content host + filter-empty + small text link */
.scr-content-host{display:block;}
.scr-filter-empty{padding:2rem 1rem;text-align:center;color:var(--text3);font-size:.9rem;}
.scr-link{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font:inherit;text-decoration:underline;}
.scr-link:hover{filter:brightness(1.12);}

/* Status pill placement in card foot */
.scr-card-foot-right{display:inline-flex;align-items:center;gap:.55rem;}

/* ── Search results list ── */
.scr-search-head{font-size:.82rem;color:var(--text3);margin:0 0 .7rem;}
.scr-sr-list{display:flex;flex-direction:column;gap:.5rem;}
.scr-sr{
  display:flex;align-items:flex-start;gap:.8rem;padding:.7rem .85rem;cursor:pointer;
  background:var(--surface2);border:1px solid var(--border);border-radius:11px;
  transition:background .1s, border-color .1s;
}
.scr-sr:hover{background:var(--surface-hi);border-color:var(--border-hi,var(--border));}
.scr-sr-ico{font-size:1.05rem;line-height:1.4;flex:0 0 auto;opacity:.92;}
.scr-sr-main{flex:1 1 auto;min-width:0;}
.scr-sr-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.scr-sr-title{font-size:.94rem;font-weight:650;color:var(--text);}
.scr-sr-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.25rem;}
.scr-sr-author{font-size:.78rem;color:var(--text2);}
.scr-sr-snip{margin-top:.4rem;font-size:.82rem;color:var(--text2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.scr-sr-arrow{flex:0 0 auto;color:var(--text3);font-size:1.2rem;line-height:1;align-self:center;}
.scr-hl{background:var(--accent-dim);color:var(--accent);border-radius:3px;padding:0 .1em;font-weight:650;}

@media (max-width:700px){
  .scr-tools{gap:.65rem;}
  .scr-search{flex:1 1 100%;max-width:none;}
}

/* Reader sub-view — thin CineBase breadcrumb strip above the isolated frame. */
.scr-reader{flex:1 1 auto;min-width:0;min-height:0;flex-direction:column;overflow:hidden;}
.scr-reader-bar{
  display:flex;align-items:center;gap:.75rem;flex-shrink:0;
  padding:.5rem .9rem;border-bottom:1px solid var(--border);background:var(--surface);
}
.scr-reader-title{
  font-size:.9rem;color:var(--text2);font-weight:550;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.scr-reader-spacer{flex:1;}
/* (b256) Reader tabs — segmented control swapping the Breakdown panel and the
   Script frame. Mirrors the .jvt-btn / .aj-view-btn segmented idiom. */
.scr-reader-tabs{
  display:inline-flex;flex-shrink:0;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:7px;overflow:hidden;
}
.scr-rtab{
  appearance:none;background:none;border:0;border-right:1px solid var(--border2);
  cursor:pointer;font:inherit;font-size:.82rem;font-weight:600;
  color:var(--text3);padding:.34rem .8rem;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.35rem;transition:all .12s;
}
.scr-rtab:last-child{border-right:0;}
.scr-rtab:hover:not(.active){background:var(--surface3);color:var(--text2);}
.scr-rtab.active{background:var(--accent);color:#fff;}
.scr-reader-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;}
.scr-frame{flex:1 1 auto;width:100%;height:100%;min-height:0;border:0;display:block;background:var(--bg);}

/* AI breakdown overlay (Phase 2) */
.scr-bd{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background:var(--bg);}
.scr-bd-head{display:flex;align-items:center;gap:.75rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;}
.scr-bd-headtext{min-width:0;}
.scr-bd-title{font-size:1rem;font-weight:650;color:var(--text);letter-spacing:-.01em;}
.scr-bd-sub{font-size:.74rem;color:var(--text3);margin-top:.1rem;}
.scr-bd-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:1.4rem 1.5rem 2.5rem;max-width:900px;width:100%;margin:0 auto;}
.scr-bd-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;height:100%;color:var(--text2);font-size:.92rem;text-align:center;padding:2rem;}
/* (b295) Script overview / dashboard tab. */
.scr-ov-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:1.5rem 1.5rem 3rem;max-width:1000px;width:100%;margin:0 auto;}
.scr-ov-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
.scr-ov-title{font-size:1.6rem;font-weight:750;letter-spacing:-.02em;color:var(--text);display:flex;align-items:center;gap:.4rem;}
.scr-ov-editname{background:none;border:none;cursor:pointer;color:var(--text3);font-size:.9rem;padding:.15rem .35rem;border-radius:5px;line-height:1;}
.scr-ov-editname:hover{color:var(--accent);background:var(--surface3);}
.scr-ov-author{font-size:.9rem;color:var(--text3);margin-top:.15rem;}
.scr-ov-badges{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.scr-ov-vchip{font-size:.74rem;font-weight:600;color:var(--text2);background:var(--surface3);border:1px solid var(--border);border-radius:8px;padding:.12rem .5rem;}
.scr-ov-vchip[onclick]{cursor:pointer;}
.scr-ov-metrics{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.3rem;}
.scr-ov-metric{flex:1 1 90px;min-width:90px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.7rem .5rem;text-align:center;}
.scr-ov-metric-v{font-size:1.5rem;font-weight:750;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1;}
.scr-ov-metric-l{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text3);margin-top:.2rem;}
.scr-ov-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.scr-ov-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem 1rem;}
.scr-ov-card-wide{grid-column:1/-1;}
.scr-ov-card-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;}
.scr-ov-card-ico{font-size:1.1rem;}
.scr-ov-card-title{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);}
.scr-ov-card-body{flex:1;font-size:.85rem;color:var(--text);}
.scr-ov-card-btn{align-self:flex-start;margin-top:.7rem;}
.scr-ov-verdict{font-weight:600;margin-bottom:.3rem;}
.scr-ov-oneliner{color:var(--text2);line-height:1.5;}
.scr-ov-logline{color:var(--text2);font-style:italic;line-height:1.5;margin-bottom:.5rem;}
.scr-ov-statrow{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.2rem;}
.scr-ov-stat{font-size:.76rem;color:var(--text3);background:var(--surface3);border-radius:6px;padding:.1rem .4rem;}
.scr-ov-stat b{color:var(--text);font-variant-numeric:tabular-nums;}
.scr-ov-toplocs{font-size:.76rem;color:var(--text3);margin-top:.5rem;}
.scr-ov-empty{color:var(--text3);font-size:.82rem;font-style:italic;}
.scr-ov-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--border);}
.scr-bd-loading-sub{font-size:.8rem;color:var(--text3);}
.scr-bd-spin{width:30px;height:30px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:scrspin 1s linear infinite;}
@keyframes scrspin{to{transform:rotate(360deg);}}
.scr-bd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;height:100%;text-align:center;padding:2.5rem 1.5rem;}
.scr-bd-empty-ico{font-size:2.4rem;margin-bottom:.5rem;color:var(--accent);}
.scr-bd-empty-h{font-size:1.1rem;font-weight:650;color:var(--text);}
.scr-bd-empty-p{font-size:.88rem;color:var(--text3);max-width:30rem;line-height:1.5;margin:.4rem 0 1.1rem;}

/* breakdown content */
.bd-logline{font-size:1.15rem;font-weight:600;color:var(--text);line-height:1.4;letter-spacing:-.01em;border-left:3px solid var(--accent);padding-left:.9rem;margin-bottom:1rem;}
.bd-summary{font-size:.95rem;color:var(--text2);line-height:1.6;margin:0 0 1rem;}
.bd-tone{font-size:.85rem;color:var(--text2);display:flex;align-items:center;gap:.5rem;margin-bottom:1.6rem;}
.bd-tone-lbl{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:.15rem .4rem;}
.bd-sec{margin-bottom:1.8rem;}
.bd-sec h4{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 .8rem;display:flex;align-items:center;gap:.5rem;}
.bd-count{font-size:.68rem;font-weight:600;color:var(--text3);background:var(--surface2);border-radius:10px;padding:.05rem .45rem;letter-spacing:0;}
.bd-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6rem;}
.bd-char{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:.7rem .8rem;}
.bd-char-top{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.2rem;}
.bd-char-name{font-weight:650;font-size:.9rem;color:var(--text);}
.bd-char-role{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);background:var(--surface3);border-radius:4px;padding:.05rem .35rem;}
.bd-char-desc{font-size:.82rem;color:var(--text3);line-height:1.45;}
.bd-locs{display:flex;flex-wrap:wrap;gap:.5rem;}
.bd-loc{display:flex;align-items:center;gap:.45rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.4rem .65rem;font-size:.84rem;color:var(--text2);}
.bd-loc-ie{font-size:.6rem;font-weight:700;letter-spacing:.04em;color:var(--accent);}
.bd-loc-name{color:var(--text);font-weight:550;}
.bd-loc-cnt{font-size:.68rem;color:var(--text3);}
.bd-scenes{display:flex;flex-direction:column;gap:.55rem;}
.bd-scene{display:flex;gap:.8rem;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:.7rem .85rem;}
.bd-scene-num{flex-shrink:0;font-size:.8rem;font-weight:700;color:var(--accent);min-width:1.6rem;text-align:right;font-variant-numeric:tabular-nums;}
.bd-scene-main{min-width:0;}
.bd-scene-head{font-weight:600;font-size:.86rem;color:var(--text);text-transform:uppercase;letter-spacing:.01em;}
.bd-scene-syn{font-size:.84rem;color:var(--text2);line-height:1.45;margin-top:.2rem;}
.bd-scene-chars{font-size:.74rem;color:var(--text3);margin-top:.3rem;}
/* (b290) Combined "Production Pack" share page scene layout. That page
   (.scr-share-section) renders the head row, synopsis, flags and
   characters as direct children of .bd-scene, but the generic .bd-scene
   is display:flex (breakdown.html's [num | main] two-column layout),
   which laid those blocks side-by-side. Scope a stacking override here,
   plus the scene-chip classes grip.css doesn't otherwise define. */
.scr-share-section .bd-scene{display:block;}
.scr-share-section .bd-scene-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.45rem;}
.scr-share-section .bd-scene-num{min-width:auto;text-align:left;}
.scr-share-section .bd-scene-heading{font-weight:700;font-size:.9rem;color:var(--text);text-transform:uppercase;letter-spacing:.01em;}
.scr-share-section .bd-scene-dn{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.03em;padding:.06rem .4rem;border:1px solid;border-radius:4px;text-transform:uppercase;}
.scr-share-section .bd-scene-eighths{font-size:.68rem;font-weight:600;color:var(--text3);font-variant-numeric:tabular-nums;}
.scr-share-section .bd-scene-flags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem;}
.bd-shots{display:flex;flex-direction:column;gap:.7rem;}
.bd-shot{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:.75rem .9rem;}
.bd-shot-scene{font-weight:600;font-size:.85rem;color:var(--text);text-transform:uppercase;letter-spacing:.01em;margin-bottom:.4rem;}
.bd-shot-list{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.25rem;}
.bd-shot-list li{font-size:.84rem;color:var(--text2);line-height:1.45;}

/* gear suggestions (Phase 3) */
.bd-gear{border-top:1px solid var(--border);padding-top:1.4rem;}
.bd-gear-hint{font-size:.8rem;color:var(--text3);margin-top:.6rem;}
.bd-gear-meta{font-size:.74rem;color:var(--text3);margin-bottom:.7rem;}
.bd-gear-regen{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;padding:0;text-decoration:underline;}
.bd-gear-summary{font-size:.9rem;color:var(--text2);line-height:1.55;margin:0 0 1.1rem;}
.bd-gear-err{font-size:.85rem;color:var(--red);}
.gear-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem;}
.gear-cat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.8rem .9rem;}
.gear-cat-name{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem;}
.gear-item{padding:.45rem 0;border-top:1px solid var(--border);}
.gear-item:first-of-type{border-top:0;padding-top:0;}
.gear-item-main{display:flex;align-items:center;gap:.5rem;justify-content:space-between;}
.gear-item-name{font-size:.86rem;font-weight:550;color:var(--text);}
.gear-item-reason{font-size:.76rem;color:var(--text3);line-height:1.4;margin-top:.15rem;}
.gear-own{font-size:.6rem;font-weight:700;letter-spacing:.03em;color:var(--green);background:rgba(62,201,110,.14);border-radius:5px;padding:.1rem .35rem;white-space:nowrap;flex-shrink:0;}
.gear-notown{font-size:.6rem;font-weight:700;letter-spacing:.03em;color:var(--text3);background:var(--surface3);border-radius:5px;padding:.1rem .35rem;white-space:nowrap;flex-shrink:0;}
.gear-gaps{margin-top:1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem;}
.gear-gaps-h{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);margin-bottom:.6rem;}
.gear-gap{padding:.45rem 0;border-top:1px solid var(--border);}
.gear-gap:first-of-type{border-top:0;padding-top:0;}
.gear-gap-top{display:flex;align-items:baseline;gap:.5rem;}
.gear-gap-name{font-size:.86rem;font-weight:550;color:var(--text);}
.gear-gap-cat{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);background:var(--surface3);border-radius:4px;padding:.05rem .35rem;}

/* ── Script assessment (quality score) — prominent card pinned to the top of
   the breakdown. Band colour (--sc) drives the number, border and tint. ── */
.scr-assess-zone{margin-bottom:1.5rem;}
.scr-assess{--sc:var(--text2);--sc-dim:var(--surface2);border:1px solid var(--border);border-left:4px solid var(--sc);background:var(--sc-dim);border-radius:11px;padding:1.05rem 1.15rem .9rem;}
.scr-assess-good{--sc:var(--green);--sc-dim:var(--green-dim);}
.scr-assess-ok{--sc:var(--amber);--sc-dim:var(--amber-dim);}
.scr-assess-mid{--sc:var(--accent);--sc-dim:var(--accent-dim);}
.scr-assess-bad{--sc:var(--red);--sc-dim:var(--red-dim);}
.scr-assess-head{display:flex;align-items:center;gap:1rem;}
.scr-assess-score{display:flex;align-items:baseline;line-height:1;flex:0 0 auto;}
.scr-assess-num{font-size:2.9rem;font-weight:800;color:var(--sc);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.scr-assess-denom{font-size:1rem;font-weight:600;color:var(--text3);margin-left:.12rem;}
.scr-assess-vt{min-width:0;}
.scr-assess-verdict{font-size:1.05rem;font-weight:700;color:var(--text);letter-spacing:-.01em;line-height:1.25;}
.scr-assess-oneliner{font-size:.86rem;color:var(--text2);line-height:1.45;margin-top:.18rem;}
.scr-assess-meta{display:flex;flex-direction:column;gap:.34rem;margin-top:1.05rem;}
.scr-assess-meta-row{display:flex;gap:.7rem;align-items:baseline;}
.scr-assess-meta-lbl{flex:0 0 6.6rem;font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);padding-top:.1rem;}
.scr-assess-meta-val{flex:1;min-width:0;font-size:.85rem;color:var(--text);line-height:1.45;}
.scr-assess-dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.65rem .9rem;margin-top:1.05rem;}
.scr-dim{min-width:0;}
.scr-dim-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;}
.scr-dim-name{font-size:.78rem;font-weight:600;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scr-dim-score{font-size:.78rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;flex:0 0 auto;}
.scr-dim-bar{height:5px;background:var(--surface3);border-radius:3px;overflow:hidden;margin-top:.28rem;}
.scr-dim-fill{height:100%;border-radius:3px;}
.scr-fill-good{background:var(--green);}
.scr-fill-ok{background:var(--amber);}
.scr-fill-mid{background:var(--accent);}
.scr-fill-bad{background:var(--red);}
.scr-dim-note{font-size:.72rem;color:var(--text3);line-height:1.4;margin-top:.28rem;}
.scr-assess-sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin-top:1.15rem;}
.scr-sw-col h5{font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:0 0 .4rem;}
.scr-sw-pro h5{color:var(--green);}
.scr-sw-con h5{color:var(--red);}
.scr-assess-sw ul{margin:0;padding-left:1.05rem;display:flex;flex-direction:column;gap:.32rem;}
.scr-assess-sw li{font-size:.82rem;color:var(--text2);line-height:1.45;}
.scr-assess-bottom{margin-top:1.15rem;padding-top:.95rem;border-top:1px solid var(--border);font-size:.9rem;color:var(--text);line-height:1.55;}
.scr-assess-bottom-lbl{display:block;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:.32rem;}
/* (b309) Scorer context / lens */
.scr-ctx-editor{display:flex;flex-direction:column;gap:.7rem;margin:.9rem 0;}
.scr-ctx-field{display:flex;align-items:flex-start;gap:.7rem;}
.scr-ctx-lbl{flex:0 0 6rem;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);padding-top:.44rem;}
.scr-ctx-format{flex:0 0 auto;min-width:12rem;background:var(--surface2);color:var(--text);border:1px solid var(--border2);border-radius:8px;padding:.42rem .6rem;font-size:.85rem;font-family:inherit;cursor:pointer;}
.scr-ctx-tags{display:flex;flex-wrap:wrap;gap:.4rem;flex:1;padding-top:.06rem;}
.scr-ctx-tag{background:var(--surface2);color:var(--text2);border:1px solid var(--border2);border-radius:20px;padding:.34rem .72rem;font-size:.78rem;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;}
.scr-ctx-tag:hover{border-color:var(--border3);color:var(--text);}
.scr-ctx-tag.active{background:var(--accent);border-color:var(--accent);color:#161616;font-weight:600;}
.scr-ctx-notes{flex:1;min-width:0;background:var(--surface2);color:var(--text);border:1px solid var(--border2);border-radius:8px;padding:.42rem .6rem;font-size:.85rem;font-family:inherit;}
.scr-ctx-notes::placeholder{color:var(--text3);}
.scr-assess-prescore{padding:1.1rem 1.2rem;}
.scr-assess-prescore-head{font-size:1.05rem;font-weight:700;color:var(--text);}
.scr-assess-prescore-sub{font-size:.85rem;color:var(--text2);line-height:1.5;margin-top:.28rem;max-width:54rem;}
.scr-assess-prescore-actions{margin-top:.35rem;}
.scr-ctx-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-top:.95rem;padding-top:.85rem;border-top:1px solid var(--border);}
.scr-ctx-lens-pill{display:inline-flex;align-items:center;gap:.42rem;background:var(--accent-dim);border:1px solid var(--accent-rim);border-radius:8px;padding:.3rem .62rem;}
.scr-ctx-lens-ico{font-size:.9rem;line-height:1;}
.scr-ctx-lens-lbl{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);}
.scr-ctx-lens-val{font-size:.85rem;font-weight:700;color:var(--text);}
.scr-ctx-bar-toggle{margin-left:-.1rem;}
.scr-ctx-bar-editor{flex:0 0 100%;margin-top:.1rem;}
.scr-ctx-bar-actions{margin-top:.1rem;}
.scr-ov-lens{display:inline-block;margin-top:.4rem;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);background:var(--surface3);border-radius:20px;padding:.16rem .62rem;}
.scr-assess-foot{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;margin-top:.9rem;}
.scr-assess-stale{font-size:.72rem;color:var(--amber);margin-right:auto;}
.scr-assess-loading{display:flex;flex-direction:column;align-items:center;gap:.85rem;padding:1.7rem;color:var(--text2);font-size:.88rem;text-align:center;border:1px dashed var(--border2);border-radius:11px;}
.scr-assess-err{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.85rem;color:var(--text2);padding:.85rem 1rem;border:1px solid var(--border);border-radius:11px;}

@media (max-width:700px){
  #view-scripts.view.active{height:calc(100dvh - var(--header-h) - var(--bnav-h) - env(safe-area-inset-bottom,0px));overflow:hidden;}
  .scr-dash{padding:0 .9rem;}
  .scr-dash > .page-head{padding:.95rem 0 0;margin-bottom:.85rem;}
  .scr-dash-body{padding:0 0 1.3rem;}
  .scr-grid{grid-template-columns:1fr;gap:.7rem;max-width:none;}
  .scr-card-del{opacity:1;}
  .scr-frame{height:100%;}
  .scr-bd-body{padding:1rem 1rem 2rem;}
  .bd-chars{grid-template-columns:1fr;}
  .scr-assess-dims,.scr-assess-sw{grid-template-columns:1fr;}
  .scr-ctx-field{flex-direction:column;gap:.3rem;}
  .scr-ctx-lbl{flex:none;padding-top:0;}
  .scr-ctx-format{width:100%;min-width:0;}
  .scr-assess-meta-row{flex-direction:column;gap:.12rem;}
  .scr-assess-meta-lbl{flex:none;}
  .scr-assess-num{font-size:2.5rem;}
}

/* ── Script moodboard (b260) ─────────────────────────────────
   Panel chrome comes from .scr-bd (the element carries both classes);
   these are the board-specific pieces: brief editor, palette strip,
   sections with keyword chips, image grid, and the lightbox. */
.scr-mb-brief{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;margin-bottom:1.4rem;}
.scr-mb-brief-h{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem;}
.scr-mb-brief-hint{font-weight:500;letter-spacing:0;text-transform:none;color:var(--text3);}
.scr-mb-brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .8rem;margin-bottom:.6rem;}
.scr-mb-brief .fg{margin-bottom:.6rem;}
.scr-mb-brief-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.2rem;}
.scr-mb-stale{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--text2);background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:.5rem .8rem;margin-bottom:1rem;}
.scr-mb-overview{font-size:1.02rem;color:var(--text);line-height:1.55;border-left:3px solid var(--accent);padding-left:.9rem;margin-bottom:1rem;}
.scr-mb-palette{display:flex;gap:.45rem;margin-bottom:1.6rem;}
.scr-mb-swatch{width:44px;height:30px;border-radius:7px;border:1px solid var(--border2);cursor:pointer;padding:0;transition:transform .12s;}
.scr-mb-swatch:hover{transform:translateY(-2px);}
.scr-mb-sec{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.95rem 1.05rem;margin-bottom:1.1rem;transition:border-color .15s, box-shadow .15s;}
.scr-mb-sec.scr-mb-dragover{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);}
.scr-mb-sec-head{display:flex;align-items:flex-start;gap:.8rem;margin-bottom:.75rem;}
.scr-mb-sec-head>div:first-child{min-width:0;flex:1 1 auto;}
.scr-mb-sec-title{font-size:.95rem;font-weight:650;color:var(--text);letter-spacing:-.01em;}
.scr-mb-sec-intent{font-size:.82rem;color:var(--text3);line-height:1.45;margin-top:.15rem;}
.scr-mb-sec-actions{display:flex;gap:.4rem;flex-shrink:0;}
.scr-mb-kws{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem;}
.scr-mb-kw{font-size:.72rem;color:var(--text2);background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:.14rem .55rem;cursor:pointer;font-family:inherit;transition:border-color .12s, color .12s;}
.scr-mb-kw:hover{border-color:var(--accent);color:var(--text);}
.scr-mb-kw:active{transform:translateY(1px);}
.scr-mb-films{font-size:.76rem;color:var(--text3);margin-top:.45rem;font-style:italic;}
.scr-mb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.55rem;}
.scr-mb-dropzone{grid-column:1/-1;border:1.5px dashed var(--border2);border-radius:9px;padding:1.1rem;text-align:center;font-size:.8rem;color:var(--text3);}
.scr-mb-item{position:relative;margin:0;border-radius:9px;overflow:hidden;background:var(--surface2);border:1px solid var(--border);}
.scr-mb-item img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;cursor:zoom-in;}
.scr-mb-item figcaption{font-size:.7rem;color:var(--text3);padding:.3rem .45rem;line-height:1.3;cursor:text;}
.scr-mb-item .scr-mb-cap-empty{opacity:0;transition:opacity .12s;}
.scr-mb-item:hover .scr-mb-cap-empty{opacity:.8;}
.scr-mb-item-del{position:absolute;top:.3rem;right:.3rem;width:22px;height:22px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:.7rem;cursor:pointer;opacity:0;transition:opacity .12s;line-height:1;}
.scr-mb-item:hover .scr-mb-item-del{opacity:1;}
.scr-mb-deckrow{font-size:.85rem;color:var(--text2);padding:.6rem 0 1.5rem;display:flex;align-items:center;gap:.5rem;}
.scr-mb-deckrow a{color:var(--accent);}
.scr-mb-lightbox{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:2rem;}
.scr-mb-lb-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;max-width:100%;max-height:100%;cursor:zoom-out;}
.scr-mb-lb-close{position:fixed;top:1.1rem;right:1.3rem;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:1.05rem;cursor:pointer;z-index:2;transition:background .14s;line-height:1;}
.scr-mb-lb-close:hover{background:rgba(255,255,255,.24);}
.scr-mb-lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:72px;border:none;background:rgba(255,255,255,.1);color:#fff;font-size:2.2rem;cursor:pointer;z-index:2;transition:background .14s;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;}
.scr-mb-lb-nav:hover{background:rgba(255,255,255,.24);}
.scr-mb-lb-nav.prev{left:0;border-radius:0 10px 10px 0;}
.scr-mb-lb-nav.next{right:0;border-radius:10px 0 0 10px;}
.scr-mb-lightbox img{max-width:min(94vw,1400px);max-height:82vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.6);}
.scr-mb-lightbox-meta{display:flex;flex-direction:column;align-items:center;gap:.25rem;max-width:80ch;text-align:center;}
.scr-mb-lightbox-num{color:#fff;font-size:.82rem;font-weight:600;letter-spacing:.02em;}
.scr-mb-lightbox-cap{color:#e8e8e8;font-size:.92rem;line-height:1.4;}
.scr-mb-lightbox-fn{color:#8b929c;font-size:.72rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;}
@media (max-width:640px){ .scr-mb-brief-grid{grid-template-columns:1fr;} .scr-mb-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));} }

/* ── Moodboard upload progress pill (b267) ───────────────────── */
.scr-mb-prog{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:1500;background:var(--surface);border:1px solid var(--border2);border-radius:11px;box-shadow:0 6px 24px rgba(0,0,0,.35);padding:.6rem .9rem;min-width:240px;max-width:min(90vw,360px);}
.scr-mb-prog-label{font-size:.78rem;color:var(--text2);margin-bottom:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scr-mb-prog-track{height:5px;background:var(--surface2);border-radius:999px;overflow:hidden;}
.scr-mb-prog-fill{height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .2s ease;}
.scr-mb-prog-fill.indet{animation:scr-mb-indet 1.1s ease-in-out infinite;}
@keyframes scr-mb-indet{0%{margin-left:-40%;}100%{margin-left:100%;}}

/* ── Moodboard view toggle: Sections vs Matrix (b268) ───────────
   Both views are rendered; a class on .scr-mb-viewwrap picks one.
   Used on the shared page and in-app. */
.scr-mb-viewtoggle{display:inline-flex;gap:0;margin-top:.9rem;}
.scr-mb-viewwrap.mbview-sections .scr-mb-matrixwrap{display:none;}
.scr-mb-viewwrap.mbview-matrix .scr-mb-sections{display:none;}
/* Matrix: one full-bleed justified wall of images, no section chrome. */
.scr-mb-matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.4rem;}
.scr-mb-matrix .scr-mb-item{position:relative;margin:0;border-radius:6px;overflow:hidden;background:var(--surface2);border:1px solid var(--border);}
.scr-mb-matrix .scr-mb-item img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;cursor:zoom-in;}
/* Matrix captions: hover-only, overlaid so the wall stays clean. */
.scr-mb-matrix figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.5rem .6rem .45rem;font-size:.72rem;color:#fff;line-height:1.3;background:linear-gradient(transparent, rgba(0,0,0,.78));opacity:0;transition:opacity .14s;pointer-events:none;}
.scr-mb-matrix .scr-mb-item:hover figcaption{opacity:1;}
@media (max-width:640px){ .scr-mb-matrix{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));} }

/* ── Moodboard plan edit mode (b268) ───────────────────────────── */
.scr-mb-editbar{display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:6;background:var(--bg);padding:.7rem 0 .9rem;border-bottom:1px solid var(--border);margin-bottom:1.1rem;}
.scr-mb-edithint{font-size:.82rem;color:var(--text3);flex:1;line-height:1.5;}
.scr-mb-editbar-actions{display:flex;gap:.5rem;flex-shrink:0;}
.scr-mb-editsec{margin-bottom:1.2rem;}
.scr-mb-editsec-h{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem;}
.scr-mb-editpal{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem;}
.scr-mb-editswatch{position:relative;}
.scr-mb-editswatch input[type=color]{width:52px;height:34px;border:1px solid var(--border2);border-radius:7px;background:none;cursor:pointer;padding:2px;}
.scr-mb-editswatch-x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:none;background:var(--red,#c0392b);color:#fff;font-size:.62rem;line-height:1;cursor:pointer;opacity:.85;}
.scr-mb-editswatch-x:hover{opacity:1;}
.scr-mb-editsecblock{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:.85rem .95rem;margin-bottom:.8rem;}
.scr-mb-editsecblock-top{display:flex;gap:.6rem;align-items:center;margin-bottom:.6rem;}
.scr-mb-editsectitle{flex:1;font-size:.95rem;font-weight:600;padding:.4rem .55rem;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);}
.scr-mb-editsecblock-move{display:flex;gap:.25rem;flex-shrink:0;}
.scr-mb-editsecblock-move .btn{padding:.25rem .45rem;}

/* ── Shoot-complexity gauge (b272) ───────────────────────────────
   Red→amber→green track (green = simple, red = involved) with a marker
   at the score position. Band tints the label + marker. Full gauge in
   the breakdown reader / share page; mini variant on library cards. */
.scr-cx{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:.85rem 1rem 1rem;margin:0 0 1.1rem;}
.scr-cx-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.6rem;}
.scr-cx-label{font-size:.82rem;font-weight:650;letter-spacing:-.01em;}
.scr-cx-score{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;}
.scr-cx-denom{font-size:.72rem;font-weight:500;color:var(--text3);}
.scr-cx-track{position:relative;height:9px;border-radius:999px;background:linear-gradient(90deg,#2ecc71 0%,#a3d331 28%,#f1c40f 52%,#e8871e 74%,#e04b3a 100%);}
.scr-cx-marker{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:#fff;border:2.5px solid var(--text);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.4);}
.scr-cx-scale{display:flex;justify-content:space-between;font-size:.66rem;color:var(--text3);margin-top:.3rem;letter-spacing:.02em;}
.scr-cx-drivers{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem;}
.scr-cx-driver{font-size:.72rem;color:var(--text2);background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:.16rem .6rem;}
/* Band accents on the marker border */
.scr-cx-low     .scr-cx-marker{border-color:#2ecc71;}
.scr-cx-moderate .scr-cx-marker{border-color:#d4a017;}
.scr-cx-high    .scr-cx-marker{border-color:#e8871e;}
.scr-cx-extreme .scr-cx-marker{border-color:#e04b3a;}
.scr-cx-low     .scr-cx-label{color:#2ecc71;}
.scr-cx-moderate .scr-cx-label{color:#d4a017;}
.scr-cx-high    .scr-cx-label{color:#e8871e;}
.scr-cx-extreme .scr-cx-label{color:#e04b3a;}
/* Mini gauge on library cards */
.scr-cx-mini{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;}
.scr-cx-mini-track{position:relative;flex:1;height:5px;border-radius:999px;background:linear-gradient(90deg,#2ecc71 0%,#a3d331 28%,#f1c40f 52%,#e8871e 74%,#e04b3a 100%);}
.scr-cx-mini-marker{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--text);transform:translate(-50%,-50%);box-shadow:0 1px 2px rgba(0,0,0,.4);}
.scr-cx-mini-lbl{font-size:.68rem;font-weight:600;flex-shrink:0;}
.scr-cx-mini.scr-cx-low     .scr-cx-mini-lbl{color:#2ecc71;} .scr-cx-mini.scr-cx-low     .scr-cx-mini-marker{border-color:#2ecc71;}
.scr-cx-mini.scr-cx-moderate .scr-cx-mini-lbl{color:#d4a017;} .scr-cx-mini.scr-cx-moderate .scr-cx-mini-marker{border-color:#d4a017;}
.scr-cx-mini.scr-cx-high    .scr-cx-mini-lbl{color:#e8871e;} .scr-cx-mini.scr-cx-high    .scr-cx-mini-marker{border-color:#e8871e;}
.scr-cx-mini.scr-cx-extreme .scr-cx-mini-lbl{color:#e04b3a;} .scr-cx-mini.scr-cx-extreme .scr-cx-mini-marker{border-color:#e04b3a;}

/* ── Unified share ("production pack") page (b273) ───────────────
   Sticky section nav + section wrappers on the combined read-only page. */
.scr-share-nav{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:.3rem;padding:.7rem 0;margin-bottom:1.4rem;background:var(--bg);border-bottom:1px solid var(--border);}
.scr-share-navlink{font-size:.8rem;color:var(--text2);text-decoration:none;padding:.32rem .7rem;border-radius:999px;border:1px solid transparent;transition:background .12s,color .12s,border-color .12s;}
.scr-share-navlink:hover{color:var(--text);background:var(--surface2);}
.scr-share-navlink.active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);}
.scr-share-section{margin-bottom:2.4rem;scroll-margin-top:80px;}
.scr-share-h{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);}
/* On the combined page the moodboard viewwrap shouldn't add its own top gap */
.scr-share-section .scr-mb-viewtoggle{margin-top:0;margin-bottom:1rem;}
.scr-share-section .scr-mb-overview{margin-top:0;}
/* Sub-groups inside the Overview section (characters/locations) */
.bd-sub{margin-top:1.4rem;}
.bd-sub h4{font-size:.9rem;font-weight:650;margin:0 0 .7rem;color:var(--text);}
.bd-sub .bd-count{font-size:.72rem;color:var(--text3);font-weight:500;margin-left:.3rem;}

/* ── Unified share dialog (in-app) ─────────────────────────────── */
.scr-share-opts{display:flex;flex-direction:column;gap:.1rem;margin:.4rem 0 1rem;}
.scr-share-opt{display:flex;align-items:center;gap:.7rem;padding:.55rem .3rem;border-radius:8px;cursor:pointer;transition:background .12s;}
.scr-share-opt:hover{background:var(--surface2);}
.scr-share-opt input{width:17px;height:17px;flex-shrink:0;cursor:pointer;accent-color:var(--accent);}
.scr-share-opt.disabled{opacity:.42;cursor:not-allowed;}
.scr-share-opt.disabled input{cursor:not-allowed;}
.scr-share-opt-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.scr-share-opt-name{font-size:.9rem;color:var(--text);font-weight:550;}
.scr-share-opt-sub{font-size:.74rem;color:var(--text3);}
.scr-share-opt.disabled .scr-share-opt-sub{color:var(--text3);}

/* =====================================================================
   TOOLS  (b275+) — production utilities section
   Card grid + self-contained tool panels. Theme-var based so both the
   dark and light palettes resolve automatically.
   ===================================================================== */
/* The .view shell is display:flex; the child must claim the width AND own
   the vertical scroll. Mirrors the proven #tasks-content recipe
   (flex:1 + overflow-y:auto + width:100% + max-width cap). The earlier
   flex:1 1 auto / min-height:0 form centred but did not scroll. */
#tools-content{flex:1;overflow-y:auto;width:100%;max-width:var(--page-max);margin:0 auto;padding:1.15rem 1.4rem 1.5rem;}
.tools-wrap{max-width:var(--page-max);width:100%;margin:0 auto;padding:1.5rem 1.8rem;} /* (b467) was 960px — every section shares --page-max now */
#tools-content{flex:1;overflow-y:auto;}
.tools-section-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin:1.4rem .15rem .55rem;}
.tools-section-label:first-of-type{margin-top:.4rem;}

.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:.7rem;}
.tool-card{display:flex;align-items:flex-start;gap:.75rem;text-align:left;width:100%;padding:.9rem .95rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:border-color .13s,transform .13s,background .13s,box-shadow .13s;font-family:inherit;color:var(--text);}
.tool-card:hover{border-color:var(--accent);background:var(--surface-hi);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.tool-card:active{transform:translateY(0);}
.tool-card-icon{font-size:1.5rem;line-height:1;flex:0 0 auto;margin-top:.05rem;filter:saturate(1.05);}
.tool-card-body{display:flex;flex-direction:column;gap:.2rem;min-width:0;}
.tool-card-name{display:flex;align-items:center;gap:.5rem;font-weight:650;font-size:.95rem;color:var(--text);}
.tool-card-blurb{font-size:.8rem;line-height:1.35;color:var(--text3);}
.tool-badge{font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.1rem .4rem;border-radius:999px;line-height:1.4;}
.tool-badge.ai{background:var(--accent-dim);color:var(--accent);}
.tool-badge.calc{background:var(--surface3);color:var(--text2);}

/* ── Tool panel chrome ─────────────────────────────────────── */
.tool-head{display:flex;align-items:flex-start;gap:.85rem;max-width:940px;margin:0 auto .2rem;}
.tool-head-titles{padding-top:.15rem;}
.tool-head-title{font-size:1.32rem;font-weight:700;color:var(--text);line-height:1.1;}
.tool-head-sub{font-size:.83rem;color:var(--text3);margin-top:.2rem;}
.tool-body{max-width:940px;margin:1rem auto 0;display:flex;flex-direction:column;gap:1rem;}

.tool-field{display:flex;flex-direction:column;gap:.35rem;min-width:0;}
.tool-label{font-size:.78rem;font-weight:600;color:var(--text2);}
.tool-opt{font-weight:400;color:var(--text3);font-size:.74rem;}
.tool-row{display:grid;grid-template-columns:1fr;gap:1rem;}
@media(min-width:620px){.tool-row{grid-template-columns:1fr 160px;}}
.tool-field-narrow{max-width:200px;}

.tool-textarea,.tool-input{width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:9px;color:var(--text);font-family:inherit;font-size:.9rem;padding:.6rem .7rem;transition:border-color .13s,box-shadow .13s;}
.tool-textarea{resize:vertical;line-height:1.45;}
.tool-textarea:focus,.tool-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
select.tool-input{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text3) 50%),linear-gradient(135deg,var(--text3) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem;}

.tool-chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.tool-chip{padding:.4rem .7rem;border-radius:999px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);font-size:.82rem;font-family:inherit;cursor:pointer;transition:all .12s;}
.tool-chip:hover{border-color:var(--border3);color:var(--text);}
.tool-chip.on{background:var(--accent);border-color:var(--accent);color:#1a1205;font-weight:600;}

.tool-actions{display:flex;flex-wrap:wrap;gap:.55rem;}
.tool-out{margin-top:.2rem;}
.tool-loading{padding:1.1rem;text-align:center;color:var(--text3);font-size:.88rem;background:var(--surface);border:1px dashed var(--border2);border-radius:10px;}
.tool-alert{padding:.7rem .85rem;background:var(--red-dim);border:1px solid var(--red);border-radius:9px;color:var(--text);font-size:.85rem;}

/* ── Scopes & False Colour (Tools → scopes, grip-scopes.js) ── */
/* ── (b850) Scopes overlay — Shot Library "analyze this image" ──
   Sits ABOVE the shot detail viewer (.sht-lb, z 210) so scopes open
   over the image you're looking at and Esc peels layers in order. */
.scp-overlay{
  position:fixed;inset:0;z-index:230;display:none;
  background:rgba(5,6,9,.96);
  align-items:flex-start;justify-content:center;
  padding:2.5vh 2vw;overflow-y:auto;
}
.scp-ov-panel{
  width:min(1100px,100%);
  background:var(--surface);border:1px solid var(--border2);
  border-radius:14px;padding:1rem 1.2rem 1.2rem;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.scp-ov-head{
  display:flex;align-items:center;gap:.7rem;
  padding-bottom:.7rem;margin-bottom:.8rem;
  border-bottom:1px solid var(--border);
}
.scp-ov-title{font-weight:700;font-size:.95rem;color:var(--text);}
.scp-ov-label{
  flex:1;min-width:0;color:var(--text3);font-size:.82rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scp-ov-loading{padding:2rem 0;text-align:center;color:var(--text3);font-size:.88rem;}
.scp-source-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.scp-upload-btn{cursor:pointer;}
.scp-or{color:var(--text3);font-size:.8rem;}
.scp-url{flex:1;min-width:180px;}
.scp-status{margin-top:.55rem;padding:.6rem .8rem;border-radius:9px;background:var(--surface);border:1px solid var(--border2);color:var(--text2);font-size:.84rem;line-height:1.45;}
.scp-status.err{background:var(--red-dim);border-color:var(--red);color:var(--text);}
.scp-src-line{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.7rem 0 .5rem;}
.scp-src-name{font-size:.85rem;color:var(--text);font-weight:600;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scp-src-tag{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);border:1px solid var(--border2);border-radius:999px;padding:.1rem .45rem;}
.scp-src-dims{font-size:.8rem;color:var(--text3);font-variant-numeric:tabular-nums;}
.scp-mode-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.35rem 0 .45rem;}
.scp-zebra-ctl{display:inline-flex;align-items:center;gap:.4rem;margin-left:.2rem;}
.scp-zebra-ctl input[type=range]{width:110px;}
.scp-zebra-ctl span{font-size:.8rem;color:var(--text2);font-variant-numeric:tabular-nums;}
.scp-legend{display:flex;align-items:center;gap:.45rem .7rem;flex-wrap:wrap;margin:.15rem 0 .5rem;padding:.45rem .6rem;background:var(--surface);border:1px solid var(--border);border-radius:9px;}
.scp-lg{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--text2);white-space:nowrap;}
.scp-lg i{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;border:1px solid rgba(255,255,255,.25);}
.scp-lg-note{font-size:.72rem;color:var(--text3);flex-basis:100%;}
.scp-viewer{background:#000;border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;justify-content:center;}
.scp-viewer canvas{display:block;max-width:100%;max-height:62vh;height:auto;}
.scp-transport{display:flex;align-items:center;gap:.45rem;margin:.55rem 0 .2rem;flex-wrap:wrap;}
.scp-transport input[type=range]{flex:1;min-width:120px;}
.scp-time{font-size:.8rem;color:var(--text2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.scp-fps{background:var(--surface);color:var(--text2);border:1px solid var(--border2);border-radius:7px;font-size:.78rem;padding:.25rem .35rem;font-family:inherit;}
.scp-scope-toggles{display:flex;gap:.4rem;flex-wrap:wrap;margin:.7rem 0 .5rem;}
.scp-scopes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.7rem;}
.scp-scope{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.5rem .6rem .6rem;min-width:0;}
.scp-scope-sq{max-width:340px;}
.scp-scope-lab{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);margin-bottom:.35rem;}
.scp-scope canvas{display:block;width:100%;height:auto;border-radius:6px;background:#0b0d12;}
.scp-empty{text-align:center;color:var(--text2);padding:2.4rem 1rem;background:var(--surface);border:1px dashed var(--border2);border-radius:12px;margin-top:.7rem;font-size:.9rem;}
.scp-empty-ico{font-size:1.7rem;margin-bottom:.4rem;}
.scp-empty-sub{color:var(--text3);font-size:.8rem;margin-top:.3rem;}
.scp-foot{margin-top:.85rem;font-size:.75rem;color:var(--text3);line-height:1.45;}

/* ── Shot Library (view #shots, grip-shots.js) ─────────────── */
/* Match the app's standard page rhythm (see #diagrams-content, b467):
   content div owns the scroll, page-max centred column, 1.5/1.8rem
   container padding — same as Jobs/People/Diagrams. */
#view-shots{flex-direction:column;}
#view-appinsights{flex-direction:column;}
#appinsights-content{flex:1 1 auto;min-height:0;overflow-y:auto;}
#shots-content{
  display:flex;flex-direction:column;flex:1 1 auto;
  min-width:0;min-height:0;width:100%;
  overflow-y:auto;padding:1.5rem 1.8rem;
}
.sht-wrap{max-width:var(--page-max);width:100%;margin:0 auto;}
.sht-upload-btn{cursor:pointer;}
.sht-toolbar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.2rem 0 .6rem;}
.sht-searchwrap{flex:1;min-width:200px;position:relative;display:flex;}
.sht-searchwrap .sht-search{flex:1;min-width:0;padding-right:2rem;}
.sht-searchspin{position:absolute;right:.6rem;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid var(--border3);border-top-color:var(--accent);border-radius:50%;animation:shtspin .7s linear infinite;pointer-events:none;}
.sht-searchspin[hidden]{display:none;}
@keyframes shtspin{to{transform:rotate(360deg);}}
.sht-grid-stale{opacity:.55;transition:opacity .15s;}
.sht-qpill{font-style:normal;}
.sht-colorpill{display:inline-flex;align-items:center;gap:.35rem;}
.sht-colorpill i{width:13px;height:13px;border-radius:4px;display:inline-block;border:1px solid var(--border3);}
/* Sidebar colour facet */
.sht-side-colors{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;}
.sht-fc-sw{width:21px;height:21px;border-radius:50%;border:1px solid var(--border3);cursor:pointer;padding:0;}
.sht-fc-sw.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent);}
.sht-fc-pick{width:21px;height:21px;border-radius:50%;cursor:pointer;position:relative;overflow:hidden;border:1px solid var(--border3);background:conic-gradient(#e0533f,#d68a44,#c9a24b,#7a8f4a,#2f9d7a,#3d7fb0,#8455a0,#c2698f,#e0533f);}
.sht-fc-pick.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent);}
.sht-fc-pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.sht-fcount{background:var(--accent);color:#1a1205;border-radius:999px;padding:0 .4rem;font-size:.7rem;font-weight:700;}
/* ── Toolbar "More" menu (mirrors .hdr-more) ── */
.sht-more{position:relative;display:inline-flex;}
.sht-more-caret{font-size:.62rem;opacity:.7;margin-left:.15rem;}
.sht-more-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.28);padding:.35rem;z-index:120;display:flex;flex-direction:column;gap:.1rem;}
.sht-more-menu[hidden]{display:none;}
.sht-more-item{display:flex;align-items:center;gap:.45rem;width:100%;text-align:left;background:none;border:none;color:var(--text);font-family:var(--ui);font-size:.84rem;padding:.45rem .55rem;border-radius:7px;cursor:pointer;}
.sht-more-item:hover{background:var(--surface2);}
.sht-more-item.sht-on{color:var(--accent);}
.sht-more-check{color:var(--text2);font-size:.8rem;}
.sht-more-check input{accent-color:var(--accent);}
.sht-more-div{height:1px;background:var(--border);margin:.25rem .3rem;}
.sht-aiop{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--text3);white-space:nowrap;cursor:pointer;}
/* Tag-uploads row: Shoot / Camera / Lens applied to every upload */
.sht-uptag-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;padding:.5rem .7rem;background:var(--surface);border:1px solid var(--border2);border-radius:9px;margin:0 0 .6rem;}
.sht-uptag-lab{font-size:.74rem;font-weight:650;color:var(--text3);white-space:nowrap;}
.sht-uptag-row .tool-input{flex:1;min-width:110px;}
/* Lightbox (collection) bar shown while one is open */
.sht-lbxbar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;padding:.5rem .7rem;background:var(--surface2);border:1px solid var(--border2);border-radius:10px;margin:0 0 .7rem;}
.sht-lbx-title{font-size:.95rem;font-weight:700;color:var(--text);}
.sht-lbx-live{color:var(--accent);font-size:.72rem;font-weight:700;white-space:nowrap;}
.sht-lbx-hint{font-size:.72rem;}
/* ── Shots facet sidebar ─────────────────────────────────────── */
.sht-body{display:flex;gap:1.15rem;align-items:flex-start;}
.sht-body.lbxmode .sht-side, .sht-body.side-hidden .sht-side{display:none;}
.sht-body.lbxmode .sht-sidebackdrop{display:none!important;}
.sht-side{
  width:212px;flex-shrink:0;
  position:sticky;top:0;
  max-height:calc(100dvh - 140px);overflow-y:auto;
  padding:.1rem .55rem .8rem 0;
  scrollbar-width:thin;
}
.sht-main{flex:1;min-width:0;}
.sht-side-head{display:flex;align-items:center;gap:.5rem;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text3);margin:0 0 .55rem;}
.sht-side-head span{flex:1;}
.sht-side-clear{background:none;border:none;color:var(--accent);font-size:.68rem;cursor:pointer;padding:0;}
.sht-side-x{background:none;border:none;color:var(--text3);cursor:pointer;font-size:.8rem;padding:0 .1rem;}
.sht-side-sec{margin:0 0 .85rem;}
.sht-side-lab{font-size:.64rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin:0 0 .35rem;}
.sht-side-chips{display:flex;flex-wrap:wrap;gap:4px;}
.sht-side .tool-chip{font-size:.7rem;padding:.18rem .5rem;}
.sht-side-more{background:none;border:none;color:var(--text3);font-size:.68rem;cursor:pointer;padding:.18rem .2rem;}
.sht-side-more:hover{color:var(--accent);}
.sht-sidebackdrop{display:none;}
@media (max-width:900px){
  .sht-side{
    display:none;
    position:fixed;inset:0 auto 0 0;top:0;
    width:min(300px,84vw);max-height:none;height:100dvh;
    background:var(--surface);border-right:1px solid var(--border2);
    padding:1rem;z-index:231;
    -webkit-overflow-scrolling:touch;
  }
  .sht-body.side-drawer .sht-side{display:block;}
  .sht-body.side-drawer .sht-sidebackdrop{display:block;position:fixed;inset:0;background:rgba(5,6,10,.55);z-index:230;}
}

/* AI queue chip */
.sht-pendbtn{white-space:nowrap;}
.sht-pendbtn.sht-on{border-color:var(--accent);color:var(--accent);}
.sht-failbtn{white-space:nowrap;color:var(--red);border-color:var(--red);}
/* Dropbox import dialog */
.sht-imp-help{font-size:.76rem;line-height:1.5;margin-bottom:.6rem;}
.sht-imp-help a{color:var(--accent);}
.sht-imp-err{color:var(--red);font-size:.78rem;min-height:1em;margin-top:.3rem;}
.sht-imp-status{font-size:.88rem;font-weight:650;margin:.2rem 0 .5rem;}
.sht-imp-sum{font-size:.76rem;color:var(--text2);line-height:1.55;display:flex;flex-direction:column;gap:.45rem;}
.sht-imp-folders{border-top:1px solid var(--border2);padding-top:.45rem;}
.sht-imp-note{color:var(--text3);}
.sht-imp-errors{color:var(--red);}
/* Tag dialog quick rows */
.sht-tagq-row{align-items:center;}
.sht-tagq-lab{font-size:.74rem;font-weight:650;color:var(--text3);width:4.2rem;flex-shrink:0;}
/* Reorder affordances inside a lightbox */
.sht-card.sht-dragover{outline:2px dashed var(--accent);outline-offset:2px;}
.sht-mv{position:absolute;bottom:.35rem;right:.35rem;display:none;gap:.25rem;z-index:2;}
.sht-card:hover .sht-mv{display:flex;}
.sht-mv button{width:1.5rem;height:1.5rem;border-radius:6px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.55);color:#fff;font-size:.95rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.sht-mv button:hover{background:rgba(0,0,0,.8);}
@media (hover:none){ .sht-mv{display:flex;} }
.sht-active{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:0 0 .55rem;}
.sht-facets{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.7rem .85rem;margin:0 0 .7rem;max-height:44vh;overflow-y:auto;}
.sht-facet-sec{margin:0 0 .6rem;}
.sht-facet-lab{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:.3rem;}
.sht-facet-chips{display:flex;flex-wrap:wrap;gap:.3rem;}
.sht-chip-n{opacity:.6;font-size:.68rem;}
.sht-facet-none{color:var(--text3);font-size:.84rem;}
.sht-up{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;background:var(--surface);border:1px solid var(--border2);border-radius:9px;font-size:.84rem;color:var(--text2);margin:0 0 .6rem;}
.sht-up.done{border-color:var(--accent);}
.sht-up.warn{border-color:var(--red);}
.sht-up-spin{width:.85rem;height:.85rem;border:2px solid var(--border3);border-top-color:var(--accent);border-radius:50%;animation:sht-spin .8s linear infinite;flex-shrink:0;}
@keyframes sht-spin{to{transform:rotate(360deg);}}
.sht-selbar{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;padding:.5rem .7rem;background:var(--surface2);border:1px solid var(--border2);border-radius:10px;margin:0 0 .7rem;position:sticky;top:6px;z-index:5;}
.sht-selcount{font-size:.84rem;font-weight:650;color:var(--text);}
.sht-on{background:var(--accent) !important;color:#1a1205 !important;border-color:var(--accent) !important;}
/* (b753) Density via --sht-b (row base width per unit of aspect
   ratio). Small is the default; S/M/L toggle in the toolbar. */
.sht-grid{--sht-b:120px;--sht-max:250px;columns:5 240px;column-gap:12px;min-height:120px;border-radius:12px;}
.sht-grid[data-size="m"]{--sht-b:175px;--sht-max:360px;}
.sht-grid[data-size="l"]{--sht-b:240px;--sht-max:520px;}
.sht-density{display:inline-flex;border:1px solid var(--border);border-radius:7px;overflow:hidden;}
.sht-density-btn{font:inherit;font-size:.72rem;font-weight:600;color:var(--text3);background:transparent;border:none;
  padding:.3rem .55rem;cursor:pointer;line-height:1;}
.sht-density-btn + .sht-density-btn{border-left:1px solid var(--border);}
.sht-density-btn:hover{color:var(--text);}
.sht-density-btn.on{color:#fff;background:var(--sec,var(--accent));}
.sht-grid.sht-drop{outline:2px dashed var(--accent);outline-offset:6px;}
/* Shift-click range selection shouldn't smear text selection */
.sht-grid.selmode{user-select:none;-webkit-user-select:none;}
.sht-card{position:relative;break-inside:avoid;margin:0 0 12px;border-radius:10px;overflow:hidden;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:border-color .12s;}
.sht-card:hover{border-color:var(--border3);}
.sht-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}
.sht-card img{width:100%;display:block;background:#000;object-fit:cover;}
/* Justified rows (open lightbox): cards carry --r (w/h). flex-basis and
   flex-grow both ∝ --r, so widths in a row distribute proportionally to
   aspect ratio → the whole row shares ONE height. aspect-ratio on the
   card turns that width into the right height; the img covers exactly. */
.sht-grid.jrows{columns:auto;column-count:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;}
.sht-grid.jrows[data-size="l"]{gap:10px;}
.sht-grid.jrows .sht-card{
  flex-grow:var(--r,1.5);flex-basis:calc(var(--r,1.5) * var(--sht-b));
  max-width:calc(var(--r,1.5) * var(--sht-max));
  aspect-ratio:var(--r,1.5);margin:0;break-inside:auto;min-width:0;
}
.sht-grid.jrows .sht-card img{width:100%;height:100%;}
.sht-jfill{flex-grow:1000000;flex-basis:0;height:0;}
.sht-grid[data-size="s"] .sht-card-title{font-size:.62rem;padding:.55rem .4rem .22rem;}
.sht-card-title{position:absolute;left:0;right:0;bottom:0;padding:.9rem .55rem .35rem;font-size:.72rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;}
.sht-check{position:absolute;top:.4rem;left:.4rem;width:1.25rem;height:1.25rem;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:rgba(0,0,0,.35);color:#1a1205;font-size:.8rem;font-weight:800;display:none;align-items:center;justify-content:center;}
.sht-card.sel .sht-check{background:var(--accent);border-color:var(--accent);display:flex;}
.sht-grid.selmode .sht-check{display:flex;}
.sht-ai-badge{position:absolute;top:.4rem;right:.4rem;font-size:.62rem;font-weight:700;letter-spacing:.03em;border-radius:999px;padding:.15rem .45rem;background:rgba(0,0,0,.55);color:#fff;}
.sht-ai-badge.gen{color:var(--accent);}
.sht-ai-badge.err{color:#ff7070;}
.sht-sentinel{height:2px;}
.sht-empty{text-align:center;color:var(--text2);padding:3rem 1rem;background:var(--surface);border:1px dashed var(--border2);border-radius:12px;font-size:.92rem;column-span:all;}
/* Under the justified-rows layout the empty/loading card is a flex
   item — without this it shrinks to content width like a thumbnail. */
.sht-grid.jrows .sht-empty{flex:1 0 100%;width:100%;}
/* Floating Select — appears once the header button scrolls away */
/* Bottom-centre pill (corner placement was out of thumb reach) */
.sht-selfab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bnav-h,0px) + env(safe-area-inset-bottom,0px) + 14px);height:40px;padding:0 1.05rem;border-radius:999px;background:var(--accent);color:#1a1205;border:none;font-family:var(--ui);font-size:.86rem;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;z-index:90;display:flex;align-items:center;gap:.4rem;white-space:nowrap;}
.sht-selfab[hidden]{display:none;}
.sht-selfab-done{background:var(--surface3);color:var(--text);border:1px solid var(--border3);}
.sht-empty-ico{font-size:1.9rem;margin-bottom:.4rem;}
.sht-empty-sub{color:var(--text3);font-size:.8rem;margin-top:.35rem;max-width:52ch;margin-left:auto;margin-right:auto;line-height:1.5;}
.sht-toast{position:fixed;left:50%;bottom:calc(var(--bnav-h,0px) + env(safe-area-inset-bottom,0px) + 18px);transform:translate(-50%,10px);background:var(--surface3);color:var(--text);border:1px solid var(--border3);border-radius:10px;padding:.55rem .9rem;font-size:.84rem;opacity:0;pointer-events:none;transition:all .2s;z-index:220;max-width:90vw;}
.sht-toast.on{opacity:1;transform:translate(-50%,0);}
.sht-dim{color:var(--text3);}
/* overlay dialogs */
.sht-overlay{position:fixed;inset:0;background:rgba(5,6,10,.6);z-index:215;display:flex;align-items:center;justify-content:center;padding:1rem;}
/* ── Duplicate review ── */
.sht-dupes-dlg{width:min(880px,96vw);max-height:92dvh;gap:.55rem;}
.sht-dup-head{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.sht-dup-count{font-size:.78rem;color:var(--text2);}
.sht-dup-modes{display:flex;gap:.25rem;}
.sht-dup-note{font-size:.74rem;color:var(--text3);}
.sht-dup-list{display:flex;flex-direction:column;gap:.6rem;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;}
.sht-dup-grp{border:1px solid var(--border);border-radius:10px;padding:.5rem;display:flex;flex-direction:column;gap:.4rem;background:var(--surface2);}
.sht-dup-thumbs{display:flex;flex-wrap:wrap;gap:.4rem;}
.sht-dup-card{width:116px;cursor:pointer;position:relative;border:2px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface);}
.sht-dup-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
.sht-dup-card.cut img{opacity:.4;}
.sht-dup-card.keep{border-color:var(--accent);}
.sht-dup-badge{position:absolute;top:.22rem;left:.22rem;font-size:.58rem;font-weight:800;padding:.08rem .28rem;border-radius:5px;background:rgba(0,0,0,.55);color:#fff;}
.sht-dup-card.keep .sht-dup-badge{background:var(--accent);color:#1a1205;}
.sht-dup-meta{font-size:.6rem;color:var(--text3);padding:.18rem .25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sht-dup-acts{display:flex;align-items:center;gap:.45rem;}
.sht-dup-gsum{font-size:.72rem;color:var(--text2);}
@media(max-width:720px){.sht-dup-card{width:31%;}}
/* ── Insights ── */
.sht-ins-note{color:var(--text3);font-size:.82rem;padding:1rem .2rem;}
.sht-ins-sec{margin:1rem 0 1.3rem;}
.sht-ins-h{font-weight:700;font-size:.92rem;color:var(--text);margin-bottom:.5rem;}
.sht-ins-sub{font-weight:400;font-size:.72rem;color:var(--text3);margin-left:.4rem;}
.sht-ins-cv{width:100%;display:block;border-radius:10px;cursor:pointer;background:var(--surface2);}
.sht-ins-charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem 1.2rem;}
.sht-ins-chart{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:.6rem .7rem;}
.sht-ins-ctitle{font-size:.76rem;font-weight:700;color:var(--text2);margin-bottom:.4rem;}
.sht-ins-brow{display:flex;align-items:center;gap:.45rem;margin:.18rem 0;}
.sht-ins-blab{flex:0 0 88px;font-size:.68rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sht-ins-btrack{flex:1;position:relative;height:9px;background:var(--surface);border-radius:5px;overflow:visible;}
.sht-ins-btrack i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:5px;display:block;}
.sht-ins-avg{position:absolute;top:50%;width:6px;height:6px;background:var(--text2);transform:translate(-50%,-50%) rotate(45deg);border-radius:1px;}
.sht-ins-bnum{flex:0 0 34px;text-align:right;font-size:.66rem;color:var(--text3);}
.sht-ins-heat{display:grid;gap:3px;font-size:.64rem;overflow-x:auto;}
.sht-ins-hcol,.sht-ins-hrow{color:var(--text3);white-space:nowrap;padding:.15rem .25rem;align-self:center;}
.sht-ins-hcol{text-align:center;}
.sht-ins-hcell{border:none;border-radius:5px;min-height:26px;color:var(--text);font-size:.66rem;background:color-mix(in srgb, var(--accent) calc(var(--a)*82%), var(--surface2));cursor:pointer;}
.sht-ins-hcell:disabled{cursor:default;background:var(--surface2);color:var(--text3);}
.sht-ins-palrow{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-bottom:.6rem;}
.sht-ins-cpick{width:42px;height:30px;border:1px solid var(--border2);border-radius:7px;background:none;padding:2px;cursor:pointer;}
.sht-ins-sw{width:24px;height:24px;border-radius:6px;border:2px solid transparent;cursor:pointer;}
.sht-ins-sw.on{border-color:var(--text);}
.sht-ins-palgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.4rem;}
.sht-ins-palgrid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;cursor:pointer;display:block;background:var(--surface2);}
/* Ambient */
.sht-amb{position:fixed;inset:0;background:#05060a;z-index:230;cursor:pointer;}
.sht-amb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.6s ease;}
.sht-amb-img.on{opacity:1;}
.sht-amb-bar{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.72));display:flex;flex-direction:column;gap:.4rem;}
.sht-amb-pal{display:flex;gap:.3rem;}
.sht-amb-pal i{width:22px;height:10px;border-radius:3px;display:block;}
.sht-amb-txt{color:#e8e6e1;font-size:.82rem;max-width:70ch;line-height:1.45;}
/* ── Extra insights (b543) ── */
.sht-ins-duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:640px){.sht-ins-duo{grid-template-columns:1fr;}}
.sht-ins-sq{max-width:340px;margin:0 auto;background:transparent;}
.sht-ins-legend{display:flex;gap:.9rem;margin-top:.4rem;font-size:.7rem;color:var(--text3);}
.sht-ins-legend i{display:inline-block;width:12px;height:8px;border-radius:2px;margin-right:.3rem;}
.sht-ins-dna{display:flex;align-items:center;gap:.6rem;padding:.32rem .2rem;cursor:pointer;border-radius:8px;}
.sht-ins-dna:hover{background:var(--surface2);}
.sht-ins-dnaname{flex:0 0 130px;font-size:.76rem;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sht-ins-dnabar{flex:1;height:16px;border-radius:5px;min-width:60px;}
.sht-ins-dnameta{flex:0 0 auto;font-size:.66rem;color:var(--text3);white-space:nowrap;}
@media(max-width:640px){.sht-ins-dnameta{display:none;}.sht-ins-dnaname{flex-basis:96px;}}
.sht-ins-recs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem;}
.sht-ins-rec{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:.5rem .65rem;display:flex;flex-direction:column;gap:.15rem;}
.sht-ins-reck{font-size:.64rem;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;}
.sht-ins-recv{font-size:.82rem;color:var(--text);font-weight:650;display:flex;align-items:center;gap:.35rem;}
.sht-ins-avgsw{display:inline-block;width:16px;height:16px;border-radius:5px;border:1px solid var(--border2);}
.sht-ins-cloud{display:flex;flex-wrap:wrap;gap:.35rem .75rem;align-items:baseline;line-height:1.25;}
.sht-ins-cloudw{background:none;border:none;cursor:pointer;font-family:var(--ui);font-weight:650;padding:0;transition:opacity .12s;}
.sht-ins-cloudw:hover{opacity:.75;text-decoration:underline;}
.sht-lb-pal i{cursor:pointer;}
.sht-lb-simrow{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.2rem;-webkit-overflow-scrolling:touch;}
.sht-lb-simrow img{height:64px;aspect-ratio:3/2;object-fit:cover;border-radius:7px;cursor:pointer;flex:0 0 auto;background:var(--surface2);}
.bd-refs-btn{margin-left:.35rem;padding:.05rem .3rem;font-size:.72rem;}
.sht-scref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.45rem;max-height:56vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.sht-scref-card{position:relative;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--surface2);}
.sht-scref-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
.sht-scref-card.on{border-color:var(--accent);}
.sht-scref-card.on::after{content:'✓';position:absolute;top:.25rem;left:.25rem;background:var(--accent);color:#1a1205;font-size:.62rem;font-weight:800;padding:.05rem .3rem;border-radius:5px;}
.sht-scref-open{position:absolute;bottom:.25rem;right:.25rem;background:rgba(0,0,0,.55);color:#fff;font-size:.7rem;padding:.05rem .3rem;border-radius:5px;text-decoration:none;}
.sht-scref-hint{font-size:.72rem;color:var(--text3);align-self:center;}
.sht-dialog{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:1rem 1.05rem;width:min(440px,94vw);display:flex;flex-direction:column;gap:.6rem;max-height:86vh;overflow-y:auto;}
.sht-dialog-wide{width:min(640px,94vw);}
.sht-dialog-title{font-weight:700;font-size:1rem;color:var(--text);}
.sht-dialog-row{display:flex;gap:.45rem;}
.sht-dialog-row .tool-input{flex:1;min-width:0;}
.sht-dialog-acts{display:flex;justify-content:flex-end;gap:.45rem;}
.sht-sh-opt{display:flex;align-items:center;gap:.45rem;font-size:.84rem;color:var(--text2);cursor:pointer;}
.sht-sh-url{display:flex;gap:.45rem;margin-top:.2rem;}
.sht-sh-url .tool-input{flex:1;min-width:0;font-size:.8rem;}
.sht-shares-list{display:flex;flex-direction:column;gap:.45rem;min-height:60px;}
.sht-share-row{display:flex;align-items:center;gap:.45rem;padding:.5rem .6rem;background:var(--surface2);border:1px solid var(--border);border-radius:10px;}
.sht-share-info{flex:1;min-width:0;}
.sht-share-title{font-size:.88rem;font-weight:650;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sht-share-sub{font-size:.74rem;color:var(--text3);}
/* lightbox */
.sht-lb{position:fixed;inset:0;background:rgba(5,6,9,.94);z-index:210;display:flex;align-items:flex-start;justify-content:center;padding-top:2.5vh;overflow-y:auto;}
/* (b552) Landscape-first: the frame spans the FULL modal width and
   the box hugs its aspect ratio (--lbr = w/h, set inline), capped at
   62vh so portraits behave; details flow in columns BELOW instead of
   a 330px skinny scroll rail. */
.sht-lb-body{display:flex;flex-direction:column;width:min(1600px,96vw);max-height:94vh;background:var(--surface);border:1px solid var(--border2);border-radius:14px;overflow:hidden;}
.sht-lb-imgwrap{flex:0 0 auto;width:100%;height:min(64vh, calc(min(1600px, 96vw) / var(--lbr, 1.78)));min-height:180px;background:#000;display:flex;align-items:center;justify-content:center;}
.sht-lb-imgwrap img{width:100%;height:100%;object-fit:contain;}
.sht-lb-panel{flex:0 1 auto;padding:.9rem 1.05rem;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem;border-top:1px solid var(--border);}
.sht-lb-cols{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:.6rem 1.8rem;align-items:start;}
.sht-lb-col{display:flex;flex-direction:column;gap:.55rem;min-width:0;}
/* Tags as ONE continuous wrapping flow — kind labels ride inline
   between their chips, so vertical space tracks tag count, not the
   number of kinds. */
.sht-lb-tagflow{display:flex;flex-wrap:wrap;gap:.3rem .35rem;align-items:center;min-width:0;}
.sht-lb-tagflow .sht-lb-tagkind{font-size:.6rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;margin-left:.45rem;flex-basis:auto;flex-grow:0;width:auto;}
.sht-lb-tagflow .sht-lb-tagkind:first-child{margin-left:0;}
.sht-lb-tagflow .sht-tag{font-size:.7rem;padding:.1rem .25rem .1rem .45rem;}
/* (b574) Letterbox trim that can NEVER crop picture: the img box
   itself takes the PICTURE's ratio (aspect-ratio + auto/max sizing —
   replaced elements preserve ratio under max clamping), so cover only
   pushes the baked black bars out of the box. The old rule covered
   inside the WRAP, whose vh/min-height-clamped ratio ≠ --lbr on small
   screens, so real image content got cropped. */
.sht-lb-imgwrap img.sht-lb-crop{
  width:auto;height:auto;max-width:100%;max-height:100%;
  aspect-ratio:var(--lbr,1.78);
  object-fit:cover;
}
/* ── (b558) Detail design pass — one type system, quiet editing ── */
.sht-lb-panel{padding:1.05rem 1.4rem 1.2rem;gap:.9rem;}
.sht-lb-head{display:flex;align-items:flex-start;gap:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--border);}
.sht-lb-headmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem;}
.sht-lb-titletext{font-size:1.22rem;font-weight:700;color:var(--text);line-height:1.25;outline:none;border-radius:6px;padding:.05rem .3rem;margin:-.05rem -.3rem;cursor:text;}
.sht-lb-titletext:hover{background:var(--surface2);}
.sht-lb-titletext:focus{background:var(--surface2);box-shadow:0 0 0 1px var(--border3);}
.sht-lb-titletext:empty::before{content:attr(data-ph);color:var(--text3);font-weight:500;}
.sht-lb-headacts{display:flex;gap:.35rem;flex-shrink:0;align-items:center;}
.sht-lb-trashbtn:hover{color:var(--red);border-color:var(--red);}
.sht-lb-cols{gap:.4rem 2rem;}
.sht-lb-sec{display:flex;flex-direction:column;gap:.45rem;}
.sht-lb-seclab{display:flex;align-items:baseline;gap:.6rem;font-size:.63rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;}
.sht-lb-linkbtn{background:none;border:none;padding:0;color:var(--accent);font-family:var(--ui);font-size:.68rem;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:600;}
.sht-lb-linkbtn:hover{text-decoration:underline;}
.sht-lb-desc{font-size:.85rem;line-height:1.55;color:var(--text2);max-width:62ch;}
.sht-lb-palband{display:flex;height:20px;border-radius:7px;overflow:hidden;max-width:340px;border:1px solid var(--border2);}
.sht-lb-palband i{flex:1;cursor:pointer;transition:flex .15s;}
.sht-lb-palband i:hover{flex:1.6;}
.sht-lb-notesedit{font-size:.82rem;line-height:1.5;color:var(--text2);outline:none;border-radius:7px;padding:.35rem .45rem;margin:-.35rem -.45rem;min-height:1.4em;white-space:pre-wrap;cursor:text;max-width:62ch;}
.sht-lb-notesedit:hover{background:var(--surface2);}
.sht-lb-notesedit:focus{background:var(--surface2);box-shadow:0 0 0 1px var(--border3);}
.sht-lb-notesedit:empty::before{content:attr(data-ph);color:var(--text3);}
.sht-lb-simsec{transition:opacity .35s ease;}
.sht-lb-simsk{display:block;aspect-ratio:3/2;border-radius:8px;background:linear-gradient(100deg,var(--surface2) 40%,var(--surface3) 50%,var(--surface2) 60%);background-size:200% 100%;animation:shtsk 1.2s linear infinite;}
@keyframes shtsk{to{background-position:-200% 0;}}
.sht-lb-simgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:.4rem;}
.sht-lb-simgrid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;cursor:pointer;display:block;background:var(--surface2);}
@media (max-width:760px){
  .sht-lb-panel{padding:.85rem .9rem 1rem;}
  .sht-lb-headacts{flex-wrap:wrap;}
}
@media (max-width:900px){
  .sht-lb-cols{grid-template-columns:1fr;}
}
.sht-lb-loading{color:var(--text3);font-size:.85rem;}
.sht-lb-title{font-weight:650;}
.sht-lb-sec{display:flex;flex-direction:column;gap:.4rem;}
.sht-lb-seclab{display:flex;align-items:center;justify-content:space-between;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);}
.sht-lb-desc{font-size:.82rem;color:var(--text2);line-height:1.5;}
.sht-lb-err{font-size:.78rem;color:#ff8484;}
.sht-lb-pal{display:flex;gap:4px;}
.sht-lb-pal i{width:26px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.2);}
.sht-lb-tags{display:flex;flex-direction:column;gap:.35rem;}
.sht-lb-tagrow{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;}
.sht-lb-tagkind{font-size:.64rem;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;flex-basis:100%;}
.sht-tag{display:inline-flex;align-items:center;gap:.25rem;font-size:.74rem;color:var(--text2);border:1px solid var(--border2);border-radius:999px;padding:.15rem .3rem .15rem .55rem;background:var(--surface2);}
.sht-tag.ai{border-style:dashed;}
/* bulk-edit dialog (✎ Edit in the selection bar) */
.sht-be-seclab{font-size:.74rem;font-weight:650;color:var(--text3);margin:.6rem 0 .3rem;}
.sht-be-hint{font-size:.72rem;font-weight:400;color:var(--text3);}
.sht-be-check{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--text2);margin:.2rem 0 .1rem;}
.sht-be-rmwrap{display:flex;flex-wrap:wrap;gap:.3rem;max-height:9.5rem;overflow:auto;padding:.1rem 0;}
button.sht-be-rm{cursor:pointer;font:inherit;font-size:.74rem;}
.sht-be-rm i{font-style:normal;opacity:.6;font-size:.68rem;margin-left:.15rem;}
.sht-be-rm.on{text-decoration:line-through;opacity:.5;border-color:#c0392b;}
.sht-tag button{background:none;border:none;color:var(--text3);cursor:pointer;font-size:.68rem;padding:0 .2rem;}
.sht-tag button:hover{color:var(--text);}
.sht-lb-acts{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.sht-lb-meta{font-size:.72rem;color:var(--text3);}
.sht-lb-x{position:fixed;top:14px;right:18px;font-size:1.5rem;color:var(--text2);background:none;border:none;cursor:pointer;z-index:212;}
.sht-lb-nav{position:fixed;top:50%;transform:translateY(-50%);font-size:2.2rem;color:var(--text2);background:none;border:none;cursor:pointer;z-index:212;padding:18px 10px;}
.sht-lb-nav:hover,.sht-lb-x:hover{color:var(--text);}
.sht-lb-prev{left:6px;}
.sht-lb-next{right:6px;}
@media (max-width:760px){
  .sht-lb-body{height:92vh;width:96vw;}
  .sht-lb-imgwrap{height:min(44vh, calc(96vw / var(--lbr, 1.78)));}
  .sht-lb-panel{flex:1 1 auto;}
  .sht-lb-nav{display:none;}
  .sht-grid{columns:2 150px;}
  .sht-grid{--sht-b:88px;--sht-max:200px;}
  .sht-grid[data-size="m"]{--sht-b:105px;--sht-max:240px;}
  .sht-grid[data-size="l"]{--sht-b:150px;--sht-max:320px;}
  .sht-grid.jrows .sht-card{flex-basis:calc(var(--r,1.5) * var(--sht-b));max-width:calc(var(--r,1.5) * var(--sht-max));}
  #shots-content{padding:1rem;}
}

/* ── Result blocks ─────────────────────────────────────────── */
.tool-result{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem 1.05rem;}
.tool-result-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.6rem;flex-wrap:wrap;}
.tool-result-title{font-size:1.05rem;font-weight:650;color:var(--text);}
.tool-result-sub{font-size:.85rem;color:var(--text3);margin-top:.25rem;line-height:1.4;}
.tool-result-actions{display:flex;gap:.4rem;flex-shrink:0;}

.tool-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:9px;}
.tool-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.tool-table thead th{text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);background:var(--surface2);padding:.5rem .6rem;border-bottom:1px solid var(--border);white-space:nowrap;}
.tool-table td{padding:.5rem .6rem;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top;}
.tool-table tbody tr:last-child td{border-bottom:none;}
.tool-table tbody tr:hover{background:var(--surface-hi);}
.tsl-table .tsl-n{color:var(--text3);font-variant-numeric:tabular-nums;width:2.2rem;}
.tsl-table .tsl-size{font-weight:600;white-space:nowrap;color:var(--accent);}
.tsl-table .tsl-desc{min-width:200px;}
.tsl-table .tsl-notes{color:var(--text3);min-width:150px;}

/* ── Shot-list editor (b277): saved-lists picker + editable rows ── */
.tsl-picker{display:flex;gap:.5rem;align-items:center;}
.tsl-picker select{flex:1;min-width:0;}
.tsl-meta{display:flex;flex-direction:column;gap:.4rem;flex:1;min-width:0;}
.tsl-title-input{font-size:1rem;font-weight:650;}
.tsl-approach-input{font-size:.85rem;color:var(--text2);}
.tsl-edit-head,.tsl-edit-row{
  display:grid;
  grid-template-columns:1.6rem 4.6rem minmax(0,1fr) minmax(0,1fr) minmax(0,2.2fr) minmax(0,2fr) auto;
  gap:.4rem;align-items:center;
}
.tsl-edit-head{padding:.2rem .1rem .35rem;border-bottom:1px solid var(--border);margin-bottom:.5rem;}
.tsl-edit-head>div{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);}
.tsl-edit-list{display:flex;flex-direction:column;gap:.4rem;}
.tsl-edit-n{color:var(--text3);font-variant-numeric:tabular-nums;font-size:.8rem;text-align:center;}
.tsl-edit-fld{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.tsl-edit-flabel{display:none;}
.tsl-edit-row .tool-input{padding:.4rem .5rem;font-size:.83rem;}
.tsl-edit-ctrls{display:flex;gap:.15rem;align-items:center;}
.tsl-edit-ctrls button{width:1.7rem;height:1.7rem;border:1px solid var(--border2);background:var(--surface);color:var(--text2);border-radius:6px;cursor:pointer;font-size:.72rem;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;}
.tsl-edit-ctrls button:hover:not(:disabled){border-color:var(--accent);color:var(--text);}
.tsl-edit-ctrls button:disabled{opacity:.32;cursor:default;}
.tsl-edit-ctrls .tsl-del:hover{border-color:var(--red);color:var(--red);}
.tsl-del-btn:hover{border-color:var(--red);color:var(--red);}
@media(max-width:720px){
  .tsl-edit-head{display:none;}
  .tsl-edit-row{
    grid-template-columns:1fr 1fr;gap:.4rem .5rem;
    background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:.55rem .6rem;
  }
  .tsl-edit-n{grid-column:1 / -1;text-align:left;font-size:.72rem;font-weight:600;}
  .tsl-c-desc,.tsl-c-notes{grid-column:1 / -1;}
  .tsl-edit-flabel{display:block;font-size:.64rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--text3);}
  .tsl-edit-ctrls{grid-column:1 / -1;justify-content:flex-end;}
}

/* ── Recce (vision) ────────────────────────────────────────── */
.tool-drop{border:1.5px dashed var(--border3);border-radius:11px;padding:1.4rem 1rem;text-align:center;cursor:pointer;color:var(--text2);background:var(--surface);transition:border-color .13s,background .13s;font-size:.86rem;}
.tool-drop:hover{border-color:var(--accent);background:var(--surface-hi);}
.tool-drop-icon{font-size:1.7rem;margin-bottom:.35rem;}
.tool-drop-thumb{max-height:190px;max-width:100%;border-radius:8px;margin-bottom:.5rem;box-shadow:var(--shadow-sm);}
.tool-recce-grid{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:.7rem;}
@media(min-width:640px){.tool-recce-grid{grid-template-columns:1fr 1fr;}}
.tool-recce-sec{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:.7rem .8rem;}
.tool-recce-sec-title{font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem;}
.tool-bullets{margin:0;padding-left:1.05rem;display:flex;flex-direction:column;gap:.3rem;}
.tool-bullets li{font-size:.85rem;line-height:1.4;color:var(--text);}

/* ── Interview questions ───────────────────────────────────── */
.tool-qgroup{margin-bottom:.85rem;}
.tool-qgroup:last-child{margin-bottom:0;}
.tool-qgroup-theme{font-size:.8rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem;}
.tool-qlist{margin:0;padding-left:1.3rem;display:flex;flex-direction:column;gap:.4rem;}
.tool-qlist li{font-size:.9rem;line-height:1.45;color:var(--text);}

/* ── Shooting order ────────────────────────────────────────── */
.tool-order-list{display:flex;flex-direction:column;gap:.5rem;}
.tool-order-row{display:flex;gap:.75rem;align-items:flex-start;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:.6rem .75rem;}
.tool-order-n{flex:0 0 1.7rem;height:1.7rem;border-radius:6px;background:var(--accent);color:#1a1205;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
.tool-order-body{min-width:0;}
.tool-order-scene{font-weight:600;font-size:.9rem;color:var(--text);}
.tool-order-reason{font-size:.82rem;color:var(--text3);margin-top:.2rem;line-height:1.4;}
.tool-order-notes{margin-top:.85rem;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:.7rem .8rem;}

/* ── Calculators ───────────────────────────────────────────── */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;}
.calc-out{margin-top:.9rem;}
.calc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem;}
.calc-card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:.7rem .8rem;}
.calc-card.accent{border-color:var(--accent);background:var(--accent-soft);}
.calc-card-lbl{font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);margin-bottom:.25rem;}
.calc-card-val{font-size:1.28rem;font-weight:700;color:var(--text);line-height:1.15;font-variant-numeric:tabular-nums;}
.calc-card.accent .calc-card-val{color:var(--accent);}
.calc-hint{font-size:.79rem;color:var(--text3);margin-top:.6rem;line-height:1.45;}
.calc-badge{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:var(--accent-dim);padding:.1rem .35rem;border-radius:5px;vertical-align:middle;margin-left:.25rem;}
.calc-block{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:.9rem 1rem;}
.calc-block-title{font-size:.82rem;font-weight:700;color:var(--text2);margin-bottom:.7rem;}
.calc-inline{display:flex;align-items:center;gap:.35rem;}
.calc-inline-lbl{color:var(--text3);font-size:.85rem;margin-right:.4rem;}

/* Aspect & Anamorphic — scaled frame preview */
.calc-ar-wrap{display:flex;gap:1.6rem;align-items:flex-end;justify-content:center;flex-wrap:wrap;margin-top:1rem;}
.calc-ar-cell{display:flex;flex-direction:column;align-items:center;gap:.4rem;}
.calc-ar-frame{display:flex;align-items:center;justify-content:center;border:2px solid var(--text3);border-radius:4px;background:var(--surface2);color:var(--text2);font-size:.72rem;font-weight:650;font-variant-numeric:tabular-nums;}
.calc-ar-frame.accent{border-color:var(--accent);color:var(--accent);}
.calc-ar-cap{font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);}

/* ── Sun & golden hour table ───────────────────────────────── */
.sun-table{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.sun-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem .85rem;border-bottom:1px solid var(--border);background:var(--surface);}
.sun-row:last-child{border-bottom:none;}
.sun-row-lbl{font-size:.86rem;color:var(--text2);}
.sun-row-val{font-size:.9rem;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.sun-row.accent{background:var(--accent-soft);}
.sun-row.accent .sun-row-val{color:var(--accent);}
.sun-row.gold{background:linear-gradient(90deg,var(--accent-soft),transparent);}
.sun-row.gold .sun-row-lbl{color:var(--accent);font-weight:600;}
.sun-row.blue .sun-row-lbl{color:#5b8def;font-weight:600;}

@media(max-width:560px){
  .tool-head-title{font-size:1.15rem;}
  .tool-card-icon{font-size:1.3rem;}
  .calc-card-val{font-size:1.12rem;}
}

/* (b282) Impersonation "viewing as" banner — fixed strip shown while an
   admin is viewing the site as another user. High z-index so it floats
   over both the admin shell and the renter portal. */
#impersonation-banner{
  position:fixed;top:0;left:0;right:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  background:#7b1fa2;color:#fff;padding:.4rem 1rem;
  font-size:.85rem;line-height:1.3;box-shadow:0 2px 8px rgba(0,0,0,.3);
}
#impersonation-banner strong{font-weight:700;}
#impersonation-banner button{
  background:rgba(255,255,255,.2);color:#fff;
  border:1px solid rgba(255,255,255,.55);border-radius:5px;
  padding:.2rem .75rem;font-size:.8rem;font-weight:600;cursor:pointer;
}
#impersonation-banner button:hover{background:rgba(255,255,255,.35);}
body.has-impersonation-banner{padding-top:2.15rem;}

/* (b284) Hard, CSS-level guarantee that the admin shell is never visible
   to a renter (or an admin viewing-as a renter). Applied the instant
   body.is-renter is set — independent of the async portal loader or any
   JS exception during boot. Belt-and-braces alongside showBorrowPortal's
   inline hide. The portal's own header lives inside #borrow-view, so the
   direct-child selector only targets the main admin header. */
body.is-renter > header{display:none!important;}
body.is-renter .app-body{display:none!important;}

/* ============================================================
   RENTER PORTAL — redesigned tabbed app (b318)
   Dashboard · Book gear · My bookings · Help. Mobile-first;
   renters are often on phones. Scopes under the .rp-* namespace
   plus overrides of the shared .borrow-wrap / .borrow-item gear
   rows used inside the booking wizard.
   ============================================================ */

/* Container: the portal manages its own spacing so the tab bar can
   sit flush and sticky. .borrow-wrap is the renter-only scroll area. */
/* (b722) The whole portal was caged to 840px — a fixed reading-column
   applied even to card lists and the picker grid on a 27" display.
   The shell now fills up to 1400 and centers itself; each VIEW picks
   its own comfortable width below (forms stay narrow, lists go wide). */
.borrow-wrap{ padding:0 !important; max-width:1400px; margin-left:auto; margin-right:auto; width:100%; display:flex; flex-direction:column; overflow:hidden; min-height:0; overscroll-behavior-x:none; }

/* ── Tab bar ──────────────────────────────────────────────── */
.rp-tabs{
  flex-shrink:0;
  display:flex; gap:.15rem;
  background:var(--surface); border-bottom:1px solid var(--border2);
  padding:.4rem .5rem 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rp-tabs::-webkit-scrollbar{ display:none; }
/* ═══ (b740) RENTER PORTAL MOBILE HEADER + TABS (<700px) ═══════
   The CineBase switcher was a desktop-sized pill squeezed into a
   crowded 390px header row — effectively invisible and untappable.
   Mobile now restructures: the switcher gets a full-width 44px bar
   on its own header row (name + role + caret, menu spans the bar),
   low-value chrome tightens, and the portal tabs become a 4-up
   segmented grid with stacked icon+label at thumb size. Desktop
   untouched. */
@media (max-width:700px){
  #borrow-view > header{
    height:auto !important; flex-wrap:wrap !important;
    /* (b741) breathing room — .55rem read cramped on a phone */
    padding:.9rem 1rem !important; row-gap:.6rem;
  }
  #borrow-view > header > div:last-of-type{
    flex:1 1 100%; flex-wrap:wrap; gap:.4rem !important;
    justify-content:flex-end;
  }
  /* Switcher: its own row, full width, unmissable. */
  #group-switcher-borrow{ order:-1; flex:1 1 100%; width:100%; display:flex; }
  #group-switcher-borrow .gswitch-btn{
    width:100%; max-width:none; min-height:44px; justify-content:space-between;
    font-size:.95rem; padding:.5rem .75rem; border-radius:10px;
  }
  #group-switcher-borrow .gswitch-cur{ max-width:none; flex:1; text-align:left; }
  #group-switcher-borrow .gswitch-caret{ font-size:.85rem; }
  #group-switcher-borrow .gswitch-menu{
    left:0; right:0; min-width:0; width:100%;
  }
  #group-switcher-borrow .gswitch-item{ min-height:44px; }
  /* Quieter chrome. */
  #borrow-user-label{ display:none; }
  #borrow-view > header .btn{ min-height:38px; }
  /* Tabs: segmented grid, icon over label, thumb targets. */
  .rp-tabs{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.3rem; padding:.45rem .5rem; overflow:visible;
  }
  .rp-tab{
    flex-direction:column; justify-content:center; gap:.12rem;
    min-height:54px; padding:.4rem .15rem; margin-bottom:0;
    border-radius:10px; border-bottom:none;
    font-size:.7rem; letter-spacing:.01em; white-space:nowrap;
  }
  .rp-tab .rp-tab-icon{ font-size:1.2rem; }
  .rp-tab.active{ background:var(--accent-dim); color:var(--accent); border-bottom:none; }
  /* (b743) Content scrolling under the tab strip blended straight
     into it — a soft drop shadow gives the strip a real edge. */
  .rp-tabs{ box-shadow:0 6px 14px -8px rgba(0,0,0,.55); position:relative; z-index:5; }
}

.rp-tab{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem;
  border:none; background:transparent; cursor:pointer;
  padding:.6rem .95rem; border-radius:9px 9px 0 0;
  color:var(--text3); font-size:.9rem; font-weight:600;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
  transition:color .12s, background .12s;
}
.rp-tab:hover{ color:var(--text2); background:var(--surface2); }
.rp-tab.active{ color:var(--accent); border-bottom-color:var(--accent); background:var(--surface2); }
.rp-tab-icon{ font-size:1.02rem; line-height:1; }

/* Body wrapper: all padding + safe-area lives here. */
.rp-tabbody{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* (b741) Never a sideways axis: any child that measures wider than
     the viewport (long names, review tables, wide inputs) used to
     hand the whole page a horizontal pan on touch. Inner rails that
     WANT x-scroll (chips, tab rail) keep their own overflow-x. */
  overflow-x:hidden; overscroll-behavior-x:none;
  padding:1.4rem 1.5rem;
  padding-bottom:calc(2rem + env(safe-area-inset-bottom));
}
/* (b722) Content default: up to 1200 and centered. Views with their
   own tighter caps (wizard forms, empty/success states) still win —
   the smaller max-width applies. */
.rp-tabbody > *{ width:100%; max-width:1280px; margin-left:auto; margin-right:auto; }   /* matches the wizard's desktop cap — the smaller per-view max still wins elsewhere */

/* ── Loading ──────────────────────────────────────────────── */
.rp-loading{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; padding:4rem 1rem; color:var(--text3); font-size:.95rem;
}
.rp-spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--border2); border-top-color:var(--accent);
  animation:rp-spin .8s linear infinite;
}
@keyframes rp-spin{ to{ transform:rotate(360deg); } }

/* ── Dashboard: hero ──────────────────────────────────────── */
.rp-hero{ margin-bottom:1.25rem; }
.rp-hero-greet{ font-size:1.6rem; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.rp-hero-sub{ font-size:.95rem; color:var(--text3); margin-top:.2rem; }

/* ── Dashboard: KPI tiles ─────────────────────────────────── */
.rp-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:.7rem; margin-bottom:1.25rem;
}
.rp-kpi{
  background:var(--surface2); border:1px solid var(--border);
  border-radius:14px; padding:.9rem 1rem; position:relative; overflow:hidden;
}
.rp-kpi-icon{ font-size:1.15rem; line-height:1; opacity:.9; }
.rp-kpi-val{ font-size:1.55rem; font-weight:800; letter-spacing:-.02em; color:var(--text); margin-top:.3rem; line-height:1.1; }
.rp-kpi-label{ font-size:.78rem; color:var(--text3); margin-top:.15rem; }
.rp-kpi.is-active{ border-color:var(--accent-rim); background:var(--accent-dim); }
.rp-kpi.is-active .rp-kpi-val{ color:var(--accent); }
.rp-kpi.is-warn{ border-color:color-mix(in srgb, var(--amber) 45%, transparent); background:var(--amber-dim); }
.rp-kpi.is-warn .rp-kpi-val{ color:var(--amber); }
.rp-kpi.is-alert{ border-color:color-mix(in srgb, var(--red) 45%, transparent); background:var(--red-dim); }
.rp-kpi.is-alert .rp-kpi-val{ color:var(--red); }

/* ── Dashboard: attention strip ───────────────────────────── */
.rp-attention{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.25rem; }
.rp-att{
  display:flex; align-items:center; gap:.7rem; cursor:pointer;
  padding:.8rem .95rem; border-radius:12px; border:1px solid var(--border);
  background:var(--surface2); transition:transform .1s, box-shadow .1s;
}
.rp-att:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.rp-att-icon{ font-size:1.2rem; flex-shrink:0; }
.rp-att-body{ flex:1; min-width:0; font-size:.88rem; color:var(--text2); line-height:1.4; }
.rp-att-body strong{ color:var(--text); }
.rp-att-cta{ flex-shrink:0; font-size:.82rem; font-weight:700; color:var(--accent); }
.rp-att-alert{ border-color:color-mix(in srgb, var(--red) 40%, transparent); background:var(--red-dim); }
.rp-att-alert .rp-att-cta{ color:var(--red); }
.rp-att-warn{ border-color:color-mix(in srgb, var(--amber) 40%, transparent); background:var(--amber-dim); }
.rp-att-warn .rp-att-cta{ color:var(--amber); }

/* ── Dashboard: primary CTA ───────────────────────────────── */
.rp-cta{
  display:flex; align-items:center; gap:1rem; width:100%; cursor:pointer;
  padding:1.05rem 1.2rem; border-radius:16px; border:none;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; text-align:left; margin-bottom:1.5rem;
  box-shadow:var(--shadow-md); transition:transform .12s, box-shadow .12s;
}
.rp-cta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.rp-cta:active{ transform:translateY(0); }
.rp-cta-icon{
  font-size:1.5rem; width:44px; height:44px; flex-shrink:0; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.2); border-radius:12px;
}
.rp-cta-text{ flex:1; display:flex; flex-direction:column; }
.rp-cta-text strong{ font-size:1.1rem; font-weight:800; }
.rp-cta-text span{ font-size:.85rem; opacity:.9; margin-top:.1rem; }
.rp-cta-arrow{ font-size:1.3rem; opacity:.85; }

/* ── Dashboard: sections & glance cards ───────────────────── */
.rp-section{ margin-bottom:1.25rem; }
.rp-section-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.95rem; font-weight:700; color:var(--text); margin-bottom:.7rem;
}
.rp-link{ background:none; border:none; cursor:pointer; color:var(--accent); font-size:.85rem; font-weight:600; padding:.15rem .3rem; }
.rp-link:hover{ text-decoration:underline; }
.rp-glance{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.7rem; }
.rp-glance-card{
  cursor:pointer; padding:.85rem .95rem; border-radius:12px;
  border:1px solid var(--border); border-left:3px solid var(--border3);
  background:var(--surface2); transition:transform .1s, box-shadow .1s;
}
.rp-glance-card:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.rp-glance-top{ margin-bottom:.5rem; }
.rp-glance-gear{ font-size:.85rem; color:var(--text2); line-height:1.4; }
.rp-glance-dates{ font-size:.78rem; color:var(--text3); margin-top:.45rem; }

.rp-empty-lite{
  text-align:center; padding:1.6rem 1rem; color:var(--text3); font-size:.92rem;
  border:1px dashed var(--border2); border-radius:12px; background:var(--surface2);
}

/* ── Wizard shell + progress ──────────────────────────────── */
.rp-wiz{ max-width:720px; margin:0 auto; }
.rp-steps{ display:flex; align-items:center; margin-bottom:1.5rem; }
.rp-step{ display:flex; flex-direction:column; align-items:center; gap:.35rem; flex:0 0 auto; }
.rp-step-dot{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:700; border:2px solid var(--border2);
  background:var(--surface2); color:var(--text3); transition:all .2s;
}
.rp-step-label{ font-size:.72rem; font-weight:600; color:var(--text3); }
.rp-step-bar{ flex:1; height:2px; background:var(--border2); margin:0 .3rem; margin-bottom:1.15rem; transition:background .2s; }
.rp-step-bar.done{ background:var(--accent); }
.rp-step-current .rp-step-dot{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); box-shadow:0 0 0 4px var(--accent-dim); }
.rp-step-current .rp-step-label{ color:var(--accent); }
.rp-step-done .rp-step-dot{ border-color:var(--accent); background:var(--accent); color:#fff; }
.rp-step-done .rp-step-label{ color:var(--text2); }

.rp-edit-note{
  padding:.7rem .9rem; border-radius:10px; margin-bottom:1.1rem; font-size:.85rem;
  background:var(--accent-dim); border:1px solid var(--accent-rim); color:var(--text2);
}

/* ── Wizard step head ─────────────────────────────────────── */
.rp-step-head{ margin-bottom:1.3rem; }
.rp-step-head h2{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--text); margin:0 0 .35rem; }
.rp-step-head p{ font-size:.95rem; color:var(--text2); margin:0; line-height:1.5; }
.rp-step-head .rp-muted{ display:inline; }

/* ── Fields ───────────────────────────────────────────────── */
.rp-field{ margin-bottom:1.1rem; }
.rp-field > label{
  display:flex; align-items:center; gap:.1rem; flex-wrap:wrap;
  font-size:.88rem; font-weight:600; color:var(--text); margin-bottom:.4rem;
}
.rp-field input, .rp-field textarea{
  width:100%; box-sizing:border-box; padding:.7rem .85rem;
  background:var(--bg); border:1.5px solid var(--border2); border-radius:10px;
  font-size:1rem; color:var(--text); font-family:inherit; transition:border-color .12s, box-shadow .12s;
}
.rp-field input:focus, .rp-field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.rp-field input[type=date]{ min-height:2.9rem; }
.rp-field textarea{ resize:vertical; min-height:5rem; }
.rp-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.rp-req{ color:var(--red); font-weight:700; }
.rp-opt{ font-size:.72rem; font-weight:500; color:var(--text3); }
.rp-from-profile{
  font-size:.68rem; font-weight:600; color:var(--accent); margin-left:auto;
  background:var(--accent-dim); padding:.1rem .45rem; border-radius:20px;
}
.rp-help-line{ font-size:.78rem; color:var(--text3); margin-top:.35rem; line-height:1.4; }

/* Tooltip pip */
.rp-tip{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; margin-left:.3rem;
  background:var(--surface3); color:var(--text3); font-size:.64rem; font-style:normal;
  cursor:help; position:relative;
}
.rp-tip:hover{ background:var(--accent); color:#fff; }
.rp-tip[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
  background:var(--text); color:var(--bg); padding:.55rem .75rem; border-radius:9px;
  font-size:.76rem; font-weight:400; line-height:1.45; width:230px; max-width:74vw; text-align:left;
  z-index:30; box-shadow:var(--shadow-lg); pointer-events:none;
}
.rp-tip[data-tip]:hover::before{
  content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--text); z-index:30;
}

/* ── Dates step ───────────────────────────────────────────── */
.rp-date-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.rp-date-summary{ min-height:1.5rem; margin-bottom:1rem; }
.rp-date-pill{
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem;
  background:var(--accent-dim); border:1px solid var(--accent-rim); color:var(--accent);
  border-radius:20px; font-size:.85rem; font-weight:600;
}
.rp-callout{
  display:flex; gap:.7rem; align-items:flex-start; padding:.85rem 1rem;
  background:var(--surface2); border:1px solid var(--border); border-radius:12px;
  font-size:.86rem; color:var(--text2); line-height:1.5;
}
.rp-callout-icon{ font-size:1.1rem; flex-shrink:0; }

/* ── Gear step ────────────────────────────────────────────── */
.rp-gear-summary{
  position:sticky; top:0; z-index:4; margin-bottom:.9rem;
  font-size:.88rem;
}
/* (b713) Visual picker — sticky tray. The summary strip grew into a
   tappable tray: count + price estimate collapsed, per-item list with
   remove buttons expanded. Whole bar toggles; the ✕ stops propagation. */
.rp-gear-tray{
  padding:.6rem .9rem; border-radius:10px; cursor:pointer;
  background:var(--surface2); border:1px solid var(--border);
}
.rp-gear-tray.empty{ cursor:default; }
.rp-gear-tray.open{ border-color:var(--accent); }
.rp-tray-bar{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.rp-tray-est{ color:var(--text2); font-size:.82rem; margin-left:auto; }
.rp-tray-caret{ color:var(--text3); font-size:.8rem; }
.rp-tray-list{ margin-top:.55rem; border-top:1px solid var(--border); padding-top:.45rem; display:flex; flex-direction:column; gap:.15rem; }
.rp-tray-row{ display:flex; align-items:center; gap:.5rem; font-size:.84rem; padding:.18rem 0; }
.rp-tray-row-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.rp-tray-row-rate{ color:var(--text3); font-family:var(--mono); font-size:.74rem; }
.rp-tray-rm{
  flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:6px; line-height:1;
  background:transparent; border:1px solid var(--border); color:var(--text3); cursor:pointer;
}
.rp-tray-rm:hover{ color:var(--red); border-color:var(--red); }
.rp-tray-note{ font-size:.74rem; color:var(--text3); padding-top:.3rem; }
/* (b731) Desktop sidebar: the estimate is the number the renter is
   actually tracking — give it a proper total block, not a whisper. */
.rp-tray-total{
  margin-top:.55rem; padding-top:.55rem; border-top:1px solid var(--border);
}
.rp-tt-num{ font-size:1.4rem; font-weight:800; letter-spacing:-.01em; color:var(--text); line-height:1.15; }
.rp-tt-sub{ font-size:.74rem; color:var(--text3); margin-top:.1rem; }
/* (b913) Rental taxes: pre-tax + per-tax breakdown under the tray
   total, and the standing GST/PST notice (pricing step + Review). */
.rp-tt-tax{ font-size:.72rem; color:var(--text3); margin-top:.15rem; font-variant-numeric:tabular-nums; }
.rp-tax-callout{ margin-top:.9rem; border-color:var(--accent); background:var(--accent-dim); color:var(--text); }
.rp-tax-callout b{ font-weight:700; }
.rp-suggest-tax{ font-size:.72rem; font-weight:600; color:var(--text3); }
.rp-tax-line{ color:var(--text2); }
/* (b917) "Just browsing?" link under the first portal step. */
.rp-browse-link{ font-size:.82rem; margin-top:.35rem; }
.rp-browse-link a{ color:var(--accent); font-weight:600; text-decoration:none; }

/* (b719) AI gap check (Review) + "often goes with" strip (gear step). */
/* (b732) COI position chooser: 'attach now' vs 'it's on its way'
   reuses the pricing option-card style; the amber note carries the
   not-valid-until-received understanding. (The b730 checkbox styling
   never shipped — its CSS sat behind a failed lint in the chain —
   which is exactly why the raw checkbox looked unstyled.) Also the
   admin's awaiting-COI pill from b730, restored. */
.rp-coi-pending-note{
  margin-top:.7rem; padding:.7rem .85rem; border-radius:10px;
  background:color-mix(in srgb, var(--amber,#f0a030) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--amber,#f0a030) 45%, var(--border));
  font-size:.84rem; color:var(--text2); line-height:1.5;
}
.br-coi-pill{
  display:inline-flex; align-items:center; gap:.2rem;
  font-size:.68rem; font-weight:700; padding:.14rem .45rem; border-radius:999px;
  background:color-mix(in srgb, var(--amber,#f0a030) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--amber,#f0a030) 55%, var(--border));
  color:var(--amber,#f0a030); white-space:nowrap;
}

.rp-gap-loading{
  display:flex; align-items:center; gap:.55rem; font-size:.84rem; color:var(--text3);
  padding:.65rem .8rem; border:1px dashed var(--border2); border-radius:10px; margin-bottom:.8rem;
}
.rp-spinner-sm{ width:1rem; height:1rem; border-width:2px; }
.rp-gap-ok{
  font-size:.84rem; color:#3faf6b; padding:.6rem .8rem; margin-bottom:.8rem;
  background:color-mix(in srgb, #3faf6b 10%, transparent);
  border:1px solid color-mix(in srgb, #3faf6b 35%, var(--border)); border-radius:10px;
}
.rp-gap-card{
  position:relative; padding:.65rem 2rem .65rem .8rem; margin-bottom:.55rem;
  background:var(--accent-dim); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius:10px;
}
.rp-gap-title{ font-size:.86rem; font-weight:700; color:var(--text); }
.rp-gap-why{ font-size:.78rem; color:var(--text2); margin-top:.15rem; line-height:1.4; }
.rp-gap-chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem; }
.rp-gap-chip{
  font-size:.78rem; font-weight:600; padding:.28rem .6rem; border-radius:999px; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--border2); color:var(--text);
}
.rp-gap-chip:hover{ border-color:var(--accent); color:var(--accent); }
.rp-gap-chip.added{ opacity:.6; cursor:default; border-color:#3faf6b; color:#3faf6b; }
.rp-gap-x{
  position:absolute; top:.4rem; right:.4rem; width:1.4rem; height:1.4rem; line-height:1;
  background:transparent; border:none; color:var(--text3); cursor:pointer; border-radius:6px;
}
.rp-gap-x:hover{ color:var(--text); }
.rp-pair-strip{
  display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; position:relative;
  margin-top:.45rem; padding:.5rem 1.9rem .5rem .7rem;
  background:var(--surface2); border:1px dashed var(--border2); border-radius:10px;
  font-size:.78rem;
}
.rp-pair-label{ color:var(--text3); margin-right:.15rem; }

/* (b713) Search + category chips stick just under the tray. */
.rp-gear-sticky{
  position:sticky; top:3.1rem; z-index:3;
  background:var(--surface); padding-bottom:.25rem; margin-bottom:.6rem;
}
/* (b725) One sidebar frame for EVERY wizard step: content left, a
   sticky column right (dates · running kit · nav). Under 900px the
   sidebar is display:none — phones keep the gear step's inline tray
   mount (.rp-sum-inline) and the sticky bottom nav, unchanged. */
.rp-wiz-side{ display:none; }
@media (min-width:900px){
  .rp-wiz{ max-width:1280px; }
  .rp-wiz-cols{
    display:grid; grid-template-columns:minmax(0,1fr) 300px;
    gap:1.5rem; align-items:start;
  }
  /* (b728) Same frame geometry on every step: identical grid columns,
     so the sidebar never shifts horizontally between steps (the b725
     centered-form variant made it jump when leaving the gear step).
     Form CONTENT still caps at a readable width — inside its column,
     left-aligned to the same edge the gear grid starts at. */
  .rp-wiz:not(.rp-wstep-2) .rp-wiz-body{ max-width:760px; }
  .rp-wiz-side{
    display:flex; flex-direction:column; gap:.75rem;
    position:sticky; top:.75rem;
    /* (b737) A sticky element taller than the viewport pins its top
       and buries its bottom — a big kit made Back/Next unreachable.
       Cap the column at viewport height and let the TRAY be the
       flexible piece (its list scrolls internally); dates, info and
       nav never shrink, so the buttons are always on screen. */
    /* viewport minus the app chrome above the scroller (header ~50px,
       portal tabs ~48px) plus breathing room — measured, not hoped. */
    max-height:calc(100vh - 120px);
  }
  .rp-side-dates, .rp-side-info, .rp-side-nav, .rp-pair-strip{ flex-shrink:0; }
  .rp-side-info{ max-height:26vh; overflow:auto; }
  .rp-wiz-side .rp-gear-summary{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  .rp-wiz-side .rp-gear-summary .rp-gear-tray{ display:flex; flex-direction:column; min-height:0; }
  .rp-side-dates{
    font-size:.82rem; color:var(--text2);
    padding:.55rem .8rem; border-radius:10px;
    background:var(--surface2); border:1px solid var(--border);
  }
  /* (b729) Accumulating request summary — pricing, contact, insurance. */
  .rp-side-info{
    display:flex; flex-direction:column; gap:.35rem;
    font-size:.8rem; color:var(--text2);
    padding:.55rem .8rem; border-radius:10px;
    background:var(--surface2); border:1px solid var(--border);
  }
  .rp-si-row{ line-height:1.45; }
  .rp-si-row.warn{ color:var(--amber,#f0a030); }
  .rp-wiz-side .rp-gear-summary{ position:static; margin-bottom:0; }
  .rp-wiz-side .rp-tray-list{ flex:1 1 auto; min-height:0; max-height:none; overflow:auto; }   /* (b737) flexes within the capped column */
  .rp-gear-tray.forced{ cursor:default; }
  .rp-side-nav{
    display:flex; flex-direction:column-reverse; gap:.5rem;
    /* (b738) Nav leads the sidebar: with the tray below it flexing
       and scrolling, Next/Back sit at the exact same y-position on
       every step regardless of kit size — no hunting. */
    padding-bottom:.25rem; border-bottom:1px solid var(--border); 
  }
  .rp-side-nav .rp-nav-right{ display:flex; flex-direction:column; gap:.5rem; margin-left:0; }
  .rp-side-nav .btn{ width:100%; justify-content:center; }
  /* The sticky bottom bar is mobile chrome; the sidebar owns nav here. */
  .rp-wiz .rp-wiz-nav{ display:none; }
  /* The mobile inline tray mount bows out on desktop. */
  .rp-sum-inline{ display:none; }
  /* Search/chips no longer sit under a top-stuck tray on desktop. */
  .rp-gear-sticky{ top:0; }
}

/* (b715) Search + view toggle share the top row. */
.rp-gear-topbar{ display:flex; gap:.5rem; align-items:stretch; }
.rp-gear-topbar .rp-gear-search{ flex:1; min-width:0; margin-bottom:1rem; }
.rp-gear-viewtog{
  display:flex; flex:0 0 auto; align-self:flex-start;
  border:1.5px solid var(--border2); border-radius:10px; overflow:hidden;
}
.rp-gear-viewtog button{
  width:2.6rem; padding:.55rem 0; font-size:1rem; line-height:1; cursor:pointer;
  background:var(--bg); border:none; color:var(--text3);
}
.rp-gear-viewtog button + button{ border-left:1.5px solid var(--border2); }
.rp-gear-viewtog button.active{ background:var(--accent-dim); color:var(--accent); }
.rp-gear-chips{
  display:flex; gap:.4rem; overflow-x:auto; padding:.15rem .1rem .35rem;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  /* The app shell is body{display:flex}; a scroller's INTRINSIC width
     still propagates into flex-item min-content, so the chips' natural
     row width (~500px) was blowing .rp-wiz out past the phone viewport.
     width:0 + min-width:100% keeps the used width full while zeroing
     the intrinsic contribution. */
  width:0; min-width:100%; box-sizing:border-box;
}
.rp-gear-chips::-webkit-scrollbar{ display:none; }
.rp-gchip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.8rem; font-weight:600; padding:.32rem .7rem; border-radius:999px;
  background:var(--surface2); border:1.5px solid var(--border); color:var(--text2); cursor:pointer;
  white-space:nowrap;
}
.rp-gchip.active{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.rp-gchip-dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--cat,#8a8f98); }
.rp-gchip-n{ font-weight:400; color:var(--text3); font-size:.72rem; }

/* (b713) Card grid. Overrides the .borrow-item row defaults inside
   .rp-gear-cards only — the admin list view keeps the old rows. */
.rp-gear-cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem;
}
@media (max-width:480px){
  .rp-gear-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
}
.rp-gear-cards .borrow-item.rp-gcard{
  display:flex; flex-direction:column; gap:.35rem; align-items:stretch;
  padding:.45rem; position:relative;
  min-width:0;   /* replaced-element intrinsic widths must not blow out 1fr tracks */
}
.rp-gcard-chk{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.rp-gcard-imgwrap{ position:relative; }
.rp-gcard-img{
  display:block; width:100%; max-width:100%; aspect-ratio:1/1; object-fit:contain;
  background:#fff; border-radius:8px; border:1px solid var(--border);
}
.rp-gcard-ph{
  display:flex; align-items:center; justify-content:center; font-size:2.2rem;
  background:var(--surface2); color:var(--text3);
}
.rp-gcard-check{
  position:absolute; top:.35rem; right:.35rem; width:1.5rem; height:1.5rem;
  display:none; align-items:center; justify-content:center; border-radius:50%;
  background:var(--accent); color:#fff; font-size:.85rem; font-weight:700;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.rp-gear-cards .borrow-item.checked .rp-gcard-check{ display:flex; }
.rp-gcard-body{ display:flex; flex-direction:column; gap:.1rem; }
.rp-gear-cards .borrow-item-name{ font-size:.82rem; line-height:1.25; }
.rp-gear-cards .borrow-item-meta{ min-height:.9rem; }
/* (b714) Rate reads as a ballpark, not a sticker price. */
.rp-gcard-rate{ font-size:.76rem; font-weight:500; color:var(--text2); }
.rp-gcard-rate span{ font-size:.68rem; font-weight:400; color:var(--text3); }

/* (b714) Pricing preference — three tappable option cards. */
.rp-pricing-choice{ display:flex; flex-direction:column; gap:.45rem; }
.rp-price-opt{
  display:flex; align-items:center; gap:.7rem; text-align:left;
  padding:.6rem .75rem; border-radius:10px; cursor:pointer;
  background:var(--surface2); border:1.5px solid var(--border2); color:var(--text);
}
.rp-price-opt:hover{ border-color:var(--border3); }
.rp-price-opt.active{ border-color:var(--accent); background:var(--accent-dim); }
.rp-price-ico{ font-size:1.15rem; flex:0 0 auto; }
.rp-price-txt{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.rp-price-txt b{ font-size:.9rem; font-weight:600; }
.rp-price-txt small{ font-size:.76rem; color:var(--text3); }
/* Cards: unchecked steppers vanish entirely (the base list keeps its
   opacity treatment) so unselected cards don't carry a blank row. */
.rp-gear-cards .borrow-item-qty.rp-gcard-qty{ display:none; justify-content:center; margin-top:.1rem; }
.rp-gear-cards .borrow-item.checked .borrow-item-qty.rp-gcard-qty{ display:flex; }
.rp-gear-cards .borrow-item.unavailable .rp-gcard-img{ opacity:.35; filter:grayscale(1); }
/* (b724) Availability, redesigned: a compact scarcity chip and an
   over-photo unavailable tag replace the wordy 'x of x available'
   pill. Chip: amber dot + count, photo-corner on cards, inline in
   list rows. Tag: small-caps label centered on the grayed image. */
.avail-chip{
  display:inline-flex; align-items:center; gap:.28rem;
  font-size:.66rem; font-weight:700; letter-spacing:.02em; line-height:1;
  padding:.22rem .45rem; border-radius:999px; white-space:nowrap;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid color-mix(in srgb, #e0a030 55%, var(--border));
  color:#e0a030;
}
.avail-chip::before{
  content:''; width:.4rem; height:.4rem; border-radius:50%;
  background:#e0a030; flex:0 0 auto;
}
.rp-gcard-imgwrap .avail-chip{
  position:absolute; top:.35rem; left:.35rem;
  backdrop-filter:blur(3px);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.borrow-item-meta .avail-chip{ margin-left:.4rem; vertical-align:middle; }
.rp-unavail-tag{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding:.3rem .6rem; border-radius:6px; white-space:nowrap;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border2); color:var(--text2);
  box-shadow:0 1px 4px rgba(0,0,0,.22);
}

/* (b718) Desktop drag-to-tray. Grab cursor only where hover exists
   (i.e. not touch), dragged card ghosts, tray lights up as a target. */
@media (hover:hover){ .rp-gear-cards .rp-gcard[draggable]{ cursor:grab; } }
.rp-gcard.rp-dragging{ opacity:.45; }
.rp-gear-tray.dragover{ border-color:var(--accent); background:var(--accent-dim); border-style:dashed; }
.rp-gear-cards .borrow-item.unavailable .rp-gcard-check{ display:none; }
.rp-gear-summary-count{ color:var(--accent); font-weight:700; }
.rp-gear-search{ position:relative; margin-bottom:1rem; }
.rp-gear-search-icon{ position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--text3); font-size:.95rem; pointer-events:none; }
.rp-gear-search input{
  width:100%; box-sizing:border-box; padding:.7rem .85rem .7rem 2.3rem;
  background:var(--bg); border:1.5px solid var(--border2); border-radius:10px;
  font-size:.95rem; color:var(--text);
}
.rp-gear-search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.rp-gear-cat{ margin-bottom:1.15rem; }
.rp-gear-cat-head{
  display:flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--cat,#aaa); margin-bottom:.5rem;
}
.rp-gear-cat-dot{ width:9px; height:9px; border-radius:50%; background:var(--cat,#aaa); }
.rp-gear-empty{
  padding:1.4rem 1rem; text-align:center; color:var(--text3); font-size:.92rem;
  border:1px dashed var(--border2); border-radius:12px; background:var(--surface2);
}

/* Beefed-up gear rows inside the wizard */
.rp-gear-host .borrow-item-list{ gap:.5rem; }
.rp-gear-host .borrow-item{
  padding:.75rem .85rem; border-radius:12px; border:1.5px solid var(--border2);
  gap:.75rem; align-items:center;
}
.rp-gear-host .borrow-item.checked{ border-color:var(--accent); background:var(--accent-dim); }
.rp-gear-host .borrow-item input[type=checkbox]{ width:20px; height:20px; }
.rp-gear-host .borrow-item-name{ font-size:1rem; font-weight:600; }
.rp-gear-host .borrow-item-meta{ font-size:.76rem; margin-top:.15rem; }
.rp-gear-host .borrow-item-qty{ gap:.15rem; }
.rp-gear-host .borrow-qty-btn{ width:32px; height:32px; font-size:1.05rem; border-radius:8px; }
.rp-gear-host .borrow-qty-val{ min-width:2rem; text-align:center; font-weight:700; font-size:.95rem; }
.rp-gear-host .avail-badge{
  display:inline-block; margin-left:.5rem; padding:.05rem .45rem; border-radius:20px;
  font-size:.68rem; font-weight:600; font-family:var(--ui);
}
.rp-gear-host .avail-badge.avail-ok{ background:var(--green-dim); color:var(--green); }
.rp-gear-host .avail-badge.avail-partial{ background:var(--amber-dim); color:var(--amber); }
.rp-gear-host .avail-badge.avail-none{ background:var(--red-dim); color:var(--red); }
.rp-gear-host .conflict-badge{
  display:inline-block; margin-left:.5rem; padding:.05rem .45rem; border-radius:20px;
  font-size:.68rem; font-weight:600; background:var(--red-dim); color:var(--red); vertical-align:middle;
}

/* ── Details step: budget + COI ───────────────────────────── */
/* Suggested rental cost card (b692) — prominent but clearly optional */
.rp-suggest{
  border:1px solid var(--accent); border-radius:12px; background:var(--surface2);
  padding:.7rem .85rem; margin:.15rem 0 .6rem;
}
.rp-suggest-main{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.rp-suggest-label{ font-size:.82rem; font-weight:700; color:var(--text2); }
.rp-suggest-amt{ font-size:1.15rem; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.rp-suggest-use{
  margin-left:auto; padding:.3rem .7rem; border-radius:8px; cursor:pointer;
  font-size:.78rem; font-weight:700; color:var(--accent);
  background:none; border:1px solid var(--accent);
}
.rp-suggest-use:hover{ background:var(--accent); color:var(--surface); }
.rp-suggest-sub{ font-size:.78rem; color:var(--text3); margin-top:.35rem; line-height:1.45; }
/* Breakdown (b694) */
.rp-suggest-how{
  display:block; margin-top:.45rem; padding:0; background:none; border:none; cursor:pointer;
  font-size:.76rem; font-weight:700; color:var(--accent);
}
.rp-suggest-how:hover{ text-decoration:underline; }
.rp-suggest-bd{ margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--border2); }
.rp-bd-row{ display:flex; gap:.7rem; justify-content:space-between; align-items:baseline; padding:.14rem 0; font-size:.78rem; color:var(--text2); }
.rp-bd-l{ min-width:0; }
.rp-bd-r{ white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--text); }
.rp-bd-why{ color:var(--text3); }
.rp-bd-note .rp-bd-l{ color:var(--text3); font-style:italic; }
.rp-bd-sum{ border-top:1px solid var(--border); margin-top:.15rem; padding-top:.3rem; font-weight:700; }
.rp-bd-disc .rp-bd-l, .rp-bd-disc .rp-bd-r{ color:var(--green); }
.rp-bd-total{ border-top:1px solid var(--border); margin-top:.15rem; padding-top:.3rem; font-weight:800; }
.rp-bd-total .rp-bd-r{ color:var(--accent); }
.rp-budget-wrap{ position:relative; }
.rp-budget-cur{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--text3); font-size:.95rem; pointer-events:none; }
.rp-budget-wrap input{ padding-left:3rem !important; }
.rp-coi input[type=file]{ font-size:.88rem; color:var(--text2); width:100%; }
.rp-coi-status{ font-size:.82rem; color:var(--green); font-weight:600; margin-top:.4rem; }

/* ── Review step ──────────────────────────────────────────── */
.rp-review{ display:flex; flex-direction:column; gap:.8rem; }
.rp-rev-block{ border:1px solid var(--border); border-radius:12px; background:var(--surface2); overflow:hidden; }
.rp-rev-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem .9rem; font-size:.9rem; font-weight:700; color:var(--text);
  background:var(--surface); border-bottom:1px solid var(--border);
}
.rp-rev-edit{ background:none; border:none; cursor:pointer; color:var(--accent); font-size:.82rem; font-weight:600; padding:.1rem .35rem; }
.rp-rev-edit:hover{ text-decoration:underline; }
.rp-rev-body{ padding:.85rem .9rem; font-size:.9rem; color:var(--text2); line-height:1.5; }
.rp-rev-grid{ display:flex; flex-direction:column; gap:.4rem; }
.rp-rev-row{ display:flex; gap:.6rem; }
.rp-rev-label{ flex:0 0 90px; color:var(--text3); font-size:.82rem; }
.rp-rev-val{ flex:1; color:var(--text); word-break:break-word; }

/* ── Mandatory liability acknowledgment (review step) ───────── */
.rp-ack{
  display:flex; gap:.7rem; align-items:flex-start; cursor:pointer;
  padding:.9rem 1rem; border:1px solid var(--border2); border-radius:12px;
  background:var(--surface2); transition:border-color .15s, background .15s, box-shadow .15s;
}
.rp-ack:hover{ border-color:var(--accent); }
.rp-ack input[type=checkbox]{
  flex:0 0 auto; width:1.15rem; height:1.15rem; margin:.1rem 0 0; cursor:pointer;
  accent-color:var(--accent);
}
.rp-ack-text{ font-size:.88rem; color:var(--text2); line-height:1.5; }
.rp-ack-flash{
  border-color:var(--red, #e05848) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--red, #e05848) 22%, transparent);
  animation:rp-ack-shake .35s ease;
}
@keyframes rp-ack-shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }

/* ── Wizard nav ───────────────────────────────────────────── */
/* ═══ (b735) MOBILE WIZARD REDESIGN (<900px) ══════════════════
   One principle: nothing floats over content except a single bottom
   app bar. The tray becomes a tap-up bottom sheet; search and chips
   scroll with the page; hit targets grow to thumb size; subtitles
   and the pairing strip get out of the way. Desktop (≥900) uses the
   sidebar path and is untouched by every rule here. */
@media (max-width:899px){
  .rp-sum-inline{ display:none; }
  .rp-sum-inline.sheet-open{
    display:block; position:fixed; left:.6rem; right:.6rem;
    top:auto;   /* the base .rp-gear-summary sticky top:0 would otherwise pin the fixed sheet to the ceiling */
    bottom:calc(84px + env(safe-area-inset-bottom, 0px)); z-index:60;
    max-height:55vh; overflow:auto; border-radius:14px;
    box-shadow:0 14px 44px rgba(0,0,0,.5);
  }
  .rp-sum-inline.sheet-open .rp-gear-tray{ border-color:var(--accent); }
  .rp-gear-sticky{ position:static; }
  .rp-step-head p{ display:none; }
  .rp-step-head{ margin-bottom:.9rem; }
  .rp-wiz-nav{
    gap:.5rem;
    /* (b742) Tighter bar, and the negative margin swallows the
       tabbody's 2rem+safe-area bottom padding that showed as a dead
       gap under the bar at the end of scroll — the bar now runs to
       the very edge, carrying the safe-area inset itself. */
    padding:.45rem 0 calc(.45rem + env(safe-area-inset-bottom, 0px));
  }
  /* The dead gap was the tabbody's own bottom padding showing under
     the stuck bar at the end of scroll. When the wizard is mounted,
     the bar IS the bottom edge — zero the padding via :has() (every
     phone browser that renters use supports it; without it the old
     small gap simply remains). */
  .rp-tabbody:has(.rp-wiz){ padding-bottom:0; }
  /* (b743) The 'gap under the button' was the legal footer region
     living OUTSIDE the scroller — the bar un-stuck to reveal it at
     the end of scroll. During the wizard the bar is the bottom edge;
     the legal links stay one tap away on every other portal tab. */
  #borrow-view:has(.rp-wiz) .borrow-legal{ display:none; }
  .rp-wiz-nav .btn{ min-height:48px; }
  .rp-mnav-back{
    flex:0 0 auto; width:48px; padding:0; font-size:1.5rem; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .rp-mnav-sum{
    flex:0 1 auto; min-height:48px; padding:0 .85rem;
    display:inline-flex; align-items:center; white-space:nowrap;
    font-size:.9rem; font-weight:700; color:var(--text);
    background:var(--surface2); border:1.5px solid var(--border2); border-radius:12px;
    cursor:pointer; overflow:hidden; text-overflow:ellipsis;
  }
  .rp-wiz-nav .rp-nav-right{ flex:1; min-width:0; display:flex; }
  .rp-wiz-nav .rp-nav-next{ flex:1; min-height:48px; font-size:.98rem; }
  .rp-wiz-nav .rp-nav-cancel{ flex:0 0 auto; }
  .rp-gchip{ padding:.55rem .95rem; font-size:.86rem; }
  .rp-gear-search input{ min-height:44px; }
  .rp-gear-viewtog button{ width:3rem; padding:.75rem 0; }
  .borrow-qty-btn{ width:40px; height:40px; font-size:1.05rem; }
  .rp-price-opt{ padding:.85rem .9rem; }
  .rp-price-txt b{ font-size:.95rem; }
  .rp-pair-strip{ display:none; }
}

/* (b721) The nav is a sticky bottom bar: on a long gear list the
   next-step button used to live below a hundred cards. Sticks to the
   viewport bottom of the page scroller (same mechanism as the tray's
   top-stick), with safe-area padding for phone home bars. */
.rp-wiz-nav{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  position:sticky; bottom:0; z-index:6; margin-top:1.25rem;
  background:var(--surface); border-top:1px solid var(--border);
  padding:.7rem 0 calc(.7rem + env(safe-area-inset-bottom, 0px));
}
.rp-nav-right{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.rp-nav-next{ font-size:1rem !important; padding:.65rem 1.4rem !important; }
.rp-nav-back{ font-size:.92rem !important; }

/* ── Success screen ───────────────────────────────────────── */
.rp-success{ text-align:center; padding:2.5rem 1rem; max-width:460px; margin:1rem auto; }
.rp-success-icon{ font-size:3.4rem; line-height:1; margin-bottom:1rem; animation:rp-pop .35s ease; }
@keyframes rp-pop{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
.rp-success h2{ font-size:1.5rem; font-weight:800; color:var(--text); margin:0 0 .6rem; }
.rp-success p{ font-size:.95rem; color:var(--text2); line-height:1.55; margin:0; }
.rp-success-warn{
  margin-top:1rem; padding:.7rem .9rem; border-radius:10px; font-size:.85rem;
  background:var(--amber-dim); border:1px solid color-mix(in srgb, var(--amber) 40%, transparent); color:var(--text2);
}
.rp-success-actions{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.75rem; }

/* ── My bookings ──────────────────────────────────────────── */
.rp-bk-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.rp-bk-head h2{ font-size:1.55rem; font-weight:800; letter-spacing:-.02em; color:var(--text); margin:0; }
.rp-bk-group{ margin-bottom:1.6rem; }
/* (b722) Wide screens: booking cards tile instead of stacking a
   single 1200px-wide column of cards. The group heading spans; card
   bottom-margins hand off to the grid gap. */
@media (min-width:900px){
  .rp-bk-group{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
    gap:.7rem; align-items:start;
  }
  .rp-bk-group-head{ grid-column:1/-1; }
  .rp-bk-group .rp-bk-card{ margin-bottom:0; }
}
.rp-bk-group-head{
  display:flex; align-items:center; gap:.6rem; margin-bottom:.75rem;
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text3);
}
.rp-bk-count{
  background:var(--surface3); color:var(--text2); border-radius:20px;
  padding:.05rem .5rem; font-size:.72rem; font-weight:700; letter-spacing:0;
}
.rp-bk-card{
  padding:1rem 1.1rem; border-radius:14px; margin-bottom:.7rem;
  background:var(--surface2); border:1px solid var(--border); border-left:4px solid var(--border3);
}
.rp-bk-out{ border-left-color:var(--accent); }
.rp-bk-approved{ border-left-color:var(--green); }
.rp-bk-pending{ border-left-color:var(--amber); }
.rp-bk-done{ border-left-color:var(--text3); }
.rp-bk-declined{ border-left-color:var(--red); }
.rp-bk-archived{ border-left-color:var(--border3); }
.rp-bk-overdue{ border-left-color:var(--red); background:var(--red-dim); }
.rp-bk-card-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.6rem; }
.rp-bk-badge{
  display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .65rem; border-radius:20px;
  font-size:.78rem; font-weight:700;
}
.rp-bk-badge-out{ background:var(--accent-dim); color:var(--accent); }
.rp-bk-badge-approved{ background:var(--green-dim); color:var(--green); }
.rp-bk-badge-pending{ background:var(--amber-dim); color:var(--amber); }
.rp-bk-badge-done{ background:var(--surface3); color:var(--text2); }
.rp-bk-badge-declined{ background:var(--red-dim); color:var(--red); }
.rp-bk-badge-archived{ background:var(--surface3); color:var(--text3); }
.rp-bk-dates{ font-size:.82rem; color:var(--text3); font-weight:600; }
.rp-bk-gear{ font-size:.9rem; color:var(--text2); line-height:1.45; }
.rp-bk-meta{ font-size:.8rem; color:var(--text3); margin-top:.45rem; }
.rp-bk-reason{ font-size:.85rem; color:var(--text2); font-style:italic; margin-top:.4rem; }
.rp-bk-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem; }
.rp-bk-details{
  margin-top:.8rem; padding-top:.8rem; border-top:1px dashed var(--border2);
  font-size:.84rem; color:var(--text2); line-height:1.6;
}
.rp-bk-details strong{ color:var(--text); }
.rp-bk-details > div{ margin-bottom:.2rem; }

/* Empty state */
.rp-empty{ text-align:center; padding:3rem 1.5rem; }
.rp-empty-icon{ font-size:3rem; line-height:1; margin-bottom:.8rem; opacity:.85; }
.rp-empty-title{ font-size:1.15rem; font-weight:700; color:var(--text); }
.rp-empty-sub{ font-size:.9rem; color:var(--text3); margin-top:.4rem; max-width:340px; margin-left:auto; margin-right:auto; line-height:1.5; }

/* ── Help / FAQ ───────────────────────────────────────────── */
.rp-help-head{ margin-bottom:1.4rem; }
.rp-help-head h2{ font-size:1.55rem; font-weight:800; letter-spacing:-.02em; color:var(--text); margin:0 0 .35rem; }
.rp-help-head p{ font-size:.95rem; color:var(--text2); margin:0; line-height:1.5; }
.rp-faq{ display:flex; flex-direction:column; gap:.6rem; }
.rp-faq-item{ border:1px solid var(--border); border-radius:12px; background:var(--surface2); overflow:hidden; transition:border-color .15s; }
.rp-faq-item.open{ border-color:var(--accent-rim); }
.rp-faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem 1.1rem; background:none; border:none; cursor:pointer; text-align:left;
  font-size:.98rem; font-weight:600; color:var(--text);
}
.rp-faq-q:hover{ color:var(--accent); }
.rp-faq-caret{ flex-shrink:0; color:var(--text3); transition:transform .2s; font-size:.85rem; }
.rp-faq-item.open .rp-faq-caret{ transform:rotate(180deg); color:var(--accent); }
.rp-faq-a{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.rp-faq-item.open .rp-faq-a{ max-height:600px; }
.rp-faq-a-inner{ padding:0 1.1rem 1.05rem; font-size:.9rem; color:var(--text2); line-height:1.6; }
.rp-faq-a-inner a{ color:var(--accent); }
.rp-help-contact{
  display:flex; align-items:flex-start; gap:.8rem; margin-top:1.4rem;
  padding:1rem 1.1rem; border-radius:12px; background:var(--accent-dim); border:1px solid var(--accent-rim);
  font-size:.9rem; color:var(--text2); line-height:1.5;
}
.rp-help-contact-icon{ font-size:1.3rem; flex-shrink:0; }
.rp-help-contact strong{ color:var(--text); }

/* ── Shared utility ───────────────────────────────────────── */
.rp-muted{ color:var(--text3); }

/* ── Narrow phones ────────────────────────────────────────── */
@media (max-width:520px){
  .rp-tabbody{ padding:1.1rem 1rem; }
  .rp-hero-greet{ font-size:1.35rem; }
  .rp-field-grid{ grid-template-columns:1fr; gap:0; }
  /* (b742/b743) Dates side-by-side. minmax(0,…) + min-width:0 tame
     the iOS date input's intrinsic width, which blew the 1fr grid out
     past the viewport (the two inputs 'crashed into each other' and
     the right one bled off-screen). appearance:none flattens the iOS
     UA styling that rendered them as tall empty wells; 16px font
     stops Safari's focus-zoom. */
  .rp-date-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.6rem; }
  .rp-date-grid .rp-field{ min-width:0; }
  .rp-date-grid input[type="date"]{
    width:100%; min-width:0; box-sizing:border-box;
    height:48px; min-height:0; padding:.5rem .6rem;
    font-size:16px; line-height:1.2;
    -webkit-appearance:none; appearance:none;
    background:var(--bg); border:1.5px solid var(--border2); border-radius:10px; color:var(--text);
  }
  .rp-step-label{ font-size:.66rem; }
  .rp-step-dot{ width:30px; height:30px; font-size:.82rem; }
  /* (b735) superseded by the single-row app bar */
  .rp-glance{ grid-template-columns:1fr; }
  .rp-cta-text strong{ font-size:1rem; }
}

/* Renter portal — tab render error boundary (b319) */
.rp-tab-error{ text-align:center; padding:3rem 1.5rem; max-width:420px; margin:1rem auto; }
.rp-tab-error-icon{ font-size:2.6rem; line-height:1; margin-bottom:.8rem; }
.rp-tab-error-title{ font-size:1.2rem; font-weight:700; color:var(--text); }
.rp-tab-error-sub{ font-size:.9rem; color:var(--text3); margin-top:.5rem; line-height:1.55; }

/* Renter portal — non-blocking load-failure notice (b320) */
.rp-notice{ display:flex; gap:.6rem; align-items:flex-start; margin-bottom:1.1rem; padding:.75rem .95rem;
  border-radius:11px; background:var(--amber-dim); border:1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  font-size:.85rem; color:var(--text2); line-height:1.5; }
.rp-notice-icon{ font-size:1.05rem; flex-shrink:0; }
.rp-notice-body{ flex:1; min-width:0; }
.rp-notice-link{ background:none; border:none; padding:0; color:var(--accent); font-weight:600; cursor:pointer; font-size:inherit; text-decoration:underline; }

/* Renter portal — dashboard glance category summary (b322) */
.rp-gcount{ display:inline-flex; align-items:center; gap:.32rem; margin:0 .55rem .32rem 0; font-size:.82rem; color:var(--text2); white-space:nowrap; }
.rp-gcount-dot{ width:7px; height:7px; border-radius:50%; background:var(--c,#8a8f98); flex-shrink:0; }

/* ── Cards Out summary modal (2026.07+) ──────────────────────
   Grouped-by-holder view of every media card still out, opened
   from the Home decision queue's outstanding-card rows. */
.co-empty{ padding:2.4rem 1.4rem; text-align:center; color:var(--text3); font-size:.95rem; }
.co-group{ padding:1rem 1.4rem; border-bottom:1px solid var(--border); }
.co-group:last-child{ border-bottom:none; }
.co-group-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.co-group-name{ font-size:1rem; font-weight:700; color:var(--text); }
.co-group-reach{ display:flex; flex-wrap:wrap; gap:.5rem .8rem; margin-top:.3rem; font-size:.8rem; }
.co-role{ color:var(--text3); }
.co-reach-link{ color:var(--accent); text-decoration:none; }
.co-reach-link:hover{ text-decoration:underline; }
.co-group-tally{ display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; flex-shrink:0; }
.co-group-count{ font-size:.82rem; font-weight:700; color:var(--red); background:var(--red-dim); border:1px solid color-mix(in srgb,var(--red) 30%,transparent); border-radius:20px; padding:.1rem .55rem; white-space:nowrap; }
.co-group-age{ font-size:.72rem; color:var(--text3); font-family:var(--mono); }
.co-return-all{ margin-top:.7rem; }
.co-handoffs{ margin-top:.8rem; display:flex; flex-direction:column; gap:.55rem; }
.co-handoff{ display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; padding:.7rem .85rem; background:var(--surface2); border:1px solid var(--border); border-radius:9px; }
.co-handoff-main{ min-width:0; flex:1; }
.co-handoff-title{ font-size:.92rem; font-weight:600; color:var(--text); }
.co-labels{ font-family:var(--mono); font-size:.82rem; font-weight:600; color:var(--accent); }
.co-handoff-meta{ display:flex; flex-wrap:wrap; gap:.35rem .7rem; margin-top:.3rem; font-size:.76rem; color:var(--text3); }
.co-out{ color:var(--amber); font-weight:600; }
.co-notes{ margin-top:.4rem; font-size:.82rem; color:var(--text2); font-style:italic; }
.co-handoff-actions{ display:flex; flex-direction:column; gap:.35rem; flex-shrink:0; }
@media (max-width:560px){
  .co-group-head{ flex-direction:column; gap:.4rem; }
  .co-group-tally{ align-items:flex-start; flex-direction:row; gap:.6rem; }
  .co-handoff{ flex-direction:column; }
  .co-handoff-actions{ flex-direction:row; }
}

/* ── Home rentals calendar (2026.07+) ────────────────────────
   Reuses the availability grid (.av-*) with rental-specific day
   states: amber run = gear out, dot = scheduled return, red = overdue. */
.av-cell.is-rented{ background:color-mix(in srgb, var(--amber) 18%, var(--surface)); border-color:color-mix(in srgb, var(--amber) 38%, var(--border)); color:var(--text); }
.av-cell.is-dueback{ background:color-mix(in srgb, var(--amber) 18%, var(--surface)); border-color:var(--amber); color:var(--text); }
.av-cell.is-overdue{ background:var(--red-dim); border-color:color-mix(in srgb, var(--red) 45%, var(--border)); }
.av-cell.is-overdue .av-num{ color:var(--red); font-weight:700; }
.rc-due{ position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:var(--amber); }
.av-cell.is-overdue .rc-due{ background:var(--red); }
.av-sw.is-rented{ background:color-mix(in srgb, var(--amber) 32%, var(--surface)); border:1px solid var(--amber); }
.av-sw.is-dueback{ background:var(--surface); border:1px solid var(--amber); }
.av-sw.is-overdue{ background:var(--red-dim); border:1px solid var(--red); }
.rc-overdue-txt{ color:var(--red); font-weight:700; }

/* (v2026.07+) Share-list staleness dot on the "Share list" button. */
.gl-stale-dot{
  color:var(--amber);font-size:.7rem;margin-left:.3rem;
  vertical-align:middle;line-height:1;
}

/* (v2026.07+) Header identity pill — makes the signed-in user visible
   on every page. Populated by updateUserPill(); the role badge reuses
   the existing .role-badge / .role-<role> palette. Hidden when empty
   (:empty) so the header stays clean on the auth screen. */
.user-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.78rem;color:var(--text2);
  padding:.18rem .45rem;border-radius:6px;
  background:var(--surface2);border:1px solid var(--border);
  white-space:nowrap;max-width:15rem;overflow:hidden;text-overflow:ellipsis;
}
.user-pill:empty{display:none;}
/* Tight header space on phones — keep the role badge, drop the padding. */
@media (max-width:700px){
  .user-pill{max-width:8.5rem;font-size:.72rem;padding:.15rem .3rem;}
}

/* (v2026.07+) Cross-tab identity-change warning. Fixed bar, top-centre,
   above everything; deliberately loud — the alternative was a silent
   session swap that presented as a random logout on refresh. */
.identity-banner{
  position:fixed;top:.6rem;left:50%;transform:translateX(-50%);
  z-index:99999;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  max-width:min(92vw,44rem);
  background:var(--surface2);color:var(--text);
  border:1px solid var(--amber);border-left:4px solid var(--amber);
  border-radius:8px;padding:.6rem .8rem;
  font-size:.84rem;line-height:1.4;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}

/* ════════════════════════════════════════════════════════════
   DIAGRAMS (dgm-) — lighting diagram library + editor
   Module: grip-diagram.js (lazy). Everything themed via tokens so
   light mode works for free; the canvas itself is a neutral paper
   surface in both themes.
   ════════════════════════════════════════════════════════════ */
:root{
  --dgm-furn:#b79a7d;              /* furniture fill (warm wood) */
  --dgm-paper:#f2f1ec;             /* canvas is always light paper —
                                      the icon library + printed-diagram
                                      look are designed for white */
  --dgm-wall:#26282e;              /* wall ink */
  --dgm-ink:#3c3e44;               /* label ink on paper */
  --dgm-ink2:#8a877c;              /* muted ink on paper */
  --dgm-gridline:#dedbd2;
  --dgm-gridline-major:#ccc8bb;
}

/* ── library / job-phase grid ─────────────────────────────── */
.dgm-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px; padding:4px 2px 24px;
}
.dgm-card{
  position:relative; background:var(--surface-grad,var(--surface));
  border:1px solid var(--border2); border-radius:12px; overflow:hidden;
  cursor:pointer; box-shadow:var(--depth-1,none);
  transition:border-color .15s, transform .12s, box-shadow .15s;
}
.dgm-card:hover{ border-color:var(--accent-dim,var(--accent)); transform:translateY(-1px); box-shadow:var(--depth-2,var(--shadow-md)); }
.dgm-card-thumb{
  height:140px; background:var(--dgm-paper);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border-bottom:1px solid var(--border);
}
.dgm-card-thumb svg{ width:100%; height:100%; display:block; }
.dgm-card-blank{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--text3); font-size:1.4rem;
}
.dgm-card-blank span{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.dgm-card-meta{ padding:10px 12px 12px; }
.dgm-card-name{ font-weight:700; font-size:.92rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dgm-card-sub{ display:flex; gap:8px; align-items:center; margin-top:4px; flex-wrap:wrap; }
.dgm-card-job{
  font-size:.72rem; color:var(--accent); background:var(--accent-soft,rgba(245,166,35,.12));
  padding:1px 7px; border-radius:20px; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dgm-card-day{ font-size:.72rem; color:var(--text2); background:var(--surface3); padding:1px 7px; border-radius:20px; }
.dgm-card-date{ font-size:.72rem; color:var(--text3); font-family:var(--mono); }
.dgm-card-actions{
  position:absolute; top:8px; right:8px; display:flex; gap:6px;
  opacity:0; transition:opacity .15s;
}
.dgm-card:hover .dgm-card-actions{ opacity:1; }
.dgm-card-btn{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--border2);
  background:var(--surface); color:var(--text2); cursor:pointer; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
}
.dgm-card-btn:hover{ border-color:var(--accent); color:var(--text); }
.dgm-card-btn.danger:hover{ border-color:var(--red); color:var(--red); }
.dgm-lib-search{
  background:var(--surface2); border:1px solid var(--border2); border-radius:8px;
  color:var(--text); padding:7px 12px; font-size:.85rem; width:200px; font-family:var(--ui);
}
.dgm-lib-empty{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:70px 20px; color:var(--text2); text-align:center;
}

/* ── folder hierarchy (b391) ── */
.dgm-crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:2px;
  padding:2px 2px 12px; font-size:.85rem; font-family:var(--ui);
}
.dgm-crumb{
  color:var(--text2); cursor:pointer; padding:4px 8px; border-radius:7px;
  border:1px dashed transparent; transition:background .12s, color .12s;
}
.dgm-crumb:hover{ background:var(--surface2); color:var(--text); }
.dgm-crumb.current{ color:var(--text); font-weight:600; cursor:default; }
.dgm-crumb-sep{ color:var(--text3,var(--text2)); user-select:none; }
.dgm-folder-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px; padding:2px 2px 14px;
}
.dgm-folder-card{
  position:relative; display:flex; align-items:center; gap:10px;
  background:var(--surface-grad,var(--surface));
  border:1px solid var(--border2); border-radius:12px;
  padding:10px 12px; cursor:pointer;
  transition:border-color .15s, transform .12s, box-shadow .15s;
}
.dgm-folder-card:hover{ border-color:var(--accent); transform:translateY(-1px); }
.dgm-folder-ic{ font-size:1.4rem; line-height:1; }
.dgm-folder-meta{ display:flex; flex-direction:column; min-width:0; gap:1px; }
.dgm-folder-name{
  font-weight:600; color:var(--text); font-size:.9rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dgm-folder-sub{ color:var(--text2); font-size:.72rem; }
.dgm-folder-card .dgm-card-actions{
  position:static; margin-left:auto; opacity:0; display:flex; gap:4px;
  transition:opacity .12s;
}
.dgm-folder-card:hover .dgm-card-actions{ opacity:1; }
.dgm-drop-over{
  border-color:var(--accent) !important;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
  border-style:dashed !important;
}
.dgm-crumb.dgm-drop-over{ border:1px dashed var(--accent); }
#diagrams-content > .dgm-crumbs,
#diagrams-content > .dgm-folder-grid{
  max-width:var(--page-max);width:100%;
  margin-left:auto;margin-right:auto;
}
.dgm-lib-empty.small{ padding:34px 16px; }
.dgm-lib-empty-icon{ font-size:2.2rem; opacity:.7; }
.dgm-lib-empty-title{ font-weight:700; color:var(--text); font-size:1.02rem; }
.dgm-lib-empty-sub{ font-size:.85rem; color:var(--text3); max-width:380px; }
.dgm-phase-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.dgm-phase-title{ font-weight:700; font-size:.95rem; color:var(--text); }

/* ── editor shell ─────────────────────────────────────────── */
body.dgm-editor-open{ overflow:hidden; }
.dgm-editor{
  position:fixed; inset:0; z-index:900; display:flex; flex-direction:column;
  background:var(--bg);
}
.dgm-topbar{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--header-bg,var(--surface)); border-bottom:1px solid var(--border2);
  flex:0 0 auto; flex-wrap:wrap;
}
.dgm-tb-spacer{ flex:1; }
.dgm-tb-group{ display:flex; gap:2px; background:var(--surface2); border:1px solid var(--border2); border-radius:9px; padding:2px; }
.dgm-tb-btn{
  border:none; background:transparent; color:var(--text2); cursor:pointer;
  padding:5px 10px; border-radius:7px; font-size:.85rem; font-family:var(--ui); font-weight:600;
  line-height:1.2; white-space:nowrap;
}
.dgm-tb-btn:hover{ background:var(--surface3); color:var(--text); }
.dgm-tb-btn.tog.on{ background:var(--accent-soft,rgba(245,166,35,.15)); color:var(--accent); }
.dgm-back{ font-weight:700; color:var(--text); }
.dgm-zoom-label{ min-width:52px; text-align:center; font-family:var(--mono); font-size:.78rem; }
.dgm-name{
  background:transparent; border:1px solid transparent; border-radius:8px;
  color:var(--text); font-family:var(--ui); font-weight:700; font-size:1rem;
  padding:5px 10px; min-width:140px; max-width:320px; flex:0 1 auto;
}
.dgm-name:hover{ border-color:var(--border2); }
.dgm-name:focus{ border-color:var(--accent); outline:none; background:var(--surface2); }
.dgm-save-state{ font-size:.72rem; color:var(--text3); font-family:var(--mono); white-space:nowrap; }
.dgm-save-state.dirty{ color:var(--amber); }
.dgm-save-state.saving{ color:var(--text2); }
.dgm-save-state.error{ color:var(--red); }

.dgm-body{ display:flex; flex:1; min-height:0; }

/* ── palette ──────────────────────────────────────────────── */
.dgm-palette{
  width:236px; flex:0 0 auto; display:flex; flex-direction:column;
  background:var(--rail-bg,var(--surface)); border-right:1px solid var(--border2);
  min-height:0;
}
.dgm-tools{
  display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:8px;
  border-bottom:1px solid var(--border);
}
.dgm-tool{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--surface2); border:1px solid var(--border2); border-radius:8px;
  color:var(--text2); cursor:pointer; padding:6px 2px; font-family:var(--ui);
}
.dgm-tool:hover{ color:var(--text); border-color:var(--border3,var(--border2)); }
.dgm-tool.active{ background:var(--accent-soft,rgba(245,166,35,.15)); border-color:var(--accent); color:var(--accent); }
.dgm-tool-icon{ font-size:.95rem; line-height:1; }
.dgm-tool-lbl{ font-size:.58rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.dgm-pal-tabs{ display:flex; padding:8px 8px 0; gap:4px; }
.dgm-pal-tab{
  flex:1; background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--text3); font-weight:700; font-size:.8rem; padding:6px 4px; cursor:pointer; font-family:var(--ui);
}
.dgm-pal-tab.active{ color:var(--text); border-bottom-color:var(--accent); }
.dgm-pal-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
.dgm-pal-search{
  margin:8px; padding:6px 10px; background:var(--surface2); border:1px solid var(--border2);
  border-radius:8px; color:var(--text); font-size:.82rem; font-family:var(--ui);
}
.dgm-pal-list{ flex:1; overflow-y:auto; padding:0 8px 12px; }
.dgm-gear-cat{
  font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text3); padding:10px 4px 4px;
}
.dgm-gear-row{
  display:flex; align-items:center; gap:7px; width:100%; text-align:left;
  background:transparent; border:1px solid transparent; border-radius:7px;
  color:var(--text2); padding:5px 6px; cursor:pointer; font-family:var(--ui); font-size:.8rem;
}
.dgm-gear-row:hover{ background:var(--surface2); color:var(--text); }
.dgm-gear-row.active{ background:var(--accent-soft,rgba(245,166,35,.15)); border-color:var(--accent); color:var(--text); }
.dgm-gear-dot{ width:7px; height:7px; border-radius:50%; background:var(--text3); flex:0 0 auto; }
.dgm-gear-dot.lit{ background:var(--accent); box-shadow:0 0 6px var(--accent); }
.dgm-gear-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dgm-gear-asset{ font-family:var(--mono); font-size:.62rem; color:var(--text3); }
.dgm-pal-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:transparent; border:1px solid transparent; border-radius:7px;
  color:var(--text2); padding:7px 8px; cursor:pointer; font-family:var(--ui); font-size:.82rem;
}
.dgm-pal-item:hover{ background:var(--surface2); color:var(--text); }
.dgm-pal-item.active{ background:var(--accent-soft,rgba(245,166,35,.15)); border-color:var(--accent); color:var(--text); }
.dgm-pal-icon{ width:20px; text-align:center; font-size:.95rem; }
.dgm-pal-empty{ color:var(--text3); font-size:.8rem; padding:16px 8px; text-align:center; }

/* ── canvas ───────────────────────────────────────────────── */
.dgm-canvas-wrap{ flex:1; position:relative; min-width:0; background:var(--dgm-paper); }
.dgm-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; outline:none; touch-action:none;
  user-select:none; -webkit-user-select:none; }
.dgm-svg text{ pointer-events:none; user-select:none; -webkit-user-select:none; }
.dgm-cur-cross .dgm-svg{ cursor:crosshair; }
.dgm-cur-grab .dgm-svg, .dgm-svg.dgm-cur-grab{ cursor:grab; }
.dgm-empty-hint{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  text-align:center; color:var(--dgm-ink2); font-size:.88rem; pointer-events:none;
  display:flex; flex-direction:column; gap:6px; max-width:420px;
}
.dgm-empty-title{ font-weight:800; font-size:1.05rem; color:var(--dgm-ink); letter-spacing:.02em; }
.dgm-empty-sub{ font-size:.75rem; opacity:.8; }
.dgm-empty-hint b{ color:var(--accent); }
.dgm-toolhint{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--border2); border-radius:20px;
  color:var(--text2); font-size:.75rem; padding:6px 16px; pointer-events:none;
  box-shadow:var(--depth-2,var(--shadow-md)); white-space:nowrap; max-width:92%;
  overflow:hidden; text-overflow:ellipsis;
}

/* ── svg element styling ──────────────────────────────────── */
.dgm-grid{ stroke:var(--dgm-gridline); stroke-width:1; vector-effect:non-scaling-stroke; }
.dgm-grid.major{ stroke:var(--dgm-gridline-major); }
.dgm-wall-stroke{
  stroke:var(--dgm-wall); stroke-linecap:square; cursor:pointer;
}
.dgm-wall-sel .dgm-wall-stroke{ stroke:var(--accent); }
.dgm-dim{
  font-size:6.5px; fill:var(--dgm-ink2); font-family:var(--mono); text-anchor:middle;
  paint-order:stroke; stroke:var(--dgm-paper); stroke-width:2px; stroke-linejoin:round;
  letter-spacing:.02em;
}
.dgm-dim.live{ fill:var(--accent); font-weight:700; font-size:10px; }
.dgm-draft-line{
  fill:none; stroke:var(--accent); stroke-width:2.5; stroke-dasharray:6 4;
  vector-effect:non-scaling-stroke;
}
.dgm-draft-line.live{ opacity:.6; }
.dgm-close-hint{ fill:none; stroke:var(--green,#3fa85f); stroke-width:2.5; vector-effect:non-scaling-stroke; }
.dgm-vertex{
  fill:#fff; stroke:var(--accent); stroke-width:2; cursor:move;
  vector-effect:non-scaling-stroke;
}
.dgm-window-line{ stroke:var(--dgm-wall); stroke-width:2; }
.dgm-window-sill{ fill:#fff; stroke:var(--dgm-wall); stroke-width:1.6; }
.dgm-window-mid{ stroke:var(--dgm-wall); stroke-width:1.6; }
.dgm-door-arc{ fill:none; stroke:var(--dgm-ink2); stroke-width:1.3; stroke-dasharray:4 3; }
.dgm-door-leaf{ stroke:var(--dgm-wall); stroke-width:5; stroke-linecap:round; }
.dgm-open-hit{ fill:transparent; cursor:move; }
.dgm-op-sel .dgm-door-leaf, .dgm-op-sel .dgm-window-mid{ stroke:var(--accent); }
.dgm-open-ghost{ fill:var(--accent); opacity:.5; }
.dgm-item{ cursor:move; }
.dgm-sel-box{
  fill:none; stroke:var(--accent); stroke-width:1.4; stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke; rx:4;
}
.dgm-rot-stem{ stroke:var(--accent); stroke-width:1.2; vector-effect:non-scaling-stroke; opacity:.7; }
.dgm-handle{
  fill:#fff; stroke:var(--accent); stroke-width:2; cursor:grab;
  vector-effect:non-scaling-stroke;
}
.dgm-handle.rot{ cursor:alias; }
.dgm-handle.beam{ fill:var(--accent); fill-opacity:.35; }
/* path node editing */
.dgm-handle.vtx{ fill:#fff; stroke:var(--accent); stroke-width:1.8; cursor:move; }
.dgm-handle.vtx.on{ fill:var(--accent); }
.dgm-handle.bez{ fill:var(--surface,#fff); stroke:var(--accent); stroke-width:1.6; stroke-dasharray:none; cursor:grab; }
/* (b500) filled once the arrow's curve has been hand-placed */
.dgm-handle.bez.set{ fill:var(--accent); fill-opacity:.45; }
.dgm-bez-stem{ stroke:var(--accent); stroke-width:1.1; opacity:.55; vector-effect:non-scaling-stroke; }
/* drawing previews */
.dgm-shape-ghost{
  fill:var(--accent); fill-opacity:.08; stroke:var(--accent); stroke-width:1.6;
  stroke-dasharray:6 4; vector-effect:non-scaling-stroke;
}
.dgm-free-ghost{
  fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round;
  stroke-linejoin:round; opacity:.8; vector-effect:non-scaling-stroke;
}
.dgm-beam{ pointer-events:none; }

/* ── inspector ────────────────────────────────────────────── */
.dgm-inspector{
  width:250px; flex:0 0 auto; overflow-y:auto; padding:14px;
  background:var(--rail-bg,var(--surface)); border-left:1px solid var(--border2);
}
.dgm-insp-head{
  font-weight:800; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text2); margin-bottom:12px;
}
.dgm-gear-chip{
  font-size:.74rem; color:var(--text2); background:var(--surface2);
  border:1px solid var(--border); border-radius:7px; padding:5px 9px; margin-bottom:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dgm-f{ margin-bottom:11px; }
.dgm-f label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text3); margin-bottom:4px;
}
.dgm-fv{ color:var(--accent); font-family:var(--mono); text-transform:none; letter-spacing:0; }
.dgm-f input[type=text], .dgm-f input[type=number], .dgm-f select{
  width:100%; background:var(--surface2); border:1px solid var(--border2); border-radius:7px;
  color:var(--text); padding:6px 9px; font-size:.83rem; font-family:var(--ui); box-sizing:border-box;
}
.dgm-f input:focus, .dgm-f select:focus{ border-color:var(--accent); outline:none; }
.dgm-f input[type=range]{ width:100%; accent-color:var(--accent); }
.dgm-kelvin-slider{
  -webkit-appearance:none; appearance:none; height:8px; border-radius:5px;
  background:linear-gradient(90deg,#ff9130,#ffc37e,#fff3e0,#eaf1ff,#b9d0ff);
  outline:none;
}
.dgm-kelvin-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--surface); border:2px solid var(--text2); cursor:pointer;
}
.dgm-frow{ display:flex; gap:8px; }
.dgm-frow .dgm-f{ flex:1; min-width:0; }
.dgm-num-wrap{ position:relative; }
.dgm-num-unit{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:.68rem; color:var(--text3); font-family:var(--mono); pointer-events:none;
}
.dgm-f-inline{ display:flex; align-items:center; justify-content:space-between; }
.dgm-f-inline label{ margin-bottom:0; }
.dgm-switch{
  width:38px; height:21px; border-radius:20px; border:1px solid var(--border2);
  background:var(--surface3); cursor:pointer; position:relative; padding:0;
}
.dgm-switch span{
  position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:var(--text3); transition:left .15s, background .15s;
}
.dgm-switch.on{ background:var(--accent-soft,rgba(245,166,35,.25)); border-color:var(--accent); }
.dgm-switch.on span{ left:19px; background:var(--accent); }
.dgm-colormode{ display:flex; gap:4px; }
.dgm-cm-btn{
  flex:1; background:var(--surface2); border:1px solid var(--border2); border-radius:7px;
  color:var(--text3); font-size:.74rem; font-weight:700; padding:5px 4px; cursor:pointer; font-family:var(--ui);
}
.dgm-cm-btn.active{ background:var(--accent-soft,rgba(245,166,35,.15)); border-color:var(--accent); color:var(--accent); }
.dgm-swatches{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; }
.dgm-swatch{
  width:24px; height:24px; border-radius:7px; border:1px solid rgba(0,0,0,.25); cursor:pointer;
}
.dgm-swatch.active{ outline:2px solid var(--accent); outline-offset:1px; }
.dgm-hex-row{ display:flex; gap:6px; }
.dgm-hex-row input[type=color]{
  width:38px; height:32px; padding:2px; background:var(--surface2);
  border:1px solid var(--border2); border-radius:7px; cursor:pointer;
}
.dgm-hex-row input[type=text]{ flex:1; font-family:var(--mono); }
.dgm-sep{ height:1px; background:var(--border); margin:14px 0; }
.dgm-insp-hint{ font-size:.74rem; color:var(--text3); line-height:1.55; margin:10px 0; }
.dgm-insp-hint b{ color:var(--accent); }
.dgm-insp-actions{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }

/* ── responsive: stack panels on narrow screens ───────────── */
@media (max-width: 900px){
  .dgm-body{ flex-direction:column; }
  .dgm-palette{
    width:100%; flex:0 0 auto; max-height:200px; border-right:none;
    border-bottom:1px solid var(--border2);
  }
  .dgm-tools{ grid-template-columns:repeat(5,1fr); padding:6px; }
  .dgm-pal-list{ max-height:104px; }
  .dgm-inspector{
    width:100%; flex:0 0 auto; max-height:34vh; border-left:none;
    border-top:1px solid var(--border2);
  }
  .dgm-canvas-wrap{ flex:1; min-height:200px; }
  .dgm-name{ max-width:150px; }
  .dgm-topbar{ gap:5px; padding:6px 8px; }
}

/* beam blending: additive light in dark mode, pigment-style shading
   on the light "paper" theme (screen over white is invisible). */
.dgm-beam path, .dgm-beam circle{ mix-blend-mode:multiply; }
.dgm-spec-chip{ color:var(--accent); border-color:var(--accent-dim,var(--accent)); }

/* diagrams library: match the app's standard page rhythm —
   page-max centred content, side padding, own scroll region */
/* (b467) Diagrams library sits in the SAME rhythm as every other
   section: 1.5/1.8rem container padding, page-max column, standard
   page-head spacing — it should feel like a sibling of Jobs/People,
   not its own app. */
#diagrams-content{
  display:flex;flex-direction:column;flex:1 1 auto;
  min-width:0;min-height:0;width:100%;
  overflow-y:auto;padding:1.5rem 1.8rem;
}
#diagrams-content > .page-head{
  padding:0;margin:0 auto 1.5rem;
  max-width:var(--page-max);width:100%;
}
#diagrams-content > .dgm-grid,
#diagrams-content > .dgm-lib-empty,
#diagrams-content > .placeholder{
  max-width:var(--page-max);width:100%;
  margin-left:auto;margin-right:auto;
}

/* icon picker overlay (change/upload gear icons) */
.dgm-icopick-backdrop{
  position:fixed; inset:0; z-index:950; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
.dgm-icopick{
  width:min(720px, 92vw); height:min(600px, 84vh);
  background:var(--surface); border:1px solid var(--border2); border-radius:14px;
  box-shadow:var(--depth-3,var(--shadow-lg)); display:flex; flex-direction:column; overflow:hidden;
}
.dgm-icopick-head{
  display:flex; gap:8px; align-items:center; padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.dgm-icopick-title{ font-weight:800; font-size:.9rem; color:var(--text); margin-right:auto; }
.dgm-icopick-search{
  background:var(--surface2); border:1px solid var(--border2); border-radius:8px;
  color:var(--text); padding:6px 11px; font-size:.85rem; width:220px; font-family:var(--ui);
}
.dgm-icopick-body{ flex:1; overflow-y:auto; padding:10px 14px 16px; }
.dgm-icopick .dgm-ico-grid{ grid-template-columns:repeat(6,1fr); }
@media (max-width:700px){ .dgm-icopick .dgm-ico-grid{ grid-template-columns:repeat(4,1fr); } }
.dgm-ico-item{ position:relative; }
.dgm-ico-del{
  position:absolute; top:2px; right:2px; border:none; background:var(--surface);
  color:var(--text3); border-radius:6px; font-size:.62rem; padding:1px 4px; cursor:pointer;
  border:1px solid var(--border); display:none;
}
.dgm-ico-item:hover .dgm-ico-del{ display:block; }
.dgm-ico-del:hover{ color:var(--red); border-color:var(--red); }

/* icon library palette */
.dgm-ico-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:2px 0 6px; }
.dgm-ico-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:var(--surface2); border:1px solid var(--border); border-radius:8px;
  padding:6px 3px 4px; cursor:pointer; color:var(--text3); font-family:var(--ui);
}
.dgm-ico-item:hover{ border-color:var(--border3,var(--border2)); color:var(--text2); }
.dgm-ico-item.active{ background:var(--accent-soft,rgba(245,166,35,.15)); border-color:var(--accent); color:var(--text); }
.dgm-ico-item img{
  width:100%; height:44px; object-fit:contain;
  background:var(--dgm-paper); border-radius:4px; padding:2px; box-sizing:border-box;
}
.dgm-ico-item span{
  font-size:.56rem; line-height:1.15; text-align:center; font-weight:600;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.dgm-chip-x{
  border:none; background:transparent; color:var(--text3); cursor:pointer;
  font-size:.7rem; padding:0 2px; float:right;
}
.dgm-chip-x:hover{ color:var(--red); }


/* ── diagram labels: hand-drawn marker style (MattB / fallback) ── */
.dgm-lbl, .dgm-marker, .dgm-lbl-inline{
  font-family:'matt-b','mattb','MattB','Permanent Marker',cursive;
  text-transform:uppercase; letter-spacing:.02em;
}
.dgm-lbl{
  font-size:13.5px; fill:var(--dgm-ink); text-anchor:middle;
  paint-order:stroke; stroke:var(--dgm-paper); stroke-width:4px; stroke-linejoin:round;
}
.dgm-lbl.sel{ fill:var(--accent2,#e86c2c); }
.dgm-svg text.dgm-lbl{ pointer-events:auto; cursor:move; }
.dgm-lbl-inline{
  font-size:13px; fill:var(--dgm-ink); text-anchor:middle;
  paint-order:stroke; stroke:var(--dgm-paper); stroke-width:3px;
}
.dgm-callout{
  fill:none; stroke:var(--dgm-ink); stroke-width:2.4; stroke-linecap:round;
}
/* (b424/b425) paper halo — same white outline as labels, keeps
   callout arrows readable crossing dark items or walls. Curve halo
   plus a paper-filled/stroked head form ONE continuous silhouette;
   the ink head sits plainly on top (no separate outline). */
.dgm-callout-halo{
  fill:none; stroke:var(--dgm-paper); stroke-opacity:.92; stroke-width:4.8;
  stroke-linecap:butt;
}
.dgm-wall-joint{ fill:var(--dgm-wall); }
.dgm-callout-halo-head{
  fill:var(--dgm-paper); fill-opacity:.92;
  stroke:var(--dgm-paper); stroke-opacity:.92; stroke-width:2.4; stroke-linejoin:round;
}
.dgm-callout-head{ fill:var(--dgm-ink); }
.dgm-pal-note{
  font-size:.66rem; color:var(--text3); padding:7px 10px 0;
  letter-spacing:.04em; font-weight:600;
}

/* inspector textareas (multiline labels) */
.dgm-f textarea{
  width:100%; background:var(--surface2); border:1px solid var(--border2); border-radius:7px;
  color:var(--text); padding:6px 9px; font-size:.83rem; font-family:var(--ui);
  box-sizing:border-box; resize:vertical; min-height:38px;
}
.dgm-f textarea:focus{ border-color:var(--accent); outline:none; }

/* card feedback while its diagram loads */
.dgm-card-opening{ opacity:.55; pointer-events:none; }
.dgm-card-opening::after{
  content:''; position:absolute; inset:0; border-radius:12px;
  border:2px solid var(--accent); animation:dgm-pulse 0.9s ease-in-out infinite;
}
@keyframes dgm-pulse{ 50%{ opacity:.35; } }
.dgm-door-leaf.closed{ stroke:var(--dgm-wall); stroke-width:5; }
.dgm-marquee{
  fill:rgba(245,166,35,.08); stroke:var(--accent); stroke-width:1.2;
  stroke-dasharray:5 4; vector-effect:non-scaling-stroke;
}
.dgm-group-box{
  fill:none; stroke:var(--accent); stroke-width:1.6;
  vector-effect:non-scaling-stroke; opacity:.85;
}

/* floating quick-edit HUD (Adobe-style contextual bar) */
.dgm-hud{
  position:absolute; z-index:30; display:flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--border2); border-radius:11px;
  padding:6px 9px; box-shadow:var(--depth-3,var(--shadow-lg));
  user-select:none; -webkit-user-select:none;
}
.dgm-hud-btn{
  border:none; background:var(--surface2); color:var(--text2); cursor:pointer;
  width:28px; height:28px; border-radius:8px; font-size:.85rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.dgm-hud-btn:hover{ background:var(--surface3); color:var(--text); }
.dgm-hud-btn.tog.on{ background:var(--accent-soft,rgba(245,166,35,.2)); color:var(--accent); }
.dgm-hud-btn.danger:hover{ color:var(--red); }
.dgm-hud-lbl{
  display:flex; align-items:center; gap:4px; color:var(--text3);
  font-size:.72rem; font-family:var(--ui); font-weight:700;
}
.dgm-hud-lbl input[type=range]{ width:64px; accent-color:var(--accent); }
.dgm-hud-lbl input.dgm-kelvin-slider{ height:6px; }
.dgm-hud-sep{ width:1px; height:20px; background:var(--border); }
.dgm-hud-count{
  font-size:.72rem; font-weight:800; color:var(--accent); font-family:var(--mono);
  background:var(--accent-soft,rgba(245,166,35,.15)); border-radius:6px; padding:2px 7px;
}

/* ════════════════════════════════════════════════════════════
   Lighting Diagrams — 3D viewer overlay (b413+)
   ════════════════════════════════════════════════════════════ */
.dgm3d-wrap { position:fixed; inset:0; z-index:10050; display:flex; flex-direction:column;
              background:#191a1f; font-family:'CineBaseIcons','Inter',system-ui; }
.dgm3d-top { display:flex; align-items:center; gap:8px; padding:8px 12px;
             background:rgba(24,25,30,.94); border-bottom:1px solid #2c2d34;
             color:#e8e6df; flex:0 0 auto; }
.dgm3d-title { font-weight:700; font-size:.95rem; overflow:hidden; text-overflow:ellipsis;
               white-space:nowrap; }
.dgm3d-tag { font-size:.68rem; font-weight:800; color:#c97509; border:1px solid #c9750966;
             border-radius:5px; padding:1px 5px; margin-left:4px; vertical-align:2px; }
.dgm3d-spacer { flex:1; }
.dgm3d-btn { border:1px solid #3a3b44; background:#24252b; color:#d8d6cf; border-radius:8px;
             padding:5px 11px; font:600 .78rem 'Inter',system-ui; cursor:pointer; white-space:nowrap; }
.dgm3d-btn:hover { border-color:#c97509; color:#f0b35f; }
.dgm3d-btn[disabled] { opacity:.5; cursor:wait; }
.dgm3d-btn.tog { opacity:.55; }
.dgm3d-btn.tog.on { opacity:1; border-color:#c97509aa; color:#f0b35f; }
.dgm3d-close { font-size:.9rem; padding:5px 10px; }
.dgm3d-wallh { display:flex; align-items:center; gap:5px; font:600 .75rem 'Inter',system-ui;
               color:#a8a69e; }
.dgm3d-wallh-in { width:64px; background:#24252b; border:1px solid #3a3b44; color:#e8e6df;
                  border-radius:7px; padding:4px 6px; font:600 .8rem 'JetBrains Mono',monospace; }
.dgm3d-host { flex:1; position:relative; min-height:0; }
.dgm3d-host canvas { position:absolute; inset:0; width:100% !important; height:100% !important;
                     display:block; }
.dgm3d-hint { position:fixed; bottom:12px; left:50%; transform:translateX(-50%);
              color:#8a877c; font-size:.72rem; background:rgba(24,25,30,.85);
              padding:4px 14px; border-radius:20px; border:1px solid #2c2d34;
              pointer-events:none; z-index:10051; }
@media (max-width:640px){
  .dgm3d-wallh { display:none; }
  .dgm3d-hint { display:none; }
}

/* 3D selection chip (b414) */
.dgm3d-sel { position:fixed; bottom:44px; left:50%; transform:translateX(-50%);
             color:#f0e9da; font:500 .8rem 'Inter',system-ui; background:rgba(24,25,30,.9);
             padding:6px 16px; border-radius:20px; border:1px solid #f5a62355;
             pointer-events:none; z-index:10052; white-space:nowrap; }
.dgm3d-sel b { color:#f5a623; font-weight:700; }

/* ── Gear list from diagram (b418+) ─────────────────────────── */
.dgm-gearsheet{ width:min(560px, 94vw); height:min(640px, 86vh); }
.dgm-gs-spacer{ flex:1; }
.dgm-gs-body{ padding:10px 14px 14px; overflow:auto; flex:1; }
.dgm-gs-body .dgm-gear-cat{ margin-top:12px; }
.dgm-gs-body .dgm-gear-cat:first-child{ margin-top:0; }
.dgm-gs-row{
  display:flex; gap:9px; align-items:baseline; padding:5px 6px; border-radius:7px;
  cursor:pointer; font-size:.86rem; color:var(--text);
}
.dgm-gs-row:hover{ background:var(--surface2); }
.dgm-gs-row input{ flex:none; transform:translateY(1px); accent-color:var(--accent); }
.dgm-gs-qty{ flex:none; min-width:26px; font-weight:700; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.dgm-gs-name{ font-weight:600; }
.dgm-gs-instock{ color:var(--ok,#3fa66a); font-weight:800; font-size:.78rem; }
.dgm-gs-why{
  flex:1; min-width:0; color:var(--text-dim); font-size:.76rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dgm-gs-empty{ color:var(--text-dim); font-size:.84rem; padding:6px; }
.dgm-gs-ai-note{ color:var(--text-dim); font-size:.78rem; margin:2px 0 8px; }
.dgm-gs-reason{
  margin:10px 2px 8px; padding:9px 11px; border-left:3px solid var(--accent);
  background:var(--surface2); border-radius:0 8px 8px 0;
  color:var(--text-dim); font-size:.8rem; white-space:pre-wrap;
}
.dgm-gs-foot{
  display:flex; gap:8px; align-items:center; padding:11px 14px;
  border-top:1px solid var(--border);
}
.dgm-gs-foot .btn-accent{ margin-left:auto; }
.dgm-gs-nodaynote{ margin-left:auto; color:var(--text-dim); font-size:.76rem; max-width:56%; text-align:right; }

.dgm-daygear-chip{
  position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:30;
  display:flex; gap:10px; align-items:center;
  background:var(--surface); border:1px solid var(--accent); border-radius:999px;
  color:var(--text); font:600 .84rem var(--ui); padding:8px 14px; cursor:pointer;
  box-shadow:var(--depth-2,var(--shadow));
}
.dgm-daygear-chip:hover{ background:var(--surface2); }
.dgm-daygear-x{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; font-size:.72rem;
  color:var(--text-dim); border:1px solid var(--border2);
}
.dgm-daygear-x:hover{ color:var(--text); border-color:var(--text-dim); }

/* ── Power budget panel + measure tape (b426) ───────────────── */
.dgm-power{
  position:absolute; top:12px; right:12px; z-index:28;
  width:min(300px, 80vw); background:var(--surface);
  border:1px solid var(--border2); border-radius:12px;
  box-shadow:var(--depth-2,var(--shadow)); padding:10px 12px 11px;
  font-size:.8rem; color:var(--text);
}
.dgm-power-head{
  font-weight:800; font-size:.84rem; display:flex; align-items:center; gap:6px;
  margin-bottom:7px;
}
.dgm-power-x{ margin-left:auto; cursor:pointer; color:var(--text-dim); font-size:.74rem; }
.dgm-power-x:hover{ color:var(--text); }
.dgm-power-tbl{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.dgm-power-tbl th{
  text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-dim); padding:2px 4px; border-bottom:1px solid var(--border);
}
.dgm-power-tbl td{ padding:3px 4px; border-bottom:1px solid var(--border); }
.dgm-power-tbl tr:last-child td{ border-bottom:none; }
.dgm-power-empty,.dgm-power-note{ color:var(--text-dim); font-size:.72rem; margin-top:6px; }

.dgm-measure-line{
  stroke:var(--dgm-ink); stroke-width:1.6; stroke-dasharray:7 5;
  stroke-linecap:round; fill:none;
}

/* ── Stencil palette chips (b430) ───────────────────────────── */
.dgm-stencil{ position:relative; padding-right:26px; }
.dgm-stencil-x{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:var(--text-dim); font-size:.68rem; padding:2px 4px; border-radius:4px;
}
.dgm-stencil-x:hover{ color:#dc2626; background:var(--surface2); }

/* ── AI generate dialog (b431) ──────────────────────────────── */
.dgm-gen{ width:min(540px, 94vw); height:auto; max-height:88vh; }
.dgm-gen-body{ padding:10px 14px 14px; overflow:auto; }
.dgm-gen-body .dgm-gear-cat{ margin:12px 0 6px; }
.dgm-gen-body .dgm-gear-cat:first-child{ margin-top:0; }
.dgm-gen-row{ display:flex; flex-wrap:wrap; gap:6px; }
.dgm-gen-chip{
  background:var(--surface2); border:1px solid var(--border2); border-radius:999px;
  color:var(--text); font:600 .78rem var(--ui); padding:6px 12px; cursor:pointer;
}
.dgm-gen-chip:hover{ border-color:var(--text-dim); }
.dgm-gen-chip.active{
  background:var(--accent-soft, rgba(99,102,241,.15)); border-color:var(--accent);
  color:var(--accent);
}
.dgm-gen-body textarea{
  width:100%; box-sizing:border-box; background:var(--surface2);
  border:1px solid var(--border2); border-radius:8px; color:var(--text);
  padding:8px 10px; font:.83rem var(--ui); resize:vertical;
}
.dgm-gen-own{
  display:flex; gap:8px; align-items:center; margin-top:12px;
  font:600 .8rem var(--ui); color:var(--text); cursor:pointer;
}
.dgm-gen-own input{ accent-color:var(--accent); }
.dgm-gen-own span{ font-weight:400; color:var(--text-dim); font-size:.74rem; }

/* ── Sun study panel (b432) ─────────────────────────────────── */
.dgm-sunpanel{ top:12px; right:12px; }
.dgm-power ~ .dgm-sunpanel:not([hidden]){ top:12px; right:326px; }  /* both open: sit side by side */
.dgm-sun-row{
  display:flex; align-items:center; gap:8px; margin:7px 0; font-size:.78rem; color:var(--text);
}
.dgm-sun-row > span{ flex:none; min-width:74px; color:var(--text-dim); font-weight:600; }
.dgm-sun-row input[type=range]{ flex:1; accent-color:var(--accent); }
.dgm-sun-row input[type=date], .dgm-sun-row input[type=number]{
  background:var(--surface2); border:1px solid var(--border2); border-radius:6px;
  color:var(--text); padding:4px 7px; font-size:.78rem; width:100%; box-sizing:border-box;
}
.dgm-sun-row input[type=checkbox]{ accent-color:var(--accent); }
.dgm-sun-grid{ display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr; gap:6px; align-items:center; }
.dgm-sun-grid > span{ min-width:0; }

/* ── AI critique modal (b433) ───────────────────────────────── */
.dgm-crit{ width:min(520px, 92vw); height:auto; max-height:80vh; }
.dgm-crit-body{ padding:6px 18px 18px; overflow:auto; font-size:.88rem; line-height:1.55; color:var(--text); }
.dgm-crit-body p{ margin:10px 0; }

/* ── Setup variants (b436) ──────────────────────────────────── */
.dgm-variant-strip{ display:inline-flex; gap:3px; margin:0 2px; }
.dgm-variant-chip{
  min-width:26px; height:26px; border-radius:7px; border:1px solid var(--border2);
  background:var(--surface2); color:var(--text-dim); font:700 .74rem var(--ui);
  cursor:pointer; padding:0 6px;
}
.dgm-variant-chip:hover{ color:var(--text); border-color:var(--text-dim); }
.dgm-variant-chip.active{
  background:var(--accent-soft, rgba(99,102,241,.15));
  border-color:var(--accent); color:var(--accent);
}
.dgm-variant-badge{
  font-size:.68rem; font-weight:700; color:var(--accent);
  border:1px solid var(--accent); border-radius:5px; padding:0 4px; margin-left:4px;
}

/* ── b438: floating tools · resizers · collapsible sections · sun addr ── */
.dgm-tools-float{
  position:absolute; top:10px; left:10px; z-index:26;
  display:flex; flex-direction:row; gap:1px;
  background:var(--surface); border:1px solid var(--border2); border-radius:10px;
  padding:3px; box-shadow:var(--depth-2,var(--shadow));
}
.dgm-tools-float .dgm-tool{
  border-radius:7px; flex-direction:column; gap:1px;
  padding:4px 7px; min-width:34px;
}
.dgm-tools-float .dgm-tool-icon{ font-size:.86rem; line-height:1; }
.dgm-tools-float .dgm-tool-lbl{ font-size:.5rem; letter-spacing:.02em; }

.dgm-palette{ position:relative; }
.dgm-inspector-wrap{
  position:relative; width:250px; flex:0 0 auto; display:flex; min-height:0;
}
.dgm-inspector-wrap .dgm-inspector{ width:100%; flex:1; }
.dgm-resizer{
  position:absolute; top:0; bottom:0; right:-3px; width:7px; cursor:col-resize; z-index:30;
}
.dgm-resizer.left{ right:auto; left:-3px; }
.dgm-resizer:hover{ background:linear-gradient(90deg, transparent, var(--accent) 45%, var(--accent) 55%, transparent); opacity:.55; }

.dgm-insp-head, .dgm-inspector .dgm-gear-cat{ cursor:pointer; user-select:none; }
.dgm-insp-head:not(:first-of-type)::after, .dgm-inspector .dgm-gear-cat::after{
  content:'▾'; float:right; color:var(--text-dim); font-size:1.05rem;
  line-height:1; margin-top:-1px; transition:transform .12s;
}
.dgm-insp-head:not(:first-of-type):hover::after, .dgm-inspector .dgm-gear-cat:hover::after{
  color:var(--text);
}
.dgm-insp-head.dgm-collapsed::after, .dgm-gear-cat.dgm-collapsed::after{ transform:rotate(-90deg); }
.dgm-collapsed-body{ display:none !important; }

.dgm-sun-riseset{ color:var(--text-dim); font-size:.76rem; margin:-2px 0 6px; font-variant-numeric:tabular-nums; }
.dgm-sun-addr{ max-width:150px; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.dgm-sun-dayloc{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--text); font-weight:500;
}
.dgm-sun-row input[type=text]{
  flex:1; background:var(--surface2); border:1px solid var(--border2); border-radius:6px;
  color:var(--text); padding:4px 7px; font-size:.78rem; min-width:0;
}

/* ── Smart job picker (b440) ────────────────────────────────── */
.dgm-jobpick{ position:relative; display:flex; align-items:center; gap:4px; }
.dgm-jobpick input{ flex:1; min-width:0; }
.dgm-jobpick-x{
  flex:none; width:22px; height:22px; border-radius:6px; border:1px solid var(--border2);
  background:var(--surface2); color:var(--text-dim); font-size:.66rem; cursor:pointer;
}
.dgm-jobpick-x:hover{ color:#dc2626; border-color:#dc2626; }
.dgm-jobpick-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40;
  max-height:280px; overflow:auto; background:var(--surface);
  border:1px solid var(--border2); border-radius:10px;
  box-shadow:var(--depth-2,var(--shadow)); padding:4px;
}
.dgm-jobpick-sec{
  font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-dim); padding:6px 8px 3px;
}
.dgm-jobpick-row{ padding:5px 8px; border-radius:7px; cursor:pointer; }
.dgm-jobpick-row:hover, .dgm-jobpick-row.hi{ background:var(--surface2); }
.dgm-jobpick-row.cur{ outline:1px solid var(--accent); }
.dgm-jobpick-name{ font-size:.8rem; font-weight:650; color:var(--text); }
.dgm-jobpick-sub{ font-size:.7rem; color:var(--text-dim); }

/* ── Social video export (b449) ─────────────────────────────── */
.dgm-social-prog{
  margin-top:6px; font-size:.74rem; font-weight:600; color:var(--accent);
  font-variant-numeric:tabular-nums;
}

/* ── Door styles (b452): sliding + roll-up shutter ──────────── */
.dgm-door-track{
  stroke:var(--dgm-ink2); stroke-width:1.2; stroke-dasharray:2.5 3;
}
.dgm-door-coil{
  fill:var(--dgm-paper); stroke:var(--dgm-wall); stroke-width:2;
}

/* ── Today's brief — decoded card (b455) ────────────────────── */
.home-digest-card{ margin:0 0 .8rem; }
.home-digest-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  margin-bottom:.55rem;
}
.home-digest-title{ font-weight:800; font-size:.95rem; }
.home-digest-meta{ display:flex; gap:.5rem; align-items:baseline; }
.home-digest-meta > span{ font-size:.72rem; color:var(--text-dim); }
.home-digest-lead{
  font-size:1.04rem; font-weight:700; line-height:1.42; color:var(--text);
  margin:0 0 .85rem; padding-left:.75rem;
  border-left:3px solid var(--accent);
}
.home-digest-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:.75rem;
}
.home-digest-sec{
  position:relative; border-radius:12px; padding:.65rem .8rem .7rem .95rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--hd) 10%, transparent), color-mix(in srgb, var(--hd) 3%, transparent) 55%, transparent),
    var(--surface2);
  border:1px solid color-mix(in srgb, var(--hd) 32%, var(--border));
  overflow:hidden;
}
.home-digest-sec::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--hd); border-radius:4px 0 0 4px;
}
.home-digest-sec-head{
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--hd); margin-bottom:.45rem;
}
.home-digest-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:7px; font-size:.9rem;
  background:color-mix(in srgb, var(--hd) 16%, transparent);
}
.home-digest-item{
  font-size:.85rem; line-height:1.48; color:var(--text);
  padding:.32rem 0;
  border-top:1px dashed color-mix(in srgb, var(--hd) 24%, var(--border));
}
.home-digest-item:first-of-type{ border-top:none; padding-top:0; }
.hd-money{ color:#d97706; font-weight:750; }
.hd-late{ color:#dc2626; font-weight:750; }
.hd-time{ color:var(--text); font-weight:750; }
.hd-when{ font-weight:700; text-decoration:underline dotted 1px; text-underline-offset:2px; }

/* ── Tools hero: Scripts + Diagrams as dashboard tiles (b467) ── */
.tools-hero{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:.9rem; margin-bottom:1.6rem;
}
.tools-hero-card{
  display:flex; align-items:center; gap:1.05rem; text-align:left;
  padding:1.25rem 1.35rem; border-radius:14px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%),
    var(--surface);
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.tools-hero-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:var(--depth-2, var(--shadow));
}
.tools-hero-ico{
  flex:none; width:58px; height:58px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:1.9rem;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
}
.tools-hero-body{ flex:1; min-width:0; }
.tools-hero-name{ font-size:1.14rem; font-weight:750; color:var(--text); }
.tools-hero-blurb{ font-size:.83rem; color:var(--text2); line-height:1.45; margin-top:.15rem; }
.tools-hero-meta{ font-size:.75rem; font-weight:650; color:var(--accent); margin-top:.4rem; min-height:1em; }
.tools-hero-arrow{ flex:none; font-size:1.25rem; color:var(--text3); }
.tools-hero-card:hover .tools-hero-arrow{ color:var(--accent); }

/* ════════════════════════════════════════════════════════════
   CALL SHEET BUILDER (b474+) — grip-callsheet.js
   Full-screen editor overlay: topbar + tabs + form cards
   (Sheet / Crew & cast) and a share-page-mirroring preview.
   ════════════════════════════════════════════════════════════ */
.cs-editor{ position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column;
            background:var(--bg); }
.cs-topbar{ display:flex; align-items:center; gap:.55rem; padding:.55rem .8rem;
            background:var(--surface); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.cs-back{ border:1px solid var(--border2); background:var(--surface2); color:var(--text);
          border-radius:9px; width:34px; height:34px; font-size:1.25rem; line-height:1;
          cursor:pointer; flex:none; }
.cs-back:hover{ border-color:var(--accent); color:var(--accent); }
.cs-title-block{ min-width:0; }
.cs-title{ font-weight:750; color:var(--text); font-size:1rem; white-space:nowrap;
           overflow:hidden; text-overflow:ellipsis; max-width:34vw; }
.cs-subtitle{ font-size:.72rem; color:var(--text3); white-space:nowrap; overflow:hidden;
              text-overflow:ellipsis; max-width:34vw; }
.cs-status-pill{ font-size:.68rem; font-weight:700; padding:.18rem .55rem; border-radius:20px;
                 background:var(--surface2); border:1px solid var(--border2); color:var(--text3);
                 white-space:nowrap; }
.cs-status-pill.pub{ color:var(--green); border-color:rgba(62,201,110,.4); background:var(--green-dim); }
.cs-save-status{ font-size:.72rem; color:var(--text3); min-width:70px; }
.cs-topbar-spacer{ flex:1; }
.cs-tabs{ display:flex; gap:.3rem; padding:.45rem .8rem 0; background:var(--surface);
          border-bottom:1px solid var(--border); }
.cs-tab{ border:1px solid var(--border); border-bottom:none; background:var(--surface2);
         color:var(--text2); border-radius:9px 9px 0 0; padding:.4rem .85rem; font-size:.82rem;
         font-weight:650; cursor:pointer; }
.cs-tab.active{ background:var(--bg); color:var(--accent); border-color:var(--border2); }
.cs-tab-count{ font-size:.68rem; color:var(--text3); }
.cs-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.cs-form{ max-width:1060px; margin:0 auto; padding:1rem .8rem 4rem; display:flex;
          flex-direction:column; gap:.8rem; }
.cs-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px;
          padding:.85rem .9rem; }
.cs-card-title{ font-size:.72rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase;
                color:var(--text3); margin-bottom:.6rem; }
.cs-grid{ display:grid; gap:.55rem; margin-bottom:.55rem; }
.cs-grid:last-child{ margin-bottom:0; }
.cs-grid-3{ grid-template-columns:repeat(3, 1fr); }
.cs-grid-4{ grid-template-columns:repeat(4, 1fr); }
.cs-field{ display:flex; flex-direction:column; gap:.22rem; min-width:0; }
.cs-label{ font-size:.68rem; font-weight:650; color:var(--text3); }
.cs-input{ background:var(--surface2); border:1px solid var(--border2); color:var(--text);
           border-radius:8px; padding:.42rem .55rem; font-size:.86rem; width:100%;
           min-width:0; box-sizing:border-box; }
.cs-input:focus{ outline:none; border-color:var(--accent); }
.cs-field-hero .cs-input{ border-color:var(--accent-rim); background:var(--accent-soft);
                          font-weight:750; }
.cs-ta{ resize:vertical; font-family:inherit; line-height:1.4; }
.cs-hint{ font-size:.78rem; color:var(--text3); line-height:1.45; margin:.2rem 0 .5rem; }
.cs-rep{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:.55rem; }
.cs-rep-row{ display:grid; gap:.4rem; align-items:center; }
.cs-loc-row{ grid-template-columns:120px 1.1fr 1.4fr 1.2fr 30px; }
.cs-sch-row{ grid-template-columns:52px 66px 1.6fr 76px 52px 76px 1fr 46px 30px; }
.cs-sch-head{ display:grid; gap:.4rem; grid-template-columns:52px 66px 1.6fr 76px 52px 76px 1fr 46px 30px;
              font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
              color:var(--text3); padding:0 .1rem .15rem; }
.cs-rep-del{ border:1px solid var(--border2); background:var(--surface2); color:var(--text3);
             border-radius:7px; width:28px; height:28px; cursor:pointer; font-size:.8rem; flex:none; }
.cs-rep-del:hover{ color:var(--red); border-color:var(--red); }
.cs-rep-moves{ display:flex; gap:2px; }
.cs-rep-move{ border:1px solid var(--border2); background:var(--surface2); color:var(--text3);
              border-radius:6px; width:21px; height:28px; cursor:pointer; font-size:.7rem; padding:0; }
.cs-rep-move:hover{ color:var(--accent); border-color:var(--accent); }
.cs-crew-head{ display:grid; gap:.4rem; font-size:.62rem; font-weight:700; letter-spacing:.05em;
               text-transform:uppercase; color:var(--text3); padding:0 .1rem .15rem; }
.cs-crew-head.crew{ grid-template-columns:1fr 1fr 1.2fr 1fr 1.2fr 28px 128px 30px; }
.cs-crew-head.cast{ grid-template-columns:1fr 1.2fr 1fr 1.2fr 28px 128px 30px; }
.cs-crew-row{ grid-template-columns:1fr 1fr 1.2fr 1fr 1.2fr 28px 128px 30px; }
.cs-crew-row:not(:has(.cs-crew-dept)){ grid-template-columns:1fr 1.2fr 1fr 1.2fr 28px 128px 30px; }
.cs-crew-priv{ border:1px solid var(--border2); background:var(--surface2); border-radius:7px;
               cursor:pointer; font-size:.78rem; padding:0; line-height:1; height:30px; }
.cs-crew-priv.on{ border-color:var(--red); background:rgba(220,80,60,.12); }
.cs-crew-priv:hover{ border-color:var(--accent); }
.cs-callcell{ display:flex; gap:3px; min-width:0; }
.cs-callcell .cs-crew-callmode{ flex:none; width:56px; padding-left:.25rem; padding-right:.1rem; }
.cs-callcell .cs-crew-call{ flex:1; min-width:0; }
.cs-crew-call{ font-variant-numeric:tabular-nums; }

/* Day-info-card entry button */
.dic-callsheet-btn{ border:1px solid var(--border2); background:var(--surface2); color:var(--text2);
                    border-radius:9px; padding:.45rem .75rem; font-size:.8rem; font-weight:650;
                    cursor:pointer; white-space:nowrap; }
.dic-callsheet-btn:hover{ border-color:var(--accent); color:var(--accent); }

/* Preview — a light "paper" sheet inside the dark editor,
   mirroring grip-callsheet-view.php (dense b476 layout) so what
   you see is what the crew gets. */
.cs-prev{ padding:1rem .8rem 4rem; }
.cs-prev-sheet{ max-width:880px; margin:0 auto; background:#f7f6f2; color:#131417;
                border-radius:14px; padding:1rem 1rem 1.2rem; font-size:.82rem; line-height:1.4;
                box-shadow:0 8px 30px rgba(0,0,0,.45); }
.cs-prev-sheet b, .cs-prev-sheet strong{ font-weight:700; }
.cs-prev-toprow{ display:flex; justify-content:space-between; font-weight:700; font-size:.8rem; gap:8px; }
.cs-prev-headgrid{ display:flex; gap:12px; align-items:flex-start; margin-top:2px; }
.cs-prev-headleft{ flex:1; min-width:0; }
.cs-prev-h1{ font-size:1.75rem; font-weight:800; line-height:1.08; letter-spacing:-.01em; }
.cs-prev-sub{ color:#6b6d75; font-size:.74rem; margin-top:2px; }
.cs-prev-call{ flex:none; background:#131417; color:#fff; border-radius:10px; padding:7px 13px 8px; min-width:112px; text-align:center; }
.cs-prev-call div{ font-size:.54rem; letter-spacing:.1em; font-weight:750; color:#b9bac0; text-transform:uppercase; }
.cs-prev-call strong{ font-size:1.75rem; font-weight:800; line-height:1.05; font-variant-numeric:tabular-nums; }
.cs-prev-infogrid{ display:flex; gap:10px; margin-top:7px; flex-wrap:wrap; }
.cs-prev-kc{ flex:1 1 250px; min-width:0; font-size:.74rem; }
.cs-prev-kc div{ display:flex; gap:6px; padding:1px 0; }
.cs-prev-kc .r{ flex:none; width:62px; color:#6b6d75; font-weight:700; font-size:.62rem;
                letter-spacing:.04em; text-transform:uppercase; padding-top:2px; }
.cs-prev-kc .n{ font-weight:650; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-prev-kc .p{ color:#6b6d75; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cs-prev-wxcol{ flex:1 1 220px; font-size:.74rem; text-align:right; color:#6b6d75; }
.cs-prev-wxcol div{ padding:1px 0; }
.cs-prev-wxcol b{ color:#131417; font-variant-numeric:tabular-nums; }
.cs-prev-locblock{ border-top:2px solid #131417; margin-top:7px; padding-top:4px; font-size:.76rem; }
.cs-prev-locline{ display:flex; gap:7px; padding:1.5px 0; align-items:baseline; }
.cs-prev-locline .k{ flex:none; width:68px; font-size:.58rem; font-weight:750; letter-spacing:.05em;
                     text-transform:uppercase; color:#6b6d75; }
.cs-prev-locline.hosp .k{ color:#c2431f; }
.cs-prev-locline.hosp .v{ font-weight:700; }
.cs-prev-locline .v{ min-width:0; }
.cs-prev-locline .nt{ color:#6b6d75; font-weight:400; }
.cs-prev-sec{ display:flex; justify-content:space-between; font-size:.68rem; font-weight:800;
              letter-spacing:.07em; text-transform:uppercase; background:#131417; color:#fff;
              padding:3px 8px; border-radius:4px; margin:.9rem 0 .35rem; }
.cs-prev-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid #e3e1da; }
.cs-prev-table th{ text-align:left; font-size:.52rem; letter-spacing:.06em; text-transform:uppercase;
                   color:#6b6d75; padding:.28rem .4rem .2rem; border-bottom:1px solid #e3e1da; }
.cs-prev-table td{ padding:.28rem .4rem; border-bottom:1px solid #efede6; font-size:.76rem; vertical-align:top; }
.cs-prev-table tr:last-child td{ border-bottom:none; }
.cs-prev-table td.d{ color:#6b6d75; }
.cs-prev-table td.t{ font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
.cs-prev-table td .n{ color:#6b6d75; font-size:.68rem; }
.cs-prev-crewcols{ columns:1; column-gap:16px; }
@media (min-width:700px){ .cs-prev-crewcols{ columns:2; } }
.cs-prev-dept{ break-inside:avoid; margin-bottom:5px; }
.cs-prev-dept h3{ margin:0 0 3px; font-size:.58rem; letter-spacing:.07em; text-transform:uppercase;
                  background:#45474e; color:#fff; padding:2px 6px; border-radius:3px; font-weight:750; }
.cs-prev-person{ display:flex; gap:5px; align-items:baseline; padding:.5px 0; font-size:.7rem; }
.cs-prev-person .pos{ flex:none; width:64px; color:#6b6d75; font-size:.58rem; overflow:hidden;
                      text-overflow:ellipsis; white-space:nowrap; }
.cs-prev-person .nm{ font-weight:700; flex:none; max-width:34%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-prev-person .ph{ flex:none; font-size:.62rem; }
.cs-prev-person .em{ flex:1; min-width:0; font-size:.6rem; color:#6b6d75; overflow:hidden;
                     text-overflow:ellipsis; white-space:nowrap; }
.cs-prev-person .ct{ flex:none; font-variant-numeric:tabular-nums; font-weight:700; font-size:.68rem; }
.cs-prev-block{ background:#fff; border:1px solid #e3e1da; border-left:3px solid #6b6d75;
                border-radius:6px; padding:.4rem .65rem; white-space:pre-wrap; font-size:.76rem; }
.cs-prev-safety{ border-left-color:#c2431f; }
.cs-prev-footstrip{ display:flex; gap:10px; border-top:2px solid #131417; margin-top:.9rem;
                    padding-top:5px; flex-wrap:wrap; }
.cs-prev-footstrip .fc{ flex:1 1 130px; min-width:0; }
.cs-prev-footstrip .fr{ font-size:.54rem; letter-spacing:.07em; text-transform:uppercase;
                        color:#6b6d75; font-weight:750; }
.cs-prev-footstrip .fn{ font-weight:700; font-size:.74rem; white-space:nowrap; overflow:hidden;
                        text-overflow:ellipsis; font-variant-numeric:tabular-nums; }

/* Mobile: stack the repeating grids */
@media (max-width: 860px){
  .cs-grid-3, .cs-grid-4{ grid-template-columns:repeat(2, 1fr); }
  .cs-sch-head, .cs-crew-head{ display:none; }
  .cs-loc-row, .cs-sch-row, .cs-crew-row,
  .cs-crew-row:not(:has(.cs-crew-dept)){ grid-template-columns:1fr 1fr; }
  .cs-title, .cs-subtitle{ max-width:52vw; }
}

/* Call sheets — Phase 3 (b475+): autofill + seeding controls */
.cs-card-title{ display:flex; align-items:center; gap:.5rem; }
.cs-card-act{ margin-left:auto; border:1px solid var(--border2); background:var(--surface2);
              color:var(--text2); border-radius:8px; padding:.28rem .6rem; font-size:.72rem;
              font-weight:650; cursor:pointer; letter-spacing:0; text-transform:none; }
.cs-card-act:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.cs-card-act:disabled{ opacity:.55; cursor:wait; }
.cs-autofill-hosp{ margin-left:.35rem; }
.cs-autofill-hosp:disabled{ opacity:.55; cursor:wait; }
.cs-seed-row{ display:flex; gap:.45rem; flex-wrap:wrap; margin:0 0 .55rem; }


/* Call sheets — Phase 2 (b476+): send modal */
.cs-send-overlay{ position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.55);
                  display:flex; align-items:center; justify-content:center; padding:1rem; }
.cs-send-modal{ background:var(--surface); border:1px solid var(--border2); border-radius:14px;
                width:min(560px, 100%); max-height:88vh; display:flex; flex-direction:column;
                box-shadow:0 18px 50px rgba(0,0,0,.5); }
.cs-send-head{ display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem;
               border-bottom:1px solid var(--border); }
.cs-send-title{ font-weight:750; color:var(--text); font-size:.95rem; }
.cs-send-x{ margin-left:auto; border:1px solid var(--border2); background:var(--surface2);
            color:var(--text3); border-radius:8px; width:28px; height:28px; cursor:pointer; }
.cs-send-x:hover{ color:var(--red); border-color:var(--red); }
.cs-send-body{ padding:.8rem .9rem; overflow-y:auto; display:flex; flex-direction:column; gap:.6rem; }
.cs-send-sec{ display:flex; align-items:center; justify-content:space-between; font-size:.68rem;
              font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); }
.cs-send-toggle{ border:none; background:none; color:var(--accent); font-size:.7rem; cursor:pointer;
                 text-transform:none; letter-spacing:0; font-weight:650; padding:0; }
.cs-send-list{ display:flex; flex-direction:column; gap:2px; max-height:220px; overflow-y:auto;
               border:1px solid var(--border); border-radius:9px; padding:.35rem .45rem;
               background:var(--surface2); }
.cs-send-rec{ display:flex; align-items:baseline; gap:.45rem; font-size:.82rem; color:var(--text);
              cursor:pointer; padding:.12rem .1rem; }
.cs-send-rec .nm{ font-weight:650; white-space:nowrap; }
.cs-send-rec .meta{ color:var(--text3); font-size:.72rem; min-width:0; overflow:hidden;
                    text-overflow:ellipsis; white-space:nowrap; }
.cs-send-log{ display:flex; flex-direction:column; gap:2px; }
.cs-send-logrow{ display:flex; gap:.8rem; font-size:.76rem; color:var(--text2); padding:.15rem 0;
                 border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
.cs-send-logrow:last-child{ border-bottom:none; }
.cs-send-foot{ display:flex; align-items:center; gap:.7rem; padding:.65rem .9rem;
               border-top:1px solid var(--border); }
.cs-send-count{ color:var(--text3); font-size:.78rem; }
.cs-send-foot .cs-send-go{ margin-left:auto; }


/* Contacts ← callsheet import modal (b478+) */
.ci-overlay{ position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.55);
             display:flex; align-items:center; justify-content:center; padding:1rem; }
.ci-modal{ background:var(--surface); border:1px solid var(--border2); border-radius:14px;
           width:min(620px, 100%); max-height:88vh; display:flex; flex-direction:column;
           box-shadow:0 18px 50px rgba(0,0,0,.5); }
.ci-head{ display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem;
          border-bottom:1px solid var(--border); }
.ci-title{ font-weight:750; color:var(--text); font-size:.95rem; }
.ci-x{ margin-left:auto; border:1px solid var(--border2); background:var(--surface2);
       color:var(--text3); border-radius:8px; width:28px; height:28px; cursor:pointer; }
.ci-x:hover{ color:var(--red); border-color:var(--red); }
.ci-body{ padding:.9rem; overflow-y:auto; }
.ci-hint{ color:var(--text2); font-size:.84rem; line-height:1.5; margin:0 0 .8rem; }
.ci-file{ display:block; margin:0 0 .8rem; color:var(--text2); font-size:.84rem; }
.ci-step-busy{ text-align:center; padding:1.6rem 0; }
.ci-spin{ font-size:1.8rem; animation:ci-pulse 1.4s ease-in-out infinite; }
@keyframes ci-pulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
.ci-busy-msg{ color:var(--text2); font-size:.84rem; margin-top:.5rem; }
.ci-list{ display:flex; flex-direction:column; gap:2px; max-height:44vh; overflow-y:auto;
          border:1px solid var(--border); border-radius:9px; padding:.4rem .5rem;
          background:var(--surface2); }
.ci-rec{ display:flex; align-items:baseline; gap:.45rem; font-size:.82rem; color:var(--text);
         cursor:pointer; padding:.14rem .1rem; }
.ci-rec .nm{ font-weight:650; white-space:nowrap; }
.ci-rec .meta{ color:var(--text3); font-size:.72rem; min-width:0; overflow:hidden;
               text-overflow:ellipsis; white-space:nowrap; flex:1; }
.ci-badge{ flex:none; font-size:.62rem; font-weight:750; letter-spacing:.03em; padding:.1rem .4rem;
           border-radius:99px; text-transform:uppercase; }
.ci-badge.new{ background:rgba(80,180,120,.16); color:#6fd39a; }
.ci-badge.upd{ background:rgba(220,160,60,.16); color:#e6b566; }
.ci-badge.have{ background:var(--surface2); color:var(--text3); border:1px solid var(--border); }
.ci-foot{ display:flex; align-items:center; gap:.7rem; padding:.65rem .9rem;
          border-top:1px solid var(--border); }
.ci-count{ color:var(--text3); font-size:.78rem; }
.ci-foot .ci-apply{ margin-left:auto; }

/* ── Social crop tool (b476) ────────────────────────────────── */
.dgm-cropping .dgm-canvas-wrap, .dgm-cropping svg{ cursor:crosshair !important; }
.dgm-crop-box{
  position:absolute; z-index:40; pointer-events:none;
  border:2px dashed var(--accent); border-radius:3px;
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ── Callout endpoint handles (b479) ────────────────────────── */
.dgm-co-hand{
  fill:var(--dgm-paper); stroke:var(--accent); stroke-width:2;
  cursor:grab; pointer-events:all;
}
.dgm-co-hand:hover{ fill:var(--accent); }

/* ── Callout curve control (b500) ──────────────────────────────
   Diamond-ish filled dot so it never reads as a third endpoint next
   to the two round .dgm-co-hand circles. `.set` marks a leader whose
   curve has been hand-placed — the auto bow and the b478 label-
   avoidance search are switched off for it. */
.dgm-co-q{
  fill:var(--dgm-paper); stroke:var(--accent); stroke-width:1.8;
  stroke-dasharray:2.5 2; cursor:grab; pointer-events:all;
}
.dgm-co-q:hover{ fill:var(--accent); stroke-dasharray:none; }
.dgm-co-q.set{ fill:var(--accent); fill-opacity:.45; stroke-dasharray:none; }

/* ── Inline label editor (b500) ────────────────────────────────
   Layered over the canvas rather than an SVG <foreignObject>:
   WebKit's foreignObject layout is unreliable at fractional zoom,
   and anything inside the SVG would be serialised into the PNG /
   share export. Matches the marker label typography so the text
   doesn't jump when the editor closes. */
.dgm-lbl-edit{
  position:absolute; z-index:9;
  min-width:110px; max-width:340px;
  padding:2px 5px; margin:0;
  border:1.5px solid var(--accent); border-radius:4px;
  background:var(--dgm-paper,#fff); color:var(--dgm-ink,#222);
  font-family:'matt-b','Permanent Marker',cursive;
  text-transform:uppercase; letter-spacing:.02em;
  line-height:1.18; text-align:center;
  resize:none; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
.dgm-lbl-edit:focus{ outline:none; border-color:var(--accent); }

/* ══════════════════════════════════════════════════════════════
   RENTAL MESSAGE THREADS (b529) — bm-*
   Shared modal for the admin rentals view + renter portal.
   ══════════════════════════════════════════════════════════════ */
.bm-overlay{ position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
.bm-modal{ background:var(--bg2,#1c1d21); border:1px solid var(--line,#2c2d33);
  border-radius:14px; width:100%; max-width:560px; display:flex; flex-direction:column;
  height:min(85dvh,720px); max-height:min(85dvh,720px); overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.5); }
.bm-head{ flex-shrink:0; display:flex; align-items:center; gap:.6rem;
  padding:.8rem 1rem; border-bottom:1px solid var(--line,#2c2d33); }
.bm-head-text{ min-width:0; display:flex; flex-direction:column; }
.bm-title{ font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bm-sub{ font-size:.72rem; color:var(--text3,#888); }
.bm-x{ margin-left:auto; background:none; border:none; color:var(--text2,#aaa);
  font-size:1rem; cursor:pointer; padding:.3rem .5rem; border-radius:6px; }
.bm-x:hover{ background:var(--bg3,#26272c); }
.bm-msgs{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overflow-x:clip; padding:1rem; display:flex; flex-direction:column; gap:.7rem; }
.bm-loading,.bm-empty{ color:var(--text3,#888); font-size:.85rem; text-align:center; padding:1.4rem .5rem; }
.bm-msg{ display:flex; flex-direction:column; max-width:88%; }
.bm-mine{ align-self:flex-end; align-items:flex-end; }
.bm-theirs{ align-self:flex-start; align-items:flex-start; }
.bm-bubble{ border-radius:12px; padding:.55rem .75rem; font-size:.86rem; line-height:1.45;
  background:var(--bg3,#26272c); border:1px solid var(--line,#2c2d33); }
.bm-mine .bm-bubble{ background:rgba(240,160,32,.13); border-color:rgba(240,160,32,.35); }
.bm-body{ white-space:pre-wrap; word-break:break-word; }
.bm-meta{ font-size:.68rem; color:var(--text3,#888); margin-top:.2rem; padding:0 .2rem; }
/* (b812) iMessage-style delivery/read receipt under the latest own message */
.bm-receipt{
  font-size:.68rem;font-weight:600;color:var(--text3);
  margin-top:.12rem;
}
.bm-mine .bm-receipt{text-align:right}

/* (b813) Renter booking card — inline kit-suggestion diff */
.rp-bk-prop{
  margin-top:.55rem;padding:.55rem .7rem;border-radius:8px;
  background:rgba(240,160,32,.08);border:1px solid rgba(240,160,32,.35);
  font-size:.82rem;
}
.rp-bk-prop-head{font-weight:700;margin-bottom:.3rem}
.bm-theirs .bm-receipt{text-align:left}


/* Proposal card inside a bubble */
.bm-prop{ margin-top:.45rem; border:1px solid var(--line,#2c2d33); border-radius:10px;
  padding:.55rem .65rem; background:var(--bg2,#1c1d21); min-width:220px; }
.bm-prop-dim{ opacity:.55; }
.bm-prop-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font-size:.76rem; font-weight:700; margin-bottom:.4rem; }
.bm-prop-chip{ font-size:.66rem; font-weight:600; padding:.12rem .45rem; border-radius:20px; white-space:nowrap; }
.bm-prop-open{ background:rgba(240,160,32,.15); color:var(--accent,#f0a020); }
.bm-prop-accepted{ background:rgba(94,166,96,.18); color:var(--green,#5ea660); }
.bm-prop-superseded{ background:var(--bg3,#26272c); color:var(--text3,#888); }
.bm-diff{ font-size:.8rem; padding:.14rem 0; }
.bm-diff-add{ color:var(--green,#5ea660); }
.bm-diff-remove{ color:var(--red,#e04848); text-decoration:line-through; text-decoration-thickness:1px; }
.bm-diff-qty{ color:var(--accent,#f0a020); }
.bm-diff-keep{ color:var(--text3,#888); }
.bm-accept-btn{ margin-top:.5rem; width:100%; }

/* Footer / composer */
.bm-foot{ flex-shrink:0; border-top:1px solid var(--line,#2c2d33); padding:.7rem .8rem;
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom)); }
.bm-frozen{ font-size:.8rem; color:var(--text3,#888); text-align:center; padding:.2rem 0; }
.bm-composer textarea{ width:100%; resize:none; font-size:16px; line-height:1.4;
  background:var(--bg3,#26272c); color:var(--text,#eee); border:1px solid var(--line,#2c2d33);
  border-radius:9px; padding:.55rem .7rem; box-sizing:border-box; }
.bm-composer-btns{ display:flex; gap:.5rem; margin-top:.5rem; justify-content:flex-end; flex-wrap:wrap; }

/* Proposal composer (owner) */
#bm-prop-editor{ margin-bottom:.7rem; border:1px dashed var(--accent,#f0a020); border-radius:10px;
  padding:.6rem .7rem; background:rgba(240,160,32,.05); }
.bm-prop-editor-head{ font-size:.74rem; color:var(--text2,#aaa); margin-bottom:.45rem; }
.bm-prop-rows{ display:flex; flex-direction:column; gap:.3rem; max-height:180px; overflow-y:auto;
  -webkit-overflow-scrolling:touch; }
.bm-prop-row{ display:flex; align-items:center; gap:.5rem; font-size:.82rem;
  background:var(--bg3,#26272c); border-radius:8px; padding:.3rem .55rem; }
.bm-prop-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bm-prop-qty{ display:flex; align-items:center; gap:.35rem; font-variant-numeric:tabular-nums; }
.bm-qbtn{ background:var(--bg2,#1c1d21); border:1px solid var(--line,#2c2d33); color:var(--text,#eee);
  border-radius:6px; min-width:1.5rem; height:1.5rem; line-height:1; cursor:pointer; font-size:.85rem; }
.bm-qbtn:hover{ border-color:var(--accent,#f0a020); }
.bm-qbtn-x{ color:var(--red,#e04848); }
.bm-prop-empty{ font-size:.78rem; color:var(--text3,#888); padding:.2rem 0; }
.bm-prop-add{ position:relative; margin-top:.5rem; }
.bm-prop-add input{ width:100%; font-size:16px; background:var(--bg3,#26272c); color:var(--text,#eee);
  border:1px solid var(--line,#2c2d33); border-radius:8px; padding:.45rem .65rem; box-sizing:border-box; }
.bm-prop-dd{ position:absolute; left:0; right:0; bottom:calc(100% + 4px); max-height:220px; overflow-y:auto;
  background:var(--bg2,#1c1d21); border:1px solid var(--line,#2c2d33); border-radius:9px; z-index:5;
  box-shadow:0 -8px 24px rgba(0,0,0,.4); }
.bm-prop-dd-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.45rem .65rem; font-size:.82rem; cursor:pointer; }
.bm-prop-dd-row:hover{ background:var(--bg3,#26272c); }
.bm-prop-dd-cat{ font-size:.68rem; color:var(--text3,#888); white-space:nowrap; }
.bm-prop-dd-none{ cursor:default; color:var(--text3,#888); }

/* Unread badges on cards */
/* (b579) Live gear suggestion waiting on you. Distinct from the unread
   pill: this one persists after the thread is opened, because it marks
   an outstanding action rather than an unread message. */
.bm-prop-pill{ display:inline-flex; align-items:center; gap:.25rem; font-size:.68rem; font-weight:700;
  background:rgba(240,160,32,.14); color:var(--accent,#f0a020); border:1px solid rgba(240,160,32,.42);
  border-radius:20px; padding:.1rem .5rem; white-space:nowrap; }
.bm-unread-pill{ display:inline-flex; align-items:center; gap:.2rem; font-size:.68rem; font-weight:700;
  background:var(--accent,#f0a020); color:#1a1a1a; border-radius:20px; padding:.1rem .45rem; }
.bm-btn-unread{ border-color:var(--accent,#f0a020) !important; color:var(--accent,#f0a020) !important; }

/* ═══ (b570) App Insights extras (shares .sht-ins-* aesthetics) ═══ */
.ins2-key{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 .25rem 0 .5rem;vertical-align:-1px;}
.ins2-dna{display:flex;align-items:center;gap:.6rem;padding:.28rem 0;}
.ins2-dnaname{flex:0 0 150px;font-size:.76rem;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ins2-dnatrack{flex:1;position:relative;height:14px;background:var(--surface2);border-radius:5px;overflow:hidden;}
.ins2-dnaband{position:absolute;top:0;bottom:0;display:flex;border-radius:4px;overflow:hidden;min-width:6px;}
.ins2-dnaband i{display:block;height:100%;}
.ins2-dnameta{flex:0 0 auto;font-size:.66rem;color:var(--text3);white-space:nowrap;}
.ins2-bar{display:flex;align-items:center;gap:.6rem;padding:.2rem 0;}
.ins2-barname{flex:0 0 190px;font-size:.75rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;}
.ins2-bartrack{flex:1;height:12px;background:var(--surface2);border-radius:5px;overflow:hidden;}
.ins2-bartrack i{display:block;height:100%;background:var(--accent);opacity:.85;border-radius:5px;}
.ins2-barval{flex:0 0 2rem;font-size:.72rem;color:var(--text3);font-family:var(--mono);}
@media(max-width:640px){.ins2-dnaname{flex-basis:96px;}.ins2-barname{flex-basis:110px;}.ins2-dnameta{display:none;}}

/* ═══ (b565) Subnav consolidation ═══════════════════════════════
   Six tab-bar families had drifted (band vs box, three paddings,
   two radii, mini Calendar variant). One canonical treatment now:
   a centered floating pill box, identical container + tab metrics
   + active style across Jobs, Tasks, Expenses, Gear, Finances,
   People, inventory subtabs, Settings, Calendar view switch, and
   the script reader. Appended last so it wins each family's own
   earlier rules. */
.jobs-tabs-wrap, .gear-tabs-wrap, .fin-tabs-wrap{
  background:transparent;border-bottom:none;
  padding:.6rem .8rem .15rem;
}
.jobs-tabs, .gear-tabs, .fin-tabs, .dir-tabs, .set-tabs, .cal-view-tabs, .scr-reader-tabs{
  display:flex;gap:.2rem;padding:.22rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:9px;
  overflow:visible;
  width:max-content;max-width:100%;margin-left:auto;margin-right:auto;
}
.dir-tabs, .set-tabs{ width:max-content;max-width:100%;margin:.1rem auto 1rem; }
.cal-view-tabs, .scr-reader-tabs{ display:inline-flex;margin-left:0;margin-right:.3rem;margin-bottom:0; }
.jobs-tab, .gear-tab, .fin-tab, .dir-tab, .set-tab, .cal-view-tab, .scr-rtab{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.45rem 1rem;
  background:transparent;border:none;border-radius:7px;
  color:var(--text3);cursor:pointer;
  font-family:var(--ui);font-size:.84rem;font-weight:500;letter-spacing:.005em;
  white-space:nowrap;
  transition:color .12s, background .12s, box-shadow .12s;
}
.jobs-tab:hover:not(.active), .gear-tab:hover:not(.active), .fin-tab:hover:not(.active),
.dir-tab:hover:not(.active), .set-tab:hover:not(.active), .cal-view-tab:hover:not(.active),
.scr-rtab:hover:not(.active){ color:var(--text);background:var(--surface); }
.jobs-tab.active, .gear-tab.active, .fin-tab.active, .dir-tab.active, .set-tab.active,
.cal-view-tab.active, .scr-rtab.active{
  background:var(--accent);color:#fff;font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
@media (max-width:760px){
  .jobs-tabs, .gear-tabs, .fin-tabs, .dir-tabs, .set-tabs{ overflow-x:auto;scrollbar-width:none; }
  .jobs-tab, .gear-tab, .fin-tab, .dir-tab, .set-tab{ padding:.42rem .75rem; }
}

/* ═══ (b567) Page-rhythm lockdown — EXACT width + padding ════════
   Census found seven horizontal paddings (0/1/1.4/1.5/1.8rem…),
   double-padding where .dash-pane / .tools-wrap nested inside
   already-padded containers, and a padding-less Jobs shell. One
   token now rules every standard content view:
     · width  = var(--page-max), centred
     · x-pad  = var(--page-px) (1.8rem)
     · head-first views: 1.5rem top
     · tabs-first views: wrap .6rem top, content .9rem below tabs
   Inner panes stop padding themselves. Full-viewport tools (script
   reader, diagram editor, job workspace) are exempt by design. */
:root{ --page-px:1.8rem; }
#home-content, #calendar-content, #contacts-content, #users-content,
#borrow-admin-content, #tools-content, #shots-content, #diagrams-content,
#appinsights-content{
  padding:1.5rem var(--page-px) 1.6rem;
  max-width:var(--page-max);width:100%;margin:0 auto;
}
#settings-content{
  padding:1.5rem var(--page-px) 1.6rem;
  max-width:var(--page-max);width:100%;margin:0 auto;
  flex:1;overflow-y:auto;
}
#tasks-content{ padding:.9rem var(--page-px) 1.6rem;max-width:var(--page-max);width:100%;margin:0 auto; }
.inv-shell-inner{ padding:.9rem var(--page-px) 1.2rem; }
.invo-shell-inner{ padding:.9rem var(--page-px) 0; }
.jobs-estimates-inner{ padding:.9rem var(--page-px) 1.6rem; }
.aj-shell-inner{ padding:.9rem var(--page-px) 1.6rem;max-width:var(--page-max);width:100%; }
.jobs-tabs-wrap, .gear-tabs-wrap, .fin-tabs-wrap{ padding:.6rem var(--page-px) .15rem; }
.go-head{ padding:.7rem var(--page-px) .25rem; }
/* Inner panes inherit the container rhythm instead of adding to it */
.dash-pane{ padding:0;max-width:none;margin:0; }
/* Bare dashboard mounts whose ONLY cap used to be .dash-pane itself
   (gear dashboard / gear out / expenses dashboard live in full-bleed
   subview divs) get the standard capped column directly. */
#gear-dashboard-content, #gear-out-content, #expenses-dashboard-content{
  max-width:var(--page-max);width:100%;margin:0 auto;
  padding:.9rem var(--page-px) 1.6rem;
}
/* People is tabs-first (b566) but renders inside the head-first-
   padded container: pin its rhythm to Jobs' exact offsets — tab bar
   at .6rem from the view top, content 1.05rem below the bar
   (Jobs: wrap .6 top / .15 bottom + shell .9 top = 1.05). */
#contacts-content{ padding-top:.6rem; }
#contacts-content > .dir-tabs{ margin-top:0;margin-bottom:1.05rem; }
.tools-wrap{ padding:0;max-width:none; }
/* One header offset everywhere */
.page-head{ margin-bottom:1.1rem; }
@media (max-width:760px){
  :root{ --page-px:1rem; }
  #home-content, #calendar-content, #contacts-content, #users-content,
  #borrow-admin-content, #tools-content, #shots-content, #diagrams-content,
  #settings-content, #appinsights-content{ padding:1rem var(--page-px) 1.2rem; }
  #tasks-content{ padding:.6rem var(--page-px) 1.2rem; }
}

/* ── Site footer (b576) ────────────────────────────────────────
   Replaces the inline-styled debug-looking row. Hairline rule that
   fades at both ends, wordmark on the left typeset like the header
   lockup, build pill + copyright on the right. */
.app-view-footer{
  display:block;
  margin-top:4rem;
  padding-bottom:1.6rem;
}
.avf-rule{
  height:1px;width:100%;
  background:linear-gradient(90deg, transparent 0%, var(--border) 18%, var(--border) 82%, transparent 100%);
  margin-bottom:1.1rem;
}
.avf-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}
.avf-brand{display:inline-flex;align-items:center;gap:.55rem;min-width:0;}
.avf-brand::before{
  content:'';width:3px;height:15px;border-radius:3px;flex-shrink:0;
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  opacity:.85;
}
.avf-mark{
  font-family:var(--ui);font-weight:800;font-size:.9rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text2);
}
.avf-rest{
  font-family:var(--ui);font-weight:600;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text3);
}
.avf-meta{display:inline-flex;align-items:center;gap:.65rem;flex-wrap:wrap;}
.avf-build{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.02em;
  color:var(--text3);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.2rem .6rem;
}
.avf-copy{
  font-family:var(--ui);font-size:.7rem;color:var(--text3);opacity:.75;
}
/* (b682) Terms · Privacy · Contact, on every view's footer. Quiet
   enough not to compete with the content, underlined on hover so
   they read as links rather than as a caption. */
.avf-legal{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--ui);font-size:.7rem;
}
.avf-legal a{color:var(--text3);text-decoration:none;}
.avf-legal a:hover{color:var(--text2);text-decoration:underline;}
.avf-legal span{color:var(--text3);opacity:.45;}
@media (max-width:600px){
  .app-view-footer{margin-top:2.6rem;}
  .avf-row{gap:.6rem;}
  /* Phones: the meta cluster wraps, so keep the legal links on their
     own line rather than letting them break mid-list. */
  .avf-meta{gap:.5rem;}
  .avf-legal{flex-basis:100%;}
}

/* ── Home v2.1 (b576) ──────────────────────────────────────────
   Dan's second pass: today's status and the brief lead the page and
   must be unmissable; Needs You is the next thing the eye lands on
   and needs real size; the schedule's day cards get bigger too. The
   quick-action tile row and the activity footer link are gone. */

/* Today's status — the single clearest line on the page. */
.home-hero-status{
  display:flex;align-items:center;gap:.85rem;
  font-size:2.1rem;font-weight:800;letter-spacing:-.025em;
  line-height:1.1;color:var(--text);
}
.home-hero-status-icon{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:800;
  background:var(--green-dim);color:var(--green);
}
.home-hero-status-sub{
  font-size:1rem;color:var(--text3);margin-top:.55rem;padding-left:3.7rem;
}
/* Bigger hero type overall — the b575 sizes read timid next to the
   rest of the page once the action tiles were removed. */
.home-hero{padding:1.9rem 2rem 1.9rem;}
.home-hero-greet{font-size:2rem;}
.home-hero-kicker{font-size:.72rem;letter-spacing:.18em;margin-bottom:.7rem;}
.home-hero-job{font-size:1.85rem;}
.home-hero-day{padding:1.25rem 1.35rem;}
.home-hero-day-lbl{font-size:1.02rem;}
.home-hero-day-meta{font-size:.92rem;}
.home-hero-stat b{font-size:1.75rem;}
.home-hero .home-digest-card{margin-top:0;}

/* Major sections (Needs you, Schedule) — larger heading, more air. */
.home-section-major{margin-bottom:3rem;}
.home-section-major .home-section-title{
  font-size:1.4rem;font-weight:800;letter-spacing:-.02em;
}
.home-section-major .home-section-head{margin-bottom:1.15rem;}
.home-section-major .hst-count{font-size:.78rem;padding:.12rem .55rem;}

/* Needs You — big variant. Taller rows, bigger icons and type, a
   solid action button. This is the page's decision queue; at b575
   sizing it read like a settings list. */
.home-inbox-big{display:flex;flex-direction:column;gap:1.15rem;}
.home-inbox-big .home-inbox-group-head{margin-bottom:.55rem;}
.home-inbox-big .home-inbox-group-lbl{font-size:.8rem;letter-spacing:.09em;}
.home-inbox-big .home-inbox-group-count{font-size:.72rem;}
.home-inbox-big .home-inbox-group-rows{gap:.6rem;}
.home-inbox-big .home-inbox-row{
  gap:1.1rem;
  padding:1.15rem 1.25rem;
  border-left-width:6px;
  border-radius:14px;
}
.home-inbox-big .home-inbox-icon{
  width:44px;height:44px;font-size:1.3rem;border-radius:13px;margin-top:0;
}
.home-inbox-big .home-inbox-title{font-size:1.12rem;font-weight:700;line-height:1.25;}
.home-inbox-big .home-inbox-sub{font-size:.92rem;margin-top:.28rem;}
.home-inbox-big .home-inbox-btn{
  font-size:.92rem;font-weight:600;padding:.6rem 1.25rem;border-radius:10px;
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.home-inbox-big .home-inbox-btn:hover{filter:brightness(1.08);}
.home-inbox-big .home-inbox-btn-secondary{
  background:transparent;border-color:var(--border2);color:var(--text3);
}
.home-inbox-big .home-inbox-btn-secondary:hover{
  background:var(--surface3);color:var(--text);filter:none;
}
.home-inbox-big .home-inbox-more{padding:.95rem 1.25rem;}
.home-inbox-empty-big{
  padding:1.9rem 1.6rem;font-size:1.05rem;gap:.9rem;border-radius:16px;
}
.home-inbox-empty-big .home-inbox-empty-icon{
  width:38px;height:38px;font-size:1.15rem;
}

/* Day cards — bigger again, and the leading upcoming card carries a
   relative "IN N DAYS" tag now that the hero no longer previews it. */
.home-day-card{width:270px;padding:1.05rem 1.1rem 1.2rem;border-radius:18px;}
.home-day-card.is-empty{width:170px;}
.home-day-when{font-size:.72rem;}
.home-day-num{font-size:3rem;}
.home-day-mo{font-size:.72rem;margin-bottom:.85rem;}
.home-day-rel{
  display:block;margin-top:.35rem;
  font-size:.62rem;font-weight:800;letter-spacing:.12em;
  color:var(--accent);
}
.home-day-tile{padding:.8rem .85rem;border-radius:13px;}
.home-day-job{font-size:1.15rem;}
.home-day-lbl{font-size:.88rem;}
.home-day-meta{font-size:.8rem;}
.home-day-gap{min-width:78px;}
.home-avail-line{font-size:1rem;padding:.9rem 1.15rem;}

@media (max-width:900px){
  .home-hero{padding:1.3rem 1.3rem 1.4rem;}
  .home-hero-greet{font-size:1.5rem;}
  .home-hero-status{font-size:1.5rem;}
  .home-hero-status-icon{width:36px;height:36px;font-size:1.1rem;}
  .home-hero-status-sub{padding-left:0;}
  .home-hero-job{font-size:1.3rem;}
  .home-day-card{width:224px;}
  .home-section-major .home-section-title{font-size:1.15rem;}
  .home-inbox-big .home-inbox-row{padding:.95rem 1rem;gap:.85rem;}
  .home-inbox-big .home-inbox-title{font-size:1rem;}
}


/* ══ (b632) Shimmer skeleton kit ═══════════════════════════════════
   Reusable loading placeholders that hold the page shape while data
   arrives, instead of blank space or a lone "Loading…" line that the
   real content shoves aside. Markup comes from skHTML() in
   index.html; the primitives below can also be hand-composed. */
@keyframes sk-shimmer{ from{background-position:200% 0;} to{background-position:-200% 0;} }
.sk{
  border-radius:6px;
  background:linear-gradient(90deg, var(--surface2) 25%, var(--border2) 50%, var(--surface2) 75%);
  background-size:200% 100%;
  animation:sk-shimmer 1.5s ease-in-out infinite;
}
.sk-line{height:12px;margin:.4rem 0;}
.sk-line.sm{height:9px;max-width:70%;}
.sk-line.lg{height:17px;}
.sk-block{height:92px;margin:.45rem 0;border-radius:9px;}
.sk-circle{border-radius:50%;width:34px;height:34px;flex:none;}
.sk-head{height:34px;border-radius:8px;margin-bottom:.85rem;max-width:460px;}
.sk-row{display:flex;gap:.7rem;align-items:center;padding:.5rem .3rem;}
.sk-row-lines{flex:1;min-width:0;}
.sk-wrap{padding:.6rem .3rem;}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem;}
.sk-editor-grid{display:grid;grid-template-columns:2fr 1fr;gap:1rem;}
@media (max-width:760px){ .sk-editor-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion: reduce){ .sk{animation:none;} }

/* (b632) Legacy single-div "Loading…" placeholders → shimmer blocks.
   These are static or JS-reset divs across modals/views; one CSS
   treatment upgrades them all without touching every call site.
   Text is kept in the DOM (screen readers) but painted transparent. */
.td-loading, .td-ai-loading, .email-viewer-loading, .ingest-log-loading, .tool-loading{
  color:transparent !important;
  min-height:72px;
  border:none !important;
  border-radius:9px;
  background:linear-gradient(90deg, var(--surface2) 25%, var(--border2) 50%, var(--surface2) 75%) !important;
  background-size:200% 100% !important;
  animation:sk-shimmer 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .td-loading,.td-ai-loading,.email-viewer-loading,.ingest-log-loading,.tool-loading{animation:none;}
}

/* (renter upsell) get-your-own-CineBase modal status line */
.owncb-msg{min-height:1.3em;font-size:.85rem;margin-top:.6rem;}
.owncb-msg.err{color:var(--danger,#e05252);}
.owncb-msg.ok{color:var(--accent,#f5a623);}

/* ══ ONBOARDING WIZARD (b645) ══════════════════════════════════
   The marketing page's visual language inside the app: dark stage,
   one key-light beam, slate step codes, generous type. */
#onb-wizard{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;background:#07080c;}
.onb-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:46px 46px;opacity:.28;}
.onb-beam{position:absolute;top:-18%;left:-6%;width:70%;height:130%;
  background:linear-gradient(115deg,rgba(245,166,35,.20),rgba(232,108,44,.06) 55%,transparent 75%);
  filter:blur(28px);transform:rotate(-4deg);}
.onb-frame{position:relative;width:min(680px,94vw);max-height:92vh;display:flex;flex-direction:column;
  background:rgba(13,15,22,.92);border:1px solid var(--border2,#39415a);border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);backdrop-filter:blur(6px);}
.onb-top{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem .4rem;}
.onb-slate{font-family:ui-monospace,monospace;font-size:.68rem;letter-spacing:.22em;color:var(--accent);}
.onb-skip{background:none;border:none;color:var(--text3);font-size:.8rem;cursor:pointer;padding:.3rem .4rem;}
.onb-skip:hover{color:var(--text);}
.onb-body{padding:.6rem 1.6rem 1rem;overflow-y:auto;min-height:280px;}
.onb-h1{font-size:clamp(1.9rem,5vw,2.7rem);line-height:1.04;margin:.4rem 0 1rem;color:var(--text);text-transform:uppercase;letter-spacing:.01em;}
.onb-h1 em{font-style:normal;color:var(--accent);}
.onb-h2{font-size:clamp(1.35rem,3.4vw,1.8rem);line-height:1.1;margin:.4rem 0 .8rem;color:var(--text);text-transform:uppercase;}
.onb-lede{color:var(--text2);font-size:.95rem;line-height:1.6;margin:0 0 1.1rem;max-width:54ch;}
.onb-list{margin:.2rem 0 0;padding-left:1.2rem;color:var(--text2);font-size:.92rem;line-height:1.65;}
.onb-list li{margin-bottom:.6rem;}
.onb-list b{color:var(--text);}
.onb-note{font-size:.82rem;color:var(--text3);margin-top:1rem;}
.onb-fg{margin-bottom:.9rem;}
.onb-fg label{display:block;font-family:ui-monospace,monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-bottom:.35rem;}
.onb-fg input{width:100%;background:#0d0f16;border:1px solid var(--border2,#39415a);border-radius:7px;padding:.65rem .8rem;color:var(--text);font-size:.95rem;}
.onb-fg input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,166,35,.13);}
.onb-row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.onb-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0;}
.onb-chip{border:1px solid var(--border2,#39415a);background:#0d0f16;color:var(--text3);border-radius:20px;
  padding:.42rem .95rem;font-size:.86rem;cursor:pointer;transition:all .12s;}
.onb-chip.on{border-color:var(--accent);color:var(--accent);background:rgba(245,166,35,.09);}
.onb-choices{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:.4rem 0;}
.onb-choice{text-align:left;border:1px solid var(--border2,#39415a);background:#0d0f16;border-radius:10px;
  padding:1rem;cursor:pointer;transition:border-color .12s;}
.onb-choice.on{border-color:var(--accent);background:rgba(245,166,35,.07);}
.onb-choice-t{color:var(--text);font-weight:600;margin-bottom:.35rem;}
.onb-choice.on .onb-choice-t{color:var(--accent);}
.onb-choice-d{color:var(--text3);font-size:.82rem;line-height:1.5;}
.onb-cards{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:.6rem 0;}
.onb-card{display:flex;gap:.7rem;border:1px solid var(--border);border-radius:9px;padding:.8rem;background:#0d0f16;}
.onb-card-i{font-size:1.3rem;}
.onb-card-t{color:var(--text);font-weight:600;font-size:.9rem;margin-bottom:.2rem;}
.onb-card-d{color:var(--text3);font-size:.8rem;line-height:1.45;}
.onb-nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.4rem 1.2rem;border-top:1px solid var(--border);}
.onb-dots{display:flex;gap:.45rem;}
.onb-dot{width:7px;height:7px;border-radius:50%;background:var(--border2,#39415a);}
.onb-dot.on{background:var(--accent);}
.onb-dot.done{background:rgba(245,166,35,.4);}
.onb-btns{display:flex;gap:.6rem;}
@media(max-width:560px){
  .onb-row2,.onb-choices,.onb-cards{grid-template-columns:1fr;}
  .onb-frame{max-height:96vh;width:96vw;}
}

/* ══ HOME TIPS (b645, toned down + flippable b649) ══
   Sits under a normal section subtitle like every other home block;
   the accent is a whisper (dim left rule, plain text title), not a
   second call-to-action competing with the hero. */
.home-tips-section .home-section-head{align-items:baseline;}
.home-tip-hideall{background:none;border:none;color:var(--text3);font-size:.7rem;cursor:pointer;padding:0;}
.home-tip-hideall:hover{color:var(--text2);}
.home-tip{display:flex;gap:.8rem;align-items:flex-start;
  border:1px solid var(--border);border-radius:9px;
  padding:.7rem .9rem;background:var(--surface,#141824);}
.home-tip-i{font-size:1rem;line-height:1;opacity:.55;filter:grayscale(.5);}
.home-tip-b{flex:1;min-width:0;}
.home-tip-t{color:var(--text);font-weight:600;font-size:.88rem;text-decoration:none;}
.home-tip-t:hover{text-decoration:underline;}
.home-tip-d{color:var(--text3);font-size:.8rem;margin-top:.15rem;line-height:1.5;}
.home-tip-x{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;}
.home-tip-x > button{background:none;border:none;color:var(--text3);cursor:pointer;padding:0 .2rem;font-size:.95rem;line-height:1;}
.home-tip-x > button:hover{color:var(--text);}
.home-tip-flip{display:flex;align-items:center;gap:.25rem;font-size:.66rem;color:var(--text3);font-family:ui-monospace,monospace;}
.home-tip-flip button{background:none;border:1px solid var(--border);border-radius:5px;color:var(--text3);
  cursor:pointer;padding:0 .35rem;font-size:.85rem;line-height:1.3;}
.home-tip-flip button:hover{color:var(--text);border-color:var(--border2,#39415a);}


/* ════════════════════════════════════════════════════════
   Finances on phones — b674 mobile redesign
   ════════════════════════════════════════════════════════
   Both money lists (invoices + expenses) drop table semantics at
   ≤560px and render each row as a grid card, following the
   estimates-list precedent (v5.16.1). The expenses header folds
   its four secondary actions into a ⋯ menu at ≤760px, and the
   five filter dropdowns collapse behind a "⚙ Filters" toggle
   (display:contents on desktop keeps the wide layout untouched).

   Specificity notes (why some selectors look long):
   - .invo-table tbody .invo-row td   (0,2,2) must beat
     .invo-table tbody td             (0,1,2) padding rules.
   - .exp-table.exp-table-v2 tbody .exp-row td (0,3,2) must beat
     .exp-table.exp-table-v2 tbody td          (0,2,2).
   - Re-enabling Due inside the card: .invo-row td.invo-td-due
     (0,2,1) beats the ≤760 hide .invo-table .invo-td-due (0,2,0).
   ──────────────────────────────────────────────────────────── */

/* ── Category chip (b676) ──
   Phone-only duplicate of the Category column, rendered as the
   first chip in the strip. On wide layouts the column shows and
   the chip hides; a strip containing only the hidden category
   chip collapses so chip-less rows keep their height. */
@media (min-width:561px){
  .exp-chip-cat{display:none;}
  .exp-main-chips:not(:has(.exp-chip:not(.exp-chip-cat))){display:none;}
}

/* ── Expenses header ⋯ menu ──
   Desktop: inline tool buttons, ⋯ hidden. ≤760px: swap. */
.exp-head-tools{display:contents;}
.exp-more{display:none;position:relative;}
.exp-more-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:200px;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.28);
  padding:.35rem;z-index:120;display:flex;flex-direction:column;gap:.1rem;
}
.exp-more-menu[hidden]{display:none;}
.exp-more-item{
  display:flex;align-items:center;gap:.45rem;width:100%;text-align:left;
  background:none;border:none;color:var(--text);font-family:var(--ui);
  font-size:.84rem;padding:.5rem .55rem;border-radius:7px;cursor:pointer;
}
.exp-more-item:hover{background:var(--surface2);}

/* ── Expenses collapsible filters ──
   Desktop: the wrapper is display:contents so the five dropdown
   groups sit in the flex row exactly as before; toggle hidden. */
.exp-filter-toggle{display:none;}
.exp-filter-adv{display:contents;}
.exp-filter-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.15rem;height:1.15rem;padding:0 .3rem;
  background:var(--accent);color:#1a1205;border-radius:999px;
  font-size:.68rem;font-weight:700;line-height:1;
}
.exp-filter-caret{font-size:.62rem;opacity:.7;}

@media (max-width:760px){
  /* Header: secondary tools fold into ⋯; keep Select + New. */
  .exp-head-tools{display:none;}
  .exp-more{display:inline-flex;}
  .exp-head .page-head-row.primary{flex-wrap:wrap;row-gap:.45rem;}
  .exp-head .page-head-sub{display:none;} /* tagline — no room on phones */

  /* Filters: search full-width on its own visual row, dropdowns
     behind the toggle. When open, groups form a tidy 2-up grid. */
  .exp-filter-q{flex:1 1 auto;min-width:0;}
  .exp-filter-toggle{
    display:inline-flex;align-items:center;gap:.3rem;
    height:34px;align-self:flex-end;white-space:nowrap;
  }
  .exp-filter-adv{display:none;}
  .exp-filter-adv.open{
    display:flex;flex-wrap:wrap;gap:.55rem;
    flex-basis:100%;min-width:0;
    padding-top:.55rem;margin-top:.1rem;
    border-top:1px dashed var(--border);
  }
  .exp-filter-adv.open .exp-filter-grp{flex:1 1 44%;min-width:0;}
  .exp-filter-adv.open .exp-filter-grp select,
  .exp-filter-adv.open .exp-filter-grp input[type="date"]{width:100%;min-width:0;}
}

/* ── Expense list → cards (≤560px) ──
   b677 ledger layout. The card is a strict two-column grid with a
   shared visual spine — everything on the left rail lines up,
   everything on the right rail lines up:

     VENDOR (bold, 1 line)           $AMOUNT (bold)
     date · 📎                       + tax · fx
     description (muted, 2-line clamp)
     [category][job][acct][tax][billed]   ← h-scroll strip

   Both <td>s that hold composite content (main, and main's inner
   .exp-main-line) use display:contents so vendor / separator /
   description become individual grid items. The amount column is
   the total <td> itself spanning rows 1–2 so its tax/fx sublines
   stack right-aligned under the amount with no extra plumbing. */
@media (max-width:560px){
  .exp-table-wrap{background:transparent;border:none;border-radius:0;overflow:visible;}
  .exp-table, .exp-table tbody{display:block;width:100%;}
  .exp-table thead{display:none;}
  .exp-table.exp-table-v2{table-layout:auto;}
  .exp-table tbody tr.exp-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "vendor vendor total"
      "meta   rec    total"
      "desc   desc   desc"
      "chips  chips  chips";
    gap:.2rem .5rem;
    padding:.7rem .8rem .65rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-left:4px solid var(--exp-stripe, var(--border));
    border-radius:10px;
    margin-bottom:.5rem;
    align-items:start;
  }
  .exp-table tbody tr.exp-row:hover{background:var(--surface);}
  /* Selection tint moves from the cells to the card itself. */
  .exp-table tbody tr.exp-row.exp-row-selected,
  .exp-table tbody tr.exp-row.exp-row-selected:hover{
    background:rgba(245,166,35,.07);
    border-color:rgba(245,166,35,.4);
    border-left-color:var(--exp-stripe, var(--border));
  }
  .exp-table tbody tr.exp-row-selected td,
  .exp-table tbody tr.exp-row-selected:hover td{background:transparent;}
  /* Cells become grid areas; the inline inset category stripe from
     table mode is retired in favour of the card's border-left. */
  .exp-table.exp-table-v2 tbody .exp-row td{
    display:block;padding:0;border:none;white-space:normal;
    box-shadow:none !important;
  }
  .exp-table.exp-table-v2 tbody .exp-row td.exp-col-cat{display:none;}

  /* ─ Left rail ─ */
  .exp-table.exp-table-v2 tbody .exp-row td.exp-col-main{display:contents;}
  .exp-row .exp-main-line{display:contents;}
  .exp-row .exp-main-vendor{
    grid-area:vendor;min-width:0;
    font-size:1rem;font-weight:700;line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .exp-row .exp-main-sep{display:none;}
  .exp-row .exp-col-date{
    grid-area:meta;align-self:center;
    font-size:.72rem;color:var(--text3);line-height:1.3;
    font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  .exp-row .exp-col-rec{grid-area:rec;justify-self:start;align-self:center;line-height:1;}
  .exp-row .exp-col-rec .exp-rec-btn{padding:0 .15rem;font-size:.82rem;}
  .exp-row .exp-col-rec .exp-rec-missing{display:none;}
  .exp-row .exp-main-desc{
    grid-area:desc;min-width:0;
    /* .exp-main-line's desktop nowrap inherits through
       display:contents — restore wrapping so the clamp works. */
    white-space:normal;
    font-size:.82rem;color:var(--text3);line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
    margin-top:.1rem;
  }

  /* ─ Right rail: amount block spans rows 1–2, everything inside
     stacks right-aligned under the amount. ─ */
  .exp-row .exp-col-total{grid-area:total;align-self:start;text-align:right;line-height:1.25;}
  .exp-row .exp-col-total .exp-total-amt{
    font-weight:700;font-size:1.02rem;font-variant-numeric:tabular-nums;
  }
  .exp-row .exp-col-total .exp-total-tax,
  .exp-row .exp-col-total .exp-total-fx{font-size:.68rem;margin-top:.1rem;}

  /* ─ Chip strip: one line, h-scroll, category first. ─ */
  .exp-row .exp-main-chips{
    grid-area:chips;min-width:0;max-width:100%;
    margin-top:.25rem;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:.05rem;
  }
  .exp-row .exp-main-chips::-webkit-scrollbar{display:none;}
  .exp-row .exp-main-chips .exp-chip{flex:0 0 auto;}
  /* Category chip: coloured like the desktop column's pill. */
  .exp-chip-cat{
    background:color-mix(in srgb, var(--cat-color, #6b7280) 14%, transparent);
    color:var(--cat-color, var(--text2));
    border-color:color-mix(in srgb, var(--cat-color, #6b7280) 42%, transparent);
    font-weight:600;
  }

  /* ─ Bulk mode: checkbox owns a full-height left gutter. ─ */
  .exp-table.exp-table-bulk tbody tr.exp-row{
    grid-template-columns:auto auto 1fr auto;
    grid-template-areas:
      "cb vendor vendor total"
      "cb meta   rec    total"
      "cb desc   desc   desc"
      "cb chips  chips  chips";
  }
  .exp-row .exp-col-bulk{grid-area:cb;align-self:center;}
  .exp-row .exp-col-bulk .exp-bulk-cb{width:1.15rem;height:1.15rem;}

  /* Pager + bulk bar breathe a little tighter on phones. */
  .exp-bulk-bar{padding:.6rem .7rem;gap:.55rem;}
  /* The primary CTA takes its own full-width line when the header
     wraps — a deliberate mobile CTA rather than a ragged orphan. */
  .exp-head .page-head-row.primary .btn-accent{
    flex:1 1 100%;justify-content:center;
  }
  /* Summary stats: dots dropped (they orphaned at wrap points); the
     count sits pushed to the right so a wrapped line still reads as
     a designed row rather than a straggler. */
  .exp-filter-summary .dot{display:none;}
  .exp-filter-summary{gap:.35rem .8rem;}
  .exp-filter-summary span:last-child{margin-left:auto;}
}

/* ── Invoice list → cards (≤560px) ──
   Lives inside the "All Invoices" dashboard card, so rows become
   surface2 chips on the card's surface rather than free-floating. */
@media (max-width:560px){
  .invo-dash-table-wrap{padding:.65rem;}
  .invo-table, .invo-table tbody{display:block;width:100%;}
  .invo-table thead{display:none;}
  .invo-table tbody tr.invo-row{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "num    status"
      "client total"
      "due    balance";
    gap:.15rem .6rem;
    padding:.65rem .8rem;
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:10px;
    margin-bottom:.55rem;
    align-items:center;
    cursor:pointer;
  }
  .invo-table tbody tr.invo-row:last-child{margin-bottom:0;}
  .invo-table tbody .invo-row td{
    display:block;padding:0;border:none;text-align:left;
  }
  /* Issued stays hidden (from the ≤760 rule — lower specificity
     than the blanket display:block above, so restate). */
  .invo-table tbody .invo-row td.invo-td-issued{display:none;}
  .invo-td-num{grid-area:num;font-size:.76rem;color:var(--text3);letter-spacing:.02em;}
  .invo-td-num strong{font-weight:600;color:var(--text2);}
  .invo-td-client{grid-area:client;font-size:.95rem;font-weight:600;color:var(--text);line-height:1.25;word-break:break-word;}
  .invo-td-status{grid-area:status;text-align:right !important;}
  .invo-td-total{grid-area:total;font-weight:650;font-size:.98rem;font-variant-numeric:tabular-nums;}
  /* Due returns inside the card as a labelled footer line. */
  .invo-table tbody .invo-row td.invo-td-due{display:block;font-size:.76rem;color:var(--text3);}
  .invo-td-due::before{content:"Due ";}
  .invo-table tbody .invo-row td.invo-td-due.is-overdue{color:var(--red);font-weight:600;}
  .invo-table tbody .invo-row td.invo-td-due.no-due{display:none;}
  .invo-td-balance{grid-area:balance;font-size:.76rem;color:var(--text2);font-variant-numeric:tabular-nums;}
  .invo-td-balance::before{content:"Bal ";color:var(--text3);}
  .invo-table tbody .invo-row td.invo-td-balance.bal-redundant{display:none;}
  /* Empty-state row degrades to a plain block. */
  .invo-table .invo-dash-table-empty{display:block;padding:1rem .5rem;text-align:center;}

  /* Filter row: search takes the full first line; status chips
     become a single horizontally-scrollable strip (inline styles
     on the row set flex-wrap:wrap, hence the !importants). */
  .invo-filter-row .invo-filter-q{flex:1 1 100% !important;min-width:0 !important;}
  .invo-chip-row{
    flex-wrap:nowrap !important;
    overflow-x:auto;max-width:100%;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:.1rem;
  }
  .invo-chip-row::-webkit-scrollbar{display:none;}

  /* Expected-income rows: drop the day-range caption — the label
     + amount + count are the scannable bits on a 375px screen. */
  .invo-fc-range{display:none;}

  /* Header: mirror the Expenses treatment — New Invoice becomes a
     full-width CTA on its own wrap line; the bulk-payment ghost
     stays compact on the title row. */
  .invo-dash .page-head-row.primary .btn-accent{
    flex:1 1 100%;justify-content:center;
  }
}

/* ══════════════════════════════════════════════════════════════
   (b703) Gear → Rates — bulk rental-price sheet
   ══════════════════════════════════════════════════════════════ */
.gr-shell{max-width:960px;margin:0 auto;padding:0 1rem 5.5rem}
.gr-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.5rem .25rem .7rem;border-bottom:1px solid var(--border)}
.gr-tools-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3)}
.gr-tool{display:flex;align-items:center;gap:.3rem}
.gr-tool input{padding:.3rem .4rem;border:1px solid var(--border);border-radius:6px;background:var(--bg2,transparent);color:var(--text)}
.gr-tools-note{font-size:.72rem;color:var(--text3);margin-left:auto}
.gr-cols{display:grid;grid-template-columns:minmax(0,1fr) 6.5rem 7.5rem 5.5rem 6rem 6rem;gap:.5rem;align-items:center;padding:.35rem .25rem}
.gr-head-row{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg,#111);z-index:2}
.gr-num{text-align:right;font-variant-numeric:tabular-nums}
.gr-cat{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent,#f5a623);padding:.9rem .25rem .3rem;border-bottom:1px solid var(--border)}
.gr-row{border-bottom:1px solid var(--border)}
.gr-row.dirty{background:color-mix(in srgb, var(--accent,#f5a623) 9%, transparent)}
.gr-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-asset{margin-left:.45rem;font-size:.72rem;color:var(--text3)}
.gr-value{color:var(--text2)}
.gr-pov{color:var(--text3);font-size:.82rem}
.gr-input-wrap{display:inline-flex;align-items:center;gap:.15rem;color:var(--text3)}
.gr-input-wrap input{width:5.4rem;padding:.3rem .4rem;border:1px solid var(--border);border-radius:6px;background:var(--bg2,transparent);color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.gr-row.dirty .gr-input-wrap input{border-color:var(--accent,#f5a623)}
.gr-empty{padding:2rem 1rem;color:var(--text3);text-align:center}
.gr-savebar{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:.6rem;padding:.6rem 1rem;background:var(--bg2,#181818);border-top:1px solid var(--border);z-index:40;box-shadow:0 -4px 16px rgba(0,0,0,.25)}
.gr-savebar span{margin-right:auto;color:var(--text2)}
@media (max-width:700px){
  .gr-desk{display:none}
  .gr-cols{grid-template-columns:minmax(0,1fr) 5.2rem 7rem}
  .gr-tools-note{display:none}
}

/* ══════════════════════════════════════════════════════════════
   (b707) Admin Create Rental Request — anb2 sheet
   ══════════════════════════════════════════════════════════════ */
.anb2-modal{max-width:640px;width:640px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.anb2-body{flex:1;overflow-y:auto;padding:0 .15rem .6rem;-webkit-overflow-scrolling:touch}
.anb2-sec{margin-bottom:1.05rem}
.anb2-sec-h{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:.45rem}
.anb2-err{font-size:.82rem;min-height:1.2em;padding:.25rem 0;color:var(--red);flex-shrink:0}

/* Typeahead */
.anb2-ta-wrap{position:relative}
.anb2-ta-wrap>input{width:100%;padding:.55rem .75rem;font-size:.92rem;background:var(--bg);border:1px solid var(--border2);border-radius:8px;color:var(--text)}
.anb2-dd{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--surface);
  border:1px solid var(--border2);border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden;max-height:290px;overflow-y:auto}
.anb2-dd-row{padding:.5rem .7rem;cursor:pointer;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.55rem}
.anb2-dd-txt{flex:1;min-width:0}
/* (b718) Product thumbs in the admin rental modal — fixed square slot
   (photo or category emoji) so rows align either way. White ground:
   catalog photos are shot for white regardless of theme. */
.anb2-thumb{
  flex:0 0 auto;width:34px;height:34px;border-radius:6px;object-fit:contain;
  background:#fff;border:1px solid var(--border);display:block;
}
.anb2-thumb.ph{
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  background:var(--surface2);color:var(--text3);
}
.anb2-dd-row:last-child{border-bottom:none}
.anb2-dd-row:hover,.anb2-dd-row.active{background:rgba(240,160,32,.1)}
.anb2-dd-row.inkit{opacity:.75}
.anb2-dd-main{font-size:.88rem;font-weight:600}
.anb2-dd-sub{font-size:.75rem;color:var(--text3);display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.anb2-dd-new .anb2-dd-main{color:var(--accent)}
.anb2-dd-empty{padding:.6rem .7rem;font-size:.8rem;color:var(--text3)}
.anb2-inkit{font-size:.72rem;color:var(--green);font-weight:600;margin-left:.3rem}

/* Selected renter chip */
.anb2-chip{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;background:var(--bg);border:1px solid var(--border2);border-radius:8px}
.anb2-chip-main{flex:1;min-width:0}
.anb2-chip-name{font-weight:600;font-size:.92rem}
.anb2-chip-sub{font-size:.75rem;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Inline new renter */
.anb2-newr{margin-top:.55rem;padding:.7rem;border:1px dashed var(--border2);border-radius:10px;display:flex;flex-direction:column;gap:.5rem}
.anb2-newr-h{font-size:.8rem;font-weight:700;color:var(--accent)}
.anb2-nr-invite{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--text2);cursor:pointer}
.anb2-newr-foot{display:flex;justify-content:flex-end;gap:.5rem}

/* Details (contact / browse) */
.anb2-details summary{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);cursor:pointer;user-select:none;padding:.35rem 0;margin-top:.5rem}
.anb2-details summary span{font-weight:400;text-transform:none;letter-spacing:0;margin-left:.4rem}
.anb2-details-body{margin-top:.5rem;display:flex;flex-direction:column;gap:.5rem}

/* Dates */
.anb2-dates{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.anb2-date-summary{margin-top:.45rem;min-height:1.4em}

/* Kit */
.anb2-kit{margin-top:.6rem;display:flex;flex-direction:column;gap:.35rem}
.anb2-kit-empty{font-size:.82rem;color:var(--text3);padding:.5rem .2rem}
.anb2-kit-row{display:flex;align-items:center;gap:.55rem;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--border2);border-radius:8px}
.anb2-kit-info{flex:1;min-width:0}
.anb2-kit-name{font-size:.88rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anb2-kit-meta{font-size:.73rem;color:var(--text3);display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.anb2-kit-rem{background:none;border:none;color:var(--text3);cursor:pointer;font-size:.95rem;padding:.3rem .4rem;border-radius:6px}
.anb2-kit-rem:hover{color:var(--red);background:var(--red-dim)}
.anb2-kit-sum{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.6rem;font-size:.84rem;color:var(--text2)}
.anb2-sum-coi{color:var(--accent);font-size:.78rem;font-weight:600}

/* Browse */
.anb2-browse{max-height:300px;overflow-y:auto;margin-top:.4rem;border:1px solid var(--border);border-radius:10px;padding:.3rem .45rem}
.anb2-browse-cat{display:flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--cat,#aaa);padding:.55rem .15rem .3rem}
.anb2-browse-row{display:flex;align-items:center;gap:.55rem;padding:.42rem .35rem;border-radius:7px;cursor:pointer}
.anb2-browse-row:hover{background:rgba(240,160,32,.07)}
.anb2-browse-row.inkit .anb2-browse-tick{color:var(--green)}
.anb2-browse-tick{width:1.2rem;text-align:center;color:var(--text3);font-weight:700;flex-shrink:0}

/* Extras */
.anb2-extras{display:grid;grid-template-columns:9rem 1fr;gap:.6rem}
.anb2-notes-fg{min-width:0}

/* Status segmented */
.anb2-status-seg{display:inline-flex;border:1px solid var(--border2);border-radius:9px;overflow:hidden}
.anb2-status-seg button{background:var(--bg);border:none;color:var(--text2);padding:.5rem 1rem;font-size:.86rem;cursor:pointer}
.anb2-status-seg button+button{border-left:1px solid var(--border2)}
.anb2-status-seg button.active{background:var(--accent);color:#141414;font-weight:700}
.anb2-status-hint{font-size:.75rem;color:var(--text3);margin-top:.4rem}

/* Mobile: full-screen sheet, bigger touch targets */
@media (max-width:700px){
  .anb2-modal{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;padding:1rem .9rem calc(.9rem + env(safe-area-inset-bottom))}
  .anb2-dates{grid-template-columns:1fr 1fr}
  .anb2-extras{grid-template-columns:1fr}
  .anb2-ta-wrap>input{padding:.7rem .8rem;font-size:1rem}
  .anb2-dd-row{padding:.65rem .75rem}
  .anb2-kit-row{padding:.6rem .65rem}
  .anb2-browse-row{padding:.55rem .4rem}
  .anb2-status-seg{display:flex}
  .anb2-status-seg button{flex:1;padding:.65rem .5rem}
}
/* (b707) Qty steppers inside anb2 kit rows are always live — the base
   .borrow-item-qty rule hides them until a parent .borrow-item is
   .checked, which doesn't apply here (kit rows ARE the selection). */
.anb2-kit-row .borrow-item-qty{opacity:1;pointer-events:all}

/* ═══════════════════════════════════════════════════════════════
   (b752) TONE SYSTEM — "make the app a nice place to be"
   Dan's brief: the share list's subtle coloured-box design (b751)
   should reach every page. Each section owns a hue; cards, KPI
   tiles, tab pills, count chips, the page halo and row hovers all
   pick it up through one custom property, --sec. Nothing here
   changes layout — it's colour, tint and edge only, so every
   existing rule keeps working and a browser without color-mix()
   simply ignores the tinted declarations and falls back to the
   grey it had before.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --tone-jobs:#f5a623;     --tone-gear:#34b37a;    --tone-money:#1fb8a6;
  --tone-people:#4f7fe0;   --tone-tasks:#9b7bef;   --tone-calendar:#2aa6da;
  --tone-truck:#f0803c;    --tone-creative:#e06aa6; --tone-tools:#f0803c;
  --tone-settings:#8b93a8; --tone-home:#f5a623;
  --tone-rentals:#ef6a5a; --tone-shots:#b48cf2; --tone-diagrams:#a3d63c;
  --sec:var(--accent);
}
html.light{
  --tone-jobs:#d98a0e; --tone-gear:#1f9a63; --tone-money:#0f9c8c; --tone-people:#3465c9;
  --tone-tasks:#7c5fd6; --tone-calendar:#1b8fc0; --tone-truck:#d9651f; --tone-creative:#c9508d;
  --tone-tools:#d9651f; --tone-settings:#6b7285; --tone-home:#d98a0e;
  --tone-rentals:#d9503f; --tone-shots:#8f63d9; --tone-diagrams:#7fae1f;
}
/* Section → hue. Views carry the property; body mirrors the active
   view (data-view, set in switchView) so the page halo can follow. */
#view-home,        body[data-view="home"]      {--sec:var(--tone-home)}
#view-jobs,        body[data-view="jobs"]      {--sec:var(--tone-jobs)}
#view-inventory,   body[data-view="inventory"] {--sec:var(--tone-gear)}
#view-borrow,      body[data-view="borrow"]    {--sec:var(--tone-rentals)}
#view-invoices,    body[data-view="invoices"]  {--sec:var(--tone-money)}
#view-contacts,#view-users, body[data-view="contacts"], body[data-view="users"] {--sec:var(--tone-people)}
#view-tasks,       body[data-view="tasks"]     {--sec:var(--tone-tasks)}
#view-calendar,    body[data-view="calendar"]  {--sec:var(--tone-calendar)}
#view-truck,       body[data-view="truck"]     {--sec:var(--tone-truck)}
#view-scripts,  body[data-view="scripts"]  {--sec:var(--tone-creative)}
#view-shots,    body[data-view="shots"]    {--sec:var(--tone-shots)}
#view-diagrams, body[data-view="diagrams"] {--sec:var(--tone-diagrams)}
#view-tools,#view-appinsights, body[data-view="tools"], body[data-view="appinsights"] {--sec:var(--tone-tools)}
#view-settings,#view-help, body[data-view="settings"], body[data-view="help"] {--sec:var(--tone-settings)}

/* Page halo follows the section (replaces the fixed amber halo). */
body[data-view]{
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, color-mix(in srgb, var(--sec) 9%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, color-mix(in srgb, var(--sec) 5%, transparent) 0%, transparent 70%),
    var(--bg);
}

/* Tinted tokens derived from --sec (kept as vars so state classes
   can still override cleanly). */
/* Derived on every element that can re-point --sec (custom props
   resolve where they're declared, not where they're read). */
.view, body, .home-kpi, .home-section, .mh-tile{
  --sec-tint:color-mix(in srgb, var(--sec) 11%, var(--surface));
  --sec-tint2:color-mix(in srgb, var(--sec) 5%, var(--surface));
  --sec-edge:color-mix(in srgb, var(--sec) 34%, var(--border));
  --sec-edge2:color-mix(in srgb, var(--sec) 55%, var(--border2));
  --sec-dim:color-mix(in srgb, var(--sec) 14%, transparent);
  --sec-soft:color-mix(in srgb, var(--sec) 8%, transparent);
}

/* ── Cards: a tinted top-down wash + a coloured hairline ── */
.dash-card, .invo-dash-card, .home-alert, .home-glance, .home-tl-card,
.aj-card, .inv-item, .gear-card, .contact-card, .br-card, .scr-card,
.dgm-card, .tool-card, .day-card, .est-kpi, .fin-kpi-card{
  background:linear-gradient(180deg, var(--sec-tint) 0%, var(--sec-tint2) 100%);
  border-color:var(--sec-edge);
}
.dash-card{ box-shadow:inset 0 1px 0 color-mix(in srgb, var(--sec) 18%, var(--surface-rim)), var(--depth-1); }
.aj-card:hover, .inv-item:hover, .gear-card:hover, .contact-card:hover, .br-card:hover,
.scr-card:hover, .dgm-card:hover, .tool-card:hover, .home-tl-card:hover{
  border-color:var(--sec-edge2);
}
.dash-card-icon{
  color:var(--sec); opacity:1;
  display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:8px;
  background:var(--sec-dim); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sec) 30%, transparent);
  font-size:1rem;
}
.dash-card-count, .home-section-title .hst-count, .home-section-head > .hst-count{
  color:var(--sec); background:var(--sec-dim); border-color:color-mix(in srgb, var(--sec) 35%, transparent);
}

/* ── KPI tiles: coloured icon tile, tinted body ── */
.home-kpi{
  background:linear-gradient(180deg, var(--sec-tint) 0%, var(--surface) 100%);
  border-color:var(--sec-edge);
}
.home-kpi-icon{ color:var(--sec); background:var(--sec-dim); }
.home-kpi:hover{ border-color:var(--sec-edge2); }
/* Semantic states keep their own voice — alert / warn / good win. */
.home-kpi.is-alert .home-kpi-icon{ color:var(--red);    background:var(--red-dim); }
.home-kpi.is-warn  .home-kpi-icon{ color:var(--amber);  background:var(--amber-dim); }
.home-kpi.is-good  .home-kpi-icon{ color:var(--green);  background:var(--green-dim); }
.est-kpi-num{ color:var(--sec); }
.est-kpi.est-kpi-warn .est-kpi-num{ color:var(--amber); }
.est-kpi.est-kpi-good .est-kpi-num{ color:var(--green); }

/* Home is a mosaic of every section: tiles that jump elsewhere wear
   that destination's colour, so the home page reads as a colour key
   for the rest of the app. */
.home-kpi[onclick*="goToGear"], .home-kpi[onclick*="inventory"], .home-kpi[onclick*="borrow"] {--sec:var(--tone-gear)}
.home-kpi[onclick*="invoices"], .home-kpi[onclick*="Invoice"], .home-kpi[onclick*="Expense"], .home-kpi[onclick*="Estimates"] {--sec:var(--tone-money)}
.home-kpi[onclick*="tasks"], .home-kpi[onclick*="Task"] {--sec:var(--tone-tasks)}
.home-kpi[onclick*="contacts"], .home-kpi[onclick*="Directory"] {--sec:var(--tone-people)}
.home-kpi[onclick*="calendar"] {--sec:var(--tone-calendar)}
.home-kpi[onclick*="scripts"], .home-kpi[onclick*="shots"], .home-kpi[onclick*="diagrams"] {--sec:var(--tone-creative)}
.home-section[data-tone="jobs"]     {--sec:var(--tone-jobs)}
.home-section[data-tone="gear"]     {--sec:var(--tone-gear)}
.home-section[data-tone="money"]    {--sec:var(--tone-money)}
.home-section[data-tone="people"]   {--sec:var(--tone-people)}
.home-section[data-tone="tasks"]    {--sec:var(--tone-tasks)}
.home-section[data-tone="calendar"] {--sec:var(--tone-calendar)}
.home-section[data-tone="creative"] {--sec:var(--tone-creative)}
.home-section[data-tone="tools"]    {--sec:var(--tone-tools)}
.home-section-title::before{
  content:""; display:inline-block; width:.3rem; height:1.05em; border-radius:3px;
  background:var(--sec); align-self:center; margin-right:.15rem;
}

/* ── Page heads: tinted count chip + a coloured tick under the title ── */
.page-head-count{
  color:var(--sec); background:var(--sec-dim); border-color:color-mix(in srgb, var(--sec) 35%, transparent);
}
.page-head-title{ position:relative; }
.page-head-title::after{
  content:""; display:block; width:2.2rem; height:3px; border-radius:2px;
  background:var(--sec); margin-top:.35rem; opacity:.85;
}

/* ── Sub-tab pills and the header tab take the section colour ── */
.jobs-tab.active, .gear-tab.active, .fin-tab.active, .dir-tab.active, .set-tab.active,
.cal-view-tab.active, .scr-rtab.active{
  background:var(--sec);
  box-shadow:0 1px 3px rgba(0,0,0,.14), 0 0 0 1px color-mix(in srgb, var(--sec) 40%, transparent);
}
body[data-view] .nav-tab.active{
  background:var(--sec); box-shadow:0 2px 10px color-mix(in srgb, var(--sec) 35%, transparent);
}
body[data-view] .bnav-tab.active{ color:var(--sec); }

/* ── List rows: tinted hover and a faint zebra ── */
.jt-row:hover, .inv-list-row:hover, .invo-row:hover, .est-row:hover{
  background:var(--sec-soft);
}
.jt-row:nth-child(even), .inv-list-row:nth-child(even){
  background:color-mix(in srgb, var(--sec) 4%, transparent);
}

/* ── Group / kit headers, empty states, section rules ── */
.jt-group-head td:first-child{ box-shadow:inset 3px 0 0 var(--sec); }
.est-empty, .home-tl-empty, .dash-empty, .dir-empty, .phase-empty{
  border-color:var(--sec-edge); background:var(--sec-tint2);
}

/* Print: strip the tints so paper stays paper. */
@media print{
  body[data-view]{ background:#fff; }
  .dash-card, .home-kpi, .aj-card, .inv-item, .contact-card, .br-card, .est-kpi, .fin-kpi-card{ background:#fff; }
}
/* (b752) Mobile home: the quick-action tiles wear their destination's
   colour; the "today" hero and rows take the home tone. Inside the
   mobile media block's specificity these are plain class rules, so
   they're wrapped in the same breakpoint to keep the cascade order. */
@media (max-width:700px){
  .mh-today, .mh-row{
    background:linear-gradient(180deg, var(--sec-tint) 0%, var(--sec-tint2) 100%);
    border-color:var(--sec-edge);
  }
  .mh-tile{
    background:linear-gradient(180deg, var(--sec-tint) 0%, var(--sec-tint2) 100%);
    border-color:var(--sec-edge);
  }
  .mh-tile-icon{ color:var(--sec); }
  .mh-tile[onclick*="truck"]     {--sec:var(--tone-truck)}
  .mh-tile[onclick*="Lookup"]    {--sec:var(--tone-gear)}
  .mh-tile[onclick*="Receipt"]   {--sec:var(--tone-money)}
  .mh-tile[onclick*="tasks"]     {--sec:var(--tone-tasks)}
  .mh-tile[onclick*="NewJob"]    {--sec:var(--tone-jobs)}
  .mh-tile[onclick*="calendar"]  {--sec:var(--tone-calendar)}
}

/* (b796) Earlier-invoice credits in the editor totals card */
.invo-credit-row{font-size:.9rem;color:var(--text2);}
.invo-credit-row a{color:inherit;text-decoration:underline dotted;}
.invo-credit-row strong{color:var(--text2);}
/* (b799) Apply-previous-invoice picker */
.invo-cc-modal{width:620px;max-width:96vw;padding:0;display:flex;flex-direction:column;max-height:88vh;}
.invo-cc-head{padding:1.4rem 1.5rem 1rem;border-bottom:1px solid var(--border);}
.invo-cc-head h3{margin:0 0 .45rem;font-size:1.1rem;}
.invo-cc-head p{margin:0;color:var(--text3);font-size:.85rem;line-height:1.45;}
.invo-cc-list{padding:.4rem 1.5rem;overflow-y:auto;overflow-x:clip;flex:1 1 auto;min-height:0;}
.invo-cc-foot{display:flex;justify-content:flex-end;gap:.5rem;padding:.9rem 1.5rem 1.2rem;border-top:1px solid var(--border);}
.invo-cc{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.85rem;align-items:center;
  padding:.8rem .6rem;margin:.4rem 0;border:1px solid var(--border);border-radius:8px;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.invo-cc:hover{background:var(--bg2,rgba(255,255,255,.03));}
.invo-cc.is-on{border-color:var(--accent);background:var(--accent-dim,rgba(245,166,35,.08));}
.invo-cc-check{width:18px;height:18px;margin:0;accent-color:var(--accent);}
.invo-cc-body{min-width:0;}
.invo-cc-title{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.invo-cc-num{font-weight:600;color:var(--text);}
.invo-cc-job{color:var(--text3);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.invo-cc-tag{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.12rem .45rem;border-radius:999px;background:var(--accent-dim,rgba(245,166,35,.15));color:var(--accent);}
.invo-cc-tag.is-warn{background:rgba(224,160,32,.15);color:#e0a020;}
.invo-cc-meta{color:var(--text3);font-size:.8rem;margin-top:.2rem;font-variant-numeric:tabular-nums;}
.invo-cc-amt{text-align:right;font-variant-numeric:tabular-nums;}
.invo-cc-amt-static{color:var(--text2);font-size:.95rem;white-space:nowrap;}
.invo-cc-amt-edit{display:none;}
.invo-cc-amt-edit input{
  width:130px;text-align:right;font-size:16px;padding:.45rem .6rem .45rem 1.5rem;
  background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);
  font-family:var(--ui);font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.invo-cc-amt-edit input:focus{outline:none;border-color:var(--accent);}
.invo-cc-amt-edit input::-webkit-outer-spin-button,.invo-cc-amt-edit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.invo-cc.is-on .invo-cc-amt-static{display:none;}
.invo-cc.is-on .invo-cc-amt-edit{display:inline-block;}
@media (max-width:520px){
  .invo-cc{grid-template-columns:auto minmax(0,1fr);}
  .invo-cc-amt{grid-column:2 / 3;text-align:left;}
  .invo-cc-amt-edit input{width:130px;}
}

/* (b800) Post-credit net/gross rows under the applied-credit list */
.invo-credit-after{font-size:.85rem;color:var(--text3);}
.invo-credit-after strong{color:var(--text2);font-size:.88rem;}

/* ════════════════════════════════════════════════════════════
   (b835) Scrollbar always at the window's right edge.
   Every page-level scroll container runs edge-to-edge; the content
   column is centred with symmetric padding instead of max-width +
   margin:auto, so the bar can't sit inset at the column's edge.
   ════════════════════════════════════════════════════════════ */
#calendar-content,#contacts-content,#users-content,#borrow-admin-content,#tasks-content,
#settings-content,#tools-content,#shots-content,#diagrams-content,#appinsights-content,#help-content,
#view-jobs.solo-job-view .aj-shell,
.invo-shell-inner{
  max-width:none !important;margin-left:0 !important;margin-right:0 !important;width:100% !important;
  padding-left:max(var(--page-px), calc((100% - var(--page-max)) / 2)) !important;
  padding-right:max(var(--page-px), calc((100% - var(--page-max)) / 2)) !important;
}
/* Invoices: the list card no longer scrolls inside the page — the
   shell scrolls, so the bar is at the edge. Sticky table headers keep
   working against the new scroller. */
.invo-shell-inner{overflow-y:auto !important;}
.invo-scroll{flex:0 0 auto;overflow:visible;min-height:0;}
/* Job page solo layout: .aj-shell is the scroller, so it takes the
   gutter and its inner column stops capping itself. */
#view-jobs.solo-job-view .main-panel{max-width:none;margin:0;}
#view-jobs.solo-job-view .aj-shell-inner{max-width:none;margin:0;}


/* ═══ Showcase (b852) — job case-study generator ═══ */
.sc-pitch{font-size:.85rem;color:var(--text2);line-height:1.55;margin-bottom:.7rem;max-width:62ch;}
.sc-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;}
.sc-row-main{min-width:0;flex:1;}
.sc-row-title{font-weight:700;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc-row-sub{font-size:.78rem;color:var(--text3);margin-top:.15rem;display:flex;align-items:center;gap:.35rem;}
.sc-row-actions{display:flex;gap:.4rem;flex-wrap:wrap;}
.sc-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 6px rgba(16,185,129,.7);flex:none;}
.sc-modal{max-width:640px;width:min(640px,94vw);}
.sc-modal-lg{max-width:760px;width:min(760px,94vw);}
.sc-hint{font-size:.82rem;color:var(--text3);line-height:1.5;margin-bottom:.7rem;}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:44vh;overflow-y:auto;padding:2px;}
.sc-cell{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;background:#000;aspect-ratio:1;outline:2px solid transparent;outline-offset:-2px;}
.sc-cell img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;}
.sc-cell:hover img{opacity:1;}
.sc-cell .sc-tick{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#1a1208;font-size:.75rem;font-weight:800;display:none;align-items:center;justify-content:center;}
.sc-cell.sel{outline-color:var(--accent);}
/* (b862) Suggested-frame affordances in the Generate Showcase modal */
/* (b865) Insights trip map */
.ins2-map{height:440px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#0d0f13;}
.ins2-map .leaflet-container{background:#0d0f13;font-family:inherit;}
.ins2-map .leaflet-popup-content-wrapper{background:var(--surface);color:var(--text);border-radius:8px;}
.ins2-map .leaflet-popup-tip{background:var(--surface);}
.ins2-map .leaflet-popup-content{font-size:.8rem;line-height:1.45;margin:.6rem .8rem;}
.ins2-map .leaflet-control-attribution{background:rgba(13,15,19,.7);color:var(--text3);font-size:.62rem;}
.ins2-map .leaflet-control-attribution a{color:var(--text3);}
@media (max-width:760px){ .ins2-map{height:300px;} }
.sc-sugg-hint{
  font-size:.8rem;color:var(--text2);line-height:1.45;
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius:8px;padding:.5rem .7rem;margin-bottom:.55rem;
}
.sc-sugg-hint a{color:var(--accent);text-decoration:none;font-weight:600;}
.sc-sugg-hint a:hover{text-decoration:underline;}
.sc-sugg-spin{display:inline-block;animation:scSuggPulse 1.2s ease-in-out infinite;}
@keyframes scSuggPulse{0%,100%{opacity:.45}50%{opacity:1}}
.sc-cell .sc-sugg-badge{
  position:absolute;top:5px;left:5px;font-size:.72rem;line-height:1;
  background:rgba(0,0,0,.55);border-radius:6px;padding:3px 4px;
  pointer-events:none;
}
.sc-cell.sel .sc-tick{display:flex;}
.sc-sections{display:flex;flex-direction:column;gap:.7rem;margin-top:.4rem;max-height:52vh;overflow-y:auto;padding:2px;}
.sc-sec{background:var(--bg2,rgba(128,134,144,.06));border:1px solid var(--border2);border-radius:10px;padding:.7rem;}
.sc-sec-kind{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:.4rem;}
.sc-sec-heading{width:100%;font-weight:700;margin-bottom:.4rem;}
.sc-sec-body{width:100%;resize:vertical;font-family:inherit;line-height:1.5;}
.sc-thumbrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:.5rem;}
.sc-thumbrow img{width:62px;height:62px;object-fit:cover;border-radius:6px;background:#000;}
.sc-hero-pick img{cursor:pointer;outline:2px solid transparent;outline-offset:-2px;opacity:.85;}
.sc-hero-pick img:hover{opacity:1;}
.sc-hero-pick img.sel{outline-color:var(--accent);opacity:1;}

/* ────────────────────────────────────────────────────────────
   Pull-to-refresh indicator (b872)

   Created lazily by the _ptr module in grip-app.js and only ever
   shown on phones, so there is no media query here — if the element
   exists, the gesture is running. It sits just under the header,
   below modals (z 600) so an open overlay always wins.

   The disc is translated and its arrow rotated inline from JS as the
   pull progresses; .settle adds the transition for the release, and
   .busy hands the arrow over to the spin keyframes (the !important is
   what lets the animation beat the leftover inline rotation).
   ──────────────────────────────────────────────────────────── */
#ptr{
  position:fixed;
  /* Parked one disc-height ABOVE the top of the app shell, which the
     pull moves in its entirety — header included. The disc rides down
     into the strip that opens above the header, so it never sits on
     the header or on the content. Height (44) + breathing room (8) =
     the 52px offset; JS overwrites `top` with the shell's measured
     edge when the pull commits, so this is only the pre-measure
     resting place. Under modals (600) so an overlay always wins. */
  z-index:150;
  top:calc(env(safe-area-inset-top,0px) - 52px);
  left:50%;transform:translate(-50%,0);
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border2);
  box-shadow:var(--shadow-md);
  color:var(--text2);opacity:0;pointer-events:none;
}
/* The scroller being dragged. No transition while the finger is down
   (JS sets the transform every touchmove); .ptr-settle adds it for the
   release and for the rest position under the spinner. */
.ptr-settle{transition:transform .28s cubic-bezier(.2,.8,.3,1);}
#ptr .ptr-ico{display:flex;}
#ptr svg{width:22px;height:22px;display:block;}
#ptr.ready{color:var(--accent);border-color:var(--accent);}
#ptr.settle{transition:transform .24s cubic-bezier(.2,.8,.3,1),opacity .24s ease;}
#ptr.busy{color:var(--accent);border-color:var(--accent);}
#ptr.busy .ptr-ico{animation:ptrSpin .75s linear infinite;transform:none!important;}
@keyframes ptrSpin{to{transform:rotate(360deg);}}

/* ── Upcoming countdown (b882–b884) ────────────────────────────
   Typographic trailing value — no container. Rounded system face,
   tabular numerals, secondary-colour caption. */
.cd{
  display:inline-flex;flex-direction:column;align-items:flex-end;justify-content:center;
  flex-shrink:0;line-height:1;vertical-align:middle;white-space:nowrap;
  font-family:ui-rounded,"SF Pro Rounded","SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;
  text-transform:none;letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  --cd-orange:#ff9f0a;
}
html.light .cd{ --cd-orange:#c93400; }
.cd-n{
  font-size:1.9rem;font-weight:600;letter-spacing:-.025em;line-height:.9;
  font-variant-numeric:tabular-nums lining-nums;color:var(--text);
}
.cd-u{
  margin-top:.28rem;font-size:.7rem;font-weight:500;letter-spacing:.005em;
  color:var(--text3);
}
.cd-soon .cd-n{ color:var(--cd-orange); }
.cd-word .cd-n{
  font-size:1.02rem;font-weight:600;letter-spacing:-.01em;line-height:1.1;
  color:var(--cd-orange);
}
.cd-sm .cd-n{ font-size:1.6rem; }
.cd-sm .cd-u{ font-size:.66rem;margin-top:.24rem; }
.cd-sm.cd-word .cd-n{ font-size:.95rem; }

/* Trailing slot on list cards (mobile jobs, truck picker) */
.cd-slot{display:flex;align-items:center;flex-shrink:0;padding:0 2.2rem 0 .5rem;}
.mj-card.has-cd .mj-card-body{min-width:0;flex:1;}

/* Jobs table — countdown then date, both left-aligned */
.jt-next{display:flex;align-items:center;gap:.85rem;}
.jt-col-next{width:12.5rem;}
.jt-next .cd{align-items:flex-start;width:4.7rem;}
.jt-next .cd-n{font-size:1.55rem;}
.jt-next .cd-u{font-size:.66rem;}
.jt-next .cd-word .cd-n{font-size:.92rem;}
.jt-next-txt{display:flex;flex-direction:column;gap:.2rem;min-width:0;padding-left:.85rem;border-left:1px solid var(--border);}
.jt-next .jt-next-date{margin:0;line-height:1.1;}
.jt-next-dow{font-size:.74rem;color:var(--text3);line-height:1.1;}
@media (max-width:640px){ .jt-next-dow{display:none;} }
@media (max-width:480px){
  .jt-col-next{ width:6.6rem; }
  .jt-td-next,.jt-table thead th:nth-of-type(4){ width:6.6rem !important; }
  .jt-next{flex-direction:column;align-items:flex-start;gap:.3rem;}
  .jt-next-txt{padding-left:0;border-left:0;}
  .jt-next .cd{width:auto;}
  .jt-next .cd-n{font-size:1.3rem;}
}

/* Jobs card grid + legacy list */
.aj-card-next .cd{margin-left:auto;padding-left:.5rem;}
.aj-list-when .cd{vertical-align:middle;}

/* Home — desktop day strip */
.home-day-card{position:relative;}
.home-day-cd{position:absolute;top:1.05rem;right:1.15rem;}
.home-day-cd .cd-n{font-size:2.1rem;}

/* Home — mobile */
.mh-today.has-cd{padding-right:6.5rem;}
.mh-today.has-cd .mh-today-arrow{display:none;}
.mh-today-cd{position:absolute;top:50%;right:1.35rem;transform:translateY(-50%);}
.mh-today-cd .cd-n{font-size:2.6rem;}
.mh-today-cd .cd-u{font-size:.74rem;margin-top:.35rem;}
.mh-row-cd{display:flex;flex-shrink:0;margin-left:.75rem;}

/* ═══════════════════════════════════════════════════════════════════
   (b885) DESIGN SYSTEM 2 — "as if Apple designed it"
   One layer, last in the cascade, so it can be read (and reverted) as
   a unit. Principles:
   • System typography (SF on Apple devices), tight display tracking,
     sentence-case labels instead of letter-spaced caps.
   • Apple system palettes: grouped backgrounds, elevated surfaces,
     translucent separators, vibrant system colours.
   • Colour lives in glyphs and state — not in tinted card washes,
     coloured borders or accent stripes (b752 tone system neutralised;
     --sec still tints icons and active controls).
   • Depth from material + soft shadow, never from outlines.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#000000;
  --surface:#1c1c1e;
  --surface2:#2c2c2e;
  --surface3:#3a3a3c;
  --surface-hi:#242426;
  --border:rgba(84,84,88,.42);
  --border2:rgba(120,120,128,.40);
  --border3:rgba(142,142,147,.55);
  --text:#ffffff;
  --text2:rgba(235,235,245,.72);
  --text3:rgba(235,235,245,.46);
  --accent:#ff9f0a;
  --accent2:#ff6b2c;
  --accent-dim:rgba(255,159,10,.16);
  --accent-soft:rgba(255,159,10,.08);
  --accent-rim:rgba(255,159,10,.30);
  --green:#30d158; --green-dim:rgba(48,209,88,.16);
  --red:#ff453a;   --red-dim:rgba(255,69,58,.16);
  --amber:#ff9f0a; --amber-dim:rgba(255,159,10,.16);
  --surface-grad:var(--surface);
  --surface2-grad:var(--surface2);
  --surface-rim:transparent;
  --surface-rim-strong:transparent;
  --depth-1:0 0 0 .5px rgba(255,255,255,.06);
  --depth-2:0 0 0 .5px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.45);
  --depth-3:0 0 0 .5px rgba(255,255,255,.10), 0 22px 60px rgba(0,0,0,.6);
  --shadow-sm:none;
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 70px rgba(0,0,0,.6);
  --fill:rgba(118,118,128,.24);          /* iOS tertiarySystemFill */
  --fill2:rgba(118,118,128,.16);
  --sep:rgba(84,84,88,.55);              /* hairline separator */
  --material:rgba(22,22,24,.72);         /* bars / sheets */
  --ui:'CineBaseIcons',-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter",system-ui,"Segoe UI",sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  --mono:'CineBaseIcons',ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --rail-bg:#000000;
  --header-bg:var(--material);
  --header-border:var(--sep);
  --tone-jobs:#ff9f0a;  --tone-gear:#30d158;  --tone-money:#63e6e2; --tone-people:#0a84ff;
  --tone-tasks:#bf5af2; --tone-calendar:#64d2ff; --tone-truck:#ff9f0a; --tone-creative:#ff375f;
  --tone-tools:#ff9f0a; --tone-settings:#8e8e93; --tone-home:#ff9f0a;
  --tone-rentals:#ff6961; --tone-shots:#bf5af2; --tone-diagrams:#a3d63c;
}
html.light{
  --bg:#f2f2f7;
  --surface:#ffffff;
  --surface2:#f2f2f7;
  --surface3:#e5e5ea;
  --surface-hi:#ffffff;
  --border:rgba(60,60,67,.14);
  --border2:rgba(60,60,67,.22);
  --border3:rgba(60,60,67,.36);
  --text:#000000;
  --text2:rgba(60,60,67,.82);
  --text3:rgba(60,60,67,.56);
  --accent:#f28a00;
  --accent2:#e5541c;
  --accent-dim:rgba(242,138,0,.13);
  --accent-soft:rgba(242,138,0,.07);
  --accent-rim:rgba(242,138,0,.28);
  --green:#248a3d; --green-dim:rgba(52,199,89,.14);
  --red:#d70015;   --red-dim:rgba(255,59,48,.12);
  --amber:#c93400; --amber-dim:rgba(255,149,0,.14);
  --depth-1:0 0 0 .5px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.04);
  --depth-2:0 0 0 .5px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.08);
  --depth-3:0 0 0 .5px rgba(0,0,0,.06), 0 20px 50px rgba(0,0,0,.16);
  --shadow-md:0 6px 20px rgba(0,0,0,.08);
  --shadow-lg:0 22px 60px rgba(0,0,0,.18);
  --fill:rgba(118,118,128,.12);
  --fill2:rgba(118,118,128,.08);
  --sep:rgba(60,60,67,.20);
  --material:rgba(249,249,251,.78);
  --rail-bg:#f2f2f7;
  --tone-jobs:#f28a00;  --tone-gear:#28a745;  --tone-money:#0fa3a0; --tone-people:#007aff;
  --tone-tasks:#9a3fd0; --tone-calendar:#0a9fd8; --tone-truck:#f28a00; --tone-creative:#e0284f;
  --tone-tools:#f28a00; --tone-settings:#8e8e93; --tone-home:#f28a00;
  --tone-rentals:#e0483e; --tone-shots:#9a3fd0; --tone-diagrams:#6fa31a;
}

/* ── Base ─────────────────────────────────────────────────────────── */
body, body[data-view]{
  background:var(--bg);
  font-family:var(--ui);
  letter-spacing:-.006em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
::selection{background:color-mix(in srgb, var(--accent) 35%, transparent);}
:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent)!important;border-radius:inherit;}
::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--text) 22%, transparent);background-clip:padding-box;}

/* ── Header: translucent material bar ─────────────────────────────── */
header{
  background:var(--material);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep);
  box-shadow:none;
}
header::after{display:none;}
.logo-bar{display:none;}
.logo-mark{
  font-family:var(--display);font-weight:700;font-size:1.06rem;
  letter-spacing:-.01em;text-transform:none;
}
.logo-txt:not(:has(.logo-sub)) .logo-mark{font-size:1.1rem;}
.logo-sub{letter-spacing:.02em;text-transform:none;font-weight:500;font-size:.66rem;}
.hdr-search{
  background:var(--fill2);border:0;border-radius:10px;box-shadow:none;
  color:var(--text3);height:34px;
}
.hdr-search:hover{background:var(--fill);box-shadow:none;border:0;color:var(--text2);}
.hdr-search-kbd{background:transparent;border:.5px solid var(--sep);border-radius:5px;color:var(--text3);box-shadow:none;}
.hdr-feedback{
  background:transparent;border:0;color:var(--text2);font-weight:500;box-shadow:none;
}
.hdr-feedback:hover{background:var(--fill2);transform:none;color:var(--text);}
.user-pill{background:transparent;border:0;box-shadow:none;}
.hdr-user-menu,.hdr-more-menu{
  background:var(--material);
  -webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);
  border:.5px solid var(--sep);border-radius:var(--r);box-shadow:var(--depth-3);padding:5px;
}
.hdr-user-item{border-radius:7px;}
.hdr-user-item:hover{background:var(--accent);color:#fff;}

/* ── Left rail: sidebar, not a toolbar ────────────────────────────── */
/* (b886) The blur lives on a pseudo-element, NOT on .nrail itself:
   backdrop-filter makes an element the containing block for its
   position:fixed descendants, so the sub-tab flyouts (fixed, placed
   in viewport coords by railBuild's flyPlace) were being offset by
   the rail's own top (the header height) and drifted below their
   section. */
.nrail{
  background:transparent;
  border-right:.5px solid var(--sep);
}
.nrail::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--material);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
html.rail-on .nrail:hover{box-shadow:12px 0 40px rgba(0,0,0,.35);}
.nrail-items::before,.nrail-items::after{display:none;}
.nrail-foot{border-top:.5px solid var(--sep);}
.nrail-item{border-radius:8px;font-weight:500;color:var(--text);}
.nrail-item:hover{background:var(--fill2);}
.nrail-item-wrap.active>.nrail-item{
  background:var(--fill);color:var(--text);font-weight:600;box-shadow:none;
}
.nrail-item-wrap.active>.nrail-item .nrail-ico{color:var(--rt);}
.nrail-item-wrap.active>.nrail-item .nrail-chev{color:var(--text3);}

/* ── Bottom tab bar ───────────────────────────────────────────────── */
.bottom-nav{
  background:var(--material);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--sep);
}
.bnav-tab{font-size:.64rem;font-weight:500;letter-spacing:.005em;}
.bnav-tab.active span:last-child{font-weight:600;}
body[data-view] .bnav-tab.active{color:var(--accent);}

/* ── Neutralise the b752 tone washes ──────────────────────────────── */
.view, body, .home-kpi, .home-section, .mh-tile{
  --sec-tint:var(--surface);
  --sec-tint2:var(--surface);
  --sec-edge:transparent;
  --sec-edge2:transparent;
  --sec-soft:var(--fill2);
}
.dash-card, .invo-dash-card, .home-alert, .home-glance, .home-tl-card,
.aj-card, .inv-item, .gear-card, .contact-card, .br-card, .scr-card,
.dgm-card, .tool-card, .day-card, .est-kpi, .fin-kpi-card, .home-kpi{
  background:var(--surface);
  border-color:transparent;
  box-shadow:var(--depth-1);
  border-radius:var(--r-lg);
}
.aj-card:hover, .inv-item:hover, .gear-card:hover, .contact-card:hover, .br-card:hover,
.scr-card:hover, .dgm-card:hover, .tool-card:hover, .home-tl-card:hover, .home-kpi:hover{
  border-color:transparent;box-shadow:var(--depth-2);
}
.home-section-title::before, .page-head-title::after{display:none;}
.jt-group-head td:first-child{box-shadow:none;}
.jt-row:nth-child(even), .inv-list-row:nth-child(even){background:transparent;}
.jt-row:hover, .inv-list-row:hover, .invo-row:hover, .est-row:hover{background:var(--fill2);}
.est-empty, .home-tl-empty, .dash-empty, .dir-empty, .phase-empty{
  border:0;background:var(--surface);color:var(--text3);border-radius:var(--r-lg);
}
.dash-card-icon{box-shadow:none;border-radius:8px;}
.dash-card-count, .page-head-count, .home-section-title .hst-count, .home-section-head > .hst-count{
  color:var(--text2);background:var(--fill);border-color:transparent;
}

/* ── Typography ───────────────────────────────────────────────────── */
.page-head-title, .home-hero-greet, .mh-hello, .home-section-title, .modal-title{
  font-family:var(--display);
}
.page-head-title{font-size:2.05rem;font-weight:700;letter-spacing:-.028em;}
@media (max-width:640px){ .page-head-title{font-size:1.8rem;} }
.page-head-sub{color:var(--text3);font-size:.95rem;}
.home-section-title{font-weight:700;letter-spacing:-.02em;}
.home-section-title svg{color:var(--text3);}
.modal-title{font-size:1.2rem;font-weight:650;letter-spacing:-.018em;}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn{
  font-family:var(--ui);font-weight:500;letter-spacing:-.005em;
  border:0;border-radius:var(--r-sm);
  background:var(--fill);color:var(--text);
  padding:.46rem .95rem;
  transition:background .15s, filter .15s, transform .08s, opacity .15s;
}
.btn:hover{background:color-mix(in srgb, var(--fill) 100%, var(--text) 8%);border:0;color:var(--text);}
.btn:active{transform:scale(.97);}
.btn-accent{background:var(--accent);color:#fff;box-shadow:none;font-weight:600;}
.btn-accent:hover{background:var(--accent);filter:brightness(1.06);box-shadow:none;color:#fff;}
.btn-ghost{background:transparent;color:var(--accent);}
.btn-ghost:hover{background:var(--fill2);color:var(--accent);border:0;}
.btn-danger{background:var(--red-dim);color:var(--red);border:0;}
.btn-danger:hover{background:var(--red);color:#fff;}
.btn-in{background:var(--green);border:0;}
.btn-out{background:var(--accent2);border:0;}
.btn-sm{padding:.32rem .7rem;border-radius:7px;}
.btn-xs{padding:.22rem .5rem;border-radius:6px;}

/* ── Segmented controls (sub-tabs) ────────────────────────────────── */
.jobs-tabs{background:var(--fill2);border:0;border-radius:9px;padding:2px;gap:0;}
.jobs-tab{border-radius:7px;color:var(--text);font-weight:500;padding:.38rem 1rem;}
.jobs-tab:hover:not(.active){background:transparent;color:var(--text);opacity:.75;}
.jobs-tab.active, .gear-tab.active, .fin-tab.active, .dir-tab.active, .set-tab.active,
.cal-view-tab.active, .scr-rtab.active{
  background:var(--surface3);color:var(--text);font-weight:600;
  box-shadow:0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04), 0 0 0 .5px rgba(0,0,0,.04);
}
html.light .jobs-tab.active, html.light .gear-tab.active, html.light .fin-tab.active,
html.light .dir-tab.active, html.light .set-tab.active, html.light .cal-view-tab.active,
html.light .scr-rtab.active{background:#fff;}
.jobs-tabs-wrap{background:transparent;border-bottom:0;}
body[data-view] .nav-tab.active{background:var(--fill);color:var(--text);box-shadow:none;}

/* ── Fields ───────────────────────────────────────────────────────── */
.fg label{font-size:.8rem;font-weight:500;color:var(--text2);margin-bottom:.3rem;}
.fg input,.fg select,.fg textarea,
.modal input[type=text],.modal input[type=email],.modal input[type=number],.modal input[type=date],
.modal input[type=time],.modal input[type=tel],.modal input[type=url],.modal input[type=search],
.modal input[type=password],.modal select,.modal textarea,
.aj-search, .tool-input{
  background:var(--fill2);border:0;border-radius:10px;
  color:var(--text);font-family:var(--ui);
  box-shadow:none;
  transition:background .15s, box-shadow .15s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus,
.modal input:focus,.modal select:focus,.modal textarea:focus,
.aj-search:focus, .tool-input:focus{
  background:var(--surface);border:0;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
}
html.light .fg input,html.light .fg select,html.light .fg textarea,
html.light .modal input[type=text],html.light .modal select,html.light .modal textarea{background:rgba(118,118,128,.10);}

/* ── Sheets & modals ──────────────────────────────────────────────── */
.overlay{
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);
}
html.light .overlay{background:rgba(0,0,0,.22);}
.modal{
  background:var(--surface);border:0;border-radius:var(--r-xl);
  box-shadow:var(--depth-3);padding:1.6rem 1.6rem 1.35rem;
}
html:not(.light) .modal{background:#1c1c1e;}
.modal-foot{border-top:.5px solid var(--sep);}
@keyframes su{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

/* ── Page chrome ──────────────────────────────────────────────────── */
.page-head-row.controls{background:transparent;border:0;padding:0;}
.dash-card{border-radius:var(--r-lg);}

/* ── Home (desktop) ───────────────────────────────────────────────── */
.home-hero{
  background:var(--surface);border:0;border-radius:var(--r-xl);
  box-shadow:var(--depth-1);
}
.home-hero::before, .home-hero::after{display:none;}
.home-hero-greet{font-size:2.2rem;font-weight:700;letter-spacing:-.03em;}
.home-hero-date, .home-hero-kicker{
  letter-spacing:0;text-transform:none;font-weight:500;font-size:.95rem;color:var(--text3);
}
.home-hero-kicker{color:var(--accent);font-weight:600;}
.home-hero-day{background:var(--fill2);border:0;border-radius:var(--r-lg);box-shadow:none;}
.home-hero-day:hover{background:var(--fill);}
.home-hero-type-badge{background:var(--accent-dim);color:var(--accent);letter-spacing:0;text-transform:none;border:0;}
.home-day-card{border:0;border-radius:var(--r-lg);box-shadow:var(--depth-1);background:var(--surface);}
.home-day-card{border-top:0;}
.home-day-card::before{
  content:"";position:absolute;left:1.15rem;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--dc);
}
.home-day-card.is-today{box-shadow:0 0 0 2px var(--accent), var(--depth-2);}
.home-day-when, .home-day-mo{letter-spacing:.02em;font-weight:600;}
.home-day-tile{border:0;background:var(--fill2);box-shadow:none;}
.home-day-tile:hover{background:var(--fill);}
.home-avail-line{background:var(--surface);border:0;box-shadow:var(--depth-1);border-radius:var(--r-lg);}

/* ── Home (mobile) ────────────────────────────────────────────────── */
@media (max-width:700px){
  .mh-hello{font-family:var(--display);font-size:2.1rem;font-weight:700;letter-spacing:-.03em;}
  .mh-today, .mh-today-quiet{
    background:var(--surface);border:0;border-radius:var(--r-xl);box-shadow:var(--depth-1);
  }
  .mh-today-rel{letter-spacing:0;text-transform:none;font-size:.8rem;font-weight:600;}
  .mh-today-job{font-family:var(--display);font-weight:700;letter-spacing:-.022em;font-size:1.5rem;}
  .mh-tile{
    background:var(--surface);border:0;border-radius:var(--r-lg);box-shadow:var(--depth-1);
    align-items:flex-start;justify-content:space-between;padding:.9rem 1rem;min-height:88px;
    font-weight:600;font-size:.95rem;
  }
  .mh-tile:active{background:var(--surface2);border:0;}
  .mh-tile-icon{
    color:#fff!important;background:var(--sec);
    width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;
  }
  .mh-tile-icon svg{width:18px;height:18px;}
  .mh-tile-lbl{text-align:left;}

  /* Section header: iOS inset-grouped header */
  .mh-section-head{
    text-transform:none;letter-spacing:-.01em;font-size:1.25rem;font-weight:700;
    color:var(--text);font-family:var(--display);padding-left:.1rem;margin-bottom:-.1rem;
  }

  /* Inset grouped list — one rounded container, hairline separators
     inset to the text column. */
  .mh-list{
    gap:0;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;
    box-shadow:var(--depth-1);
  }
  .mh-list > .mh-row{
    background:transparent!important;border:0!important;border-radius:0;
    padding:.72rem .95rem .72rem .95rem;position:relative;gap:.85rem;min-height:60px;
  }
  .mh-list > .mh-row + .mh-row::before{
    content:"";position:absolute;top:0;right:0;left:calc(.95rem + 30px + .85rem);
    height:.5px;background:var(--sep);
  }
  .mh-list > .mh-row:active{background:var(--fill2)!important;transform:none;}
  .mh-row-icon{
    width:30px;height:30px;border-radius:8px;font-size:1rem;color:#fff!important;
    background:var(--text3)!important;
  }
  .mh-row-icon svg{width:17px;height:17px;}
  .mh-row.is-warn .mh-row-icon{background:#ff9f0a!important;}
  .mh-row.is-bad  .mh-row-icon{background:#ff453a!important;}
  .mh-row.is-cal  .mh-row-icon{background:#0a84ff!important;}
  .mh-row.is-more .mh-row-icon{background:transparent!important;color:var(--text3)!important;}
  .mh-row-title{font-weight:500;font-size:1rem;letter-spacing:-.012em;}
  .mh-row-sub{font-size:.82rem;color:var(--text3);}
  .mh-row-arrow{font-size:1.25rem;opacity:.35;margin-left:.1rem;}
  .mh-row-cd .cd-n{font-size:1.45rem;}
}

/* ── Tables & lists ───────────────────────────────────────────────── */
.jt-wrap{background:var(--surface);border:0;border-radius:var(--r-lg);box-shadow:var(--depth-1);overflow:hidden;}
.jt-table thead th{
  background:transparent;border-bottom:.5px solid var(--sep);
  text-transform:none;letter-spacing:0;font-size:.78rem;font-weight:600;color:var(--text3);
}
.jt-table tbody td{border-bottom:.5px solid var(--sep);}
.jt-group-head td{
  background:var(--bg)!important;text-transform:none;letter-spacing:0;
  font-weight:600;color:var(--text2);font-size:.82rem;
}
.jt-accent{width:4px;border-radius:4px;}

/* ── Chips / badges ───────────────────────────────────────────────── */
.mj-card-status, .mtp-card-status, .jt-next-when{
  letter-spacing:0;text-transform:none;border:0;border-radius:6px;font-weight:600;
}
.mj-card, .mtp-card{border:0;box-shadow:var(--depth-1);border-radius:var(--r-lg);}
.mj-card-accent, .mtp-card-accent{width:4px;border-radius:0 4px 4px 0;top:14px;bottom:14px;height:auto;}

/* (b885) Home inbox → inset grouped list */
.home-inbox-group-lbl{letter-spacing:0;text-transform:none;font-size:.9rem;font-weight:600;}
.home-inbox-big .home-inbox-group-lbl{letter-spacing:0;font-size:.95rem;}
.home-inbox-group-count{font-family:var(--ui);background:var(--fill);border:0;color:var(--text2);font-weight:600;}
.home-inbox-group-rows{
  gap:0;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--depth-1);
}
.home-inbox-row, .home-inbox-group-urgent .home-inbox-row, .home-inbox-group-review .home-inbox-row,
.home-inbox-group-finance .home-inbox-row{
  border:0;border-radius:0;background:transparent;position:relative;align-items:center;
  padding:.85rem 1.1rem;
}
.home-inbox-row + .home-inbox-row::before{
  content:"";position:absolute;top:0;right:0;left:calc(1.1rem + 32px + .85rem);height:.5px;background:var(--sep);
}
.home-inbox-row:hover{background:var(--fill2);}
.home-inbox-icon{width:32px;height:32px;border-radius:9px;color:#fff!important;margin-top:0;}
.home-inbox-icon svg{width:17px;height:17px;}
.home-inbox-icon-amber{background:#ff9f0a;}
.home-inbox-icon-green{background:#30d158;}
.home-inbox-icon-blue{background:#0a84ff;}
.home-inbox-icon-red{background:#ff453a;}
.home-inbox-icon-default{background:#8e8e93;}
.home-inbox-title{font-weight:600;font-size:.95rem;letter-spacing:-.01em;}
.home-inbox-btn, .home-inbox-big .home-inbox-btn{
  border:0;border-radius:999px;background:var(--fill);color:var(--accent);font-weight:600;
  padding:.36rem .95rem;box-shadow:none;
}
.home-inbox-btn:hover{background:var(--accent);color:#fff;border:0;}

/* Tips */
.home-tip{border:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--depth-1);padding:.9rem 1.05rem;}
.home-tip-i{opacity:1;filter:none;color:var(--accent);}
.home-tip-x > button[class]:not(:first-child), .home-tip-nav button{border:0;background:var(--fill2);border-radius:6px;}

/* Header tools */
.hdr-ask{border:0;background:var(--fill2);border-radius:10px;color:var(--text);font-weight:500;height:34px;}
.hdr-ask:hover{background:var(--fill);border:0;color:var(--text);}
html.light .hdr-ask{background:var(--fill2);border:0;}
.hdr-tool:hover{background:var(--fill2);}
.user-pill .role-badge{border:0;background:var(--fill);color:var(--text2);font-family:var(--ui);font-weight:600;border-radius:6px;text-transform:capitalize;}

/* Small segmented toggles */
.sched-view-toggle{border:0;border-radius:9px;background:var(--fill2);padding:2px;}
.sched-view-btn{border-radius:7px;color:var(--text);}
.sched-view-btn + .sched-view-btn{border-left:0;}
.sched-view-btn:hover{background:transparent;opacity:.75;}
.sched-view-btn.active{background:var(--surface3);box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);}
html.light .sched-view-btn.active{background:#fff;}

/* (b885) KPI tiles — Health-app style summary cards */
.home-kpi, .home-kpi.is-alert, .home-kpi.is-warn, .home-kpi.is-good{
  border:0;background:var(--surface);border-radius:var(--r-lg);padding:1rem 1.15rem 1.05rem;
}
.home-kpi:hover{transform:none;}
.home-kpi-icon, .home-kpi.is-alert .home-kpi-icon, .home-kpi.is-warn .home-kpi-icon, .home-kpi.is-good .home-kpi-icon{
  width:22px;height:22px;border-radius:6px;color:#fff;background:var(--sec);font-size:.8rem;
}
.home-kpi.is-alert .home-kpi-icon{background:var(--red);}
.home-kpi.is-warn  .home-kpi-icon{background:#ff9f0a;}
.home-kpi.is-good  .home-kpi-icon{background:#30d158;}
.home-kpi-icon svg{width:13px;height:13px;}
.home-kpi-lbl{text-transform:none;letter-spacing:-.005em;font-size:.86rem;font-weight:600;color:var(--sec);}
.home-kpi.is-alert .home-kpi-lbl{color:var(--red);}
.home-kpi.is-warn .home-kpi-lbl{color:#ff9f0a;}
.home-kpi.is-good .home-kpi-lbl{color:var(--green);}
.home-kpi-val{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:2.15rem;}
.home-kpi-sub{font-family:var(--ui);letter-spacing:0;font-size:.8rem;}
.dash-ai-empty{border:0;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--depth-1);}


/* (b885) Sentence case everywhere: every eyebrow label that was set in
   letter-spaced caps (generated from the stylesheet, excluding month
   and weekday stamps, which Apple keeps in caps). */
.aj-card-arch-pill,.aj-color-key-label,.aj-sort-bar,.aj-sort-btn,.aj-sort-group-label,.anb2-browse-cat,.anb2-details summary,.anb2-sec-h,.anly-kpi-lbl,.anly-tile-title,.auth-label,.avf-mark,.avf-rest,.bcp-conflict-status,.bd-char-role,.bd-scene-head,.bd-sec h4,.bd-shot-scene,.bd-tone-lbl,.bi-cat-name,.bill-plan-flag,.bill-plan-tag,.borrow-section-title,.calc-ar-cap,.calc-badge,.calc-card-lbl,.cat-section-head,.cd-add-form-head,.ce-co-primary,.ch-card-title,.chat-bubble-text .md-table th,.chat-mut-line-label,.chat-mut-title,.ci-badge,.co-hygiene-title,.co-jobs-head,.crm-activity-title,.cron-detail-label,.dash-act-date-rule span,.dash-day-stats-badge,.dash-event-group-head,.dash-prof-cell-label,.dash-prof-hero-label,.dash-prof-section-label,.dash-sum-label,.day-switcher-label,.dcb-sat-chip,.dgm-card-blank span,.dgm-f label,.dgm-gear-cat,.dgm-insp-head,.dgm-jobpick-sec,.dgm-lbl,.dgm-lbl-edit,.dgm-lbl-inline,.dgm-marker,.dgm-power-tbl th,.dgm-tool-lbl,.diag-section-head,.diag-stat-label,.diag-table th,.dic-label,.dir-act-divider,.dir-arch-pill,.dir-avatar,.dir-role-head,.dir-table thead th,.dir-toolbar-label,.dp-result-head,.em-hdr-key,.er-meta-label,.est-form-section-title,.est-side-card-title,.est-table thead th,.est-td-num,.exi-acct-title,.exi-diag-format-label,.exi-diag-skipped .exi-diag-label,.exi-review-table th,.exp-bulk-field,.exp-chip-tax,.exp-dupes-keep-pill,.exp-filter-grp label,.exp-table thead th,.exp-tax-kind,.fin-drill-partial,.fin-kpi-label,.fmr-meta label,.gear-cat-name,.gear-gap-cat,.gear-gaps-h,.gl-row-status,.gl-section-head,.gr-cat,.gr-head-row,.gr-tools-label,.gswitch-menu-head,.gtable thead th,.home-day-gap-lbl,.home-day-type,.home-day-when,.home-digest-sec-head,.home-hero-date,.home-hero-next-rel,.home-hero-type-badge,.home-inbox-group-lbl,.home-inv-pill,.home-kpi-lbl,.ici-day-table-head,.id-li-head > span,.id-recipient-row .id-rcp-badge,.id-stat-lbl,.igd-stat-label,.iie-pkg-role,.ilog-pill,.inv-item-cond,.inv-sum-sort-lbl,.inv-th,.invo-bit-label,.invo-ca-quiet-head,.invo-cc-tag,.invo-dash-table-summary .invo-bit-label,.invo-dash-tax-hero-label,.invo-dash-tax-mini-label,.invo-dash-tax-period,.invo-fc-phead,.invo-fc-tl-head,.invo-fc-tl-legend,.invo-fx-pill,.invo-li-field label,.invo-li-table thead th,.invo-mbar-label,.invo-pill,.invo-pv-eyebrow,.invo-pv-items thead th,.invo-pv-numbers .l,.invo-pv-paid-badge,.invo-rev-stat-lbl,.invo-send-share-card .invo-ss-label,.invo-table thead th,.iom-section-label,.ir-section-head h4,.jc-status-pill,.job-ta-arch,.job-view-label,.jsh-active-banner,.jt-arch-pill,.jt-group-label,.jt-table thead th,.md-loc-group-label,.mh-dg-lbl,.mh-section-head,.mh-today-rel,.mj-phase-label,.mj-sc-title,.ml-sum-label,.ml-trend-lbl,.mscat,.mtp-sec-head,.nrail-fly-head,.onb-fg label,.onb-h1,.onb-h2,.pg-cat-head,.pg-result-head,.phase-kv-k,.pipe-kpi-lbl,.pipe-section-title,.pipe-stage-label,.pkg-member-qty label,.pkg-pull-badge,.ps-label,.rail-section-head,.rate-card-field label,.rate-card-title,.rd-block-head,.rd-chips-label,.req-group-head,.req-status-label,.ri-job-date-bot,.ri-job-date-top,.rp-bk-group-head,.rp-gear-cat-head,.rp-unavail-tag,.rsort-btn,.sc-sec-kind,.scan-log-badge,.scp-scope-lab,.scp-src-tag,.scr-assess-bottom-lbl,.scr-assess-meta-lbl,.scr-ctx-lbl,.scr-ctx-lens-lbl,.scr-detail-status-lbl,.scr-group-label,.scr-mb-brief-h,.scr-mb-editsec-h,.scr-ov-card-title,.scr-ov-lens,.scr-ov-metric-l,.scr-share-h,.scr-share-section .bd-scene-dn,.scr-share-section .bd-scene-heading,.scr-sw-col h5,.scr-th,.scrch-impact-lbl,.scrch-kind,.scrver-badge,.set-group-title,.set-nav-sec-label,.sht-facet-lab,.sht-ins-reck,.sht-lb-seclab,.sht-lb-tagflow .sht-lb-tagkind,.sht-lb-tagkind,.sht-side-head,.sht-side-lab,.stat-l,.stmt-aging-title,.stmt-pay-instr-title,.su-badge,.su-new-group-card label,.su-sub-head,.su-topbar-title,.t2125-cat-table thead th,.t2125-veh-stat-label,.tag-filter-label,.tag-panel-title,.tag-picker-label,.tax-rep-period-label,.tax-rep-stat-label,.tax-rep-summary-hero-label,.tax-rep-table thead th,.td-info-key,.td-section-label,.td-section-title,.tool-badge,.tool-qgroup-theme,.tool-recce-sec-title,.tool-table thead th,.tools-section-label,.truck-cat-header,.truck-picker-section,.truck-section-div-label,.tsl-edit-flabel,.tsl-edit-head>div,.ud-pill,.ud-stat-label,.user-perm-label,.user-perms-head,.user-role-head,.user-you-tag,.users-table th,table.invo-pv-totals td.t-label{
  text-transform:none!important;letter-spacing:-.003em!important;
}

/* (b885) One segmented control, everywhere */
.jobs-tabs, .gear-tabs, .fin-tabs, .dir-tabs, .set-tabs, .cal-view-tabs, .tasks-toolbar, .sched-view-toggle{
  background:var(--fill2)!important;border:0!important;border-radius:9px!important;
  padding:2px!important;gap:0!important;box-shadow:none!important;
}
.jobs-tab, .gear-tab, .fin-tab, .dir-tab, .set-tab, .cal-view-tab, .tasks-filter, .sched-view-btn{
  border-radius:7px!important;color:var(--text)!important;border:0!important;
  font-weight:500;background:transparent;
}
.jobs-tab:hover:not(.active), .gear-tab:hover:not(.active), .fin-tab:hover:not(.active), .dir-tab:hover:not(.active), .set-tab:hover:not(.active), .cal-view-tab:hover:not(.active), .tasks-filter:hover:not(.active), .sched-view-btn:hover:not(.active){background:transparent!important;opacity:.7;}
.jobs-tab.active, .gear-tab.active, .fin-tab.active, .dir-tab.active, .set-tab.active, .cal-view-tab.active, .tasks-filter.active, .sched-view-btn.active{
  background:var(--surface3)!important;color:var(--text)!important;font-weight:600!important;
  box-shadow:0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04)!important;
}
html.light .jobs-tab.active, html.light .gear-tab.active, html.light .fin-tab.active, html.light .dir-tab.active, html.light .set-tab.active, html.light .cal-view-tab.active, html.light .tasks-filter.active, html.light .sched-view-btn.active{background:#fff!important;}
.jobs-tab.active *, .gear-tab.active *, .fin-tab.active *, .dir-tab.active *, .set-tab.active *, .cal-view-tab.active *, .tasks-filter.active *, .sched-view-btn.active *{color:inherit;}

/* (b885) Calendar — hairline grid, Apple Calendar today marker */
.cal-header{background:transparent;border:0;padding:0 0 .2rem;}
.cal-title{font-family:var(--display);font-size:1.45rem;font-weight:700;letter-spacing:-.022em;}
/* (b887) Month/year title leads on the left; view tabs + prev/today/next
   sit together on the right (and stay right-aligned when they wrap). */
.cal-header{justify-content:flex-end;}
.cal-title{margin-right:auto;padding-left:0;}
.cal-nav{background:var(--fill2);border:0;border-radius:9px;padding:2px;}
.cal-nav-btn{border-radius:7px;color:var(--text);}
.cal-nav-btn:hover{background:var(--fill);}
.cal-nav-today{border:0;border-radius:7px;}
.cal-scroll-wrap{border:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--depth-1);}
.cal-grid{border:0;}
.cal-day-label{
  background:transparent;border-right:0;border-bottom:.5px solid var(--sep);
  font-size:.7rem;font-weight:600;letter-spacing:.04em;color:var(--text3);
}
.cal-cell{background:transparent;border-right:.5px solid var(--sep);}
.cal-week-section{border-bottom:.5px solid var(--sep);}
.cal-week-section:last-child{border-bottom:0;}
.cal-week-dates > .cal-cell:last-child{border-right:0;}
.cal-cell.other-month{background:transparent;}
.cal-cell.other-month .cal-cell-date{opacity:.3;}
.cal-cell.today{background:transparent;box-shadow:none;}
.cal-cell-date{font-weight:500;color:var(--text);font-size:.82rem;width:24px;height:24px;}
.cal-cell.today .cal-cell-date{background:#ff453a;color:#fff;font-weight:700;}
html.light .cal-cell.today .cal-cell-date{background:#ff3b30;}
.cal-event-block{border:0!important;border-radius:5px;font-weight:600;padding:.2rem .5rem;}
.cal-event-block:hover{transform:none;filter:brightness(1.12);}
.cal-legend{background:transparent;border:0;padding:.2rem .1rem;gap:1.1rem;}
.cal-leg-dot{border-radius:50%;width:9px;height:9px;}
.cal-leg-item{color:var(--text3);}

/* (b885) Settings — macOS System Settings */
.set-navitem{border-radius:7px;color:var(--text);font-weight:500;}
.set-navitem:hover:not(.active){background:var(--fill2);}
.set-navitem.active{background:var(--accent);color:#fff;}
.set-group{border:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--depth-1);}
.set-group-head{border-bottom:0;padding-bottom:0;margin-bottom:.85rem;}
.set-group-title{font-size:1.02rem;font-weight:650;color:var(--text);letter-spacing:-.012em!important;}
.set-group-icon{background:var(--accent);color:#fff;border-radius:7px;width:24px;height:24px;font-size:.85rem;}
.set-group-icon svg{width:14px;height:14px;}
.set-group.danger{border:0;background:var(--surface);}
.set-group.danger .set-group-icon{background:var(--red);color:#fff;}
.set-field label{color:var(--text2);font-weight:500;}
.set-field input:not([type=checkbox]):not([type=radio]):not([type=range]),
.set-field select, .set-field textarea{
  background:var(--fill2)!important;border:0!important;border-radius:9px!important;color:var(--text);
}
.set-field input:focus, .set-field select:focus, .set-field textarea:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent)!important;
}

/* (b885) Finances */
.fin-kpi-card{border:0;border-radius:var(--r-lg);box-shadow:var(--depth-1);}
.fin-kpi-card::before{
  left:1.05rem;top:.95rem;bottom:auto;width:8px;height:8px;border-radius:50%;
}
.fin-kpi-card .fin-kpi-label{padding-left:1rem;}
.fin-section{border:0;border-radius:var(--r-lg);box-shadow:var(--depth-1);}
.fin-section-head h3{font-family:var(--display);font-weight:650;letter-spacing:-.015em;}
.fin-tabs-wrap{background:transparent;border:0;}

/* (b885) Tasks — Reminders-style */
.tasks-list{gap:.6rem;}
.tasks-row, .tasks-row.overdue, .tasks-row.today, .tasks-row.soon{
  background:var(--surface);border:0;border-radius:var(--r);box-shadow:var(--depth-1);
  padding:.8rem .95rem;
}
.tasks-row-check{
  appearance:none;-webkit-appearance:none;width:1.25rem;height:1.25rem;border-radius:50%;
  border:1.5px solid var(--border3);background:transparent;display:grid;place-items:center;margin-top:.02rem;
  transition:background .15s,border-color .15s;
}
.tasks-row.overdue .tasks-row-check{border-color:var(--red);}
.tasks-row-check:checked{background:var(--accent);border-color:var(--accent);}
.tasks-row-check:checked::after{content:"";width:.34rem;height:.62rem;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);}
.tasks-counter{border:0;background:var(--fill);color:var(--text2);font-weight:500;}
.tasks-counter-red{background:var(--red-dim);color:var(--red);}
.tasks-counter-accent{background:var(--accent-dim);color:var(--accent);}

/* (b885) Footer */
.avf-rule{background:var(--sep);height:.5px;}
.avf-brand::before{display:none;}

/* (b885) Mobile calendar — iOS Calendar */
@media (max-width:700px){
  .mc-title{font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:-.03em;}
  .mc-tabs{background:var(--fill2);border:0;border-radius:9px;padding:2px;gap:0;}
  .mc-tab{color:var(--text);border-radius:7px;padding:.42rem .8rem;}
  .mc-tab.active{background:var(--surface3);color:var(--text);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);}
  html.light .mc-tab.active{background:#fff;}
  .mc-nav-btn, .mc-nav-today{border:0;background:var(--fill2);color:var(--accent);font-weight:600;}
  .mc-nav-btn:active, .mc-nav-today:active{background:var(--fill);}
  .mc-week-label, .mc-month-label{
    text-transform:none;letter-spacing:-.01em;font-size:1.15rem;font-weight:700;color:var(--text);
    font-family:var(--display);margin-top:0;
  }
  .mc-month-grid{border:0;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--depth-1);gap:.1rem;padding:.55rem .4rem;}
  .mc-month-dow{font-weight:600;letter-spacing:0;}
  .mc-month-cell{border-radius:50%;aspect-ratio:auto;min-height:44px;padding:.15rem 0;}
  .mc-month-cell.has-events:not(.is-today){background:transparent;}
  .mc-month-cell.is-today{background:transparent;}
  .mc-month-num{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:1rem;font-weight:400;}
  .mc-month-cell.is-today .mc-month-num{background:#ff453a;color:#fff;font-weight:600;}
  html.light .mc-month-cell.is-today .mc-month-num{background:#ff3b30;}
  .mc-month-cell.is-today .mc-dot{box-shadow:none;}
  .mc-month-dots{margin-top:0;}
  .mc-day{border:0;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--depth-1);}
  .mc-day.is-today{border:0;box-shadow:inset 0 0 0 1.5px #ff453a;}
  .mc-day.is-today .mc-day-name{color:#ff453a;}
  .mc-day-today-pill{background:#ff453a;letter-spacing:0;text-transform:none;border-radius:999px;padding:.12rem .5rem;}
  .mc-chip{
    border:0;background:transparent;border-radius:10px;padding:.5rem .55rem .5rem 1rem;
  }
  .mc-chip::before{
    content:"";position:absolute;left:.4rem;top:.5rem;bottom:.5rem;width:3px;border-radius:3px;background:var(--mcc,var(--text3));
  }
  .mc-chip-shoot, .mc-chip-prep, .mc-chip-wrap, .mc-chip-travel, .mc-chip-post, .mc-chip-hold,
  .mc-chip-blackout, .mc-chip-event, .mc-chip-external, .mc-chip-pending, .mc-chip-approved{border-left:0;}
  .mc-chip-shoot{--mcc:var(--cal-shoot,#0a84ff)} .mc-chip-prep{--mcc:var(--cal-prep,#20b8a0)}
  .mc-chip-wrap{--mcc:var(--cal-wrap,#9060d8)} .mc-chip-travel{--mcc:var(--cal-travel,#e05848)}
  .mc-chip-post{--mcc:var(--cal-post,#4a7de8)} .mc-chip-hold{--mcc:#ff9f0a}
  .mc-chip-blackout{--mcc:#ff453a} .mc-chip-event{--mcc:#64d2ff}
  .mc-chip-external{--mcc:var(--cf-color,#bf5af2)}
  .mc-chip-pending{--mcc:#ff9f0a} .mc-chip-approved{--mcc:#30d158}
  .mc-chip:active{background:var(--fill2);transform:none;}
}

/* (b885) Truck picker — one grouped list per section */
@media (max-width:700px){
  .mtp-card-datebox{background:transparent!important;border:0!important;}
  .mtp-card-accent{display:none;}
  .mtp-card{box-shadow:var(--depth-1);}
}

/* (b885) Dashboard lists → grouped list; bars → capsule meters */
.dash-list{gap:0;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--depth-1);}
.dash-row{border:0;border-radius:0;background:transparent;padding:.7rem 1rem;position:relative;}
.dash-row + .dash-row::before{content:"";position:absolute;top:0;left:1rem;right:0;height:.5px;background:var(--sep);}
.dash-row:hover{background:var(--fill2);transform:none;border:0;}
.dash-row-title{font-weight:600;}
.dash-bar-track{background:var(--fill2);border-radius:999px;border:0;}
.dash-bar-fill{border-radius:999px;background:var(--sec,var(--accent));}

/* (b885) light-theme specificity fixes */
html.light .nrail-item-wrap.active>.nrail-item{color:var(--text);}
html.light .nrail-item-wrap.active>.nrail-item .nrail-ico{color:var(--rt);}
html.light .nrail-item-wrap.active>.nrail-item .nrail-chev{color:var(--text3);}
html.light .hdr-feedback{background:transparent;}
html.light .hdr-feedback:hover{background:var(--fill2);}

/* ═══════════════════════════════════════════════════════════════════
   (b888) MOTION SYSTEM — one layer, last in the cascade.
   Principles:
   • One vocabulary: a decelerating "ease-out-expo" for things arriving,
     a quick "ease-in" for things leaving, and a gentle spring (slight
     overshoot) for things that are picked up / moved by the user.
   • Arrivals are 180–320ms, exits are ~60% of that. Nothing blocks input.
   • Only opacity/transform/scale/translate animate — never layout.
   • Never put a transform on anything that has position:fixed children
     for longer than an entrance (see b886: transforms, filters and
     backdrop-filter re-parent fixed descendants). Full-screen editors
     therefore fade only.
   • prefers-reduced-motion turns all of it off (bottom of this layer).
   JS half lives in grip-app.js, search "(b888) Motion".
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* (b889) Slower and softer: a quint-out tail reads as a glide rather
     than a snap; distances roughly tripled so the direction is legible. */
  --ease-out:cubic-bezier(.22,1,.36,1);       /* quint-out: arrive and settle */
  --ease-view:cubic-bezier(.2,.9,.25,1);      /* long, even deceleration for page moves */
  --ease-in:cubic-bezier(.4,0,1,1);           /* leave quickly */
  --ease-io:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.36,.64,1);      /* small overshoot */
  --dur-1:.18s; --dur-2:.3s; --dur-3:.45s; --dur-4:.6s;
  --dur-view:.7s;   /* between sections */
  --dur-swap:.55s;  /* within a section */
  --slide-y:44px;   /* vertical travel, section change */
  --slide-x:72px;   /* horizontal travel, sub-tab change */
  interpolate-size:allow-keywords;             /* lets details/heights animate to auto (Chromium) */
}

@keyframes cb-fade-in   {from{opacity:0}to{opacity:1}}
@keyframes cb-fade-out  {from{opacity:1}to{opacity:0}}
@keyframes cb-rise      {from{opacity:0;translate:0 calc(var(--cb-vdir,1) * var(--slide-y))}to{opacity:1;translate:none}}
@keyframes cb-rise-card {from{opacity:0;translate:0 calc(var(--cb-vdir,1) * 28px)}to{opacity:1;translate:none}}
@keyframes cb-slide-x   {from{opacity:0;translate:calc(var(--cb-dir,1) * var(--slide-x)) 0}to{opacity:1;translate:none}}
@keyframes cb-pop-in    {from{opacity:0;scale:.9;translate:0 28px}to{opacity:1;scale:none;translate:none}}
@keyframes cb-pop-out   {from{opacity:1;scale:1}to{opacity:0;scale:.93;translate:0 18px}}
@keyframes cb-sheet-in  {from{translate:0 100%}to{translate:none}}
@keyframes cb-sheet-out {from{translate:0 0}to{translate:0 100%}}
@keyframes cb-drop-in   {from{opacity:0;scale:.94;translate:0 -32px}to{opacity:1;scale:none;translate:none}}
@keyframes cb-tick      {0%{scale:none}40%{scale:.82}100%{scale:none}}

/* ── Views ─────────────────────────────────────────────────────────
   A view arrives with a short fade + rise. Keyframes restart only when
   .view goes display:none → flex, i.e. on a real view change; re-renders
   of the same view don't re-animate. Sub-tab changes inside a view are
   animated from JS (.cb-swap on the content under the tab bar). */
/* fill-mode is `backwards`, never `both`: a retained end-state of
   translate:0 0 is not `none`, and would permanently make the view a
   containing block for its fixed children (the b886 bug class). */
/* (b890) Section change = vertical — from below, or from above when the
   new section sits higher in the rail (--cb-vdir ±1, set by JS).
   (b889) Section change = vertical; sub-tab change = horizontal, with
   --cb-dir (±1) set from tab order so content enters from the side
   you moved towards. */
.view.active{animation:cb-rise var(--dur-view) var(--ease-view) backwards;}
.view.active.cb-lateral{animation:cb-slide-x var(--dur-swap) var(--ease-view) backwards;}
.cb-swap{animation:cb-slide-x var(--dur-swap) var(--ease-view) backwards;}
.view.cb-clip-x{overflow-x:clip;}
/* Cards on dashboard-style pages settle in with a short stagger on
   arrival only (b892: marked per element by JS, see .cb-cascade). */
/* (b892) card cascade moved to .cb-cascade in the b891 layer */

/* ── Modals ────────────────────────────────────────────────────────
   Backdrop fades, card pops (scale from 94% with a hint of rise). The
   exit is a detached clone (.cb-ghost-ov, built by JS) so no code that
   hides overlays synchronously has to change. */
.overlay{animation:cb-fade-in var(--dur-2) var(--ease-out) backwards;}
.overlay > .modal{animation:cb-pop-in var(--dur-4) var(--ease-out) backwards;transform-origin:50% 60%;}
.overlay.cb-swap{animation:none;}           /* modal → modal handoff: backdrop stays put */
.overlay .modal-x{animation:cb-fade-in var(--dur-2) var(--ease-out) .38s backwards;}
/* The dim lives on ::before so it can fade on its own — opacity on the
   ghost root would also fade the card (a sliding phone sheet turned
   see-through). */
.cb-ghost-ov{
  position:fixed;inset:0;z-index:599;display:flex;align-items:center;justify-content:center;
  pointer-events:none;isolation:isolate;
}
.cb-ghost-ov::before{
  content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);
  animation:cb-fade-out var(--dur-3) var(--ease-io) forwards;
}
html.light .cb-ghost-ov::before{background:rgba(0,0,0,.22);}
.cb-ghost-ov.cb-bare::before{display:none;}
.cb-ghost-ov > .modal{animation:cb-pop-out var(--dur-3) var(--ease-io) forwards;}
.cb-ghost-ov .modal-x{display:none!important;}
/* Spotlight search drops from above rather than rising */
#m-global-lookup > .modal{animation-name:cb-drop-in;transform-origin:50% 0;}
@media (max-width:700px){
  /* Phones: modals are bottom sheets — slide, don't pop */
  .overlay > .modal,#m-global-lookup > .modal{animation:cb-sheet-in var(--dur-view) var(--ease-view) backwards;}
  .cb-ghost-ov{align-items:flex-end;}
  .cb-ghost-ov > .modal{animation:cb-sheet-out var(--dur-4) var(--ease-io) forwards;}
}

/* ── Drawers & sheets ─────────────────────────────────────────────── */
.drawer{transition:transform var(--dur-4) var(--ease-out);}
.drawer:not(.open){transition-duration:var(--dur-3);transition-timing-function:var(--ease-io);}
.drawer-overlay{transition:opacity var(--dur-3) var(--ease-out);}
.chat-drawer{transition:transform var(--dur-4) var(--ease-out)!important;}

/* ── Popovers & menus ─────────────────────────────────────────────
   Enter via @starting-style (fires on insertion AND on display:none →
   shown, however it's toggled). Menus that close with [hidden] or a
   class also get an exit, via display's discrete transition. Browsers
   without these features simply snap, as before. */
.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu{
  transform-origin:top right;
  transition:opacity var(--dur-2) var(--ease-out),scale var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-out),
             display var(--dur-2) allow-discrete,overlay var(--dur-2) allow-discrete;
}
.hdr-more-menu{transform-origin:top left;}
:is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu)[hidden]{
  opacity:0;scale:.96;translate:0 -4px;
  transition-duration:var(--dur-1);transition-timing-function:var(--ease-in);
}
@starting-style{
  :is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu):not([hidden]){
    opacity:0;scale:.96;translate:0 -4px;
  }
}
.scr-status-menu,#contact-popover,.invo-job-picker-dropdown,.addr-ac-box{
  animation:none;transform-origin:top left;
  transition:opacity var(--dur-2) var(--ease-out),scale var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-out);
}
@starting-style{
  .scr-status-menu,#contact-popover,.invo-job-picker-dropdown,.addr-ac-box{opacity:0;scale:.97;translate:0 -4px;}
}

/* Rail flyouts: slide out from the rail edge, and linger on the way out */
.nrail-fly{
  display:none;opacity:0;translate:-6px 0;scale:.98;transform-origin:left top;
  transition:opacity var(--dur-1) var(--ease-in),translate var(--dur-1) var(--ease-in),scale var(--dur-1) var(--ease-in),
             display var(--dur-1) allow-discrete;
}
.nrail-item-wrap.fly-open .nrail-fly{
  display:block;opacity:1;translate:none;scale:none;
  transition-duration:var(--dur-2);transition-timing-function:var(--ease-out);
}
@starting-style{ .nrail-item-wrap.fly-open .nrail-fly{opacity:0;translate:-6px 0;scale:.98;} }
.nrail-fly-item{transition:background-color var(--dur-1),color var(--dur-1);}
/* Pinned rail renders the active section's subs inline — no motion there */
html.rail-on.rail-pinned .nrail-item-wrap.active .nrail-fly{opacity:1;translate:none;scale:none;transition:none;}

/* Rail expand on hover: width eases, labels follow a beat later */
html.rail-on .nrail{transition:width var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out);}
.nrail-label,.nrail-chev{transition:opacity var(--dur-2) var(--ease-out);}
html.rail-on .nrail:hover .nrail-label,html.rail-on .nrail:hover .nrail-chev{transition-delay:.05s;}
.nrail-item{transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);}
.nrail-item .nrail-ico svg{transition:scale var(--dur-3) var(--spring);}
.nrail-item:active .nrail-ico svg{scale:.86;transition-duration:var(--dur-1);}

/* ── Segmented controls ───────────────────────────────────────────
   JS glides a pill (.cb-seg-pill) from the old tab to the new one; the
   real .active background is hidden only while it travels. */
:is(.jobs-tabs,.gear-tabs,.fin-tabs,.dir-tabs,.set-tabs,.cal-view-tabs,.tasks-toolbar,.sched-view-toggle).cb-seg-moving{position:relative;isolation:isolate;}
.cb-seg-moving :is(.jobs-tab,.gear-tab,.fin-tab,.dir-tab,.set-tab,.cal-view-tab,.tasks-filter,.sched-view-btn).active{
  background:transparent!important;box-shadow:none!important;
}
.cb-seg-pill{
  position:absolute;z-index:-1;pointer-events:none;border-radius:7px;
  background:var(--surface3);box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);
  transition:left var(--dur-3) var(--spring),top var(--dur-3) var(--spring),width var(--dur-3) var(--spring),height var(--dur-3) var(--spring);
}
html.light .cb-seg-pill{background:#fff;}
:is(.jobs-tab,.gear-tab,.fin-tab,.dir-tab,.set-tab,.cal-view-tab,.tasks-filter,.sched-view-btn){
  transition:color var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out);
}

/* ── Press feedback ───────────────────────────────────────────────
   `scale` composes with any existing transform, so hover lifts etc.
   keep working. Release uses the spring. */
.btn,.hdr-search,.hdr-feedback,.bnav-tab,.home-action-btn,.nrail-pin{
  transition:background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-2),
             filter var(--dur-1),opacity var(--dur-1),scale var(--dur-3) var(--spring);
}
.btn:active:not(:disabled),.hdr-search:active,.hdr-feedback:active,.home-action-btn:active,.nrail-pin:active{
  scale:.965;transition-duration:var(--dur-1),var(--dur-1),var(--dur-1),var(--dur-1),var(--dur-1),var(--dur-1),.08s;
}
/* Bottom tab bar: the icon of the tab you just landed on ticks */
.bnav-tab.active :is(svg,.bnav-ico){animation:cb-tick var(--dur-3) var(--spring);}

/* ── Toasts ───────────────────────────────────────────────────────── */
.toast{animation:cb-pop-in var(--dur-3) var(--spring) backwards;transform-origin:50% 100%;}
.toast.cb-out{animation:cb-pop-out var(--dur-2) var(--ease-in) forwards;}
#toast-rack > .toast{transition:translate var(--dur-3) var(--ease-out);}

/* ── Disclosure ───────────────────────────────────────────────────── */
details::details-content{
  block-size:0;overflow-y:clip;
  transition:block-size var(--dur-3) var(--ease-out),content-visibility var(--dur-3) allow-discrete;
}
details[open]::details-content{block-size:auto;}
summary::marker,summary::-webkit-details-marker{transition:rotate var(--dur-2) var(--ease-out);}

/* ── Full-screen layers: fade only (they host fixed children) ───── */
.dgm-editor,.cs-editor,.sht-lb,.scr-mb-lightbox{transition:opacity var(--dur-3) var(--ease-out);}
@starting-style{ .dgm-editor,.cs-editor,.sht-lb,.scr-mb-lightbox{opacity:0;} }

/* ── Reduced motion: everything above off ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  /* Transitions go instant everywhere; our entrance/exit keyframes are
     dropped. Loading spinners (their own keyframes) keep running. */
  *,*::before,*::after,::details-content{transition-duration:.001ms!important;transition-delay:0s!important;}
  .view.active,.cb-swap,.cb-cascade,.cb-cascade-row,.overlay,.overlay > .modal,.overlay .modal-x,
  .cb-ghost-ov::before,.cb-ghost-ov > .modal,.toast,.toast.cb-out,.bnav-tab.active *{animation:none!important;}
}

/* ═══════════════════════════════════════════════════════════════════
   (b891) MOTION, PART 2 — "fancier"
   Builds on the b888–b890 layer above:
   • Real springs via linear() (generated from a damped-spring model):
     --spring-soft ≈4% overshoot for surfaces, --spring-bouncy ≈12%
     for small things you act on (pills, toasts, menus, switches).
   • New pages arrive with depth (scale) and focus (blur).
   • Rows and cards cascade in; the rail's active highlight glides
     between sections.
   (b892) Removed at Dan's request: the outgoing-page crossfade, the
   sub-tab cross-slide snapshot and KPI count-ups. Cascades are now
   marked per element by JS (.cb-cascade / .cb-cascade-row) on the
   nodes present at arrival only — scoping them to a page class made
   every node rebuilt by a later data refresh replay its entrance,
   which flashed content on Jobs, Gear, Finances, Tasks and People.
   Blur and scale are applied only while animating (fill: backwards /
   removed on end) — see the b886/b888 notes on fixed descendants.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --spring-soft:linear(0, 0.034, 0.117, 0.229, 0.353, 0.477, 0.593, 0.696, 0.785, 0.858, 0.916, 0.96, 0.992, 1.014, 1.028, 1.035, 1.038, 1.038, 1.035, 1.031, 1.026, 1.021, 1.017, 1.013, 1.009, 1.006, 1.004, 1.002, 1.001, 1, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999, 1);
  --spring-bouncy:linear(0, 0.028, 0.103, 0.208, 0.331, 0.461, 0.589, 0.708, 0.815, 0.906, 0.98, 1.038, 1.079, 1.107, 1.122, 1.126, 1.123, 1.114, 1.101, 1.085, 1.069, 1.053, 1.038, 1.024, 1.012, 1.003, 0.996, 0.99, 0.987, 0.985, 0.984, 0.984, 0.986, 0.987, 0.989, 0.991, 0.993, 0.995, 0.997, 0.998, 1, 1.001, 1.001, 1.002, 1);
  --spring:var(--spring-bouncy);   /* upgrade every b888 spring use */
  --dur-spring:.8s;
  --ease-leave:cubic-bezier(.4,0,.7,.2);
}

/* ── Pages: arrive with depth and focus ──────────────────────────── */
@keyframes cb-rise {
  from{opacity:0;translate:0 calc(var(--cb-vdir,1) * var(--slide-y));scale:.975;filter:blur(8px)}
  60% {filter:blur(0)}
  to  {opacity:1;translate:none;scale:none;filter:none}
}
@keyframes cb-slide-x {
  from{opacity:0;translate:calc(var(--cb-dir,1) * var(--slide-x)) 0;filter:blur(6px)}
  55% {filter:blur(0)}
  to  {opacity:1;translate:none;filter:none}
}
.view.active{transform-origin:50% 0;}



/* ── Cascades ─────────────────────────────────────────────────────
   Cards (JS-indexed) and list rows (nth-child) settle in one after
   another on arrival; rows also cascade after a sub-tab swap. */
@keyframes cb-row-in{from{opacity:0;translate:0 calc(var(--cb-vdir,1) * 14px)}to{opacity:1;translate:none}}
@keyframes cb-row-in-x{from{opacity:0;translate:calc(var(--cb-dir,1) * 26px) 0}to{opacity:1;translate:none}}
.cb-cascade{
  animation:cb-rise-card var(--dur-spring) var(--spring-soft) backwards;
  animation-delay:calc(100ms + var(--cb-i,0) * 45ms);
}
.cb-cascade-row{
  animation:cb-row-in .55s var(--ease-view) backwards;
  animation-delay:calc(140ms + var(--cb-i,0) * 30ms);
}
.cb-cascade-row.cb-x{animation-name:cb-row-in-x;}

/* Cards you can click lift toward you */
:is(.home-kpi,.tool-card,.dgm-card,.mh-tile,.fin-report-card){
  transition:translate .45s var(--spring-soft),box-shadow .35s var(--ease-out),background-color .2s;
}
@media (hover:hover){
  :is(.home-kpi,.tool-card,.dgm-card,.mh-tile,.fin-report-card):hover{
    translate:0 -3px;box-shadow:0 10px 30px rgba(0,0,0,.22);
  }
}

/* ── Modals: spring + focus pull ──────────────────────────────────── */
@keyframes cb-pop-in{
  from{opacity:0;scale:.88;translate:0 36px;filter:blur(6px)}
  35% {opacity:1;filter:blur(0)}
  to  {opacity:1;scale:none;translate:none;filter:none}
}
@keyframes cb-backdrop-in{
  from{background-color:rgba(0,0,0,0);-webkit-backdrop-filter:blur(0) saturate(100%);backdrop-filter:blur(0) saturate(100%)}
}
.overlay{animation:cb-backdrop-in .5s var(--ease-out) backwards;}
.overlay > .modal{animation:cb-pop-in var(--dur-spring) var(--spring-soft) backwards;}
@keyframes cb-pop-out{to{opacity:0;scale:.9;translate:0 24px;filter:blur(4px)}}
@keyframes cb-drop-in{
  from{opacity:0;scale:.92;translate:0 -44px;filter:blur(6px)}
  35% {opacity:1;filter:blur(0)}
  to  {opacity:1;scale:none;translate:none;filter:none}
}
@media (max-width:700px){
  .overlay > .modal,#m-global-lookup > .modal{animation:cb-sheet-in .7s var(--spring-soft) backwards;}
}

/* ── Menus & flyouts: spring, focus, and a cascading item list ───── */
:is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu){
  transition:opacity .22s var(--ease-out),scale .55s var(--spring-bouncy),translate .55s var(--spring-bouncy),filter .25s var(--ease-out),
             display .22s allow-discrete,overlay .22s allow-discrete;
}
:is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu)[hidden]{
  opacity:0;scale:.9;translate:0 -8px;filter:blur(4px);
  transition-duration:.18s;transition-timing-function:var(--ease-in);
}
@starting-style{
  :is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu):not([hidden]){
    opacity:0;scale:.9;translate:0 -8px;filter:blur(4px);
  }
}
@keyframes cb-item-in{from{opacity:0;translate:calc(var(--cb-ix,0px)) calc(var(--cb-iy,-6px))}}
:is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu):not([hidden]) > *{
  animation:cb-item-in .4s var(--ease-out) backwards;
}
.nrail-item-wrap.fly-open .nrail-fly > *{
  --cb-ix:-10px;--cb-iy:0px;
  animation:cb-item-in .42s var(--ease-out) backwards;
}
:is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu,.nrail-fly) > :nth-child(1){animation-delay:.03s}
:is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu,.nrail-fly) > :nth-child(2){animation-delay:.06s}
:is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu,.nrail-fly) > :nth-child(3){animation-delay:.09s}
:is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu,.nrail-fly) > :nth-child(4){animation-delay:.12s}
:is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu,.nrail-fly) > :nth-child(5){animation-delay:.15s}
:is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu,.nrail-fly) > :nth-child(6){animation-delay:.18s}
:is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu,.nrail-fly) > :nth-child(n+7){animation-delay:.21s}
.nrail-item-wrap.fly-open .nrail-fly{transition:opacity .22s var(--ease-out),translate .6s var(--spring-bouncy),scale .6s var(--spring-bouncy),display .18s allow-discrete;}
@starting-style{ .nrail-item-wrap.fly-open .nrail-fly{opacity:0;translate:-14px 0;scale:.94;} }
html.rail-on.rail-pinned .nrail-item-wrap.active .nrail-fly > *{animation:none;}

/* ── Rail: gliding active highlight ───────────────────────────────── */
.nrail-items.cb-rail-moving{position:relative;isolation:isolate;}
.cb-rail-moving .nrail-item-wrap.active > .nrail-item{background:transparent!important;}
.cb-rail-pill{
  position:absolute;z-index:-1;pointer-events:none;border-radius:8px;
  background:rgba(118,118,128,.24);
  transition:top .7s var(--spring-bouncy),height .7s var(--spring-bouncy),left .7s var(--spring-bouncy),width .7s var(--spring-bouncy);
}
html.light .cb-rail-pill{background:rgba(118,118,128,.14);}
.nrail-item-wrap.active > .nrail-item .nrail-ico svg{animation:cb-tick .6s var(--spring-bouncy);}

/* ── Segmented pill: bouncier, with a little stretch ──────────────── */
.cb-seg-pill{
  transition:left .7s var(--spring-bouncy),top .7s var(--spring-bouncy),width .7s var(--spring-bouncy),height .7s var(--spring-bouncy);
}

/* ── Toasts ───────────────────────────────────────────────────────── */
@keyframes cb-toast-in{
  from{opacity:0;scale:.7;translate:0 40px;filter:blur(8px)}
  30% {opacity:1;filter:blur(0)}
  to  {opacity:1;scale:none;translate:none;filter:none}
}
.toast{animation:cb-toast-in var(--dur-spring) var(--spring-bouncy) backwards;}
@keyframes cb-toast-out{to{opacity:0;scale:.85;translate:0 16px;filter:blur(6px)}}
.toast.cb-out{animation:cb-toast-out .32s var(--ease-leave) forwards;}
#toast-rack > .toast{transition:translate .6s var(--spring-soft);}

/* ── Press & release ──────────────────────────────────────────────── */
.btn,.hdr-search,.hdr-feedback,.bnav-tab,.home-action-btn,.nrail-pin{
  transition:background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-2),
             filter var(--dur-1),opacity var(--dur-1),scale .6s var(--spring-bouncy);
}
.btn:active:not(:disabled),.hdr-search:active,.hdr-feedback:active,.home-action-btn:active,.nrail-pin:active{scale:.94;}
.bnav-tab.active :is(svg,.bnav-ico){animation:cb-tick .6s var(--spring-bouncy);}
input[type=checkbox],input[type=radio]{transition:scale .5s var(--spring-bouncy);}
input[type=checkbox]:active,input[type=radio]:active{scale:.8;}

/* ── Reduced motion: part 2 off too ───────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .cb-rail-pill{display:none!important;}
  .view.active,.cb-cascade,.cb-cascade-row,.overlay,.overlay > .modal,.toast,
  .nrail-fly > *,.nrail-item-wrap.active > .nrail-item .nrail-ico svg,
  :is(.hdr-more-menu,.hdr-user-menu,.gswitch-menu,.su-more-menu,.gear-more-menu,.exp-more-menu,.sht-more-menu) > *{animation:none!important;}
  :is(.home-kpi,.tool-card,.dgm-card,.mh-tile,.fin-report-card):hover{translate:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   (b893) Add Gear → Fill from link
   ═══════════════════════════════════════════════════════════════════ */
.ia-import{
  margin:.1rem 0 1rem;padding:.55rem;border-radius:12px;
  background:var(--fill2,rgba(118,118,128,.12));border:.5px solid var(--sep,var(--border2));
  transition:box-shadow .3s var(--ease-out,ease),background-color .3s;
}
.ia-import.busy{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent);}
.ia-import-row{display:flex;align-items:center;gap:.5rem;}
.ia-import-ico{display:flex;color:var(--text3);flex-shrink:0;padding-left:.2rem;}
.ia-import-ico svg{width:17px;height:17px;}
#ia-import .ia-import-row input{flex:1;min-width:0;width:auto;background:transparent;border:0;box-shadow:none;padding:.35rem .2rem;font-size:.9rem;}
#ia-import .ia-import-row input:focus,#ia-import .ia-import-row input:focus-visible{outline:none;box-shadow:none!important;background:transparent;}
/* The whole bar carries the focus ring instead of the bare field. */
.ia-import:has(#ia-url:focus-visible){box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent);}
.ia-import-row .btn{flex-shrink:0;white-space:nowrap;}
.ia-import-status:empty{display:none;}
.ia-import-status{margin-top:.5rem;font-size:.82rem;color:var(--text2);}
.ia-import-status.busy{display:flex;align-items:center;gap:.5rem;padding:.2rem .25rem;color:var(--text2);}
.ia-import-status.err{padding:.25rem .3rem;color:var(--red,#ff453a);}
.ia-spin{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  border:2px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);
  animation:ia-spin .8s linear infinite;
}
@keyframes ia-spin{to{rotate:360deg}}
@keyframes ia-msg-in{from{opacity:0;translate:0 4px}}
.ia-msg-in{animation:ia-msg-in .35s var(--ease-out,ease) backwards;}
.ia-import-card{display:flex;gap:.75rem;align-items:flex-start;padding:.3rem .2rem .15rem;animation:cb-rise-card .5s var(--ease-out,ease) backwards;}
.ia-import-img{
  width:76px;height:76px;object-fit:contain;flex-shrink:0;border-radius:10px;
  background:#fff;border:.5px solid var(--sep,var(--border2));
}
.ia-import-body{flex:1;min-width:0;}
.ia-import-head{font-weight:600;color:var(--text);margin-bottom:.35rem;}
.ia-import-head a{color:var(--accent);text-decoration:none;}
.ia-import-head a:hover{text-decoration:underline;}
.ia-chips{display:flex;flex-wrap:wrap;gap:.3rem;}
.ia-chip{
  font-size:.72rem;font-weight:550;padding:.12rem .5rem;border-radius:999px;
  background:color-mix(in srgb,var(--green,#30d158) 16%,transparent);color:var(--green,#30d158);
}
.ia-chip::before{content:"✓ ";}
.ia-muted{color:var(--text3);font-size:.78rem;}
.ia-warn{margin-top:.4rem;color:var(--amber,#ff9f0a);font-size:.78rem;}
.ia-import-foot{margin-top:.45rem;color:var(--text3);font-size:.76rem;}
.ia-linkbtn{background:none;border:0;padding:0;margin-left:.35rem;color:var(--accent);font:inherit;cursor:pointer;}
.ia-linkbtn:hover{text-decoration:underline;}
.ia-field-hint{font-size:.74rem;color:var(--text3);min-height:1.1em;margin-top:.2rem;}
/* Fields the import just filled glow once */
@keyframes ia-filled{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent);}
  25% {box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent);}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent);}
}
.ia-filled{animation:ia-filled 1.4s var(--ease-out,ease) both;}
@media (prefers-reduced-motion:reduce){
  .ia-filled,.ia-import-card,.ia-msg-in{animation:none;}
  .ia-spin{animation-duration:1.6s;}
}

/* ═══════════════════════════════════════════════════════════════════
   (b894) Gear photos in admin — list thumbnails + detail header photo
   Photos sit on white (product shots are usually on white/transparent,
   and catalog images are flattened onto white).
   ═══════════════════════════════════════════════════════════════════ */
.inv-thumb{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#fff;border:.5px solid var(--sep,var(--border2));
}
.inv-thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.inv-thumb-card{width:52px;height:52px;border-radius:8px;align-self:center;margin:.45rem 0 .45rem .55rem;}
.inv-thumb-row{width:26px;height:26px;border-radius:6px;}
.inv-thumb-empty,.inv-thumb-missing{background:var(--fill2,rgba(118,118,128,.12));border-color:transparent;}
.inv-thumb-empty::after,.inv-thumb-missing::after{
  content:"";width:45%;height:45%;opacity:.35;background:currentColor;color:var(--text3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.inv-item.inv-has-thumb .inv-card-body{padding-left:.65rem;}
.inv-pkg-card-member .inv-thumb-row{width:22px;height:22px;border-radius:5px;}

/* Detail header photo */
.igd-photo{
  position:relative;flex-shrink:0;width:64px;height:64px;padding:0;border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:.5px solid var(--sep,var(--border));color:var(--text2);
}
.igd-photo.has-img{background:#fff;}
.igd-photo img{width:100%;height:100%;object-fit:contain;display:block;}
.igd-photo-initials{font-weight:700;font-size:1.25rem;letter-spacing:.04em;}


/* (b894) Phone Gear list thumbnail */
.inv-thumb-mobile{width:44px;height:44px;border-radius:9px;align-self:center;margin:.4rem 0 .4rem .6rem;}
.mi-row .inv-thumb-mobile + .mi-row-body{padding-left:.7rem;}

/* (b895) Edit Item → Photo */
.iie-photo{margin:.1rem 0 1rem;}
.iie-photo:empty{display:none;}
.iie-photo-row{display:flex;gap:.9rem;align-items:flex-start;padding:.6rem;border-radius:12px;background:var(--fill2,rgba(118,118,128,.12));border:.5px solid var(--sep,var(--border2));}
.iie-photo-img{position:relative;flex-shrink:0;width:88px;height:88px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--surface2);border:.5px solid var(--sep,var(--border));}
.iie-photo-img.has-img{background:#fff;}
.iie-photo-img img{width:100%;height:100%;object-fit:contain;display:block;}
.iie-photo-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.iie-photo-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem;}
.iie-photo-title{font-weight:600;font-size:.9rem;}
.iie-photo-src{font-weight:400;color:var(--text3);font-size:.8rem;}
.iie-photo-actions{display:flex;flex-wrap:wrap;gap:.35rem;}
.iie-photo-actions label.btn{cursor:pointer;}
.iie-photo-rm{color:var(--red,#ff453a);}
.iie-photo-link{display:flex;gap:.35rem;}
.iie-photo-link[hidden]{display:none;}
.iie-photo-link input{flex:1;min-width:0;font-size:.85rem;}
.iie-photo-note{font-size:.74rem;color:var(--text3);line-height:1.35;}
.iie-photo.busy{pointer-events:none;}
.iie-photo.busy .iie-photo-img::after{
  content:"";position:absolute;inset:0;margin:auto;width:24px;height:24px;border-radius:50%;
  border:2.5px solid rgba(0,0,0,.15);border-top-color:var(--accent);animation:ia-spin .8s linear infinite;
}
.iie-photo.busy .iie-photo-img img{opacity:.35;}
.iie-photo.busy .iie-photo-actions{opacity:.5;}

/* (b895) Modal open: fade the backdrop with opacity only. Animating
   backdrop-filter (b891) makes WebKit repaint the page underneath
   every frame, which flashed the Gear list behind a modal. Same reason
   the card's entrance no longer animates filter:blur. */
.overlay{animation:cb-fade-in .3s var(--ease-out) backwards;}
@keyframes cb-pop-in{
  from{opacity:0;scale:.88;translate:0 36px}
  30% {opacity:1}
  to  {opacity:1;scale:none;translate:none}
}
@keyframes cb-drop-in{
  from{opacity:0;scale:.92;translate:0 -44px}
  30% {opacity:1}
  to  {opacity:1;scale:none;translate:none}
}
@keyframes cb-pop-out{to{opacity:0;scale:.9;translate:0 24px}}

/* (b896) Pagination: page-turn slide, top copy, full-width in grids */
.pgnr{grid-column:1 / -1;}
.pgnr.pgnr-top{padding:.15rem .5rem .7rem;}
tr[data-pg-clone] td{padding:0;}
@keyframes cb-page-in{
  from{opacity:0;translate:calc(var(--cb-dir,1) * 34px) 0}
  to  {opacity:1;translate:none}
}
.cb-page-in{
  animation:cb-page-in .46s var(--ease-view,cubic-bezier(.2,.9,.25,1)) backwards;
  animation-delay:calc(var(--cb-i,0) * 24ms);
}
.pgnr-num,.pgnr-arr{transition:background-color .2s,border-color .2s,color .2s,scale .45s var(--spring-bouncy,ease);}
.pgnr-num:active:not(:disabled),.pgnr-arr:active:not(:disabled){scale:.9;}
.pgnr.pg-just .pgnr-num.active{animation:cb-tick .45s var(--spring-bouncy,ease);}
@media (prefers-reduced-motion:reduce){
  .cb-page-in,.pgnr.pg-just .pgnr-num.active{animation:none!important;}
}

/* ═══════════════════════════════════════════════════════════════════
   (b897) Gear "includes" — quiet, readable, one idiom everywhere
   Includes  ND 0.3 / 0.6 / 0.9 / 1.2 · Pola filter · 2× Battery · Case
   ═══════════════════════════════════════════════════════════════════ */
.inc{display:flex;align-items:baseline;gap:.45rem;min-width:0;font-size:.76rem;line-height:1.45;color:var(--text3);}
.inc-lbl{
  flex-shrink:0;font-size:.62rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text3);opacity:.8;
}
.inc-list{min-width:0;color:var(--text2);}
.inc-it{white-space:nowrap;}
.inc-it + .inc-it::before,.inc-it + .inc-more::before{content:"·";margin:0 .42em;color:var(--text3);opacity:.7;}
.inc-list > .inc-more::before{content:"·";margin:0 .42em;color:var(--text3);opacity:.7;}
.inc-list > .inc-more:first-child::before{content:none;}
.inc-stem{color:var(--text);font-weight:550;}
.inc-sl{margin:0 .22em;color:var(--text3);opacity:.7;}
.inc-q{margin-right:.22em;color:var(--text3);font-variant-numeric:tabular-nums;font-weight:600;}
.inc-more{
  background:none;border:0;padding:0;font:inherit;font-weight:550;color:var(--accent);cursor:pointer;white-space:nowrap;
}
.inc-more:hover{text-decoration:underline;}
@keyframes inc-new{from{opacity:0;translate:-4px 0}}
.inc-it.inc-new{animation:inc-new .35s var(--ease-out,ease) backwards;}
/* wrap items as prose, not a column */
.inc-list .inc-it{white-space:normal;}
.inc-list .inc-stem,.inc-list .inc-q{white-space:nowrap;}

/* Gear list: a single quiet line */
.inc-line{margin-top:.2rem;font-size:.72rem;}
.inc-line .inc-list{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text3);}
.inc-line .inc-list .inc-it{white-space:nowrap;}
.inc-line .inc-stem{color:var(--text2);font-weight:500;}
.inc-line .inc-more{pointer-events:none;color:var(--text3);font-weight:500;}

/* Item detail header */
.inc-detail{margin-top:.45rem;font-size:.8rem;}

/* Renter portal cards: one entry per line — cards are narrow, and a
   renter should be able to scan exactly what comes in the box. */
.inc-nb{white-space:nowrap;}
.inc-rp{margin:.35rem 0 .15rem;font-size:.74rem;align-items:flex-start;flex-direction:column;gap:.15rem;}
.inc-rp .inc-list{display:flex;flex-direction:column;gap:.08rem;min-width:0;width:100%;}
.inc-rp .inc-it{position:relative;padding-left:.7em;line-height:1.35;}
.inc-rp .inc-it::before,.inc-rp .inc-it + .inc-it::before{
  content:"";position:absolute;left:0;top:.6em;width:3px;height:3px;margin:0;border-radius:50%;
  background:currentColor;opacity:.5;
}
.inc-rp .inc-list > .inc-more{align-self:flex-start;padding-left:.7em;margin-top:.05rem;}
.inc-rp .inc-list > .inc-more::before{content:none;}
/* Quick-list rows are wide: stay inline */
.inc-rp.inc-rp-list{flex-direction:row;align-items:baseline;margin:.15rem 0 0;}
.inc-rp.inc-rp-list .inc-list{display:block;}
.inc-rp.inc-rp-list .inc-it{padding-left:0;}
.inc-rp.inc-rp-list .inc-it::before{content:none;}
.inc-rp.inc-rp-list .inc-it + .inc-it::before{content:"·";position:static;display:inline;width:auto;height:auto;background:none;opacity:.7;margin:0 .42em;}
.inc-rp.inc-rp-list .inc-list > .inc-more{padding-left:0;}
.inc-rp.inc-rp-list .inc-list > .inc-more::before{content:"·";margin:0 .42em;}

/* Request review / summaries */
.bi-item-top{display:inline-flex;align-items:center;gap:.4rem;}
.bi-item.bi-item-inc{flex-direction:column;align-items:flex-start;gap:.1rem;max-width:100%;}
.inc-bi{font-size:.72rem;}

/* Editor */
.inc-hint{font-weight:400;color:var(--text3);font-size:.78em;}
.inc-ed{
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;min-height:40px;padding:.3rem .35rem;cursor:text;
  background:var(--input-bg,var(--surface2));border:1px solid var(--border);border-radius:10px;
}
.inc-ed:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent);}
.inc-chip{
  display:inline-flex;align-items:center;gap:.15rem;max-width:100%;padding:.16rem .2rem .16rem .55rem;border-radius:999px;
  font-size:.8rem;background:var(--fill2,rgba(118,118,128,.16));color:var(--text);
  animation:inc-new .25s var(--ease-out,ease) backwards;
}
.inc-chip-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.inc-chip-x{
  width:18px;height:18px;border:0;border-radius:50%;padding:0;line-height:1;font-size:.95rem;cursor:pointer;
  background:transparent;color:var(--text3);display:flex;align-items:center;justify-content:center;
}
.inc-chip-x:hover{background:rgba(127,127,127,.25);color:var(--text);}
.inc-ed .inc-ed-in{
  flex:1;min-width:140px;border:0!important;background:transparent!important;box-shadow:none!important;
  padding:.25rem .3rem;font-size:.86rem;outline:none;
}
.inc-ed .inc-ed-in:focus-visible{box-shadow:none!important;}
@media (prefers-reduced-motion:reduce){ .inc-it.inc-new,.inc-chip{animation:none;} }


/* ═══════════════════════════════════════════════════════════════════
   (b902) DESIGN SYSTEM 3 — the refinement pass
   One layer, last in the cascade, readable and revertible as a unit —
   same contract as DS2 (b885) above, which it finishes rather than
   replaces.

   DS2 set the material: system type, Apple palettes, translucent
   separators, depth from shadow instead of outlines. It stated the
   typographic principle — "sentence-case labels instead of
   letter-spaced caps" — but only applied it to the fourteen classes
   on the screens it reworked. The other 279 stayed as they were, so
   the app still shouts SMALL TRACKED CAPITALS at the user from every
   table header, every KPI, every section label. That inconsistency,
   not the palette, is what still reads as house-built.

   This layer is about the things that are true on every screen at
   once: how labels are set, how numbers align, what a focused
   control looks like, how headings break. Nothing here moves layout
   or changes colour — it is all typography and state.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Labels: sentence case, everywhere ──────────────────────────
   Tracked-out capitals are a shouting device. They exist to make
   6pt type legible in print; on a retina display at 12px they just
   read as an interface talking down to you, and they are the single
   commonest tell of a template. Apple sets every one of these —
   Settings group headers, table columns, metric captions — in
   sentence case at normal tracking, and lets colour and size carry
   the hierarchy instead.

   The selector list below is generated from every rule in this
   stylesheet that sets text-transform:uppercase, minus the cases
   where capitals carry meaning rather than emphasis: avatar
   initials, the wordmark, single-letter weekday ticks, currency and
   version codes, and the hand-lettered diagram labels (which are
   drawn in a marker face where caps are the point).

   Each selector is reproduced exactly, so specificity matches its
   original and source order decides — no !important anywhere.

   Sentence case needs the tracking taken back off: the .04–.08em
   the caps rules add to open capitals up makes lowercase look
   gappy. A hair negative is where SF sits naturally at label sizes.
   ───────────────────────────────────────────────────────────────── */
.logo-sub,
.dcb-datebox-mo,
.dic-label,
.ch-card-title,
.md-loc-group-label,
.dcb-sat-chip,
.dash-sum-label,
.dash-day-box-mo,
.dash-day-stats-badge,
.dash-act-date-rule span,
.rsort-btn,
.aj-sort-bar,
.aj-sort-btn,
.aj-color-key-label,
.aj-card-arch-pill,
.aj-card-datebox-mo,
.jt-table thead th,
.jt-arch-pill,
.jt-group-label,
.aj-sort-group-label,
.day-switcher-label,
.ri-job-date-top,
.ri-job-date-bot,
.ri-jdb-mon,
.stat-l,
.cat-section-head,
.mj-sc-title,
.inv-summary-lbl,
.inv-sum-sort-lbl,
.inv-th,
.iom-section-label,
.go-datebox-lbl,
.go-datebox-mo,
.inv-item-cond,
.dp-result-head,
.iie-pkg-role,
.pkg-member-qty label,
.pkg-pull-badge,
.pg-result-head,
.pg-cat-head,
.truck-cat-header,
.truck-section-div-label,
.truck-picker-section,
.truck-picker-mo,
.mscat,
.auth-label,
.su-topbar-title,
.su-sub-head,
.bill-plan-flag,
.bill-plan-tag,
.su-badge,
.su-new-group-card label,
.ps-label,
.gtable thead th,
.print-cat-totals caption,
.print-cat-totals th,
.scan-log-badge,
.gl-section-head,
.gl-row-status,
.bcp-conflict-status,
.rail-section-head,
.job-view-label,
.jsh-active-banner,
.jc-status-pill,
.ri-date-dow,
.ri-date-mon,
.dir-table thead th,
.dir-role-head,
.dir-arch-pill,
.dir-act-divider,
.co-jobs-head,
.co-hygiene-title,
.dir-toolbar-label,
.borrow-section-title,
.home-hero-date,
.home-hero-type-badge,
.home-hero-next-rel,
.home-day-when,
.home-day-mo,
.home-day-type,
.home-day-gap-lbl,
.av-mo,
.sched-list-card-wday,
.sched-list-card-mo,
.home-kpi-lbl,
.home-inbox-group-lbl,
.home-tl-card-mo,
.gswitch-menu-head,
.users-table th,
.user-role-head,
.user-you-tag,
.user-perms-head,
.user-perm-label,
.req-status-label,
.rd-block-head,
.rd-chips-label,
.req-group-head,
.bi-cat-name,
.set-group-title,
.diag-section-head,
.diag-stat-label,
.diag-table th,
.invo-bit-label,
.invo-table thead th,
.invo-pill,
.invo-li-table thead th,
.invo-li-field label,
.invo-send-share-card .invo-ss-label,
.invo-pv-eyebrow,
.invo-pv-numbers .l,
.invo-pv-items thead th,
.invo-pv-paid-badge,
table.invo-pv-totals td.t-label,
.stmt-aging-title,
.stmt-pay-instr-title,
.invo-mbar-label,
.invo-fc-phead,
.invo-fc-tl-legend,
.invo-fc-tl-head,
.invo-rev-stat-lbl,
.invo-ca-quiet-head,
.invo-dash-table-summary .invo-bit-label,
.invo-dash-tax-period,
.invo-dash-tax-hero-label,
.invo-dash-tax-mini-label,
.tax-rep-period-label,
.tax-rep-summary-hero-label,
.tax-rep-stat-label,
.t2125-cat-table thead th,
.tax-rep-table thead th,
.ce-co-primary,
.home-inv-pill,
.chat-bubble-text .md-table th,
.set-nav-sec-label,
.exp-filter-grp label,
.exp-bulk-field,
.exp-table thead th,
.exp-chip-tax,
.exp-tax-kind,
.exi-acct-title,
.exi-diag-format-label,
.exi-diag-skipped .exi-diag-label,
.ir-section-head h4,
.exi-review-table th,
.ici-day-table-head,
.fin-kpi-label,
.dash-prof-section-label,
.dash-prof-hero-label,
.dash-prof-cell-label,
.ilog-pill,
.exp-dupes-keep-pill,
.fin-drill-partial,
.fin-drill-src-pill,
.fmr-meta label,
.ml-sum-label,
.t2125-veh-stat-label,
.ml-trend-lbl,
.est-table thead th,
.est-td-num,
.est-side-card-title,
.est-form-section-title,
.crm-activity-title,
.nrail-fly-head,
.td-section-title,
.td-section-label,
.td-info-key,
.id-stat-lbl,
.id-li-head > span,
.id-recipient-row .id-rcp-badge,
.igd-stat-label,
.cd-add-form-head,
.ud-stat-label,
.ud-pill,
.cron-detail-label,
.tag-panel-title,
.tag-picker-label,
.tag-filter-label,
.pipe-kpi-lbl,
.pipe-stage-label,
.pipe-section-title,
.anly-tile-title,
.anly-kpi-lbl,
.rate-card-title,
.rate-card-field label,
.doc-panel-title,
.bd-doc-type,
.scrch-kind,
.scrch-impact-lbl,
.em-hdr-key,
.er-meta-label,
.mh-today-rel,
.mh-section-head,
.mh-dg-lbl,
.mj-phase-label,
.mc-week-label, .mc-month-label,
.mtp-sec-head,
.chat-mut-title,
.chat-mut-line-label,
.dash-event-group-head,
.job-ta-arch,
.phase-kv-k,
.scr-group-label,
.scr-detail-status-lbl,
.scr-th,
.scr-ov-metric-l,
.scr-ov-card-title,
.bd-tone-lbl,
.bd-sec h4,
.bd-char-role,
.bd-scene-head,
.scr-share-section .bd-scene-heading,
.scr-share-section .bd-scene-dn,
.bd-shot-scene,
.gear-cat-name,
.gear-gaps-h,
.gear-gap-cat,
.scr-assess-meta-lbl,
.scr-sw-col h5,
.scr-assess-bottom-lbl,
.scr-ctx-lbl,
.scr-ctx-lens-lbl,
.scr-ov-lens,
.scr-mb-brief-h,
.scr-mb-editsec-h,
.scr-share-h,
.tools-section-label,
.tool-badge,
.scp-src-tag,
.scp-scope-lab,
.sht-side-head,
.sht-side-lab,
.sht-facet-lab,
.sht-ins-reck,
.sht-lb-tagflow .sht-lb-tagkind,
.sht-lb-seclab,
.sht-lb-tagkind,
.tool-table thead th,
.tsl-edit-head>div,
.tsl-edit-flabel,
.tool-recce-sec-title,
.tool-qgroup-theme,
.calc-card-lbl,
.calc-badge,
.calc-ar-cap,
.rp-unavail-tag,
.rp-gear-cat-head,
.rp-bk-group-head,
.dgm-card-blank span,
.dgm-tool-lbl,
.dgm-gear-cat,
.dgm-insp-head,
.dgm-f label,
.dgm-power-tbl th,
.dgm-jobpick-sec,
.home-digest-sec-head,
.cs-card-title,
.cs-sch-head,
.cs-crew-head,
.cs-prev-call div,
.cs-prev-kc .r,
.cs-prev-locline .k,
.cs-prev-sec,
.cs-prev-table th,
.cs-prev-dept h3,
.cs-prev-footstrip .fr,
.cs-send-sec,
.ci-badge,
.onb-h1,
.onb-h2,
.onb-fg label,
.gr-tools-label,
.gr-head-row,
.gr-cat,
.anb2-sec-h,
.anb2-details summary,
.anb2-browse-cat,
.invo-cc-tag,
.sc-sec-kind,
.inc-lbl {
  text-transform:none;
  letter-spacing:-.004em;
}

/* ── 2. Figures: aligned, always ───────────────────────────────────
   This is a money app. Numbers stack in columns — invoice totals,
   day rates, running balances, quantities, durations — and
   proportional figures make every one of those columns ragged,
   because a 1 is narrower than a 0. Worse, a live-updating number
   jitters as its digits change.

   Tabular figures were already on 206 rules here, applied one at a
   time as each was noticed. This does it by shape instead: anything
   that is a table cell, a form field, or carries a money/metric word
   in its class name gets aligned figures. Prose keeps proportional
   figures, which is correct — tabular in a sentence looks spaced out.
   ───────────────────────────────────────────────────────────────── */
td, th, input, .mono,
[class*="amt"],   [class*="money"], [class*="total"], [class*="price"],
[class*="value"], [class*="stat"],  [class*="kpi"],   [class*="-num"],
[class*="rate"],  [class*="count"], [class*="qty"],   [class*="balance"]{
  font-variant-numeric:tabular-nums;
}
/* Slashed zero would be a step too far, but a true minus sign
   instead of a hyphen is free and reads properly in a column of
   negatives. */
[class*="amt"], [class*="total"], [class*="balance"]{
  font-feature-settings:"tnum" 1;
}

/* ── 3. Focus: one ring, every control ─────────────────────────────
   Seventeen rules in this stylesheet defined a focus-visible style;
   several thousand focusable elements had none, which means keyboard
   users lose the caret on most of the app. :where() gives this zero
   specificity, so it is a floor rather than an override — every one
   of those seventeen still wins where it applies, and everything
   else finally has something.

   outline (not box-shadow) so it follows border-radius for free and
   survives inside overflow:hidden containers, which the shadow
   version does not. :focus-visible, so a mouse click never shows it.
   ───────────────────────────────────────────────────────────────── */
:where(a, button, [role="button"], input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* Inside a scroller the ring can be clipped by the parent's edge;
   pulling the offset in keeps it whole. */
:where(td, tr, li) :where(a, button):focus-visible{ outline-offset:1px; }

/* ── 4. Setting: optical sizes and honest line breaks ──────────────
   Three one-line wins that the browser will do properly if asked.

   Optical sizing lets variable faces (SF, Inter) use their display
   cut at large sizes — subtly tighter apertures and thinner hairlines
   on a 2rem page title, which is the difference between type that was
   set and type that was scaled.

   balance stops a two-line heading leaving one orphaned word on the
   second line. pretty does the same for the last line of a
   paragraph. Both are the kind of thing a typesetter fixes by hand
   and nobody ever gets around to.
   ───────────────────────────────────────────────────────────────── */
html{ font-optical-sizing:auto; }
h1, h2, h3, h4,
.page-head-title, .modal-title, .home-section-title, .section-title,
.fin-section-head h3, .mh-section-head, .home-hero-greet, .mh-hello{
  text-wrap:balance;
}
p, .page-head-sub, .section-sub, .fin-kpi-sub,
[class*="-desc"], [class*="-note"], [class*="-hint"]{
  text-wrap:pretty;
}

/* ── 5. Finances: the chart, finished ──────────────────────────────
   The dashboard is where this app is read rather than operated, so
   it is worth the extra pass.

   Gridlines are scaffolding, not content: they should be the
   faintest thing on the chart that is still visible. These were a
   full-strength border at 50% — heavier than the axis labels they
   serve. Dropped to the system hairline separator, with the zero
   line kept a step stronger because that one IS content: it is the
   line the money sits on.

   The bar hover was brightness + a coloured glow, which on a hatched
   fill turns into a smear. Opacity on the siblings instead — the bar
   you are pointing at stays exactly the colour it was, and
   everything else steps back. That reads as focus rather than as an
   effect, and it tells you which month you are about to open.
   ───────────────────────────────────────────────────────────────── */
.fin-grid{ stroke:var(--sep); stroke-width:1; opacity:1; }
.fin-grid-zero{ stroke:var(--border2); opacity:1; }
.fin-axis{ stroke:var(--sep); }
.fin-axis-label, .fin-bar-label{
  fill:var(--text3); font-size:10.5px; letter-spacing:-.01em;
}
/* Hairline-thin at the top of a column of money, the axis numbers
   want to be quiet but not illegible — text3 at 46% alpha is the
   floor. */
.fin-chart:hover .fin-bar-grp{ opacity:.45; transition:opacity .18s var(--ease-out); }
.fin-chart:hover .fin-bar-grp:hover{ opacity:1; }
.fin-bar{ rx:3px; transition:none; }
.fin-bar:hover{ filter:none; }
.fin-bar-grp{ transition:opacity .18s var(--ease-out); }

/* The net line was a hardcoded #f5b400 from before the DS2 palette —
   a hair green of the system amber, which showed as a slightly sour
   yellow next to every other accent on the page. */
.fin-net-line{ stroke:var(--accent); }
.fin-net-dot{  fill:var(--accent); }
.fin-legend .leg-net::before, .fin-legend .leg-net::after{ background:var(--accent); }

/* KPI numbers are the one place on this dashboard where type is the
   design rather than the delivery. Display cut, tight tracking, and
   enough size to be read from across a desk. */
.fin-kpi-value{
  font-family:var(--display);
  font-size:1.9rem; font-weight:700; letter-spacing:-.028em;
}
.fin-kpi-label{ font-size:.8rem; font-weight:500; color:var(--text3); }
.fin-section-head h3{ font-size:1.05rem; }

/* Drill rows: the amount is what the eye is scanning, so it gets the
   display cut too, and the row separator becomes a hairline inset to
   the text column the way an iOS grouped list does it. */
.fin-drill-amt{ font-family:var(--display); letter-spacing:-.018em; }
.fin-drill-src-pill{ letter-spacing:.01em; }

@media (prefers-reduced-motion:reduce){
  .fin-chart:hover .fin-bar-grp, .fin-bar-grp{ transition:none; }
}

/* ════════════════════════════════════════════════════════════
   (b912) PICKUP SCHEDULING
   Owner: Pickup-tab card, time picker, invite sheet, settings.
   Renter: booking-card pickup strip. Line icons, quiet surfaces.
   ════════════════════════════════════════════════════════════ */
.rd-act-icon svg{width:22px;height:22px;display:block;margin:0 auto;}

.pk-card{
  border:1px solid var(--border);border-radius:14px;background:var(--surface2);
  padding:1rem 1.1rem .35rem;margin-bottom:1rem;
}
.pk-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.75rem;}
.pk-card-k{display:flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);}
.pk-card-k svg{width:15px;height:15px;}
.pk-card-when{font-size:1.35rem;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin-top:.2rem;color:var(--text);}
.pk-card-sub{font-size:.84rem;color:var(--text3);margin-top:.3rem;}
.pk-requested{border-color:var(--accent-rim);background:linear-gradient(180deg,var(--accent-soft),transparent 70%),var(--surface2);}
.pk-requested .pk-card-k{color:var(--accent);}
.pk-countered .pk-card-k{color:var(--accent);}
.pk-confirmed .pk-card-k,.pk-done .pk-card-k{color:var(--green);}
.pk-done{padding-bottom:1rem;}
.pk-none .pk-card-when{color:var(--text2);font-size:1.15rem;}
.pk-pill{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;padding:.18rem .55rem;border-radius:99px;letter-spacing:.01em;}
.pk-pill.ok{background:var(--green-dim);color:var(--green);}
.pk-pill.warn{background:var(--amber-dim);color:var(--amber);}
.pk-clash{margin:0 0 .8rem;padding:.65rem .85rem;border-radius:10px;background:var(--red-dim);color:var(--text);font-size:.84rem;line-height:1.5;}
.pk-clash-h{display:flex;align-items:center;gap:.35rem;font-weight:700;color:var(--red);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem;}
.pk-clash-h svg{width:14px;height:14px;}
.pk-quote{margin:0 0 .8rem;padding:.6rem .85rem;border-radius:10px;background:var(--bg);font-size:.88rem;color:var(--text);line-height:1.45;white-space:pre-line;}
.pk-quote span{display:block;font-size:.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem;white-space:normal;}
.pk-acts{margin-bottom:.65rem;}

/* Sheets */
.pk-modal .fg label{display:flex;align-items:baseline;gap:.4rem;}
.pk-lede{font-size:.88rem;color:var(--text2);line-height:1.5;margin:-.2rem 0 1rem;}
.pk-opt{font-size:.72rem;font-weight:500;color:var(--text3);}
.pk-warn{display:flex;align-items:flex-start;gap:.5rem;padding:.7rem .85rem;border-radius:10px;background:var(--amber-dim);color:var(--text);font-size:.84rem;line-height:1.45;margin:.4rem 0 .6rem;}
.pk-warn svg{width:16px;height:16px;flex-shrink:0;margin-top:.1rem;color:var(--amber);}
.pk-check{display:flex !important;align-items:flex-start;gap:.55rem;cursor:pointer;font-size:.86rem;color:var(--text2);line-height:1.4;}
.pk-check input{width:16px !important;height:16px;margin:.12rem 0 0;flex-shrink:0;accent-color:var(--accent);cursor:pointer;padding:0;}
.pk-check.sm{font-size:.76rem;align-items:center;white-space:nowrap;}
.pk-check.sm input{margin:0;width:14px !important;height:14px;}

.pk-pick-head{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;margin-bottom:.6rem;font-size:.95rem;font-weight:650;}
.pk-tz{font-size:.74rem;font-weight:500;color:var(--text3);white-space:nowrap;}
.pk-days{display:flex;gap:.45rem;overflow-x:auto;padding:.1rem 0 .55rem;scrollbar-width:thin;}
.pk-day{
  flex:0 0 auto;width:64px;display:flex;flex-direction:column;align-items:center;gap:.05rem;
  padding:.5rem 0 .45rem;border-radius:12px;border:1px solid var(--border);background:var(--surface2);
  color:var(--text);cursor:pointer;font:inherit;transition:border-color .12s,background .12s,transform .06s;
}
.pk-day:hover{border-color:var(--border2);}
.pk-day:active{transform:scale(.97);}
.pk-day-w{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);}
.pk-day-n{font-size:1.2rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;height:1.45rem;}
.pk-day-n svg{width:18px;height:18px;}
.pk-day-m{font-size:.66rem;color:var(--text3);}
.pk-day-c{font-size:.62rem;font-weight:600;color:var(--green);margin-top:.1rem;}
.pk-day.none .pk-day-n{color:var(--text3);} .pk-day.none .pk-day-c{color:var(--text3);}
.pk-day.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.pk-day.on .pk-day-w,.pk-day.on .pk-day-m,.pk-day.on .pk-day-c,.pk-day.on .pk-day-n{color:#fff;}
.pk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.4rem;}
.pk-slot{
  padding:.55rem .2rem;border-radius:9px;border:1px solid var(--border);background:var(--surface2);color:var(--text);
  font:inherit;font-size:.84rem;font-weight:650;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .12s,border-color .12s;
}
.pk-slot:hover{border-color:var(--accent-rim);}
.pk-slot.busy{
  color:var(--text3);font-weight:500;border-style:dashed;
  background:repeating-linear-gradient(135deg,transparent 0 6px,var(--surface3) 6px 7px);
}
.pk-slot.on{background:var(--accent);border-color:var(--accent);color:#fff;border-style:solid;}
.pk-empty{grid-column:1/-1;padding:.9rem;border-radius:10px;background:var(--surface2);color:var(--text3);font-size:.85rem;text-align:center;}
.pk-dayblocks{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 .6rem;}
.pk-blk{font-size:.72rem;padding:.2rem .5rem;border-radius:6px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);}
.pk-blk-job,.pk-blk-hold{border-color:var(--accent-rim);color:var(--text);}
.pk-blk-routine{border-style:dashed;}
.pk-custom{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.pk-sel{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem .8rem;margin-top:.8rem;padding:.7rem .9rem;border-radius:10px;border:1px solid var(--border);}
.pk-sel-when{font-weight:700;font-size:.95rem;}
.pk-sel-why{display:flex;align-items:center;gap:.35rem;font-size:.8rem;}
.pk-sel-why svg{width:14px;height:14px;flex-shrink:0;}
.pk-sel.ok{background:var(--green-dim);border-color:transparent;} .pk-sel.ok .pk-sel-why{color:var(--green);}
.pk-sel.warn{background:var(--amber-dim);border-color:transparent;} .pk-sel.warn .pk-sel-why{color:var(--amber);}

/* Approve modal */
.pk-resolve{margin:.2rem 0 .4rem;padding:.8rem .9rem .2rem;border-radius:10px;border:1px solid var(--border);background:var(--surface2);}
.pk-resolve-head{margin-bottom:.7rem;}
.pk-resolve-head strong{color:var(--text);font-size:.88rem;}
.pk-sub{display:block;font-size:.76rem;color:var(--text3);margin-top:.1rem;}
.pk-resolve-fields .fg{margin-bottom:.6rem;}

/* Settings */
.pk-set-hours{display:flex;align-items:center;gap:.6rem;}
.pk-set-hours input{max-width:150px;}
.pk-set-hours span{font-size:.82rem;color:var(--text3);}
.pk-set-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;}
.pk-chips{display:flex;flex-wrap:wrap;gap:.35rem;}
.pk-chip{
  min-width:48px;padding:.42rem .6rem;border-radius:99px;border:1px solid var(--border);background:var(--bg);
  color:var(--text2);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.pk-chip:hover{border-color:var(--border2);}
.pk-chip.on{background:var(--accent-dim);border-color:var(--accent-rim);color:var(--accent);}
.pk-chips.sm{gap:.2rem;flex-wrap:nowrap;}
.pk-chips.sm .pk-chip{min-width:0;width:30px;padding:.3rem 0;font-size:.7rem;}
.pk-rt{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;
  padding:.5rem .55rem;border:1px solid var(--border);border-radius:10px;background:var(--bg);margin-bottom:.4rem;
}
.pk-rt .pk-rt-label{flex:1 1 170px;min-width:0;}
.pk-rt .pk-rt-del{margin-left:auto;}
.set-field .pk-rt input.pk-rt-label{border:none;background:transparent;padding:.3rem .2rem;font-weight:600;}
.pk-rt-times{display:flex;align-items:center;gap:.3rem;}
.set-field .pk-rt-times input{width:126px;padding:.35rem .45rem;}
.pk-rt-times span{color:var(--text3);font-size:.8rem;}
.pk-rt-del{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;border-radius:8px;background:transparent;color:var(--text3);cursor:pointer;}
.pk-rt-del:hover{background:var(--red-dim);color:var(--red);}
.pk-rt-del svg{width:15px;height:15px;}
.pk-rt-empty{font-size:.8rem;color:var(--text3);padding:.55rem .1rem;}
.pk-rt-add{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.35rem;}
.pk-rt-add .btn svg{vertical-align:-2px;}
.pk-sources{display:flex;flex-wrap:wrap;gap:.35rem;margin:.1rem 0 .25rem;}
.pk-sources span,.pk-src-btn{
  display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .6rem;border-radius:99px;
  background:var(--surface2);border:1px solid var(--border);font-size:.76rem;color:var(--text2);
}
.pk-sources svg{width:13px;height:13px;color:var(--text3);}
.pk-src-btn{font:inherit;font-size:.76rem;cursor:pointer;color:var(--accent);border-color:var(--accent-rim);background:var(--accent-soft);}
.pk-src-btn svg{color:var(--accent);}
.pk-prev-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.45rem;}
.pk-prev-grid{display:grid;grid-template-columns:repeat(7,minmax(64px,1fr));gap:.35rem;overflow-x:auto;}
.pk-prev-col{display:flex;flex-direction:column;gap:.18rem;min-width:64px;}
.pk-prev-d{display:flex;flex-direction:column;align-items:center;height:3.3rem;padding:.3rem 0 .35rem;font-size:.66rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.pk-prev-d strong{font-size:1rem;color:var(--text);letter-spacing:-.01em;text-transform:none;}
.pk-prev-d em{font-style:normal;font-size:.58rem;color:var(--accent);margin-top:.05rem;}
.pk-prev-s{font-size:.66rem;text-align:center;padding:.2rem 0;border-radius:5px;font-variant-numeric:tabular-nums;cursor:default;}
.pk-prev-s.open{background:var(--green-dim);color:var(--green);font-weight:650;}
.pk-prev-s.busy{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--surface3) 5px 6px);color:var(--text3);}
.pk-prev-closed{font-size:.7rem;color:var(--text3);text-align:center;padding:.4rem 0;}
.pk-prev-foot{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.6rem;font-size:.72rem;color:var(--text3);}
.pk-prev-foot i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:.3rem;}
.pk-prev-foot i.ok{background:var(--green-dim);box-shadow:inset 0 0 0 1px var(--green);}
.pk-prev-foot i.busy{background:var(--surface3);}
@media (max-width:640px){
  .pk-set-grid{grid-template-columns:1fr;}
  .pk-custom{grid-template-columns:1fr;}
  .pk-prev-grid{grid-template-columns:repeat(7,64px);}
}

/* Renter portal */
.rp-pk{
  display:flex;align-items:center;gap:.75rem;margin-top:.6rem;padding:.7rem .85rem;
  border-radius:12px;border:1px solid var(--border);background:var(--surface2);
}
.rp-pk-ic{flex-shrink:0;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--accent-dim);color:var(--accent);}
.rp-pk-ic svg{width:17px;height:17px;}
.rp-pk-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem;font-size:.86rem;line-height:1.35;}
.rp-pk-t strong{color:var(--text);}
.rp-pk-t span{font-size:.78rem;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rp-pk .btn{flex-shrink:0;text-decoration:none;}
.rp-pk-invite,.rp-pk-sug{border-color:var(--accent-rim);background:var(--accent-soft);}
.rp-pk-ok .rp-pk-ic{background:var(--green-dim);color:var(--green);}
.rp-pk-wait .rp-pk-ic{background:var(--amber-dim);color:var(--amber);}
.rp-att-icon svg{width:20px;height:20px;display:block;color:var(--accent);}
.rp-att-info{border-color:var(--border);}