/* Cairo — legible Arabic UI face (also covers Latin); loaded first so all
   .blz-native[dir="rtl"] roots inherit it without a FOUT. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;900&display=swap');

/* blz-native.css — Blitz-4 NATIVE design system (shared, theme layer).
   ============================================================================
   The native iOS/Android *feel* of the WhatsApp panel (wa-native.css), retuned
   to Blitz-4 *vibes* (Layered Warmth — warm copper on a cream canvas).
   Any root carrying `.blz-native`
   inherits the token palette + the native resets, and can use the `.blz-*`
   primitives (card / button / input / chip / segmented / fab / sheet / modal /
   toast). New components SHOULD adopt this instead of re-deriving tokens.

   How to use:
     <div id="xyzRoot" class="blz-native" dir="...">  ... </div>
   then either reuse `.blz-*` primitives or build a `.xyz-` prefixed sheet that
   reads the `--blz-*` tokens. Load this file BEFORE the component's own sheet.

   Conventions baked in: CLAUDE.md §4 logical properties only (no left/right) +
   bidi isolation, §8 mobile 16px floor / 36px hit targets / safe-area / AA
   contrast, native motion w/ prefers-reduced-motion + hover-gated flourishes.
   Push BOTH blz-native.css and blz-native.min.css (byte parity, CLAUDE.md §14).
   ============================================================================ */

/* ============================================================
   1. TOKENS — declared on :root so they cascade to <body> and any
   region (not just .blz-native descendants). Dark mode is a single
   override block below; the toggle attribute lives on <html> so
   the override reaches everywhere.
   ============================================================ */
:root{
  /* ink + surfaces — Claude-inspired warm canvas + crisp white panels.
     Cards stand naturally against the warm cream bg without needing
     heavy borders; that's how Claude (and Things, Notion) get cards
     to read as elevated without 2018-Material shadows.
     Three panel tiers give the UI rhythm: bg → panel → raised → over. */
  --blz-navy:#1F1E1B;            /* primary ink — warm near-black, NOT pure */
  --blz-bg:#F8F5EE;              /* app background — warm cream */
  --blz-white:#FFFFFF;
  --blz-panel:#FFFFFF;           /* card / sheet (1st elevation) */
  --blz-panel-raised:#FFFFFF;    /* cards-on-cards (2nd) — distinguished by border */
  --blz-panel-over:#FFFFFF;      /* modal / drawer (3rd) — distinguished by shadow */
  --blz-border:#EDE8DC;          /* hairline border — warm tan */
  --blz-line:#F2EEE3;            /* very subtle warm divider */
  --blz-muted:#605D55;           /* secondary text — ~7:1 on warm bg, comfortably AA */
  --blz-ink:#102A3A;             /* contrast surfaces — footer / inverted bar, ALWAYS DARK in both modes */
  --blz-ink-fg:#F2EFE7;          /* text on --blz-ink — warm off-white */

  /* brand — Claude warm copper. Both light AND dark carry copper as
     primary so the brand identity is consistent across modes (only
     intensity shifts). The token name --blz-blue stays — components
     consume by name, not literal hue. */
  --blz-blue:#C49A6C;            /* PRIMARY = Claude copper */
  --blz-blue-dark:#9E7748;       /* hover/pressed — burnished */
  --blz-blue-soft:#F3E9DB;       /* tints, selected, soft fills — warm cream */
  --blz-teal:#376F8A;            /* demoted Blitz blue — secondary accent (rare) */
  --blz-teal-dark:#1F5673;
  --blz-teal-soft:#E5EDF2;

  /* semantic — earthy, sit comfortably in warm palette */
  --blz-success:#5B7A3B;  --blz-success-soft:#EFF1E0;
  --blz-warn:#A06A1A;     --blz-warn-soft:#F8EDDB;
  --blz-danger:#9B3923;   --blz-danger-soft:#F4E1DA;

  /* Modal / sheet backdrop — the dim layer behind .blz-overlay-bk and
     every component-scoped filter / sheet overlay. Token so dark-mode
     deepens it (cooler in light, warmer dark plus more opacity) rather
     than baking the literal `rgba(16,42,58,.46)` into every sheet.
     Components MUST consume this instead of redeclaring an ink rgba.
     Light: cool ink at 46%. Dark: warm black at 58% (deeper to stay
     visibly distinct from the warm-dark panel + bg). */
  --blz-overlay:rgba(16,42,58,.46);

  /* radius scale (the soft, native shape language) */
  --blz-r-pill:999px;
  --blz-r-input:10px;
  --blz-r-control:12px;
  --blz-r-card:14px;
  --blz-r-sheet:18px;

  /* Brand-tinted shadow scale — Claude copper wash (196,154,108) gives
     every elevated surface a warm-glow feel symmetric with dark mode's
     copper-tinted shadows below. */
  --blz-shadow-sm:0 1px 3px rgba(196,154,108,.10);
  --blz-shadow:0 2px 6px rgba(196,154,108,.14);
  --blz-shadow-card:0 6px 20px rgba(196,154,108,.18);
  --blz-shadow-modal:0 12px 30px rgba(196,154,108,.28);
  --blz-shadow-fab:0 2px 8px rgba(196,154,108,.36);

  /* motion — short, ease-out, spring for surfaces */
  --blz-dur-fast:.12s;
  --blz-dur:.2s;
  --blz-ease:cubic-bezier(.22,.61,.36,1);

  /* native OS font stack (incl. Arabic fallback) */
  --blz-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans Arabic", "Segoe UI Arabic", sans-serif;
}

/* Arabic reads visually smaller than Latin at the same px — bump the
   font stack to Cairo when the page lang is Arabic. :root:lang(ar) so
   it applies to bare <body> too, not just .blz-native descendants. */
:root:lang(ar),
:root[dir="rtl"]{
  --blz-font:"Cairo","Noto Sans Arabic","Segoe UI Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* Components opt into the design system by adding class="blz-native".
   That ties them to the font + color + text-size-adjust defaults so
   the visual identity is shared. Tokens themselves live on :root. */
.blz-native{
  font-family:var(--blz-font);
  color:var(--blz-navy);
  -webkit-text-size-adjust:100%;
}
.blz-native:lang(ar),
.blz-native[dir="rtl"]{
  font-size:1.06rem;
  line-height:1.7;
}

/* ============================================================
   1b. DARK THEME — token redefinitions
   Activated when <html data-theme="dark">. The 5-line inline boot
   script in APEX app settings reads cookie 'blz_theme' and sets
   this attribute BEFORE first paint. Cards, panels, text, borders,
   muted text, brand color, and shadows all flip via the same names.
   See docs/superpowers/specs/2026-05-28-dark-mode-design.md.
   ============================================================ */
:root[data-theme="dark"]{
  /* Claude-inspired warm dark + copper brand. Dark mode gets its own
     personality (not just light-mode inverted): warm dark canvas
     #262624, copper primary #CC785C. Brand is copper in BOTH modes
     (light #C49A6C / dark #CC785C) — only the intensity shifts, the
     hue does not. The token name --blz-blue stays for compatibility —
     it's the semantic "primary brand action color", not a literal hue
     declaration. Components don't change. */
  --blz-bg:#262624;              /* page bg — warm dark (Claude-style) */
  --blz-navy:#F2EFE7;            /* primary text — warm off-white */
  --blz-panel:#30302E;           /* 1st elevation — clearly above bg */
  --blz-panel-raised:#3A3A37;    /* 2nd elevation — cards on cards */
  --blz-panel-over:#454541;      /* 3rd elevation — modals / drawers */
  --blz-border:#3D3D3A;          /* warm hairline */
  --blz-line:#34342F;            /* subtle warm divider */
  --blz-muted:#A39E91;           /* secondary — warm grey, ~5.8:1 on bg (AA) */
  --blz-blue:#CC785C;            /* PRIMARY = copper/terracotta in dark */
  --blz-blue-dark:#E58B6F;       /* hover: brightens warm */
  --blz-blue-soft:#3D2820;       /* selected/soft fills — warm dark copper */
  --blz-teal:#14A0C2;            /* fast-track accent — kept teal for distinctness */
  --blz-teal-dark:#3FBCDB;
  --blz-teal-soft:#103C48;
  --blz-ink:#16242F;             /* contrast surface in dark mode — slightly lifted vs --blz-bg */
  --blz-ink-fg:#F2EFE7;          /* unchanged — text on --blz-ink */
  --blz-success-soft:#1A4732;    /* lifted for visible green tint (was #0F2A1F / #15291E) */
  --blz-warn-soft:#4A3520;       /* lifted for visible amber tint (was #2B2010) */
  --blz-danger-soft:#4A1F1F;     /* lifted for visible red tint (was #2E1414) */
  /* Saturated semantic tokens lift in dark mode for badge/text contrast
     against the soft-dark *-soft backgrounds above. AA-compliant. */
  --blz-success:#4ADE80;         /* was #15803D — bright green readable on dark */
  --blz-warn:#FBBF24;             /* was #B7791F — bright amber */
  --blz-danger:#F87171;           /* was #B42318 — bright red */
  /* Brand-tinted shadows — copper wash for dark mode symmetric with
     the blue wash in light mode. Same intensity scale, brand-tinted. */
  --blz-shadow-sm:0 1px 3px rgba(204,120,92,.18);
  --blz-shadow:0 2px 6px rgba(204,120,92,.22);
  --blz-shadow-card:0 6px 20px rgba(204,120,92,.26);
  --blz-shadow-modal:0 12px 30px rgba(204,120,92,.32);
  --blz-shadow-fab:0 2px 8px rgba(204,120,92,.45);
  /* Modal backdrop in dark — deeper warm black so the dimmed area still
     reads as "scrim, not bg" against the lifted warm-dark panel/over. */
  --blz-overlay:rgba(10,8,6,.62);
}

/* ============================================================
   1c. BODY + APEX UT canvas — SCOPED via :has(.blz-native).

   APEX Universal Theme (Redwood Jericho, theme 42) puts class="t-Body"
   on a <div> INSIDE <body>, and that div paints the visible page canvas
   (setting body { background } alone is invisible behind it). So we
   paint both layers + every UT canvas descendant.

   CRITICAL SCOPING: every selector is gated by `:has(.blz-native)` so
   the canvas only flips on pages that actually contain at least one
   .blz-native component. This means:
     - f203 pages that use our design system → fully themed
     - f203 legacy / pure-APEX pages (no .blz-native) → APEX-default
     - APEX Builder (no .blz-native) → APEX-default
     - Other workspace apps (don't load this CSS at all) → unaffected

   Pages that want the canvas treatment WITHOUT a .blz-native region
   can opt in by adding `class="blz-app"` to <body> via page template
   inline style — supported by the same selectors below.

   The APEX UT header (.t-Header) and side nav (.t-Body-nav) are out
   of scope — we never override those.

   Transition gated to subsequent toggles only (.blz-themed added by
   the toggle JS on click) so initial paint doesn't fade light → dark
   on every page load.

   `:not(.blz-trail)` exclusion (re-applied from the original bleed fix):
   the breadcrumb (.blz-native.blz-trail) is portaled to <body> on EVERY
   page, so the bare `:has(.blz-native)` rule was painting the body of
   every APEX page (including legacy IRs/IGs). Excluding .blz-trail
   keeps the takeover scoped to pages with a real page-component. */
body:has(.blz-native:not(.blz-trail)),
body.blz-app,
.t-Body:has(.blz-native:not(.blz-trail)),
.t-Body.blz-app,
.t-Body-main:has(.blz-native:not(.blz-trail)),
.t-Body-content:has(.blz-native:not(.blz-trail)),
.t-Body-mainContent:has(.blz-native:not(.blz-trail)){
  background-color:var(--blz-bg);
  color:var(--blz-navy);
  -webkit-text-size-adjust:100%;
  transition:background-color .25s var(--blz-ease),
             color .25s var(--blz-ease);
}
html:not(.blz-themed) body:has(.blz-native:not(.blz-trail)),
html:not(.blz-themed) body.blz-app,
html:not(.blz-themed) .t-Body:has(.blz-native:not(.blz-trail)),
html:not(.blz-themed) .t-Body.blz-app,
html:not(.blz-themed) .t-Body-main:has(.blz-native:not(.blz-trail)),
html:not(.blz-themed) .t-Body-content:has(.blz-native:not(.blz-trail)),
html:not(.blz-themed) .t-Body-mainContent:has(.blz-native:not(.blz-trail)){ transition:none; }

/* ============================================================
   1d. APEX UT chrome hide — scoped to .blz-native pages

   On pages with a real page-component (NOT just the .blz-trail nav),
   the Blitz chrome (.blz-trail header + .blz-foot footer) replaces
   APEX's .t-Header + .t-Footer. Legacy pages keep APEX chrome.
   Same scoping as the body paint above — :has(.blz-native:not(.blz-trail))
   filters out pages that only carry the breadcrumb itself.
   ============================================================ */
/* APEX UT ships pages with a decorative banner background-image on the
   .t-Body / .t-PageBody / .t-Body-main wrappers (blue wave / ocean
   illustration on the Redwood Jericho theme). Nuke it so only the
   warm Claude canvas paints through. */
.t-Body,
.t-Body-main,
.t-Body-content,
.t-Body-mainContent,
.t-PageBody,
.t-Header,
.t-Header-banner,
.t-Header__visualization,
.t-Body-title{ background-image:none !important; }

/* ============================================================
   1d. APEX UT skin — Claude warm

   The 2026-05-29 decision (per user direction) was to DROP the custom
   .blz-trail and .blz-foot chrome and use APEX UT's native header /
   footer / breadcrumb / navigation-bar machinery — skinned to match
   the Claude warm theme. The Navigation Bar List (BLITZ_NAV_BAR)
   carries the action entries (search, theme, lang, logout) which APEX
   renders into .t-Header-controls.

   All chrome elements consume --blz-* tokens so light/dark flips
   automatically with the theme.
   ============================================================ */
.t-Body{
  background-color:var(--blz-bg);
  color:var(--blz-navy);
}
/* Force Claude warm panel over APEX UT "Dark Header" template option
   which paints the header in dark teal Redwood Jericho. !important on
   bg + color so the UT default doesn't win on specificity. */
.t-Header,
.t-Header-banner,
.t-Header-navBar,
.t-Header-branding,
.t-Header-controls{
  background-color:var(--blz-panel) !important;
  color:var(--blz-navy) !important;
}
.t-Header{
  border-block-end:1px solid var(--blz-border);
  box-shadow:var(--blz-shadow-sm);
}

/* ===== .t-Header-branding — full chrome row layout =====
   APEX UT renders the branding row as a flex container with:
   [hamburger nav-collapse] [logo] [navbar (actions on right)]
   We just set sane padding + gap so the row reads breathy. */
.t-Header-branding{
  display:flex !important;
  align-items:center;
  gap:14px;
  padding-block:8px;
  padding-inline:18px;
  min-block-size:56px;
}

/* Hamburger nav-collapse button hidden — sidebar is disabled in this
   deployment, so the toggle has no target. Hide via the .t-Button class
   the template emits + the parent .t-Header-controls wrapper so the
   row doesn't reserve space for an empty button. */
.t-Header-controls > .t-Button--headerTree,
.t-Header-branding > .t-Header-controls:has(> .t-Button--headerTree){
  display:none !important;
}

/* Below is the historical style — kept for reference if you ever
   re-enable the sidebar; doesn't affect the !important hide above. */
.t-Header-controls > .t-Button--headerTree.is-enabled,
.t-Header-branding > .t-Header-controls > .t-Button{
  display:inline-flex !important;
  align-items:center;justify-content:center;
  inline-size:36px;block-size:36px;
  padding:0 !important;
  border:0;border-radius:999px;
  background:transparent !important;
  color:var(--blz-muted) !important;
  cursor:pointer;
  transition:background-color .12s ease, color .12s ease, transform .12s ease;
}
@media (hover:hover){
  .t-Header-controls > .t-Button--headerTree:hover{
    background-color:var(--blz-line) !important;
    color:var(--blz-blue) !important;
  }
}
.t-Header-controls > .t-Button--headerTree:active{ transform:scale(.92); }

/* Logo zone — sits left of the navbar, flex with img + tenant text */
.t-Header-logo{
  display:inline-flex !important;
  align-items:center;
  flex:0 1 auto;
  min-inline-size:0;
}
.t-Header-logo-link{
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  padding-block:4px;padding-inline:6px;
  border-radius:var(--blz-r-input);
  text-decoration:none !important;
  min-inline-size:0;
  transition:color var(--blz-dur-fast,.12s) var(--blz-ease,ease);
}
@media (hover:hover){
  .t-Header-logo-link:hover{ color:var(--blz-blue) !important; }
}
.t-Header-logo-link img.apex-logo-img{
  block-size:32px;inline-size:auto;
  object-fit:contain;
  flex:0 0 auto;
}
.apex-logo-text{
  font-family:var(--blz-font-display);
  font-size:17px;font-weight:700;line-height:1;
  letter-spacing:-0.015em;
  color:var(--blz-navy) !important;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  max-inline-size:24ch;
}

/* Push the navbar (right cluster) to the inline-end */
.t-Header-navBar{
  margin-inline-start:auto !important;
  display:flex !important;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  border:0 !important;             /* override prior border declaration */
  box-shadow:none !important;
}
.t-Header-navBar--start,
.t-Header-navBar--center,
.t-Header-navBar--end{
  display:inline-flex !important;
  align-items:center;
}

@media(max-width:640px){
  .t-Header-branding{padding-inline:12px;gap:10px;}
  .apex-logo-text{max-inline-size:16ch;font-size:15px;}
  .t-Header-logo-link img.apex-logo-img{block-size:28px;}
}
/* Cascade navy text to every descendant so logo + tenant name don't
   render in UT's default white-on-dark. */
.t-Header *{ color:inherit; }
.t-Header-logo a,
.t-Header-logo-link,
.t-Header-branding,
.t-Header-branding a,
.t-Header-logo-link span,
.t-Header-branding span,
.apex-logo-text{
  color:var(--blz-navy) !important;
  font-family:var(--blz-font-display);
  font-weight:700;
  letter-spacing:-0.015em;
  text-decoration:none;
}
/* App logo image — keep sane size on the chrome row */
.t-Header-logo img.apex-logo-img{
  block-size:32px;
  inline-size:auto;
  object-fit:contain;
}
/* Show username text on the user-menu entry (override the global label-hide
   above). Higher specificity wins. */
.t-Header .t-NavigationBar .t-NavigationBar-item.has-username .t-Button .t-Button-label{
  position:static !important;
  inline-size:auto !important;block-size:auto !important;
  padding:0 !important;margin:0 !important;
  clip:auto !important;
  overflow:visible !important;
  font-size:12px !important;font-weight:700 !important;
  white-space:nowrap;
  color:var(--blz-navy) !important;
  display:inline !important;
}
.t-Header .t-NavigationBar .t-NavigationBar-item.has-username .t-Button{
  inline-size:auto !important;
  padding-inline:12px !important;
  gap:6px !important;
}
.t-Header-controls,
.t-Header-nav,
.t-Header-navBar{
  color:var(--blz-muted) !important;
}
.t-Header-controls a,
.t-Header-navBar a,
.t-NavigationBar a,
.t-NavigationBar-item a,
.t-NavigationBar .t-Button{
  color:var(--blz-muted) !important;
  text-decoration:none;
  transition:color var(--blz-dur-fast,.12s) var(--blz-ease,ease),
             background-color var(--blz-dur-fast,.12s) var(--blz-ease,ease);
}
@media (hover:hover){
  .t-Header-controls a:hover,
  .t-Header-navBar a:hover,
  .t-NavigationBar a:hover,
  .t-NavigationBar-item a:hover,
  .t-NavigationBar .t-Button:hover{ color:var(--blz-blue) !important; background-color:var(--blz-blue-soft) !important; }
}

/* Navigation Bar entries — icon-only circles. APEX list templates use
   varying class conventions (.t-NavigationBar / .t-LinksList / .t-Bar)
   depending on which list template the BLITZ_NAV_BAR list is bound to.
   Selectors cover all three so the chrome looks consistent regardless. */
.t-Header .t-NavigationBar,
.t-Header .t-LinksList,
.t-Header-navBar > ul,
.t-Header-navBar--center > ul,
.t-Header-navBar--center .t-NavigationBar{
  display:inline-flex !important;
  align-items:center;
  gap:2px;
  padding:2px;
  border-radius:var(--blz-r-pill);
  background:var(--blz-line);
  margin:0 !important;
  list-style:none !important;
}
:root[data-theme="dark"] .t-Header .t-NavigationBar,
:root[data-theme="dark"] .t-Header .t-LinksList,
:root[data-theme="dark"] .t-Header-navBar > ul,
:root[data-theme="dark"] .t-Header-navBar--center > ul{
  background:rgba(255,255,255,.04);
}

/* The list items themselves — strip default list bullets/margins */
.t-Header-navBar li,
.t-Header-controls li{
  display:inline-flex !important;
  list-style:none !important;
  margin:0 !important;padding:0 !important;
}

/* Action links/buttons — 36x36 circular touch target, icon-centered */
.t-Header-navBar li > a,
.t-Header-navBar li > .t-Button,
.t-Header-controls li > a,
.t-Header-controls li > .t-Button,
.t-Header-navBar > a,
.t-Header-controls > a{
  display:inline-flex !important;
  align-items:center;justify-content:center;
  inline-size:36px;block-size:36px;
  padding:0 !important;
  border:0;border-radius:999px;
  font-size:14px;
  cursor:pointer;
  background:transparent !important;
  color:var(--blz-muted) !important;
  text-decoration:none !important;
  transition:background-color .12s ease, color .12s ease, transform .12s ease;
}
.t-Header-navBar li .t-Icon,
.t-Header-navBar li .a-Icon,
.t-Header-navBar li .fa,
.t-Header-navBar li .fa6{
  font-size:15px;line-height:1;margin:0 !important;
}

/* HIDE entry labels everywhere in the header navbar — icon-only.
   ULTRA-HIGH specificity selectors + !important on every property so
   UT defaults (which use `.t-Button .t-Button-label{display:inline}`)
   can't win. Targets the exact HTML the BLITZ_NAV_BAR list emits:
   <li class="t-NavigationBar-item"><a class="t-Button"><span class="t-Icon"/><span class="t-Button-label">…</span><span class="t-Button-badge"/></a></li> */
.t-Header .t-NavigationBar .t-NavigationBar-item .t-Button .t-Button-label,
.t-Header .t-NavigationBar .t-NavigationBar-item .t-Button .t-Button-badge,
.t-Header-navBar .t-NavigationBar .t-Button-label,
.t-Header-navBar .t-NavigationBar .t-Button-badge,
.t-Header-navBar li .t-Button-label,
.t-Header-navBar li .t-LinksList-label,
.t-Header-navBar li .t-NavigationBar-label,
.t-Header-navBar li .t-Bar-label,
.t-Header-controls li .t-Button-label,
.t-Header-controls li .u-VisuallyHidden{
  position:absolute !important;
  inline-size:1px !important;block-size:1px !important;
  padding:0 !important;margin:-1px !important;
  overflow:hidden !important;clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;border:0 !important;
  display:block !important;     /* override display:inline-flex from UT */
  font-size:0 !important;        /* belt-and-braces */
}

@media (hover:hover){
  .t-Header-navBar li > a:hover,
  .t-Header-navBar li > .t-Button:hover,
  .t-Header-controls li > a:hover,
  .t-Header-controls li > .t-Button:hover{
    background-color:var(--blz-panel) !important;
    color:var(--blz-blue) !important;
    box-shadow:var(--blz-shadow-sm);
  }
}
.t-Header-navBar li > a:active,
.t-Header-navBar li > .t-Button:active{ transform:scale(.92); }

/* User dropdown entry — show username text instead of icon-only */
.t-Header-navBar li.has-username > a,
.t-Header-navBar li.has-username > .t-Button{
  inline-size:auto !important;
  padding-inline:12px !important;
  gap:6px;
  font-size:12px;font-weight:700;
  color:var(--blz-navy) !important;
}
.t-Header-navBar li.has-username .t-Button-label,
.t-Header-navBar li.has-username .t-LinksList-label,
.t-Header-navBar li.has-username > a > span:not(.t-Icon):not(.a-Icon):not(.fa):not(.fa6){
  position:static !important;
  inline-size:auto;block-size:auto;clip:auto;margin:0;
  white-space:nowrap;
}

.t-Body-title{
  background-color:var(--blz-panel);
  color:var(--blz-navy);
  border-block-end:1px solid var(--blz-line);
}
.t-Body-title .t-Body-title-content,
.t-Body-title h1,
.t-Body-title h2{
  color:var(--blz-navy);
  font-family:var(--blz-font-display);
  font-weight:700;
  letter-spacing:-0.01em;
}

/* APEX breadcrumb (the native one — Shared Components → Breadcrumbs) */
.t-BreadcrumbRegion,
.a-Region-body .a-Breadcrumb,
ul.a-Breadcrumb{
  background:transparent;
  color:var(--blz-muted);
  font-family:var(--blz-font);
}
.a-Breadcrumb a,
ul.a-Breadcrumb a{
  color:var(--blz-blue-dark);
  text-decoration:none;
  transition:color var(--blz-dur-fast,.12s) var(--blz-ease,ease);
}
@media (hover:hover){
  .a-Breadcrumb a:hover,
  ul.a-Breadcrumb a:hover{ color:var(--blz-blue); }
}
.a-Breadcrumb .a-Breadcrumb-label{ color:var(--blz-navy); font-weight:700; }

/* APEX UT's default footer is hidden — the Blitz Page template renders
   our custom footer (&G_BLZ_FOOT!RAW.) before #FORM_CLOSE# instead.
   Without this hide, both footers would render and the page would have
   two stacked footer bars. */
.t-Footer{ display:none !important; }

/* ============================================================
   1f. CUSTOM FOOTER (.blz-foot-bar)

   Rendered by &G_BLZ_FOOT!RAW. (populated by the SET_BLZ_FOOT
   Before-Header process). Layout:
     [● Blitz] [Layali ElQahera] [·] [v4.1]
   Fixed at the bottom of the viewport so it always anchors below
   the page content regardless of scroll length.
   ============================================================ */
.blz-foot-bar{
  position:fixed;
  inset-inline:0;inset-block-end:0;
  z-index:60;                                       /* above content, below APEX dialogs */
  display:flex;align-items:center;justify-content:center;
  gap:8px;
  padding-block:10px;padding-inline:14px;
  padding-block-end:max(10px, env(safe-area-inset-bottom));
  background:var(--blz-panel);
  border-block-start:1px solid var(--blz-border);
  box-shadow:var(--blz-shadow-sm);
  font-family:var(--blz-font);
  font-size:11.5px;
  font-weight:600;
  color:var(--blz-muted);
  letter-spacing:0.02em;
  transition:background-color .25s var(--blz-ease),
             color .25s var(--blz-ease),
             border-color .25s var(--blz-ease);
}
.blz-foot-mark{
  inline-size:6px;block-size:6px;border-radius:999px;
  background:var(--blz-blue);flex:0 0 auto;
}
.blz-foot-brand{
  color:var(--blz-navy);
  font-family:var(--blz-font-display);
  font-weight:700;
  letter-spacing:-0.015em;
  white-space:nowrap;unicode-bidi:isolate;
}
.blz-foot-tenant{
  color:var(--blz-muted);
  font-weight:600;
  white-space:nowrap;unicode-bidi:isolate;
  max-inline-size:40ch;
  overflow:hidden;text-overflow:ellipsis;
}
.blz-foot-sep{
  color:var(--blz-border);
  font-weight:700;
}
.blz-foot-version{
  color:var(--blz-navy);
  font-family:var(--blz-font-display);
  font-weight:700;
  letter-spacing:-0.015em;
  unicode-bidi:isolate;
}
/* Body padding so content scrolls past the fixed footer */
body:has(.blz-foot-bar){
  padding-block-end: calc(40px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px){
  .blz-foot-bar{ font-size:12px; padding-block:12px; }
  body:has(.blz-foot-bar){ padding-block-end: calc(44px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   1e. CUSTOM BREADCRUMB (.blz-crumb)

   Trail-only companion to APEX UT chrome — emitted by
   nav_ui_pkg.render_crumb_for_page. Place via a PL/SQL Dynamic
   Content region in a "Body Header" template position, OR via
   an app-item substitution (&G_BLZ_CRUMB.) inside BLITZ_NAV_BAR's
   list template "Before Rows" attribute. CSS auto-flips dark
   via the --blz-* tokens.
   ============================================================ */
.blz-crumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  padding-block:8px;padding-inline:18px;
  background:var(--blz-panel);
  border-block-end:1px solid var(--blz-line);
  font-family:var(--blz-font);
  font-size:13px;font-weight:600;
  color:var(--blz-muted);
}
:root[data-theme="dark"] .blz-crumb{
  background:rgba(255,255,255,.03);
}
.blz-crumb-back{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--blz-blue-soft);color:var(--blz-blue-dark);
  border:0;border-radius:var(--blz-r-pill);
  padding-block:5px;padding-inline-start:9px;padding-inline-end:11px;
  font-size:12px;font-weight:800;text-decoration:none;
  cursor:pointer;line-height:1.1;white-space:nowrap;font-family:inherit;
  transition:transform var(--blz-dur-fast) var(--blz-ease),
             background var(--blz-dur-fast) var(--blz-ease);
}
.blz-crumb-back-icon{flex:0 0 auto;display:block;}
.blz-crumb[dir="rtl"] .blz-crumb-back-icon{transform:scaleX(-1);}
@media (hover:hover){
  .blz-crumb-back:hover{background:var(--blz-blue);color:#fff;}
}
.blz-crumb-back:active{transform:scale(.96);}
.blz-crumb-back:focus-visible{
  outline:none;border-block-end:2px solid var(--blz-blue);
}
.blz-crumb-list{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:4px;min-inline-size:0;flex:1;
}
.blz-crumb-item{
  display:inline-flex;align-items:center;gap:4px;
  max-inline-size:100%;min-inline-size:0;
}
.blz-crumb-sep{
  color:var(--blz-border);font-size:13px;font-weight:900;line-height:1;
  padding-inline:2px;
}
.blz-crumb-link{
  color:var(--blz-blue-dark);text-decoration:none;
  padding-block:3px;padding-inline:6px;border-radius:var(--blz-r-input);
  max-inline-size:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  unicode-bidi:isolate;
  transition:background var(--blz-dur-fast) var(--blz-ease),
             color var(--blz-dur-fast) var(--blz-ease);
}
@media (hover:hover){
  .blz-crumb-link:hover{background:var(--blz-blue-soft);color:var(--blz-blue);}
}
.blz-crumb-text{
  padding-block:3px;padding-inline:6px;
  color:var(--blz-muted);
  max-inline-size:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  unicode-bidi:isolate;
}
.blz-crumb-current .blz-crumb-text{
  color:var(--blz-navy);font-weight:700;letter-spacing:-0.005em;
  position:relative;padding-block-end:4px;
}
.blz-crumb-current .blz-crumb-text::after{
  content:"";position:absolute;
  inset-block-end:0;inset-inline-start:6px;inset-inline-end:6px;
  block-size:2px;background:var(--blz-blue);border-radius:1px;
  transform-origin:inline-start;
  animation:blz-crumb-accent .22s var(--blz-ease) both;
}
@keyframes blz-crumb-accent{
  from{transform:scaleX(0);opacity:0;}
  to{transform:scaleX(1);opacity:1;}
}
@media(max-width:480px){
  .blz-crumb{padding-block:6px;padding-inline:12px;gap:8px;}
  .blz-crumb-back{padding-inline-start:7px;padding-inline-end:9px;font-size:11px;}
  .blz-crumb-back-label{display:none;}
  .blz-crumb-link,.blz-crumb-text{max-inline-size:160px;font-size:12px;}
}
@media(min-width:1024px){
  .blz-crumb{font-size:13.5px;}
}

/* Body font + text-size-adjust — these don't conflict with UT so we
   apply them unconditionally on pages where our CSS loads. Cheap, safe. */
body{
  font-family:var(--blz-font);
  -webkit-text-size-adjust:100%;
}

/* Card elevation cue for dark mode — shadows are weak against dark
   surfaces, so give cards a subtle top edge as a secondary cue. */
:root[data-theme="dark"] .blz-native .blz-card{
  border-block-start:1px solid var(--blz-line);
}

/* ============================================================
   2. NATIVE RESETS — touch behaviour shared by every control
   ============================================================ */
.blz-native *{ box-sizing:border-box; }
.blz-native, .blz-native *{ -webkit-tap-highlight-color:transparent; }
.blz-native input, .blz-native button, .blz-native select, .blz-native textarea{
  font-family:inherit; touch-action:manipulation;
}
.blz-native[dir="rtl"]{ text-align:right; }

/* ============================================================
   3. MOTION — entry animation, press feedback, reduced-motion
   ============================================================ */
@keyframes blz-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.blz-native .blz-anim-in{ animation:blz-in var(--blz-dur) var(--blz-ease) both; }
/* press-scale: add .blz-press to any tappable element */
.blz-native .blz-press{ transition:transform var(--blz-dur-fast) var(--blz-ease); }
.blz-native .blz-press:active{ transform:scale(.96); }
@media (prefers-reduced-motion:reduce){
  .blz-native .blz-anim-in{ animation:none; }
  .blz-native *{ transition-duration:.001ms !important; }
}

/* ============================================================
   4. PRIMITIVES — opt-in classes that carry the native look
   ============================================================ */

/* surface card */
.blz-native .blz-card{
  background:var(--blz-panel); border:1px solid var(--blz-border);
  border-radius:var(--blz-r-card); box-shadow:var(--blz-shadow-sm);
}

/* buttons */
.blz-native .blz-btn{
  border:0; border-radius:var(--blz-r-control); padding:11px 18px; font-weight:900;
  font-size:.86rem; cursor:pointer; line-height:1; display:inline-flex; align-items:center;
  justify-content:center; gap:7px; transition:background var(--blz-dur-fast),
  box-shadow var(--blz-dur-fast), transform var(--blz-dur-fast) var(--blz-ease);
}
.blz-native .blz-btn:active{ transform:scale(.97); }
.blz-native .blz-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.blz-native .blz-btn-primary{ background:var(--blz-blue); color:#fff; }
.blz-native .blz-btn-accent{ background:var(--blz-teal); color:#fff; }
.blz-native .blz-btn-ghost{ background:var(--blz-blue-soft); color:var(--blz-blue-dark); }
.blz-native .blz-btn-danger{ background:var(--blz-danger); color:#fff; }
@media (hover:hover){
  .blz-native .blz-btn-primary:not(:disabled):hover{ background:var(--blz-blue-dark); }
  .blz-native .blz-btn-accent:not(:disabled):hover{ background:var(--blz-teal-dark); }
  .blz-native .blz-btn-ghost:not(:disabled):hover{ background:var(--blz-blue-soft); }
}

/* inputs / selects / textarea — light mode uses a slightly-cooler-than-panel
   surface so the field reads as recessed. Dark mode override below swaps to
   --blz-panel (warm dark) so the input sits flush with the card. */
.blz-native .blz-input{
  /* Background = --blz-bg (warm cream in light, warm dark in dark) — slightly
     recessed from the white --blz-panel that hosts the input so the field has
     visual presence on a card without needing a heavier border. */
  inline-size:100%; border:1px solid var(--blz-border); background:var(--blz-bg); color:var(--blz-navy);
  border-radius:var(--blz-r-input); padding:9px 12px; font-size:16px; font-weight:700; font-family:inherit;
  transition:border-color var(--blz-dur-fast), box-shadow var(--blz-dur-fast), background var(--blz-dur-fast);
}
:root[data-theme="dark"] .blz-native .blz-input{
  background:var(--blz-bg);
  color:var(--blz-navy);
}
.blz-native .blz-input:focus{ outline:none; border-color:var(--blz-blue);
  box-shadow:0 0 0 3px var(--blz-blue-soft); background:var(--blz-blue-soft); }
:root[data-theme="dark"] .blz-native .blz-input:focus{
  background:var(--blz-blue-soft);   /* token re-resolves to warm copper-dark tint */
}
.blz-native .blz-input:focus-visible{
  outline:none;
  border-color:var(--blz-blue);
  /* glow uses --blz-blue-soft so it flips with the brand token. Avoids
     hardcoded rgba mismatching the active theme. */
  box-shadow:0 0 0 3px var(--blz-blue-soft);
}
:root[data-theme="dark"] .blz-native .blz-input:focus-visible{
  box-shadow:0 0 0 3px var(--blz-blue-soft);
}
.blz-native .blz-input::placeholder{ color:var(--blz-muted); font-weight:600; }
.blz-native .blz-input:disabled{ background:var(--blz-line); color:var(--blz-muted); cursor:not-allowed; }
.blz-native textarea.blz-input{ resize:vertical; min-block-size:46px; font-weight:600; }
.blz-native select.blz-input{ appearance:none; cursor:pointer; }

/* chip */
.blz-native .blz-chip{
  display:inline-flex; align-items:center; gap:3px; border-radius:var(--blz-r-pill); padding:1px 8px;
  font-size:.6rem; font-weight:900; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap;
  background:var(--blz-blue-soft); color:var(--blz-blue-dark);
}
.blz-native .blz-chip.accent{ background:var(--blz-teal-soft); color:var(--blz-teal-dark); }
.blz-native .blz-chip.success{ background:var(--blz-success-soft); color:var(--blz-success); }
.blz-native .blz-chip.warn{ background:var(--blz-warn-soft); color:var(--blz-warn); }
.blz-native .blz-chip.danger{ background:var(--blz-danger-soft); color:var(--blz-danger); }
/* stamped variant — status chips that read as "sealed/authoritative" (table
   status columns, the dominant status badge on a card head). Composes with the
   semantic variants: .blz-chip.success.stamped, .blz-chip.danger.stamped, …
   currentColor picks up whatever hue the variant set. Opt-in; never default. */
.blz-native .blz-chip.stamped{
  border:1.5px solid currentColor;
  box-shadow:inset 0 0 0 2px color-mix(in oklab, currentColor 8%, transparent),
            0 1px 1px color-mix(in oklab, currentColor 14%, transparent);
  transform:rotate(-1.5deg);
  padding:2px 10px; letter-spacing:.06em;
}
@media (prefers-reduced-motion: reduce){
  .blz-native .blz-chip.stamped{ transform:none; }
}

/* segmented toggle (scope/view switchers) */
.blz-native .blz-seg{ display:inline-flex; background:var(--blz-panel); border:1px solid var(--blz-border);
  border-radius:var(--blz-r-pill); padding:2px; gap:1px; }
.blz-native .blz-seg > button{ border:0; background:transparent; color:var(--blz-muted); font-weight:900;
  font-size:.66rem; letter-spacing:.03em; text-transform:uppercase; padding:6px 13px; border-radius:var(--blz-r-pill);
  cursor:pointer; white-space:nowrap; }
.blz-native .blz-seg > button.is-on{ background:var(--blz-blue); color:#fff; }

/* circular FAB (e.g. send / add) */
.blz-native .blz-fab{
  inline-size:46px; block-size:46px; min-inline-size:46px; border-radius:50%; border:0; cursor:pointer;
  background:var(--blz-blue); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--blz-shadow-fab); transition:background var(--blz-dur-fast), transform var(--blz-dur-fast) var(--blz-ease), box-shadow var(--blz-dur-fast);
}
.blz-native .blz-fab:active{ transform:scale(.92); }
@media (hover:hover){ .blz-native .blz-fab:hover{ background:var(--blz-blue-dark); } }
.blz-native .blz-fab:disabled{ background:var(--blz-border); box-shadow:none; cursor:not-allowed; transform:none; }

/* bidi atom — prices / ids / times / phones (pure-LTR, tabular) */
.blz-native .blz-num{ unicode-bidi:isolate; direction:ltr; font-variant-numeric:tabular-nums; }

/* ============================================================
   Accent line — the signature gesture (Layered Warmth §2b pillar 4)
   Apply .blz-accent-line on any container that should reveal a 2px
   brand-color underline on hover/focus/active. Uses scaleX animation
   so the line "draws in" from inline-start.
   ============================================================ */
.blz-accent-line{
  position:relative;
}
.blz-accent-line::after{
  content:"";
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  block-size:2px;
  background:var(--blz-blue);
  transform:scaleX(0);
  transform-origin:inline-start;
  transition:transform .22s var(--blz-ease);
  pointer-events:none;
}
.blz-accent-line:hover::after,
.blz-accent-line:focus-visible::after,
.blz-accent-line.is-active::after{
  transform:scaleX(1);
}

/* toast (single, fixed bottom-center) */
.blz-native .blz-toast{ position:fixed; inset-block-end:18px; inset-inline-start:50%; transform:translateX(-50%);
  background:var(--blz-navy); color:#fff; padding:10px 18px; border-radius:var(--blz-r-control);
  font-size:.85rem; font-weight:700; opacity:0; pointer-events:none; transition:opacity var(--blz-dur);
  z-index:12000; box-shadow:var(--blz-shadow); }
.blz-native .blz-toast.show{ opacity:1; }
.blz-native .blz-toast.error{ background:var(--blz-danger); }

/* ============================================================
   5. SHEET / MODAL — modal on desktop, bottom sheet on phone.
   Markup:
     <div class="blz-overlay" hidden>
       <div class="blz-overlay-bk" data-close></div>
       <div class="blz-modal">
         <div class="blz-grab"></div> ...content...
       </div>
     </div>
   Toggle the `.is-open` class on .blz-overlay (after un-hiding) to animate in.
   Portal the overlay to <body> on init (CLAUDE.md §7).
   ============================================================ */
.blz-overlay{ position:fixed; inset:0; z-index:11000; display:flex; align-items:center; justify-content:center; font-family:inherit; }
.blz-overlay[hidden]{ display:none; }
.blz-overlay-bk{ position:absolute; inset:0; background:var(--blz-overlay); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; transition:opacity .22s; }
.blz-overlay.is-open .blz-overlay-bk{ opacity:1; }
.blz-modal{ position:relative; z-index:1; inline-size:min(560px,94vw); max-block-size:92vh; display:flex; flex-direction:column;
  background:var(--blz-panel-over); border-radius:var(--blz-r-sheet); box-shadow:var(--blz-shadow-modal);
  overflow:hidden; transform:translateY(8px) scale(.97); opacity:0; transition:transform .24s cubic-bezier(.22,.61,.36,1), opacity .2s; color:var(--blz-navy); }
.blz-overlay.is-open .blz-modal{ transform:none; opacity:1; }
.blz-grab{ display:none; }
.blz-modal .blz-mhead{ display:flex; align-items:center; gap:10px; padding:15px 18px; background:var(--blz-panel); border-block-end:1px solid var(--blz-border); box-shadow:inset 0 3px 0 var(--blz-blue); }
.blz-modal .blz-mhead h2{ margin:0; font-size:1.06rem; font-weight:700; color:var(--blz-navy); flex:1 1 auto; }
.blz-modal .blz-mx{ inline-size:34px; block-size:34px; border:0; border-radius:9px; background:var(--blz-blue-soft); color:var(--blz-blue-dark); font-size:1.4rem; line-height:1; cursor:pointer; }
.blz-modal .blz-mbody{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:14px 18px; }
.blz-modal .blz-mfoot{ flex:0 0 auto; display:flex; gap:10px; padding:13px 18px; padding-block-end:max(13px,env(safe-area-inset-bottom)); background:var(--blz-panel); border-block-start:1px solid var(--blz-border); }
@media (max-width:560px){
  .blz-overlay{ align-items:flex-end; justify-content:stretch; }
  .blz-modal{ inline-size:100%; max-block-size:94dvh; border-radius:20px 20px 0 0; transform:translateY(100%); opacity:1; transition:transform .26s cubic-bezier(.22,.61,.36,1); }
  .blz-overlay.is-open .blz-modal{ transform:translateY(0); }
  .blz-grab{ display:block; inline-size:38px; block-size:4px; border-radius:999px; background:var(--blz-border); margin:8px auto 0; }
}

/* ============================================================
   6. MOBILE FLOOR (CLAUDE.md §8)
   ============================================================ */
@media (max-width:760px){
  /* iOS auto-zoom guard: 16px on every field inside a native root */
  .blz-native input, .blz-native select, .blz-native textarea, .blz-native .blz-input{ font-size:16px; }
  /* min 36px hit target for icon buttons */
  .blz-native .blz-fab{ min-inline-size:40px; min-block-size:40px; }
}

/* ============================================================
   7. FT PRICING BREAKDOWN PANEL (shared — .ftpd-*)
   Rendered by ft_pricing_disp_pkg.render_ft_price_html.
   Used on basket, p98 active-orders, wa-inbox, ft-ops dashboard.
   Selectors are bare .ftpd-* — no host-component prefix — so
   every surface that loads blz-native.css (and has .blz-native on
   the root or an ancestor) gets the full panel polish.
   Basket-layout concerns (grid column widths, price-label hide)
   stay in basket.css; only the visual panel rules live here.
   Token swaps vs basket.css originals:
     --bk-bg     → --blz-bg
     --bk-border → --blz-border
     --bk-muted  → --blz-muted
     --bk-navy   → --blz-navy
   Hex fallbacks kept so the panel is readable on surfaces that
   might not have all tokens (e.g. p98 with its own :root tokens).
   ============================================================ */

/* Panel box */
.ftpd-box{
  background:var(--blz-bg,#F5FAFC);
  border:1px solid var(--blz-border,#DCE8ED);
  border-radius:10px;
  padding:9px 11px 8px;
  font-size:12px;
  line-height:1.4;
  display:block;
  font-variant-numeric:tabular-nums;
}

/* Component rows: label at start, amount at end */
.ftpd-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  margin-bottom:2px;
}
.ftpd-label{
  font-size:11px;
  color:var(--blz-muted,#56646E);
  white-space:nowrap;
  flex-shrink:0;
}
.ftpd-val{
  font-size:12px;
  font-weight:800;
  color:var(--blz-navy,#102A3A);
  white-space:nowrap;
  text-align:end;
  unicode-bidi:isolate;
}

/* Muted sub-line (N × fee) */
.ftpd-hint{
  font-size:10px;
  color:var(--blz-muted,#56646E);
  margin-bottom:4px;
  text-align:end;
  unicode-bidi:isolate;
}

/* Divider above totals */
.ftpd-divider{
  border:0;
  border-top:1px solid var(--blz-border,#DCE8ED);
  margin:5px 0;
}

/* Total row */
.ftpd-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
}
.ftpd-total-label{
  font-size:11px;
  font-weight:900;
  color:var(--blz-navy,#102A3A);
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  flex-shrink:0;
}
.ftpd-total-val{
  font-size:14px;
  font-weight:950;
  color:var(--blz-navy,#102A3A);
  white-space:nowrap;
  text-align:end;
  unicode-bidi:isolate;
}

/* EGP equivalent (when default currency ≠ EGP) */
.ftpd-eq{
  font-size:10px;
  color:var(--blz-muted,#56646E);
  text-align:end;
  margin-top:1px;
  unicode-bidi:isolate;
}

/* Bidi isolation: money values inside ftpd always stay LTR */
.ftpd-val bdi,
.ftpd-total-val bdi,
.ftpd-hint bdi,
.ftpd-eq bdi{ direction:ltr; unicode-bidi:isolate; }

/* Mobile (≤ 480px): compact padding */
@media (max-width:480px){
  .ftpd-box{ padding:8px 10px; }
}

/* Desktop: slightly larger text in the panel */
@media (min-width:1024px){
  .ftpd-label      { font-size:12px; }
  .ftpd-val        { font-size:13px; }
  .ftpd-hint       { font-size:11px; }
  .ftpd-total-label{ font-size:12px; }
  .ftpd-total-val  { font-size:15px; }
  .ftpd-eq         { font-size:11px; }
}

/* ============================================================
   8. .blz-linepick — SERVICE PICKER for "Collect payment" sheets
   A tick-list of a trip's collectable services, so one payment
   (WhatsApp pay-link or recorded cash) can cover several of them.
   Markup contract: docs/design/component-library/collect-sheet.md
   Consumers: opsgame (Mission Board), chat-ops console,
              customer-experience (CXH p98), basket pay sheet.
   Behavioural note for implementers — the SINGLE-TICK RULE: when
   exactly one line is ticked the surface sends NO scope to the
   server, preserving the existing single-line path. Scope travels
   only at two or more ticks. See the doc.
   Token notes: --blz-line-strong / --blz-raised / --blz-r-md /
   --blz-r-sm do not exist in this sheet; this block uses the real
   tokens (--blz-border, --blz-blue-soft, --blz-r-card, --blz-r-input).
   ============================================================ */
.blz-native .blz-linepick{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-block-size:42vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid var(--blz-border);
  border-radius:var(--blz-r-card);
  background:var(--blz-panel);
  padding:4px;
}

/* one collectable service — a full-width tappable row */
.blz-native .blz-linepick-row{
  display:grid;
  grid-template-columns:22px 1fr auto;
  align-items:center;
  gap:10px;
  inline-size:100%;
  padding:10px 12px;
  min-block-size:44px;
  border:0;
  border-radius:var(--blz-r-input);
  background:transparent;
  font-family:inherit;
  text-align:start;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  /* the global prefers-reduced-motion block (§3) neutralises this */
  transition:background var(--blz-dur-fast) var(--blz-ease);
}
.blz-native .blz-linepick-row.is-on{ background:var(--blz-blue-soft); }
@media (hover:hover){
  .blz-native .blz-linepick-row:not([disabled]):hover{ background:var(--blz-line); }
  .blz-native .blz-linepick-row.is-on:not([disabled]):hover{ background:var(--blz-blue-soft); }
}
.blz-native .blz-linepick-row:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--blz-blue);
}
.blz-native .blz-linepick-row[disabled]{ cursor:default; opacity:.62; }

/* leading tick box — the ✓ glyph is transparent until the row is on */
.blz-native .blz-linepick-tick{
  inline-size:22px;
  block-size:22px;
  border:2px solid color-mix(in oklab, var(--blz-muted) 45%, transparent);
  border-radius:6px;
  display:grid;
  place-items:center;
  font-size:13px;
  line-height:1;
  color:transparent;
  transition:background var(--blz-dur-fast) var(--blz-ease),
             border-color var(--blz-dur-fast) var(--blz-ease);
}
.blz-native .blz-linepick-row.is-on .blz-linepick-tick{
  background:var(--blz-blue);
  border-color:var(--blz-blue);
  color:var(--blz-white);
}

/* body — service title, with an optional inline muted qualifier */
.blz-native .blz-linepick-title{
  min-inline-size:0;
  font-size:14px;
  font-weight:700;
  color:var(--blz-navy);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  unicode-bidi:isolate;   /* a service title may mix Arabic + Latin */
}
.blz-native .blz-linepick-sub{
  font-size:12.5px;
  font-weight:600;
  color:var(--blz-muted);
  unicode-bidi:isolate;
}
.blz-native .blz-linepick-sub::before{
  content:"\00B7";
  margin-inline:6px;
  color:var(--blz-muted);
}

/* trailing money atom — pure LTR so bidi never reorders it on an Arabic page */
.blz-native .blz-linepick-amt{
  font-size:14px;
  font-weight:700;
  color:var(--blz-navy);
  font-variant-numeric:tabular-nums;
  direction:ltr;
  unicode-bidi:isolate;
  white-space:nowrap;
}

/* bulk actions — Select all / Clear, end-aligned under the list */
.blz-native .blz-linepick-bulk{
  display:flex;
  justify-content:flex-end;
  gap:14px;
  padding:6px 12px 2px;
}

/* running summary — "2 of 3 services · 5,000.00 EGP outstanding" */
.blz-native .blz-linepick-sum{
  padding:8px 2px 0;
  font-size:13px;
  font-weight:600;
  color:var(--blz-muted);
  unicode-bidi:isolate;
}
/* optional second line — how the collected amount splits across the ticks */
.blz-native .blz-linepick-split{
  margin-block-start:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--blz-muted);
  unicode-bidi:isolate;
}

/* mobile floor (CLAUDE.md §8) — bigger targets, shorter list */
@media (max-width:760px){
  .blz-native .blz-linepick{ max-block-size:38vh; }
  .blz-native .blz-linepick-row{ min-block-size:48px; }
}
/* desktop readability (CLAUDE.md §8) — bump secondary text 1px */
@media (min-width:1024px){
  .blz-native .blz-linepick-title,
  .blz-native .blz-linepick-amt{ font-size:15px; }
  .blz-native .blz-linepick-sub,
  .blz-native .blz-linepick-split{ font-size:13.5px; }
  .blz-native .blz-linepick-sum{ font-size:14px; }
}

/* ============================================================
   9. OPS FINTECH SKIN — white / slate / indigo (2026-09-28)
   Re-declares the --blz-* tokens with the Fintech values
   (docs/design/fintech-design-system.md) so the ops surfaces match
   the Receivables desk. Spec:
   docs/superpowers/specs/2026-09-28-ops-fintech-reskin-design.md
     body:has(#ogRoot, #trxOps, #ftxOps) — p400 / p66 / p68: skins the
       whole page incl. APEX canvas + overlays appended to <body>
     #lasRoot #lstRoot #ftvRoot — ops forms on ANY page (p371 too)
     .blz-skin-fx — opt-in class for future surfaces
   Dark: same selectors under :root[data-theme="dark"] (higher
   specificity). Dark --blz-blue is #6366F1 (not the fx #818CF8) so
   white button text stays ~4.5:1.
   ============================================================ */
body:has(#ogRoot, #trxOps, #ftxOps),
#lasRoot, #lstRoot, #ftvRoot,
.blz-skin-fx{
  --blz-bg:#F7F8FA;
  --blz-panel:#FFFFFF;
  --blz-panel-raised:#FFFFFF;
  --blz-panel-over:#FFFFFF;
  --blz-border:#E9EDF3;
  --blz-line:#F1F4F8;
  --blz-navy:#0F172A;
  --blz-muted:#64748B;            /* 4.76:1 on white — AA */
  --blz-ink:#0F172A;
  --blz-ink-fg:#FFFFFF;
  --blz-blue:#4F46E5;             /* single indigo accent */
  --blz-blue-dark:#4338CA;
  --blz-blue-soft:#EEF2FF;
  --blz-teal:#1D4ED8;             /* info blue — secondary */
  --blz-teal-dark:#1E40AF;
  --blz-teal-soft:#EFF6FF;
  --blz-success:#047857;  --blz-success-soft:#ECFDF5;
  --blz-warn:#C2410C;     --blz-warn-soft:#FFF7ED;
  --blz-danger:#B91C1C;   --blz-danger-soft:#FEF2F2;
  --blz-overlay:rgba(15,23,42,.36);
  --blz-r-card:16px;
  --blz-r-sheet:16px;
  --blz-shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --blz-shadow:0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03);
  --blz-shadow-card:0 4px 14px rgba(15,23,42,.06);
  --blz-shadow-modal:0 20px 50px rgba(15,23,42,.18);
  --blz-shadow-fab:0 4px 12px rgba(15,23,42,.14);
  --blz-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
             "Noto Sans Arabic", "Geeza Pro", "Arabic UI Text", Tahoma, sans-serif;
}
:root[data-theme="dark"] body:has(#ogRoot, #trxOps, #ftxOps),
:root[data-theme="dark"] #lasRoot,
:root[data-theme="dark"] #lstRoot,
:root[data-theme="dark"] #ftvRoot,
:root[data-theme="dark"] .blz-skin-fx{
  --blz-bg:#0B1120;
  --blz-panel:#111827;
  --blz-panel-raised:#1A2332;
  --blz-panel-over:#111827;
  --blz-border:#1F2937;
  --blz-line:#1A2332;
  --blz-navy:#E5E7EB;
  --blz-muted:#9CA3AF;
  --blz-ink:#1F2937;
  --blz-ink-fg:#E5E7EB;
  --blz-blue:#6366F1;
  --blz-blue-dark:#818CF8;
  --blz-blue-soft:rgba(129,140,248,.16);
  --blz-teal:#93C5FD;
  --blz-teal-dark:#BFDBFE;
  --blz-teal-soft:rgba(96,165,250,.14);
  --blz-success:#6EE7B7;  --blz-success-soft:rgba(52,211,153,.14);
  --blz-warn:#FDBA74;     --blz-warn-soft:rgba(251,146,60,.14);
  --blz-danger:#FCA5A5;   --blz-danger-soft:rgba(248,113,113,.14);
  --blz-overlay:rgba(2,6,23,.6);
  --blz-shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --blz-shadow:0 1px 2px rgba(0,0,0,.4);
  --blz-shadow-card:0 6px 18px rgba(0,0,0,.45);
  --blz-shadow-modal:0 24px 60px rgba(0,0,0,.55);
  --blz-shadow-fab:0 4px 14px rgba(0,0,0,.5);
}
/* 9b. Full-bleed — the ops dashboards use the whole content width (no UT
   max-width cap; a small fluid gutter keeps content off the screen edge). */
body:has(#ogRoot, #trxOps, #ftxOps) .t-Body-content,
body:has(#ogRoot, #trxOps, #ftxOps) .t-Body-mainContent,
body:has(#ogRoot, #trxOps, #ftxOps) .t-Body-contentInner{
  max-width:none; max-inline-size:none; inline-size:auto;
}
body:has(#ogRoot, #trxOps, #ftxOps) .t-Body-contentInner{
  margin-inline:0; padding-inline:clamp(12px, 1.6vw, 28px);
}
/* Tailwind (loaded app-wide) caps .container at 1536px at its 2xl breakpoint, and APEX wraps
   every region in <div class="container"> — that is the real width cap on these pages. */
body:has(#ogRoot, #trxOps, #ftxOps) .t-Body-contentInner .container{ max-width:none; }