/* ═══════════════════════════════════════════════════════════════════
   App themes — the active app's design system re-skins the shell IN PLACE.

   Mocca is the default (cyan/navy, defined in colors_and_type.css). When
   the app is switched to the CV, html[data-app="cv"] applies the real
   "Purple Glass" / liquid-glass design system from Applications/CV:
   Outfit type, violet/lavender accents, translucent blur-glass surfaces,
   softer/rounder geometry and an aurora canvas — an ENTIRELY different
   look for the SAME layout and pages (Pablo 2026-06-19: app switching
   should demonstrate one prototype wearing two design systems).

   Light AND dark both supported (Pablo 2026-06-19 — "light theme is not
   working on the CV, we should have all options"): shared tokens live on
   [data-app="cv"]; the palette splits by [data-theme].
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ B50 — SYSTEMIC `[hidden]` GUARD (loads last on purpose) ═══════════════
   An author `display:` declaration beats the UA `[hidden]{display:none}` rule
   regardless of specificity, so `el.hidden = true` silently becomes a NO-OP on
   any class that styles its own display. That single trap has now produced
   seven separate bug reports across this project (.cmp-pv-ctxpanel, .cs,
   .page-fab-item, .page-actions-item, .chip, .wl-ms-menu, .bu-sec-b — Pablo
   this batch: "This never closes", "This dropdown doesn't collapse either",
   "This dropdown is constantly opened. Seriously, these are the kind of things
   you should've identified already"). Rather than keep chasing it one class at
   a time, honour the attribute globally, here, in the last-loaded sheet.
   Opt out with [data-cmp-force] (the component lab's force-show lens, which
   deliberately reveals hidden nodes) or [data-hidden-styled]. */
[hidden]:not([data-cmp-force]):not([data-hidden-styled]){ display:none !important; }
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* Smooth the swap so re-skinning reads as a deliberate transition.
   IMPORTANT (TH-01/TH-02, 2026-07-02): this transition is applied ONLY while
   an actual theme/app switch is in flight (html.theme-anim, toggled for ~450ms
   by the theme/app switch handlers). An always-on `transition: color/background`
   here was fragile: whenever the animation timeline is throttled (offscreen
   preview iframe, background tab, low-power), the transitions freeze at
   currentTime:0 and strand every chrome surface at the PREVIOUS theme's colors
   — which is exactly what made the filter panel (and the whole shell) render
   with light backgrounds/dark text under the dark theme. Gating on the
   transient class means that at REST there is no transition, so surfaces always
   paint their true computed colors and can never be stranded. */
html.theme-anim .shell, html.theme-anim .body, html.theme-anim .page,
html.theme-anim .nav, html.theme-anim .sidebar,
html.theme-anim .filter-panel, html.theme-anim .panel-card{
  transition: background-color .35s var(--mk-ease), border-color .35s var(--mk-ease), color .35s var(--mk-ease);
}

/* ── Shared CV tokens (theme-independent): type, violet brand ramp,
      accents, rounder geometry, and the glass-recipe variables both
      themes consume. ── */
html[data-app="cv"]{
  --mk-font-ui:"Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mk-font-ar:"Outfit", "Tahoma", sans-serif;

  /* Brand base → violet, so everything derived (accent/ring/soft/charts) follows. */
  --mk-blue-400: oklch(0.72 0.17 290);
  --mk-blue-500: oklch(0.66 0.17 290);
  --mk-teal-400: oklch(0.78 0.13 285);

  --accent: oklch(0.66 0.17 290);
  --accent-2: oklch(0.74 0.14 300);
  --accent-fg: oklch(0.99 0.01 285);
  --accent-soft: oklch(0.70 0.17 290 / 0.18);
  --ring: oklch(0.70 0.17 290 / 0.45);

  /* Rounder, softer than Mocca — part of the liquid-glass identity. */
  --mk-radius-sm: 12px;
  --mk-radius-md: 14px;
  --mk-radius-lg: 22px;
  --mk-radius-xl: 26px;
  --mk-radius-pill: 999px;

  /* Glass recipe — overridden per theme below. */
  --cv-glass-grad: linear-gradient(135deg, oklch(1 0 0 / 0.08), oklch(1 0 0 / 0.02) 40%, oklch(1 0 0 / 0.04) 100%);
  --cv-glass-base: oklch(0.99 0.01 285 / 0.06);
  --cv-glass-stroke: oklch(0.99 0.01 285 / 0.16);
  --cv-glass-shadow: 0 24px 60px -30px oklch(0.10 0.06 285 / 0.65);
  --cv-glass-blur: blur(20px) saturate(140%);
}

/* ── DARK Purple Glass — aurora canvas, white-tinted glass ──────────── */
html[data-app="cv"][data-theme="dark"]{
  --fg-1: oklch(0.96 0.01 285);
  --fg-2: oklch(0.78 0.03 285);
  --fg-3: oklch(0.62 0.04 285);
  --fg-invert: oklch(0.16 0.05 285);

  --bg-1: oklch(0.16 0.05 285);            /* aurora canvas */
  --bg-2: oklch(0.99 0.01 285 / 0.06);     /* glass fill */
  --bg-3: oklch(0.99 0.01 285 / 0.10);     /* glass fill strong */
  --bg-input: oklch(0.99 0.01 285 / 0.06);

  --sidebar: oklch(0.13 0.05 285);
  --sidebar-deep: oklch(0.10 0.05 285);
  --sidebar-fg: oklch(0.94 0.02 285);
  --sidebar-fg-muted: oklch(0.70 0.03 285 / 0.85);
  --wordmark-color: oklch(0.96 0.01 285);

  --border: oklch(0.99 0.01 285 / 0.16);          /* glass stroke */
  --border-strong: oklch(0.99 0.01 285 / 0.30);
  --divider: oklch(0.99 0.01 285 / 0.10);

  --accent-text: oklch(0.82 0.14 285);
  --scrim: oklch(0.10 0.05 285 / 0.62);

  --cv-glass-grad: linear-gradient(135deg, oklch(1 0 0 / 0.08), oklch(1 0 0 / 0.02) 40%, oklch(1 0 0 / 0.04) 100%);
  --cv-glass-base: oklch(0.99 0.01 285 / 0.06);
  --cv-glass-stroke: oklch(0.99 0.01 285 / 0.16);
  --cv-glass-shadow: 0 24px 60px -30px oklch(0.10 0.06 285 / 0.65);
}

/* ── LIGHT CV theme — "Slate Indigo" (Pablo 2026-06-22: keep the purple but
   the old grape/orchid canvas read too pink. Wants MORE PURPLE THAN PINK and
   MORE GRAY THAN COLORED on light). So: cool slate-gray surfaces (very low
   chroma, cool ~264 hue) and a deeper INDIGO-VIOLET accent (~282, leaning
   blue not magenta). Dark mode is left as-is. ── */
html[data-app="cv"][data-theme="light"]{
  --fg-1: oklch(0.27 0.028 268);
  --fg-2: oklch(0.45 0.022 266);
  --fg-3: oklch(0.58 0.018 264);
  --fg-invert: oklch(0.99 0.004 264);

  /* Deeper indigo-violet accent (blue-leaning ~282), overrides the shared
     290 tone for light only (dark keeps its lavender accent). */
  --mk-blue-400: oklch(0.58 0.18 282);
  --mk-blue-500: oklch(0.50 0.19 282);
  --mk-teal-400: oklch(0.62 0.15 270);
  --accent: oklch(0.50 0.19 282);
  --accent-2: oklch(0.58 0.16 288);
  --accent-fg: oklch(0.99 0.006 282);
  --accent-soft: oklch(0.55 0.18 282 / 0.15);
  --ring: oklch(0.55 0.18 282 / 0.42);

  /* Cool slate-gray canvas + surfaces — gray first, only a whisper of indigo. */
  --bg-1: oklch(0.955 0.006 266);          /* cool light slate-gray canvas */
  --bg-2: oklch(1 0 0 / 0.74);             /* clean frosted glass (cool white) */
  --bg-3: oklch(0.995 0.003 266 / 0.92);   /* near-solid cool-white card */
  --bg-input: oklch(1 0 0 / 0.80);

  --sidebar: oklch(0.945 0.008 266);
  --sidebar-deep: oklch(0.925 0.010 266);
  --sidebar-fg: oklch(0.30 0.030 268);
  --sidebar-fg-muted: oklch(0.48 0.022 266 / 0.9);
  --wordmark-color: oklch(0.32 0.04 276);

  --border: oklch(0.46 0.020 266 / 0.18);
  --border-strong: oklch(0.42 0.030 270 / 0.30);
  --divider: oklch(0.46 0.020 266 / 0.12);

  --accent-text: oklch(0.46 0.19 282);
  --scrim: oklch(0.40 0.030 268 / 0.30);

  /* Cool, near-neutral glass — white fills, soft indigo (not pink) shadow. */
  --cv-glass-grad: linear-gradient(135deg, oklch(1 0 0 / 0.74), oklch(1 0 0 / 0.50) 45%, oklch(1 0 0 / 0.62) 100%);
  --cv-glass-base: oklch(1 0 0 / 0.58);
  --cv-glass-stroke: oklch(1 0 0 / 0.82);
  --cv-glass-shadow: 0 22px 50px -32px oklch(0.40 0.10 282 / 0.30);
}

/* Aurora background — fixed drifting blobs behind the whole shell, lifted
   from the CV. Dark + light variants so it reads in both themes. */
html[data-app="cv"] body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  filter: blur(40px);
  animation: cv-aurora 26s ease-in-out infinite;
}
html[data-app="cv"][data-theme="dark"] body::before{
  background:
    radial-gradient(60% 45% at 0% 0%,   oklch(0.66 0.20 285 / 0.55), transparent 60%),
    radial-gradient(60% 45% at 100% 100%, oklch(0.64 0.18 305 / 0.55), transparent 60%),
    radial-gradient(40% 35% at 70% 40%,  oklch(0.78 0.14 75 / 0.32), transparent 60%);
}
html[data-app="cv"][data-theme="light"] body::before{
  /* Subdued indigo-violet wash (Pablo 2026-06-22: "more gray than colored").
     Low chroma + low opacity so the slate-gray canvas dominates and the hue is
     purple, not pink. */
  background:
    radial-gradient(60% 45% at 0% 0%,    oklch(0.72 0.10 282 / 0.22), transparent 60%),
    radial-gradient(60% 45% at 100% 100%, oklch(0.74 0.09 288 / 0.20), transparent 60%),
    radial-gradient(40% 35% at 70% 40%,  oklch(0.80 0.06 270 / 0.16), transparent 60%);
}
@keyframes cv-aurora{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(-2%, 2%) scale(1.06); }
}
@media (prefers-reduced-motion:reduce){
  html[data-app="cv"] body::before{ animation:none; }
}
/* Keep the app chrome above the aurora. */
html[data-app="cv"] #shell, html[data-app="cv"] .shell{ position:relative; z-index:1; }

/* ── Glass surfaces — translucent + backdrop blur over the aurora ─────
      Includes the dashboard balance banner + any [data-dark-surface]:
      under Mocca it's an opaque dark slab, but the CV system turns every
      surface to glass, so it must convert too (Pablo 2026-06-19 — "this
      component doesn't acquire the purple-glass style"). ── */
html[data-app="cv"] .nav,
html[data-app="cv"] .sidebar,
html[data-app="cv"] .filter-panel,
html[data-app="cv"] .panel-card,
html[data-app="cv"] .cl-panel,
html[data-app="cv"] .cl-card,
html[data-app="cv"] .ds-comp,
html[data-app="cv"] .ds-syscard,
html[data-app="cv"] .dash-card,
html[data-app="cv"] .card,
html[data-app="cv"] .mk-card,
html[data-app="cv"] .bal-banner,
html[data-app="cv"] [data-dark-surface]{
  background: var(--cv-glass-grad), var(--cv-glass-base) !important;
  -webkit-backdrop-filter: var(--cv-glass-blur);
  backdrop-filter: var(--cv-glass-blur);
  border:1px solid var(--cv-glass-stroke);
  box-shadow: var(--cv-glass-shadow);
}
/* The balance banner's own text is light-on-dark in Mocca; on the CV glass
   it must read against the themed glass instead. */
html[data-app="cv"] .bal-banner,
html[data-app="cv"] .bal-banner *{ color: var(--fg-1); }
html[data-app="cv"] .bal-banner .bb-l,
html[data-app="cv"] .bal-banner .bb-sub{ color: var(--fg-2); }

/* The body canvas reads the base directly (no blur — nothing behind it). */
html[data-app="cv"] .body,
html[data-app="cv"] .body-in,
html[data-app="cv"] .page{ background: transparent; }
html[data-app="cv"] body{ background: var(--bg-1); }

/* ── Brand swap — CV identity in place of the Mocca mark ────────────── */
.brand-cv{ display:none; align-items:center; gap:9px; }
.brand-cv-icon{ width:26px; height:26px; border-radius:8px; object-fit:cover; flex:none; }
.brand-cv-word{ font:700 19px/1 var(--mk-font-ui); letter-spacing:-.01em; color:var(--sidebar-fg); white-space:nowrap; }
html[data-app="cv"] .nav-brand .icon,
html[data-app="cv"] .nav-brand .wordmark,
html[data-app="cv"] .sb-brand .icon,
html[data-app="cv"] .sb-brand .wordmark{ display:none !important; }
html[data-app="cv"] .brand-cv{ display:inline-flex; }

/* C13 (Pablo 2026-06-22): the CV wordmark ("Pablo Osorio", 19px nowrap)
   overflowed the compact brand area on tablet/mobile and shoved the icon out
   of view. Mirror the Mocca mark's responsive behaviour — shrink + truncate
   the word on tablet, drop to icon-only on mobile-V/H — so the icon always
   shows and nothing overflows. */
@media (max-width:1024px){
  html[data-app="cv"] .nav-brand .brand-cv{ max-width:100%; min-width:0; gap:7px; }
  html[data-app="cv"] .nav-brand .brand-cv-word{
    font-size:15px; min-width:0; max-width:118px;
    overflow:hidden; text-overflow:ellipsis;
  }
}
@media (max-width:600px) and (orientation:portrait){
  /* Navbar brand is icon-only here (the Mocca wordmark is hidden too). */
  html[data-app="cv"] .nav-brand .brand-cv-word{ display:none; }
  html[data-app="cv"] .nav-brand .brand-cv{ justify-content:center; }
  /* The sidebar header has room — keep the word there. */
  html[data-app="cv"] .sb-brand .brand-cv-word{ display:inline; font-size:17px; }
}
@media (max-height:599px) and (orientation:landscape){
  html[data-app="cv"] .nav-brand .brand-cv-word{ display:none; }
  html[data-app="cv"] .nav-brand .brand-cv{ justify-content:center; }
}

/* ── Distinct shell chrome — pills, inputs, primary buttons all pick up
      the rounder liquid-glass geometry so the SHELL itself changes, not
      just the content (Pablo 2026-06-19). ── */
html[data-app="cv"] .nav-pill,
html[data-app="cv"] .chip,
html[data-app="cv"] .seg,
html[data-app="cv"] .cs-btn,
html[data-app="cv"] .btn,
html[data-app="cv"] input,
html[data-app="cv"] textarea{
  border-radius: var(--mk-radius-md);
}
html[data-app="cv"] .nav-pill,
html[data-app="cv"] .chip{
  background: var(--cv-glass-base);
  -webkit-backdrop-filter: var(--cv-glass-blur);
  backdrop-filter: var(--cv-glass-blur);
  border:1px solid var(--cv-glass-stroke);
}
html[data-app="cv"] .btn.primary,
html[data-app="cv"] .btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border:1px solid transparent;
}

/* ── B10-02 (Pablo): the CV SIDEBAR must not be a different color than the
      navbar. The glass surface group above targets `.sidebar`, but the real
      element is `.sb` — so the sidebar fell back to the solid aurora canvas
      (var(--bg-1)) while the navbar got glass. Give `.sb` the SAME glass so the
      two chrome surfaces read identical. ── */
html[data-app="cv"] .sb{
  background: var(--cv-glass-grad), var(--cv-glass-base) !important;
  -webkit-backdrop-filter: var(--cv-glass-blur);
  backdrop-filter: var(--cv-glass-blur);
}

/* ── B10-03 (Pablo): CV navbar pills must carry the SAME visible neutral
      border the Mocca pills have at rest — the faint glass stroke read as
      "borderless". Strengthen the rest border; accent-on-hover/active is
      inherited from shell.css unchanged. ── */
html[data-app="cv"] .nav-pill{
  border:1px solid color-mix(in srgb, var(--fg-2) 34%, var(--cv-glass-stroke));
}
html[data-app="cv"] .nav-pill:hover,
html[data-app="cv"] .nav-pill.active,
html[data-app="cv"] .nav-pill[aria-expanded="true"]{
  border-color: var(--accent);
}

/* ── VC-21 / B23 — DS-driven delete glyph. Mocca (default) uses X (`close`);
   the CV / Purple-Glass DS uses a trash bin (`delete`). Every remove affordance
   renders `<span class="mi">close</span>`; under CV we hide that ligature and
   overlay the `delete` ligature via ::before (which inherits the Material
   Symbols font-family, size and colour), so ALL remove buttons flip to the
   trash bin without touching a single call site — and revert to X in Mocca.
   Scoped to the known REMOVE affordances so genuine close buttons (panel
   close, back) keep their X in both systems. ── */
html[data-app="cv"] :is(.card-edit-rm,.fp-chip-del,.cb-ob-rm,.sort-rm,.cb-row-rm,.cb-f-rm,.cmp-el-del,.pe-card-rm,.wl-dest-del) .mi{
  visibility:hidden; position:relative;
}
html[data-app="cv"] :is(.card-edit-rm,.fp-chip-del,.cb-ob-rm,.sort-rm,.cb-row-rm,.cb-f-rm,.cmp-el-del,.pe-card-rm,.wl-dest-del) .mi::before{
  content:"delete"; visibility:visible; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}

/* ═════════════════════════════════════════════════════════════════
   JOCKEY — the THIRD app the shell can wear (B62 § F-28, wave 7).
   Pablo: "just make sure this is integrated into the mocca front end and
   back end architecture." The backend + registries landed in session 3;
   this is the FRONT-END half — the same shell, re-skinned in place, so the
   Jockey flow can be commented on inside the prototype.

   The system is already authored once in jockey/jockey-brand.css (wave 1:
   candidate A "papel crema" = LIGHT, candidate B "azul de noche" = DARK,
   all-sans Archivo, gold reduced to a 1px hairline plus #7E5F14 when it has
   to be text, ONE solid — --jk-chrome — for selected states). This block
   only MAPS those literals onto the shell's token names; it must not invent
   a colour, or the two definitions drift and the DS tab lies.
   ═════════════════════════════════════════════════════════════════ */
html[data-app="jockey"]{
  --mk-font-ui:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mk-font-ar:"Archivo","Tahoma",sans-serif;
  --mk-font-brand:"Archivo",var(--mk-font-ui);
  /* B63 W5 — the palette now comes from Pablo's vector crest (2026-09-21):
     its navy #1D2945 is the ink, its gold #CC9F52 the hairline. */
  --mk-blue-400:#CC9F52; --mk-blue-500:#7E5F14; --mk-teal-400:#2F6B4F;
  --mk-radius-sm:10px; --mk-radius-md:14px; --mk-radius-lg:18px; --mk-radius-xl:22px; --mk-radius-pill:999px;
  --jk-gold:#CC9F52;
  --jk-hair:rgba(204,159,82,.6);
}
/* ── LIGHT — papel crema. Crest navy on cream; gold is a hairline only. ── */
html[data-app="jockey"][data-theme="light"],
html[data-app="jockey"]:not([data-theme="dark"]){
  --fg-1:#1D2945; --fg-2:#56607A; --fg-3:#7D7766; --fg-4:#7D7766; --fg-invert:#FBF8F2;
  --muted:#56607A;
  --bg-1:#FBF8F2; --bg-2:#FFFFFF; --bg-3:#F3EEE3; --bg-input:#FFFFFF;
  --sidebar:#FBF8F2; --sidebar-deep:#F3EEE3; --sidebar-fg:#1D2945; --sidebar-fg-muted:#56607A;
  --wordmark-color:#1D2945;
  --border:#E8E1D2; --border-strong:#D8CFBC; --bd-1:#E8E1D2; --divider:#EFE8DA;
  --accent:#1D2945; --accent-2:#131B2C; --accent-fg:#FBF8F2;
  --accent-soft:rgba(204,159,82,.16); --accent-text:#7E5F14; --ring:rgba(204,159,82,.45);
  --mk-ok:#2F6B4F; --mk-err:#A82219; --warn:#8A5A00; --mk-warn:#8A5A00;
  --scrim:rgba(19,27,44,.42);
}
/* ── DARK — azul de noche. Night navy, gold becomes the solid. ── */
html[data-app="jockey"][data-theme="dark"]{
  --fg-1:#EFEAE0; --fg-2:#A7B2C4; --fg-3:#8F9CB2; --fg-4:#8F9CB2; --fg-invert:#131B2C;
  --muted:#A7B2C4;
  --bg-1:#131B2C; --bg-2:#18223A; --bg-3:#1C2640; --bg-input:#18223A;
  --sidebar:#1C2640; --sidebar-deep:#131B2C; --sidebar-fg:#EFEAE0; --sidebar-fg-muted:rgba(239,234,224,.66);
  --wordmark-color:#EFEAE0;
  --border:rgba(204,159,82,.2); --border-strong:rgba(204,159,82,.36); --bd-1:rgba(204,159,82,.2); --divider:rgba(204,159,82,.13);
  --accent:#CC9F52; --accent-2:#B98C40; --accent-fg:#131B2C;
  --accent-soft:rgba(204,159,82,.16); --accent-text:#DDBB7E; --ring:rgba(204,159,82,.5);
  --mk-ok:#5FCB99; --mk-err:#FF8A7E; --warn:#E0B25C; --mk-warn:#E0B25C;
  --scrim:rgba(8,12,22,.62);
}
/* The canvas + the two chrome surfaces read the mapped tokens directly. */
html[data-app="jockey"] body{ background:var(--bg-1); }
html[data-app="jockey"] .body, html[data-app="jockey"] .body-in, html[data-app="jockey"] .page{ background:transparent; }
/* THE ornament: one gold hairline where the chrome meets the page — under the
   navbar and under the page header. Never a block, never a second one.
   It has to be written at the shell's OWN specificity: `.shell.signed-in .nav`
   sets `border-bottom:0` in three separate breakpoints (0,3,0), so a plain
   `html[data-app] .nav` (0,2,1) is inert and the ornament renders nowhere —
   which in the light theme also left the transparent navbar with no edge at
   all against a cream canvas. And `.page-h` needs the WHOLE shorthand: a
   border-colour on a border with no style is a no-op (its visible seam is the
   ::before glass strip, which is display:none on mobile anyway). */
html[data-app="jockey"] .nav.nav{ position:relative; }
/* The hairline is PAINTED, not bordered. `.nav`'s border-bottom is zeroed in
   three breakpoints AND its border colour refuses to take even from an inline
   !important rgba (measured), while a background var resolves fine — so a 1px
   painted strip is the only mechanism that actually shows. Mobile portrait is
   excluded on purpose: there the navbar is the shell's edgeless floating blur
   bar and owns `::after` for its scroll gradient. */
@media (min-width:601px), (orientation:landscape){
  html[data-app="jockey"] .nav.nav::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--jk-hair); pointer-events:none; z-index:3;
  }
}
/* Landscape phones turn the navbar into a vertical rail (grid-column 1/2), so
   the same single hairline moves to the edge that actually faces the page. */
@media (max-height:599px) and (orientation:landscape){
  html[data-app="jockey"] .nav.nav::after{ left:auto; top:0; bottom:0; right:0; width:1px; height:auto; }
}
html[data-app="jockey"] .page-h{ border-bottom:1px solid var(--jk-hair); }

/* ── Brand swap — the crest in place of the Mocca mark ─────────────────
   The crest is 137×167. `width:auto` does NOT defend an aspect ratio inside
   a flex row (that is what shipped wrong twice), so it lives in a SQUARE
   tile on its own field with `object-fit:contain` — the same construction as
   .jk-mark in jockey-brand.css. ── */
.brand-jk{ display:none; align-items:center; gap:8px; min-width:0; }
.brand-jk-ic{
  width:26px; height:26px; flex:none; aspect-ratio:1; display:grid; place-items:center;
  background:#FBF8F2; border-radius:7px; overflow:hidden; position:relative; /* B63 W5: the vector crest is navy + gold, so its tile is cream */
}
/* `object-fit:contain` in a SQUARE box already letterboxes the 137×167 art —
   the ratio belongs to the ART, not to the tile. But the shell also has brand
   img rules of its own, and an inherited `height:auto` there rebuilt the clip
   (26 × 31.7, bottom of the crest eaten by overflow:hidden). Absolute + inset
   makes the tile the only thing that decides the box, whatever else matches. */
html[data-app="jockey"] .brand-jk-ic img,
.brand-jk-ic img{ position:absolute; inset:0; width:100%; height:100%; flex:none; object-fit:contain; display:block; }
.brand-jk-word{
  font:600 14px/1 "Archivo",var(--mk-font-ui); letter-spacing:.2em; text-transform:uppercase;
  color:var(--wordmark-color); white-space:nowrap; min-width:0;
}
html[data-app="jockey"] .nav-brand .icon,
html[data-app="jockey"] .nav-brand .wordmark,
html[data-app="jockey"] .sb-brand .icon,
html[data-app="jockey"] .sb-brand .wordmark{ display:none !important; }
html[data-app="jockey"] .brand-jk{ display:inline-flex; }
/* The switcher row's own crest tile (a span wrapper, not a bare img). */
.brand-app-ic-jk{
  width:26px; height:26px; flex:none; aspect-ratio:1; display:grid; place-items:center;
  background:#FBF8F2; border-radius:7px; overflow:hidden; position:relative;
}
.brand-app-ic-jk img{ padding:2px; box-sizing:border-box; }
.brand-app-ic-jk img{ position:absolute; inset:0; width:100%; height:100%; flex:none; object-fit:contain; display:block; }
/* Same responsive grammar as the CV brand: the navbar goes crest-only where
   the Mocca wordmark also hides; the sidebar header keeps the word. */
@media (max-width:1024px){
  html[data-app="jockey"] .nav-brand .brand-jk{ max-width:100%; min-width:0; gap:7px; }
  html[data-app="jockey"] .nav-brand .brand-jk-word{ font-size:12px; letter-spacing:.16em; max-width:104px; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width:600px) and (orientation:portrait){
  html[data-app="jockey"] .nav-brand .brand-jk-word{ display:none; }
  html[data-app="jockey"] .nav-brand .brand-jk{ justify-content:center; }
  html[data-app="jockey"] .sb-brand .brand-jk-word{ display:inline; font-size:13px; }
}
@media (max-height:599px) and (orientation:landscape){
  html[data-app="jockey"] .nav-brand .brand-jk-word{ display:none; }
  html[data-app="jockey"] .nav-brand .brand-jk{ justify-content:center; }
}

/* ═════════════════════════════════════════════════════════════════
   B64 S2 — CONTENT (popcorn.appmocca.com): the approved sample's violet
   cinema glass. Dark is the sample; light is its twin on lavender paper.
   Mocca's own Content page and panels, adopted into the Content shell,
   read these tokens, so nothing there needs a second set of rules.
   ═════════════════════════════════════════════════════════════════ */
html[data-app="content"]{
  --mk-font-ui:'Sora',system-ui,-apple-system,sans-serif;
  --mk-font-brand:'Sora',var(--mk-font-ui);
  --mk-radius-sm:12px; --mk-radius-md:16px; --mk-radius-lg:20px; --mk-radius-xl:24px; --mk-radius-pill:999px;
}
html[data-app="content"][data-theme="dark"]{
  --fg-1:#f4efff; --fg-2:#c9bde8; --fg-3:#8f82b3; --fg-4:#8f82b3; --fg-invert:#0c0717; --muted:#c9bde8;
  --bg-1:#0c0717; --bg-2:#140c26; --bg-3:#1d1336; --bg-input:#1a1030;
  --sidebar:#140c26; --sidebar-deep:#0c0717; --sidebar-fg:#f4efff; --sidebar-fg-muted:rgba(244,239,255,.66); --wordmark-color:#f4efff;
  --border:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.2); --bd-1:rgba(255,255,255,.12); --divider:rgba(255,255,255,.08);
  --accent:#8b5cf6; --accent-2:#7c4dea; --accent-fg:#ffffff; --accent-soft:rgba(139,92,246,.2); --accent-text:#c4a8ff; --ring:rgba(139,92,246,.5);
  --mk-ok:#5fd4a0; --mk-err:#ff8a9a; --warn:#ffcf5a; --mk-warn:#ffcf5a;
  --scrim:rgba(6,3,12,.6);
}
html[data-app="content"][data-theme="light"],
html[data-app="content"]:not([data-theme="dark"]){
  --fg-1:#1b1030; --fg-2:#4d3f6e; --fg-3:#6f6290; --fg-4:#6f6290; --fg-invert:#f6f2ff; --muted:#4d3f6e;
  --bg-1:#f6f2ff; --bg-2:#ffffff; --bg-3:#efe8fd; --bg-input:#ffffff;
  --sidebar:#f6f2ff; --sidebar-deep:#efe8fd; --sidebar-fg:#1b1030; --sidebar-fg-muted:#4d3f6e; --wordmark-color:#1b1030;
  --border:#e4dbf7; --border-strong:#d3c6f0; --bd-1:#e4dbf7; --divider:#ece5fa;
  --accent:#7c3aed; --accent-2:#6d28d9; --accent-fg:#ffffff; --accent-soft:rgba(124,58,237,.12); --accent-text:#6d28d9; --ring:rgba(124,58,237,.4);
  --mk-ok:#12805c; --mk-err:#c0264a; --warn:#8a5a00; --mk-warn:#8a5a00;
  --scrim:rgba(27,16,48,.42);
}

/* ═════════════════════════════════════════════════════════════════
   B64 S3 — BUDGET (mint.appmocca.com): the approved sample's mint
   liquid glass. Light is the sample's mint paper; dark its night twin.
   Mocca's wallet pages and panels shown in Budget read these tokens.
   ═════════════════════════════════════════════════════════════════ */
html[data-app="budget"]{
  --mk-font-ui:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mk-font-brand:'Plus Jakarta Sans',var(--mk-font-ui);
  --mk-radius-sm:12px; --mk-radius-md:18px; --mk-radius-lg:22px; --mk-radius-xl:28px; --mk-radius-pill:999px;
}
html[data-app="budget"][data-theme="light"],
html[data-app="budget"]:not([data-theme="dark"]){
  --fg-1:#06231d; --fg-2:#2f5a50; --fg-3:#557a71; --fg-4:#557a71; --fg-invert:#effcf7; --muted:#2f5a50;
  --bg-1:#dff7ef; --bg-2:#f6fffb; --bg-3:#cdeee2; --bg-input:#ffffff;
  --sidebar:#dff7ef; --sidebar-deep:#cdeee2; --sidebar-fg:#06231d; --sidebar-fg-muted:#2f5a50; --wordmark-color:#06231d;
  --border:rgba(6,60,48,.12); --border-strong:rgba(6,60,48,.2); --bd-1:rgba(6,60,48,.12); --divider:rgba(6,60,48,.08);
  --accent:#1f9d7a; --accent-2:#178566; --accent-fg:#ffffff; --accent-soft:rgba(63,191,154,.18); --accent-text:#127056; --ring:rgba(63,191,154,.45);
  --mk-ok:#12805c; --mk-err:#c0264a; --warn:#8a5a00; --mk-warn:#8a5a00;
  --scrim:rgba(6,35,29,.36);
}
html[data-app="budget"][data-theme="dark"]{
  --fg-1:#e9fff8; --fg-2:#b5e3d5; --fg-3:#7fb3a5; --fg-4:#7fb3a5; --fg-invert:#04140f; --muted:#b5e3d5;
  --bg-1:#04140f; --bg-2:#0a221c; --bg-3:#0f2e26; --bg-input:#0a221c;
  --sidebar:#0a221c; --sidebar-deep:#04140f; --sidebar-fg:#e9fff8; --sidebar-fg-muted:rgba(233,255,248,.66); --wordmark-color:#e9fff8;
  --border:rgba(159,240,212,.16); --border-strong:rgba(159,240,212,.28); --bd-1:rgba(159,240,212,.16); --divider:rgba(159,240,212,.1);
  --accent:#3fbf9a; --accent-2:#2fa886; --accent-fg:#04140f; --accent-soft:rgba(63,191,154,.2); --accent-text:#8fe8c9; --ring:rgba(63,191,154,.5);
  --mk-ok:#6fe0bb; --mk-err:#ff9aac; --warn:#e0c25c; --mk-warn:#e0c25c;
  --scrim:rgba(0,10,8,.6);
}

/* ═════════════════════════════════════════════════════════════════
   MELT (melt.appmocca.com) — the chat app: indigo liquid glass, the logo's
   blue melting into violet. Its own screens are drawn by melt-app.css; these
   map the shared pieces it borrows (the toast, the assistant, sign-in) onto it.
   ═════════════════════════════════════════════════════════════════ */
html[data-app="melt"]{
  --mk-font-ui:'Sora',system-ui,-apple-system,sans-serif;
  --mk-font-brand:'Sora',var(--mk-font-ui);
  --mk-radius-sm:12px; --mk-radius-md:18px; --mk-radius-lg:22px; --mk-radius-xl:28px; --mk-radius-pill:999px;
}
html[data-app="melt"][data-theme="light"],
html[data-app="melt"]:not([data-theme="dark"]){
  --fg-1:#14123a; --fg-2:#454074; --fg-3:#6b6699; --fg-4:#6b6699; --fg-invert:#f3f1ff; --muted:#454074;
  --bg-1:#eceaff; --bg-2:#faf9ff; --bg-3:#ddd9fb; --bg-input:#ffffff;
  --sidebar:#eceaff; --sidebar-deep:#ddd9fb; --sidebar-fg:#14123a; --sidebar-fg-muted:#454074; --wordmark-color:#14123a;
  --border:rgba(60,40,160,.14); --border-strong:rgba(60,40,160,.24); --bd-1:rgba(60,40,160,.14); --divider:rgba(60,40,160,.09);
  --accent:#6d3fe0; --accent-2:#5b2fcb; --accent-fg:#ffffff; --accent-soft:rgba(124,58,237,.14); --accent-text:#5b2fcb; --ring:rgba(124,58,237,.4);
  --mk-ok:#12805c; --mk-err:#c0264a; --warn:#8a5a00; --mk-warn:#8a5a00;
  --scrim:rgba(20,18,58,.4);
}
html[data-app="melt"][data-theme="dark"]{
  --fg-1:#eeecff; --fg-2:#c2bde8; --fg-3:#8f89bf; --fg-4:#8f89bf; --fg-invert:#0a0a1f; --muted:#c2bde8;
  --bg-1:#0a0a1f; --bg-2:#121032; --bg-3:#1a1745; --bg-input:#121032;
  --sidebar:#121032; --sidebar-deep:#0a0a1f; --sidebar-fg:#eeecff; --sidebar-fg-muted:rgba(238,236,255,.66); --wordmark-color:#eeecff;
  --border:rgba(170,160,255,.18); --border-strong:rgba(170,160,255,.3); --bd-1:rgba(170,160,255,.18); --divider:rgba(170,160,255,.1);
  --accent:#8b7bff; --accent-2:#7a68f5; --accent-fg:#0a0a1f; --accent-soft:rgba(139,123,255,.22); --accent-text:#b9afff; --ring:rgba(139,123,255,.5);
  --mk-ok:#6fe0bb; --mk-err:#ff9aac; --warn:#e0c25c; --mk-warn:#e0c25c;
  --scrim:rgba(4,3,20,.62);
}

/* ═════════════════════════════════════════════════════════════════
   B65 W8 — BURACO (buraco.appmocca.com): the Salón. Its own screens are
   drawn by buraco-app.css; these map the shared pieces it borrows (the
   toast, the chat inside its sheet, the assistant) onto the felt.
   ═════════════════════════════════════════════════════════════════ */
html[data-app="buraco"]{
  --mk-font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --mk-font-brand:'Source Serif 4',Georgia,serif;
  --mk-radius-sm:10px; --mk-radius-md:14px; --mk-radius-lg:16px; --mk-radius-xl:20px; --mk-radius-pill:999px;
}
html[data-app="buraco"][data-theme="light"],
html[data-app="buraco"]:not([data-theme="dark"]){
  --fg-1:#16191b; --fg-2:#4c5559; --fg-3:#6a7478; --fg-4:#6a7478; --fg-invert:#f7f5ef; --muted:#4c5559;
  --bg-1:#fbfaf6; --bg-2:#f2f0e9; --bg-3:#e6ebe9; --bg-input:#ffffff;
  --sidebar:#e4ebea; --sidebar-deep:#d9e2e1; --sidebar-fg:#0f2e33; --sidebar-fg-muted:#4a5d61; --wordmark-color:#0f2e33;
  --border:rgba(15,46,51,.14); --border-strong:rgba(15,46,51,.24); --bd-1:rgba(15,46,51,.14); --divider:rgba(15,46,51,.08);
  --accent:#0f2e33; --accent-2:#17434a; --accent-fg:#eef3f3; --accent-soft:rgba(15,46,51,.1); --accent-text:#17434a; --ring:rgba(15,46,51,.35);
  --mk-ok:#2f7d6d; --mk-err:#a3243a; --warn:#8a5a00; --mk-warn:#8a5a00;
  --scrim:rgba(4,20,22,.4);
}
html[data-app="buraco"][data-theme="dark"]{
  --fg-1:#eef3f3; --fg-2:#b8cbcd; --fg-3:#8fa6a9; --fg-4:#8fa6a9; --fg-invert:#0a2125; --muted:#b8cbcd;
  --bg-1:#0d2a2f; --bg-2:#12363c; --bg-3:#17434a; --bg-input:#0a2125;
  --sidebar:#0a2125; --sidebar-deep:#081a1d; --sidebar-fg:#eef3f3; --sidebar-fg-muted:rgba(238,243,243,.66); --wordmark-color:#eef3f3;
  --border:rgba(199,212,214,.24); --border-strong:rgba(199,212,214,.36); --bd-1:rgba(199,212,214,.24); --divider:rgba(199,212,214,.14);
  --accent:#c7d4d6; --accent-2:#eef3f3; --accent-fg:#0f2e33; --accent-soft:rgba(199,212,214,.16); --accent-text:#dfe8e9; --ring:rgba(199,212,214,.45);
  --mk-ok:#8fd6c4; --mk-err:#ff9fae; --warn:#e0c25c; --mk-warn:#e0c25c;
  --scrim:rgba(0,8,10,.6);
}