/* =========================================================
   ZYBRON CHAT CANVAS — Phase 0 stylesheet
   Loaded ONLY when ChatCanvas layout mounts (via <HeadContent>).
   Every selector is namespaced under .zc-shell so it cannot
   bleed into MainLayout / Chatbox / module pages.
   ========================================================= */

/* ROOT SHELL ==============================================================
   The canvas inherits from the global SiteTheme tokens injected at :root by
   MainLayout (see Zybron.Core.Models.Admin.SiteTheme.ToCssVariables). Whatever
   theme the user has active — Dark (default), Light, High-Contrast, or a
   tenant custom theme — the canvas follows it. Each --zc-* token has a fallback
   to the Dark default so the shell renders even before the theme cascade lands.
   ========================================================================= */
.zc-shell {
    /* Position fixed + inset:0 covers App.razor body bg without editing it */
    position: fixed;
    inset: 0;
    z-index: 10;
    overflow: hidden;

    /* Surfaces — pulled from SiteTheme */
    --zc-bg:        var(--bg, #0E1116);
    --zc-bg-2:      var(--surface-2, #1A2030);
    --zc-surface:   var(--card-bg, var(--surface-1, #141922));
    --zc-surface-2: var(--surface-2, #1A2030);
    --zc-surface-3: var(--surface-3, #232B3A);

    /* Borders */
    --zc-border:    var(--border, #232B3A);
    --zc-border-2:  var(--border, #232B3A);

    /* Text */
    --zc-text:      var(--text-primary, #E6E9EF);
    --zc-text-2:    var(--text-secondary, #7A8599);
    --zc-text-3:    var(--muted, #7A8599);
    --zc-text-4:    var(--muted, #7A8599);
    /* Single targeted alias — `var(--zc-text-muted, …)` is used by several
       canvas rules but was never defined as a CSS var, so the white-rgba
       fallback used to render invisible on Light theme. Maps to the
       existing themed muted token. Nothing else aliased here — broader
       aliasing overrode working definitions (chat dock background, zen
       card CTA arrows). A deliberate light-theme contrast pass is on the
       backlog. */
    --zc-text-muted: var(--muted, #7A8599);

    /* Brand — Zybron jade by default; tenant theme can override --brand-jade */
    --zc-jade:      var(--brand-jade, #00D68F);
    --zc-jade-bg:   rgba(0, 214, 143, .08);
    --zc-jade-ring: rgba(0, 214, 143, .22);

    /* ── Tone palette ──────────────────────────────────────────────────
       Curated 5-stop palette that complements Zybron jade. Used by home-
       card accents, status pills, and any "select-1-of-N tone" surface.
       Process.Color stores a tone key (jade / indigo / teal / amber /
       violet); rendering resolves through these custom properties so
       light/dark/high-contrast modes adapt without editing data.
       Legacy hex values still render via the fallback chain.            */
    --zc-tone-jade:        var(--brand-jade, #00D68F);
    --zc-tone-jade-bg:     rgba(0, 214, 143, .12);
    --zc-tone-indigo:      #818CF8;
    --zc-tone-indigo-bg:   rgba(129, 140, 248, .12);
    --zc-tone-teal:        #22D3EE;
    --zc-tone-teal-bg:     rgba(34, 211, 238, .12);
    /* blue — the ORCA accent (matches its ArtifactConfig Color #3B82F6 and the O-lane identity). */
    --zc-tone-blue:        #3B82F6;
    --zc-tone-blue-bg:     rgba(59, 130, 246, .12);
    --zc-tone-amber:       var(--warning, #FBBF24);
    --zc-tone-amber-bg:    rgba(251, 191, 36, .14);
    --zc-tone-violet:      #A78BFA;
    --zc-tone-violet-bg:   rgba(167, 139, 250, .14);
}

/* Light theme — deeper saturated tones read better on light surfaces.
   Triggered by SiteTheme adding [data-theme="light"] OR the user's OS
   pref via prefers-color-scheme. Either path lands here. */
.zc-shell[data-theme="light"],
@media (prefers-color-scheme: light) {
    .zc-shell {
        --zc-tone-jade:      #00B377;
        --zc-tone-jade-bg:   rgba(0, 179, 119, .10);
        --zc-tone-indigo:    #4F46E5;
        --zc-tone-indigo-bg: rgba(79, 70, 229, .10);
        --zc-tone-teal:      #0891B2;
        --zc-tone-teal-bg:   rgba(8, 145, 178, .10);
        --zc-tone-amber:     #D97706;
        --zc-tone-amber-bg:  rgba(217, 119, 6, .12);
        --zc-tone-violet:    #7C3AED;
        --zc-tone-violet-bg: rgba(124, 58, 237, .10);
    }
}

/* High-contrast — deeper foreground + denser bg for accessibility */
@media (prefers-contrast: more) {
    .zc-shell {
        --zc-tone-jade:      #00945F;
        --zc-tone-jade-bg:   rgba(0, 148, 95, .22);
        --zc-tone-indigo:    #312E81;
        --zc-tone-indigo-bg: rgba(49, 46, 129, .22);
        --zc-tone-teal:      #155E75;
        --zc-tone-teal-bg:   rgba(21, 94, 117, .22);
        --zc-tone-amber:     #92400E;
        --zc-tone-amber-bg:  rgba(146, 64, 14, .22);
        --zc-tone-violet:    #4C1D95;
        --zc-tone-violet-bg: rgba(76, 29, 149, .22);
    }
}

.zc-shell {
    /* Re-open the rule body so subsequent custom-property declarations
       below remain inside .zc-shell scope (the @media blocks above closed
       the original opening at line 15). Empty rule is harmless. */

    /* Status */
    --zc-amber:     var(--warning, #F59E0B);
    --zc-amber-bg:  rgba(245, 158, 11, .1);
    --zc-red:       var(--error, #DC3545);
    --zc-red-bg:    rgba(220, 53, 69, .08);
    --zc-blue:      var(--info, #2563EB);
    --zc-blue-bg:   rgba(37, 99, 235, .08);
    --zc-blue-ring: rgba(37, 99, 235, .22);

    /* Tenant accent — Zybron jade by default; per-tenant override flows
       through --brand-jade / --tenant-color from SiteTheme. */
    --zc-tenant:      var(--tenant-color, var(--brand-jade, #00D68F));
    --zc-tenant-bg:   var(--zc-jade-bg);
    --zc-tenant-ring: var(--zc-jade-ring);

    /* ── Library card token bridge ──────────────────────────────────
       The LibraryDocument/Upload cards style their inline markup with a
       parallel `--zybron-*` token namespace. SiteTheme never emits those
       names, so every reference fell through to a hardcoded slate/blue
       fallback that ignored the admin theme (and read low-contrast on the
       Light card). Map them onto the same admin-sourced --zc-* tokens the
       rest of the canvas uses so the Library cards track light / dark /
       high-contrast like every other card — no per-element edits needed. */
    --zybron-border:      var(--zc-border);
    --zybron-surface:     var(--zc-surface);
    --zybron-surface-2:   var(--zc-surface-2);
    --zybron-text-muted:  var(--zc-text-3);
    --zybron-muted:       var(--zc-text-3);
    --zybron-accent:      var(--zc-blue);
    --zybron-accent-soft: color-mix(in srgb, var(--zc-blue) 16%, transparent);
    --zybron-danger:      var(--zc-red);
    --zybron-success:     var(--success, #22c55e);

    /* Geometry — radii from SiteTheme; canvas-specific dock width stays local */
    --zc-r:        var(--radius-lg, 18px);
    --zc-r-sm:     var(--radius-md, 12px);
    --zc-r-xs:     var(--radius-sm, 8px);
    --zc-r-pill:   999px;
    /* Floor the rail at 64px even if an older saved theme still pins 56px —
       gives the 40px icons / 56px logo room to sit without the vertical
       scrollbar clipping them. */
    --zc-rail-w:   max(var(--micro-rail-w, 64px), 64px);
    --zc-panel-w:  248px;
    --zc-dock-w:   720px;
    /* Narrower dock width used when the dock is pinned left/right, so the
       center of the canvas stays clear for a full-width doc. */
    --zc-dock-w-narrow: 420px;

    --zc-font: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    --zc-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

    /* Shadows tuned to work on both dark + light surfaces */
    --zc-shadow-sm: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .06);
    --zc-shadow-md: 0 4px 12px rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .08);
    --zc-shadow-lg: 0 20px 40px rgba(0, 0, 0, .28), 0 6px 12px rgba(0, 0, 0, .12);

    background:
        radial-gradient(1200px 600px at 50% -200px, rgba(0, 214, 143, .06), transparent 60%),
        var(--zc-bg);
    color: var(--zc-text);
    font-family: var(--zc-font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;

    /* Full-width topbar on top, then a panel | content body below. */
    display: flex;
    flex-direction: column;
}

/* Body — the panel + content grid beneath the full-width topbar. */
.zc-shell .zc-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--zc-panel-w) 1fr;
    transition: grid-template-columns .22s var(--zc-ease, ease);
}

/* Shell-visibility gate intentionally removed — the theme cookie loaded by
   App.razor injects the correct :root vars before Blazor connects, so the
   shell can paint normally on frame 1. Hiding the shell until AppState
   independently resolved the theme caused users to see only the zen text
   on a black void (rail + dock + cards all hidden) when the theme was
   already correct from the cookie. */

.zc-shell *,
.zc-shell *::before,
.zc-shell *::after { box-sizing: border-box; }

.zc-shell button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

/* MICRORAIL ==============================================================
   Uses the SiteTheme sidebar tokens so the canvas rail matches Classic
   (darker bg, mid-grey icons that read lighter by contrast). */
.zc-shell .zc-rail {
    background: var(--sidebar-bg, var(--zc-bg-2));
    border-right: 1px solid var(--sidebar-border, var(--zc-border));
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    z-index: 80;
    /* Scroll vertically when the viewport is too short for every icon, but
       never show scrollbar chrome — a visible vertical bar steals width and,
       combined with the old `overflow-x: visible` (which the spec promotes to
       `auto` next to `overflow-y: auto`), produced a phantom horizontal bar.
       Clip the horizontal axis outright and hide the bars on both axes. */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge */
}
.zc-shell .zc-rail::-webkit-scrollbar { width: 0; height: 0; }  /* WebKit/Blink */

.zc-shell .zc-rail-logo {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.zc-shell .zc-rail-logo:hover .zc-rail-img,
.zc-shell .zc-rail-logo:hover .zc-rail-mark {
    transform: scale(1.06);
    transition: transform .15s;
}

.zc-shell .zc-rail-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.zc-shell .zc-rail-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--zc-jade) 0%, #0AC07F 100%);
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.zc-shell .zc-rail-sep {
    width: 40px;
    height: 0;
    /* Same sidebar-border token MainLayout uses */
    border-top: 1px solid var(--sidebar-border, var(--zc-border));
    margin: 10px 8px;
    opacity: .6;
    flex-shrink: 0;
    /* Stay centered even when the rail switches to align-items: stretch in drawer mode. */
    align-self: center;
}

.zc-shell .zc-rail-section {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--zc-text-3);
    padding: 10px 0 4px;
    line-height: 1;
    flex-shrink: 0;
    text-align: center;
    width: 100%;
}

.zc-shell .zc-rail-btn {
    /* Mirror MainLayout's .rail-icon-button exactly:
       icon = --muted, hover bg = --surface-3, hover icon = --text-primary */
    position: relative;
    width: 40px;
    height: 40px;
    margin: 4px auto;
    border-radius: var(--radius-md, 8px);
    color: var(--muted, var(--zc-text-2));
    transition: all .2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.zc-shell .zc-rail-btn:hover {
    background: var(--surface-3, var(--zc-surface));
    color: var(--text-primary, var(--zc-text));
}

.zc-shell .zc-rail-btn:focus,
.zc-shell .zc-rail-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

.zc-shell .zc-rail-btn .material-symbols-outlined {
    /* Match the visual weight of RadzenIcon in Classic — slightly smaller
       and lighter stroke than the 24/400 default. */
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 20;
}

.zc-shell .zc-rail-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    background: #EC4899;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--zc-bg-2);
}

.zc-shell .zc-rail-spacer {
    flex: 1;
    min-height: 8px;
}

.zc-shell .zc-rail-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 6px;
    gap: 2px;
    flex-shrink: 0;
}

.zc-shell .zc-rail-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.zc-shell .zc-rail-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-jade), #0AC07F);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--zc-bg-2), 0 0 0 3px rgba(0, 179, 119, .4);
    transition: all .15s;
}

.zc-shell .zc-rail-avatar:hover .zc-rail-ring {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px var(--zc-bg-2), 0 0 0 3px rgba(0, 179, 119, .7);
}

/* WORK PANEL ==============================================================
   Persistent labeled nav between the icon rail and content: folio switcher
   header + browse rows. Every color comes from a --zc-* theme token so the
   panel follows the tenant theme exactly (no literal colors). */
.zc-shell .zc-panel {
    background: var(--zc-surface);
    border-right: 1px solid var(--zc-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.zc-shell .zc-panel-switcher {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--zc-border);
    flex-shrink: 0;
    /* Anchor the relocated folio switch menu under the button. */
    position: relative;
}
.zc-shell .zc-panel-tenant {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--zc-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zc-shell .zc-panel-switcher-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.zc-shell .zc-panel-switcher-row .zc-panel-folio { flex: 1; min-width: 0; }

.zc-shell .zc-panel-collapse,
.zc-shell .zc-panel-expand {
    flex-shrink: 0;
    width: 34px;
    border-radius: var(--zc-r-xs);
    display: grid;
    place-items: center;
    color: var(--zc-text-3);
    border: 1px solid var(--zc-border);
    background: var(--zc-surface);
    transition: background .12s, color .12s, border-color .12s;
}
.zc-shell .zc-panel-collapse:hover,
.zc-shell .zc-panel-expand:hover {
    background: var(--zc-surface-2);
    color: var(--zc-text);
    border-color: var(--zc-text-3);
}
.zc-shell .zc-panel-collapse .material-symbols-outlined,
.zc-shell .zc-panel-expand .material-symbols-outlined { font-size: 20px; }
.zc-shell .zc-panel-expand { width: 36px; height: 36px; }

/* COLLAPSE → MICRORAIL (Canvas 2.0) — collapsing shrinks the panel to a 64px
   icon rail (tenant logo · row icons · profile circle) instead of hiding it.
   Labels, the tenant selector, group labels + carets hide; icons center.
   Toggled by the .zc-panel-toggle button in the panel header. */
.zc-shell .zc-panel { width: var(--zc-panel-w); transition: width .22s var(--zc-ease, ease); }
.zc-shell.zc-panel-collapsed .zc-body { grid-template-columns: var(--zc-rail-w) 1fr; }
.zc-shell.zc-panel-collapsed .zc-panel { width: var(--zc-rail-w); }

/* Hide everything textual in the microrail (icons only). */
.zc-shell.zc-panel-collapsed .zc-panel-row-label,
.zc-shell.zc-panel-collapsed .zc-panel-row-caret,
.zc-shell.zc-panel-collapsed .zc-panel-group-label,
.zc-shell.zc-panel-collapsed .zc-panel-foot-btn,
.zc-shell.zc-panel-collapsed .zc-panel-recents { display: none; }

/* Center the logo · icons · profile circle in the narrow rail. Top padding
   the logo sits at the top (it IS the expand affordance — no reserved
   hamburger slot above it; see the logo-morph rules by .zc-panel-toggle). */
.zc-shell.zc-panel-collapsed .zc-panel-head { align-items: center; padding: 12px 0 10px; }
.zc-shell.zc-panel-collapsed .zc-panel-logo { margin: 0; justify-content: center; width: 100%; }
.zc-shell.zc-panel-collapsed .zc-panel-scroll { padding: 16px 0 6px; }
.zc-shell.zc-panel-collapsed .zc-panel-group { margin-top: 4px; }
.zc-shell.zc-panel-collapsed .zc-panel-row { justify-content: center; gap: 0; padding: 9px 0; }
.zc-shell.zc-panel-collapsed .zc-panel-foot { align-items: center; padding: 8px 0; }
.zc-shell.zc-panel-collapsed .zc-panel-foot-user { justify-content: center; }

/* Folio menu, when hosted in the panel header, fits the panel width and drops
   straight down under the switcher (overrides the topbar anchor sizing). */
.zc-shell .zc-panel-switcher .zc-folio-menu {
    left: 12px;
    right: 12px;
    top: calc(100% - 4px);
    width: auto;
    min-width: 0;
    max-width: none;
}

.zc-shell .zc-panel-folio {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--zc-r-sm);
    background: var(--zc-tone-jade-bg);
    border: 1px solid var(--zc-jade-ring);
    text-align: left;
    transition: border-color .15s, background .15s;
}
.zc-shell .zc-panel-folio:hover { border-color: var(--zc-tone-jade); }

/* General (no folio active) reads neutral, so a real folio's jade stands out. */
.zc-shell .zc-panel-folio:not(.is-active) {
    background: var(--zc-surface-2);
    border-color: var(--zc-border);
}
.zc-shell .zc-panel-folio:not(.is-active):hover { border-color: var(--zc-text-3); }
.zc-shell .zc-panel-folio:not(.is-active) .zc-panel-folio-swatch {
    background: var(--zc-surface-3);
    color: var(--zc-text-3);
}

.zc-shell .zc-panel-folio-swatch {
    width: 30px;
    height: 30px;
    border-radius: var(--zc-r-xs);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--zc-jade), #0AC07F);
    color: #fff;
    font-size: 17px;
}

.zc-shell .zc-panel-folio-meta {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.zc-shell .zc-panel-folio-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--zc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zc-shell .zc-panel-folio-sub {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--zc-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zc-shell .zc-panel-folio-caret {
    font-size: 20px;
    color: var(--zc-text-3);
    flex-shrink: 0;
}

.zc-shell .zc-panel-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 8px 14px;
    scrollbar-width: none;
}
.zc-shell .zc-panel-scroll::-webkit-scrollbar { width: 0; height: 0; }

.zc-shell .zc-panel-group { margin-top: 6px; }
/* Separator between sections — a group that follows another group (i.e. Admin
   after Main) gets a divider line above it. Visible in both drawer + microrail
   (where the "ADMIN" label is hidden, this line is the only section cue). */
.zc-shell .zc-panel-group + .zc-panel-group {
    /* Sections are separated by SPACE, not rules — a divider between every section
       (logo · main · folio · admin · profile) read too busy. */
    margin-top: 18px;
}
.zc-shell .zc-panel-group-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--zc-text-3);
    padding: 8px 10px 5px;
}

.zc-shell .zc-panel-row {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 10px;
    border-radius: var(--zc-r-sm);
    color: var(--zc-text);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    transition: background .12s;
}
.zc-shell .zc-panel-row:hover { background: var(--zc-surface-2); }
.zc-shell .zc-panel-row.active {
    background: var(--zc-tone-jade-bg);
    color: var(--zc-tone-jade);
}
.zc-shell .zc-panel-row.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: var(--zc-tone-jade);
}
.zc-shell .zc-panel-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.zc-shell .zc-panel-row .material-symbols-outlined {
    font-size: 19px;
    color: var(--zc-text-3);
}
/* ONE icon column width for the whole rail. Tenant marks are horizontal wordmarks and
   need more room than a 19px glyph, but widening only that row pushed its label out of
   line with "New chat" and every row below it. So the SLOT is uniform and the contents
   vary: glyphs centre in it, logos contain into it, and every label starts on the same x.
   The caret is excluded — it is pushed to the trailing edge, not part of this column. */
.zc-shell .zc-panel-row > .material-symbols-outlined:not(.zc-panel-row-caret):not(.zc-panel-row-check),
.zc-shell .zc-panel-row > .zc-panel-row-logo {
    width: 26px;
    flex: none;
    text-align: center;
}
.zc-shell .zc-panel-row-sub > .material-symbols-outlined:not(.zc-panel-row-caret):not(.zc-panel-row-check),
.zc-shell .zc-panel-row-sub > .zc-panel-row-logo {
    width: 24px;
}
.zc-shell .zc-panel-row-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Right-side chevron on browse/admin rows (drawer style). */
.zc-shell .zc-panel-row .zc-panel-row-caret {
    margin-left: auto;
    font-size: 17px;
    color: var(--zc-text-4, var(--zc-text-3));
    flex-shrink: 0;
}

/* Inline submenu under an expandable panel row (Admin > Builder).
   Indented, slightly tighter rows, no chevron. Temporary surface until the
   builder sub-tools become skill cards. */
.zc-shell .zc-panel-submenu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 4px 12px;
    padding-left: 10px;
    border-left: 1px solid var(--zc-border);
}
.zc-shell .zc-panel-row-sub {
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 500;
}
.zc-shell .zc-panel-row-sub .material-symbols-outlined {
    font-size: 17px;
}

/* Panel header — tenant on top, folio/General title below (the drawer's identity
   stack). The editable folio header (in a folio) is rendered by the embedded
   drawer in the scroll right beneath this. */
.zc-shell .zc-panel-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 12px 14px 14px;
    flex-shrink: 0;
    position: relative;
}
.zc-shell .zc-panel-logo {
    display: inline-flex; align-items: center; height: 34px; margin-bottom: 8px;
    padding: 0; background: none; border: none; cursor: pointer;
}
.zc-shell .zc-panel-logo-img { height: 30px; width: auto; max-width: 180px; object-fit: contain; display: block; }
/* First-frame tenant mark: paints from --tenant-logo (seeded server-side in App.razor
   from the login-brand cookie or the signed-in user's tenant). Falls back to the
   Zybron default only when App.razor couldn't resolve a tenant. Once AppState.
   CurrentTenantLogoUrl is set on the circuit, the inline --tenant-logo on the element
   overrides this and any live logo change takes effect immediately. */
.zc-shell .zc-panel-logo-mark {
    background-image: var(--tenant-logo, url('/images/ZybronLogo.png'));
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.zc-shell .zc-panel-logo .zc-rail-mark { width: 30px; height: 30px; }

/* Reads as a SWITCHER, not a second wordmark. The logo directly above is frequently a
   wordmark carrying the tenant name already, so a bold repeat right under it put two
   heavy elements in a row before the eye reached the actual nav. Real padding also gives
   the hover chip room to breathe and lines its inset up with the nav rows below —
   padding:0 made the highlight hug the glyphs and look cramped. Negative left margin
   keeps the TEXT optically aligned with the logo despite the new inset. */
/* Tenant lives in the nav spine now (.zc-panel-row-tenant), not the brand block —
   the old .zc-panel-tenant-* rules are gone with the markup. Kept only what the mobile
   drawer / modal still reference. */
/* The tenant row IS a nav row — no label override any more. The old text-2 + weight-600
   treatment existed to stop a bold tenant NAME reading as a second wordmark under the brand
   block. The row now says "Organizations" in a plain glyph column, so it competes with
   nothing and the de-emphasis had inverted: a 600-weight label sat HEAVIER than the
   "New chat" it was meant to yield to. Inherits .zc-panel-row like every sibling. */
/* Active tenant in the open list — the check glyph already marks it; the weight stops it
   reading as merely another option. */
.zc-shell .zc-panel-row-sub.is-active .zc-panel-row-label { color: var(--zc-text); font-weight: 650; }
.zc-shell .zc-panel-row-sub.is-active .material-symbols-outlined { color: var(--zc-tenant, var(--zc-tone-jade)); }
/* Tenant marks sit in the SAME square the glyphs occupy (19px rows / 17px submenu), so a
   wide wordmark and a square badge both keep the label column aligned. object-fit:contain
   letterboxes rather than crops — a cropped logo is worse than a small one. */
/* Height only — the shared icon column above owns the width for glyphs and logos alike.
   contain letterboxes rather than crops; a cropped logo is worse than a small one. */
.zc-shell .zc-panel-row-logo { height: 19px; object-fit: contain; border-radius: 3px; }
.zc-shell .zc-panel-row-sub .zc-panel-row-logo { height: 17px; }
/* Trailing check — pushed to the right edge, tenant accent, and NOT subject to the
   is-active icon colour rule above (that one is for the leading glyph). */
.zc-shell .zc-panel-row-check { margin-left: auto; font-size: 17px; color: var(--zc-tenant, var(--zc-tone-jade)); }
.zc-shell .zc-panel-folio-title {
    font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--zc-text); margin-top: 1px;
}

/* Canvas 2.0 — header removed: topbar height is 0 so overlays that offset from it
   (folio drawer, cards) sit flush at the top of the canvas. */
.zc-shell { --zc-topbar-h: 0px; }

/* Tenant name in the rail head (single home for the brand name now the topbar's
   .zc-brand-name is gone). Themed via --zc-text like the rest of the panel. */

/* RAIL FOOT — profile pinned to the bottom of the rail (relocated from the removed
   topbar); admin debug toggle beside it. All colors are --zc-* theme tokens. */
.zc-shell .zc-panel-foot {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 14px 8px 8px;
}
/* Session id (debug only) — quiet, monospaced, one line above the Profile rows.
   Deliberately understated: it is diagnostic furniture, not navigation, and it
   should never compete with the rows it sits above. Truncates rather than wraps —
   a GUID that reflows pushes the profile circle off the bottom of the rail. */
.zc-shell .zc-panel-session {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 5px 10px;
    margin-bottom: 2px;
    border: 0; border-radius: var(--zc-r-sm);
    background: transparent;
    color: var(--zc-text-3);
    font-family: var(--zc-mono, monospace);
    font-size: 10.5px;
    text-align: left;
    cursor: pointer;
}
.zc-shell .zc-panel-session:hover { background: var(--zc-surface-2); color: var(--zc-text); }
.zc-shell .zc-panel-session .material-symbols-outlined { font-size: 15px; flex-shrink: 0; }
.zc-shell .zc-panel-session-id {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Micro-rail hides it with the other text — a GUID cannot render in 64px. */
.zc-shell.zc-panel-collapsed .zc-panel-session { display: none; }

.zc-shell .zc-panel-foot-user {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 4px;
}
.zc-shell .zc-panel-ava {
    display: inline-flex; align-items: center;
    padding: 2px; border-radius: 8px;
    background: none; border: none; cursor: pointer; color: var(--zc-text);
}
.zc-shell .zc-panel-ava:hover { background: var(--zc-surface-2); }
.zc-shell .zc-panel-ava .zc-rail-ring { width: 42px; height: 42px; box-shadow: none; font-size: 15px; flex-shrink: 0; }
.zc-shell .zc-panel-foot-btn {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--zc-text-3); background: transparent; border: none; cursor: pointer;
    transition: background .12s, color .12s;
}
.zc-shell .zc-panel-foot-btn:hover { background: var(--zc-surface-2); color: var(--zc-text); }
.zc-shell .zc-panel-foot-btn.is-on { background: var(--zc-tone-jade-bg); color: var(--zc-tone-jade); }
.zc-shell .zc-panel-foot-btn .material-symbols-outlined { font-size: 20px; }

/* MOBILE LAUNCHER — replaces the removed topbar hamburger; opens the rail drawer
   on phones (≤640px only). */
.zc-shell .zc-rail-launcher {
    display: none;
    position: fixed; top: 10px; left: 10px; z-index: 70;
    width: 40px; height: 40px; border-radius: 10px;
    align-items: center; justify-content: center;
    background: var(--zc-surface); border: 1px solid var(--zc-border); color: var(--zc-text-2);
    cursor: pointer; box-shadow: var(--zc-shadow-sm);
}
.zc-shell .zc-rail-launcher .material-symbols-outlined { font-size: 22px; }
@media (max-width: 640px) { .zc-shell .zc-rail-launcher { display: inline-flex; } }

/* Drawer toggle — icon-only, anchored top-right of the panel header.
   No background/border in resting state; subtle hover fill only (matches
   ChatGPT/Claude/Linear). Collapses with the panel to a rail-centered icon. */
.zc-shell .zc-panel-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px; height: 28px; border-radius: 6px;
    display: grid; place-items: center;
    background: transparent; border: none;
    color: var(--zc-text-2); cursor: pointer;
    transition: background .12s, color .12s;
    z-index: 2;
}
.zc-shell .zc-panel-toggle:hover { background: var(--zc-surface-2); color: var(--zc-text); }
.zc-shell .zc-panel-toggle .material-symbols-outlined { font-size: 24px; }
/* Collapsed rail: NO separate hamburger. The toggle is the drawer CLOSE button and
   only exists in the expanded panel (top-right of the drawer edge); when collapsed
   it is removed entirely — the logo below is the expand affordance instead. */
.zc-shell.zc-panel-collapsed .zc-panel-toggle { display: none; }

/* Canvas 2.0 — the LOGO is the expand affordance when collapsed (Copilot pattern).
   Resting: the tenant logo. On rail hover the logo cross-fades IN PLACE to an expand
   icon (no teleport); click expands (HandleLogoClick). The expand icon overlays the
   logo, so nothing shifts. Only active while collapsed. */
.zc-shell .zc-panel-logo { position: relative; }
.zc-shell .zc-panel-logo-expand { display: none; }
.zc-shell.zc-panel-collapsed .zc-panel-logo-expand {
    display: grid; place-items: center;
    position: absolute; inset: 0; margin: auto;
    font-size: 24px; color: var(--zc-text-2);
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
}
.zc-shell.zc-panel-collapsed .zc-panel-logo-img,
.zc-shell.zc-panel-collapsed .zc-panel-logo .zc-rail-mark {
    transition: opacity .15s ease;
}
.zc-shell.zc-panel-collapsed .zc-panel:hover .zc-panel-logo-img,
.zc-shell.zc-panel-collapsed .zc-panel:hover .zc-panel-logo .zc-rail-mark,
.zc-shell.zc-panel-collapsed .zc-panel-logo:focus-visible .zc-panel-logo-img,
.zc-shell.zc-panel-collapsed .zc-panel-logo:focus-visible .zc-rail-mark {
    opacity: 0;
}
.zc-shell.zc-panel-collapsed .zc-panel:hover .zc-panel-logo-expand,
.zc-shell.zc-panel-collapsed .zc-panel-logo:focus-visible .zc-panel-logo-expand {
    opacity: 1;
}

/* Folio rows (Favorites / Recents): a folio link + a hover star toggle. */
.zc-shell .zc-panel-folio-row { display: flex; align-items: center; gap: 2px; }
.zc-shell .zc-panel-folio-link {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: var(--zc-r-sm);
    color: var(--zc-text);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}
.zc-shell .zc-panel-folio-link:hover { background: var(--zc-surface-2); }
.zc-shell .zc-panel-folio-link.active {
    background: var(--zc-tone-jade-bg);
    color: var(--zc-tone-jade);
}
.zc-shell .zc-panel-folio-link .material-symbols-outlined {
    font-size: 19px;
    color: var(--zc-text-3);
    flex-shrink: 0;
}
.zc-shell .zc-panel-folio-link.active .material-symbols-outlined { color: var(--zc-tone-jade); }
.zc-shell .zc-panel-star {
    flex-shrink: 0;
    width: 30px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--zc-text-3);
    opacity: 0;
    border-radius: var(--zc-r-xs);
    transition: opacity .12s, color .12s, background .12s;
}
.zc-shell .zc-panel-folio-row:hover .zc-panel-star { opacity: 1; }
.zc-shell .zc-panel-star.is-on { opacity: 1; color: var(--zc-tone-amber); }
.zc-shell .zc-panel-star:hover { color: var(--zc-text); background: var(--zc-surface-2); }
.zc-shell .zc-panel-star .material-symbols-outlined { font-size: 17px; }

/* CONTENT COLUMN ========================================================== */
.zc-shell .zc-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Folio dropdown menu ===================================================== */
.zc-shell .zc-folio-menu-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 199;
    cursor: default;
}
.zc-shell .zc-folio-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 320px;
    max-width: 400px;
    background: var(--surface-2, #1A2030);
    border: 1px solid var(--border, #232B3A);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    padding: 6px 0;
    z-index: 200;
    overflow: hidden;
}
.zc-shell .zc-folio-menu-loading,
.zc-shell .zc-folio-menu-empty {
    padding: 10px 14px;
    font-size: 12px;
    color: var(--zc-text-2);
    font-style: italic;
}
.zc-shell .zc-folio-menu-section-label {
    padding: 6px 14px 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--zc-text-2);
}
.zc-shell .zc-folio-menu-row,
.zc-shell .zc-folio-menu-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: var(--zc-text);
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 80ms ease;
}
.zc-shell .zc-folio-menu-row:hover,
.zc-shell .zc-folio-menu-action:hover {
    background: var(--zc-surface-2);
}
.zc-shell .zc-folio-menu-row.is-active {
    background: var(--zc-tone-violet-bg);
}
.zc-shell .zc-folio-menu-code {
    font-family: var(--zc-mono, monospace);
    font-size: 11px;
    color: var(--zc-text);
    background: var(--zc-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}
.zc-shell .zc-folio-menu-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.zc-shell .zc-folio-menu-active {
    color: rgb(60, 180, 100);
    font-size: 16px;
    flex-shrink: 0;
}
.zc-shell .zc-folio-menu-action .material-symbols-outlined {
    font-size: 16px;
    color: var(--zc-text-3);
    flex-shrink: 0;
}
.zc-shell .zc-folio-menu-action.is-primary {
    color: var(--zc-tone-violet);
    font-weight: 600;
}
.zc-shell .zc-folio-menu-action.is-primary .material-symbols-outlined {
    color: var(--zc-tone-violet);
}
.zc-shell .zc-folio-menu-action.is-danger {
    color: rgb(200, 110, 110);
}
.zc-shell .zc-folio-menu-action.is-danger .material-symbols-outlined {
    color: rgb(200, 110, 110);
}
.zc-shell .zc-folio-menu-sep {
    height: 1px;
    background: var(--border, #232B3A);
    margin: 4px 0;
}

/* MODAL (tenant picker, future modals) ==================================== */
.zc-shell .zc-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--dialog-overlay, rgba(0, 0, 0, .55));
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    animation: zc-fade-in .12s ease-out;
}

@keyframes zc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.zc-shell .zc-modal-panel {
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-r);
    box-shadow: var(--zc-shadow-lg);
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.zc-shell .zc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--zc-border);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--zc-text);
}

.zc-shell .zc-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--zc-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all .12s;
}

.zc-shell .zc-modal-close:hover {
    background: var(--zc-surface-2);
    color: var(--zc-text);
}

.zc-shell .zc-modal-close .material-symbols-outlined {
    font-size: 18px;
}

.zc-shell .zc-modal-body {
    padding: 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zc-shell .zc-modal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--zc-r-sm);
    text-align: left;
    width: 100%;
    color: var(--zc-text);
    transition: background .12s;
}

.zc-shell .zc-modal-item:hover {
    background: var(--zc-surface-2);
}

.zc-shell .zc-modal-item.active {
    background: var(--zc-jade-bg);
}

.zc-shell .zc-modal-item-icon {
    color: var(--zc-jade);
    font-size: 22px;
    flex-shrink: 0;
}

/* Per-tenant logo in the Switch-tenant list (replaces the generic domain glyph). */
.zc-shell .zc-modal-item-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 5px;
    flex-shrink: 0;
}

.zc-shell .zc-modal-item-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.zc-shell .zc-modal-item-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--zc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zc-shell .zc-modal-item-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--zc-text-3);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.zc-shell .zc-modal-item-check {
    color: var(--zc-jade);
    font-size: 18px;
    flex-shrink: 0;
}

.zc-shell .zc-modal-empty {
    padding: 24px 18px;
    text-align: center;
    color: var(--zc-text-3);
    font-size: 12.5px;
    font-weight: 600;
}

/* CANVAS ================================================================== */
.zc-shell .zc-canvas {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

.zc-shell .zc-canvas-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Tight padding — the dock is position:fixed and hovers over the
       content. We keep just enough bottom buffer (~180px) so a user who
       scrolls to the very end can still read the last lines without the
       dock's input frame eclipsing them; the rest of the module page
       gets the full screen height to work with. Page-side modules
       (Admin tables, Folio lists, etc.) that need extra bottom room
       can add their own scoped padding. */
    padding: 24px 24px 180px;
    overflow-y: auto;
    position: relative;
}

/* On the home route the zen + cards block is centered and benefits from
   the bigger reserved gutter so cards don't sit under the dock surface.
   ChatCanvas adds .zc-canvas-home to the inner wrapper when IsHomePage. */
.zc-shell .zc-canvas-inner.zc-canvas-home {
    padding-bottom: 230px;
}

/* Full-bleed pages — anything that wants the entire canvas-inner area
   without padding (Builder graph, Atlas map, future full-screen tools).
   Tag the page wrapper with `data-canvas-fullbleed` and the layout drops
   side + bottom padding so the page can claim the whole slot. */
.zc-shell .zc-canvas-inner:has(> [data-canvas-fullbleed]) {
    padding: 0;
}


/* ZEN STATE + MODULE CARDS ================================================ */
.zc-shell .zc-zen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Canvas 2.0 — the home-grid moved to the rail, so the greeting is the only
       thing here. Center it vertically (Gemini-style) instead of pinning it to
       the top, so it sits balanced above the docked composer. */
    justify-content: center;
}

/* Suppress the zen block during the prerender / pre-bootstrap pass so the
   user never sees a "Hi there" + empty-grid flash before AppState hydrates.
   Flipped to ready by ChatCanvas.OnInitializedAsync once both loaders finish. */
.zc-shell .zc-zen-pending {
    visibility: hidden;
}

.zc-shell .zc-zen-ready {
    visibility: visible;
    animation: zc-zen-fade-in 180ms ease-out;
}

@keyframes zc-zen-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Entry greeting fades OUT once the conversation starts (Canvas 2.0), and fades
   back IN on a new chat / session restart (_hasConversation toggled by ChatCanvas). */
.zc-shell .zc-zen { transition: opacity .45s ease, visibility .45s ease; }
.zc-shell .zc-zen.zc-zen-faded {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

.zc-shell .zc-zen-eyebrow {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--zc-tenant);
    margin-bottom: 16px;
    text-align: center;
}

.zc-shell .zc-zen-h {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.015em;
    margin: 0 0 16px;
    text-align: center;
    line-height: 1.28;
    color: var(--zc-text);
    max-width: 760px;
    text-wrap: balance;
}

.zc-shell .zc-zen-sub {
    font-size: 15.5px;
    color: var(--zc-text-2);
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
    line-height: 1.6;
    text-wrap: balance;
}

/* Carousel wrapper — flanks the module-card row with prev/next arrows.
   Decorative today (3 cards fit; nothing to scroll). When the card set
   grows past what fits, the row will scroll horizontally and the arrows
   will page through it. */
.zc-shell .zc-module-carousel {
    width: 100%;
    max-width: 1080px;
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.zc-shell .zc-module-row {
    flex: 1;
    min-width: 0;
    display: grid;
    /* Responsive auto-fit: as many ~280px+ columns as fit. Yields 1 / 2 / 3
       columns naturally as the canvas widens. Replaces the old fixed-3
       grid that assumed exactly 3 hardcoded cards. */
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
}

/* Home grid card — pinned process surfaced via Flow.Permissions.HomeCardOrder.
   Visual matches ZybronChatCanvas-TenantAdmin.html: per-card accent color,
   subtle gradient overlay, icon pill, eyebrow tag, title, description,
   stats line with bold values, hover-revealed arrow chevron. */
/* Skeleton loaders — shown in the card slot while LoadHomeGridAsync resolves.
   Card-shaped pulsing placeholders so the layout doesn't jump when real cards
   replace them. Pure theme-token colors so they look right in light/dark/HC. */
.zc-shell .zc-home-card-skel {
    cursor: default;
    pointer-events: none;
    background: var(--zc-surface);
    border: 1.5px solid var(--zc-border);
    border-radius: 18px;
    padding: 18px 20px 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.zc-shell .zc-home-card-skel-icon,
.zc-shell .zc-home-card-skel-line {
    background: linear-gradient(90deg,
        var(--zc-border) 0%,
        var(--zc-bg-elevated, var(--zc-surface)) 50%,
        var(--zc-border) 100%);
    background-size: 200% 100%;
    animation: zc-skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}

.zc-shell .zc-home-card-skel-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 8px; }
.zc-shell .zc-home-card-skel-line-eye   { width: 60%; height: 10px; }
.zc-shell .zc-home-card-skel-line-title { width: 80%; height: 18px; margin-top: 4px; }
.zc-shell .zc-home-card-skel-line-desc  { width: 95%; height: 12px; margin-top: 6px; }

@keyframes zc-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Real cards fade up when _cardsReady flips. Each card is a button so we
   target the live render (not the skeleton divs). */
.zc-shell button.zc-home-card {
    animation: zc-card-fade-in 280ms ease-out both;
}

@keyframes zc-card-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.zc-shell .zc-home-card {
    --card-accent: var(--zc-jade, #00D68F);
    --card-accent-bg: rgba(0, 214, 143, 0.10);
    background: var(--zc-surface);
    border: 1.5px solid var(--zc-border);
    border-radius: 18px;
    padding: 18px 20px 16px;
    text-align: left;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Subtle accent gradient at top — fades to transparent. Strengthens on hover. */
.zc-shell .zc-home-card-glow {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--card-accent) 0%, transparent 60%);
    opacity: .06;
    pointer-events: none;
    transition: opacity .25s ease;
}

.zc-shell .zc-home-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
    border-color: var(--card-accent);
}

.zc-shell .zc-home-card:hover .zc-home-card-glow {
    opacity: .14;
}

.zc-shell .zc-home-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--card-accent-bg);
    color: var(--card-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.zc-shell .zc-home-card-icon .material-symbols-outlined {
    font-size: 23px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

.zc-shell .zc-home-card-eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--card-accent);
    position: relative;
    z-index: 1;
}

.zc-shell .zc-home-card-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--zc-text);
    line-height: 1.18;
    letter-spacing: -0.018em;
    position: relative;
    z-index: 1;
    margin-top: -4px;
}

.zc-shell .zc-home-card-desc {
    font-size: 13px;
    color: var(--zc-text-2);
    line-height: 1.5;
    margin-top: 2px;
    /* Two-line clamp keeps cards short so the full grid clears the dock. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.zc-shell .zc-home-card-stats {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--zc-border);
    font-size: 11px;
    font-weight: 700;
    color: var(--zc-text-3);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    position: relative;
    z-index: 1;
}

.zc-shell .zc-home-card-stats b {
    color: var(--zc-text);
    font-weight: 800;
}

/* Arrow chevron — subtle by default, fills with accent on hover. */
.zc-shell .zc-home-card-arrow {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--zc-surface-2, rgba(0,0,0,.04));
    color: var(--zc-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    z-index: 1;
}

.zc-shell .zc-home-card-arrow .material-symbols-outlined {
    font-size: 18px;
}

.zc-shell .zc-home-card:hover .zc-home-card-arrow {
    background: var(--card-accent);
    color: #fff;
    transform: translateX(2px);
}

.zc-shell .zc-carousel-arrow {
    flex-shrink: 0;
    align-self: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--zc-surface);
    border: 1.5px solid var(--zc-text-3);
    color: var(--zc-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .12s;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.zc-shell .zc-carousel-arrow:hover {
    color: var(--zc-jade);
    background: var(--zc-surface);
    border-color: var(--zc-jade);
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.zc-shell .zc-carousel-arrow .material-symbols-outlined { font-size: 22px; }

@media (max-width: 880px) {
    .zc-shell .zc-module-row { grid-template-columns: 1fr; }
    /* Hide the arrows on stacked layout — vertical scrolling handles it. */
    .zc-shell .zc-carousel-arrow { display: none; }
}

.zc-shell .zc-module-card {
    background: var(--zc-surface);
    border: 1.5px solid var(--zc-border);
    border-radius: 22px;
    padding: 24px;
    transition: all .25s ease;
    box-shadow: var(--zc-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    min-height: 240px;
    position: relative;
    overflow: hidden;
    color: var(--zc-text);
    font-family: inherit;
    font-size: 14px;
}

.zc-shell .zc-module-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient(180deg, var(--zc-accent, var(--zc-jade)) 0%, transparent 60%);
    opacity: .05;
    pointer-events: none;
    transition: opacity .25s;
}

.zc-shell .zc-module-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--zc-shadow-lg);
    border-color: var(--zc-accent, var(--zc-text-3));
}

.zc-shell .zc-module-card:hover::before { opacity: .12; }

.zc-shell .zc-module-card .zc-ico-wrap {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zc-accent-bg, var(--zc-jade-bg));
    color: var(--zc-accent, var(--zc-jade));
    font-size: 24px;
}

.zc-shell .zc-module-card .zc-ttl-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zc-shell .zc-module-card .zc-ns {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--zc-accent, var(--zc-jade));
}

.zc-shell .zc-module-card .zc-ttl {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.018em;
    line-height: 1.18;
    color: var(--zc-text);
}

.zc-shell .zc-module-card .zc-meta {
    font-size: 13.5px;
    color: var(--zc-text-2);
    line-height: 1.55;
    flex: 1;
}

.zc-shell .zc-module-card .zc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    padding-top: 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--zc-text-3);
}

.zc-shell .zc-module-card .zc-stats span b {
    color: var(--zc-text);
    font-weight: 800;
}

.zc-shell .zc-module-card.launch { --zc-accent: #EA580C; --zc-accent-bg: rgba(234, 88, 12, .1); }
.zc-shell .zc-module-card.run    { --zc-accent: var(--zc-tenant); --zc-accent-bg: var(--zc-tenant-bg); }
.zc-shell .zc-module-card.prove  { --zc-accent: var(--zc-jade); --zc-accent-bg: var(--zc-jade-bg); }

/* Chevron arrow on the top-right of each module card (matches the
   ZybronChatCanvas-TenantAdmin.html wireframe). Plays the same role as
   .open-arrow in the wireframe HTML — slides + colors-up on hover. */
.zc-shell .zc-module-card .zc-open-arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--zc-surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--zc-text-3);
    transition: all .2s;
    font-size: 18px;
}
.zc-shell .zc-module-card:hover .zc-open-arrow {
    background: var(--zc-accent, var(--zc-jade));
    color: #fff;
    transform: translateX(2px);
}

/* Module card icon — Material Symbols glyph inside the .zc-ico-wrap tile. */
.zc-shell .zc-module-card .zc-ico-wrap .material-symbols-outlined {
    font-size: 28px;
    line-height: 1;
}

/* Cursor — module cards in the zen state are buttons that route to a skill. */
.zc-shell .zc-module-card { cursor: pointer; }

/* FOCUS SCRIM — appears when the dock enters Focus mode. Sits above canvas
   content (z 0) and below the dock (z 50), topbar (z 60), rail (z 80) so
   chrome stays lit while cards behind dim. Click drops the dock to Work. */
.zc-shell .zc-canvas-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .50);
    z-index: 45;
    cursor: pointer;
    animation: zc-scrim-fade-in .18s ease;
}

@keyframes zc-scrim-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* DOCK ==================================================================== */
.zc-shell .zc-dock-wrap {
    position: fixed;
    left: 50%;
    bottom: 18px;
    /* Center the composer in the CONTENT column (frame to the right of the left panel), so it lines
       up under the centered home text / chat column. Offset = half the current left-panel width;
       swaps to the rail width when the panel is collapsed (override below). */
    transform: translateX(calc(-50% + var(--zc-panel-w) / 2));
    /* Glide with the panel (which animates width .22s) instead of snapping on collapse/expand. */
    transition: transform .22s var(--zc-ease, ease);
    width: calc(100% - 64px);
    max-width: var(--zc-dock-w);
    /* Above expanded skill cards (which use z-index: 201) so the chat composer
       stays reachable even when a card is fullscreened. User can always type. */
    z-index: 220;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.zc-shell .zc-dock-wrap > * { pointer-events: auto; }

/* Panel collapsed → content column is offset by only the rail; track it so the composer stays centered. */
.zc-shell.zc-panel-collapsed .zc-dock-wrap { transform: translateX(calc(-50% + var(--zc-rail-w) / 2)); }

.zc-shell .zc-dock {
    position: relative;   /* anchor for the dock's absolutely-positioned children (resize handle) */
    width: 100%;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 18px;
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Subtle lift only — the heavy shadow was casting a haze upward that
       read as a dim band over the bottom of the canvas content. */
    box-shadow: var(--zc-shadow-md);
}

/* CANVAS 2.0 — Google-Canvas style conversation surface. When a chat is active
   (zc-has-convo) and no artifact is expanded (not .zc-dock-focus), the history
   lifts OUT of the composer and renders on the CANVAS as a centered reading
   column above the composer. The composer stays a single contained box — fewer
   surfaces, no expanding chat panel. */
/* CANVAS 2.0 — the conversation renders ON THE CANVAS. The history is now a root
   sibling of the composer (moved OUT of the transformed .zc-dock-wrap in
   ChatDock), so position:fixed measures from the viewport. Centered reading
   column above the contained composer. Hidden until a chat is active. */
.zc-shell .zc-dock-history {
    position: fixed !important;
    top: 40px !important;
    /* Clear the composer with a real gap. --zc-composer-h is published from JS
       (setupComposerHeightObserver in VoiceModeService.js) as the observed height of the
       .zc-dock composer container. The composer WRAP (.zc-dock-wrap) sits at bottom: 18px
       (its own inset from the viewport bottom), so the composer's TOP edge is at
       (18px + composer-h) from the viewport bottom. We need the transcript's bottom edge
       to sit ABOVE that top edge with real breathing room — the last turn's provenance
       chips (Sources dropdown, AI/Verified badges) render BELOW the reply bubble and were
       clipping under the composer's rounded top edge.
       Formula: 18px (composer inset) + composer-h + 60px (visual gap + chip clearance).
       Fallback (260px) covers first paint before the observer publishes. */
    bottom: calc(18px + var(--zc-composer-h, 260px) + 60px) !important;
    left: var(--zc-panel-w) !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    /* Scroll behavior — the transcript is a fixed-height panel above the composer,
       so it MUST be its own scroll container. Wheel/trackpad scroll only; the
       scrollbar itself is hidden via the ::-webkit-scrollbar override below +
       `scrollbar-width: none`. Regression note (2026-07-14): this was lost when a
       duplicate lower-in-file `.zc-dock-history` block was removed as "dead" — the
       lower block was actually the only place setting overflow-y. Restored here so
       the properties live in the one authoritative block. */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Flex column stacks turns top-down with consistent spacing between bubbles.
       Same regression story as overflow — was defined only in the removed duplicate. */
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    /* Full-width scroll container → scrollbar sits at the window edge (not mid-
       canvas). Text is centered in a --zc-dock-w column via horizontal padding.
       Bottom padding (16px) is inside-the-container breathing room; the real
       gap to the composer comes from the `bottom` value above. */
    padding: 24px max(24px, calc((100% - var(--zc-dock-w)) / 2)) 16px !important;
    background: none !important;
    border: none !important;
    z-index: 40 !important;
    /* Top-down like ChatGPT/Claude/Gemini — the first turn sits at the top and
       the conversation grows downward; it scrolls once it fills, and sticky
       auto-scroll keeps the newest turn in view at the bottom. */
    justify-content: flex-start !important;
    /* No scrollbar — scroll works via wheel/trackpad. Fade only at the TOP edge
       (Gemini-style hint that there's more above). Bottom fade removed — with a
       real bottom gap above the composer, fading here just hides the newest turn. */
    scrollbar-width: none !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 100%) !important;
            mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 100%) !important;
}
.zc-shell .zc-dock-history::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.zc-shell.zc-panel-collapsed .zc-dock-history { left: var(--zc-rail-w) !important; }
.zc-shell:not(.zc-has-convo) .zc-dock-history { display: none !important; }
/* Adaptive — below 640px the rail is a slide-in drawer, not a persistent
   column, so the conversation spans the FULL width with small side padding
   (no hardcoded 248px left offset that shoved content to the right). */
@media (max-width: 640px) {
    .zc-shell .zc-dock-history,
    .zc-shell.zc-panel-collapsed .zc-dock-history,
    .zc-shell.zc-dock-focus .zc-dock-history {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        top: 56px !important;
        bottom: 160px !important;
        padding: 16px 16px 8px !important;
    }
    /* Split view doesn't apply on mobile — no room for two lanes. Chat goes
       full-width; the artifact-card frame is hidden. (Card ⇄ chat TOGGLE is the
       real mobile pattern — TBD; one surface at a time, never stacked.) */
    .zc-shell.zc-dock-focus .zc-canvas::before { display: none !important; }
    .zc-shell.zc-dock-focus .zc-dock-wrap {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;   /* kill the -50% centering shift so it fits */
    }

    /* Mobile slide-in rail = the FULL labeled drawer, not the icon-only microrail
       (even though _panelCollapsed defaults true on desktop). Show labels +
       left-align — there's no persistent rail on mobile, it's a summoned drawer. */
    .zc-shell.zc-panel-collapsed .zc-panel-mobile-open .zc-panel-row-label { display: inline !important; }
    .zc-shell.zc-panel-collapsed .zc-panel-mobile-open .zc-panel-row-caret { display: inline-flex !important; }
    .zc-shell.zc-panel-collapsed .zc-panel-mobile-open .zc-panel-group-label { display: block !important; }
    .zc-shell.zc-panel-collapsed .zc-panel-mobile-open .zc-panel-recents { display: block !important; }
    .zc-shell.zc-panel-collapsed .zc-panel-mobile-open .zc-panel-row {
        justify-content: flex-start !important;
        gap: 11px !important;
        padding: 7px 10px !important;
    }
    .zc-shell.zc-panel-collapsed .zc-panel-mobile-open .zc-panel-head { align-items: flex-start !important; padding: 12px 14px 10px !important; }
    .zc-shell.zc-panel-collapsed .zc-panel-mobile-open .zc-panel-scroll { padding: 6px 8px 14px !important; }
    .zc-shell.zc-panel-collapsed .zc-panel-mobile-open .zc-panel-foot { align-items: stretch !important; padding: 10px 12px !important; }
    .zc-shell.zc-panel-collapsed .zc-panel-mobile-open .zc-panel-foot-user { justify-content: space-between !important; }

    /* Split view on mobile = ONE surface at a time via the segmented pill. */
    .zc-shell.zc-dock-focus .zc-msplit-toggle {
        display: inline-flex !important;
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 260;
    }
    /* Card view — the artifact card(s) fill the screen, conversation hidden. */
    .zc-shell.zc-dock-focus.zc-msplit-card .zc-dock-history { display: none !important; }
    /* Chat view — conversation full-width (default), clears the toggle pill. */
    .zc-shell.zc-dock-focus.zc-msplit-chat .zc-dock-history { top: 52px !important; }
}

/* Chat history layout lives in the single `.zc-shell .zc-dock-history` block earlier in this file
   (search for "Clear the composer with a real gap"). That block owns positioning, padding, scroll
   behavior, and the top-fade mask. The retired Peek/Work/Focus dock modes (and the .zc-history-work
   class token that gated `max-height: var(--zc-work-h)`) have been removed with Canvas 2.0. */

.zc-shell .zc-turn {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

.zc-shell .zc-turn.user {
    /* Row-reverse puts the avatar on the right and the bubble grows to its
       natural width to the left of the avatar — no align-self collapse. */
    flex-direction: row-reverse;
}

.zc-shell .zc-turn-avatar {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 6px;
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.zc-shell .zc-turn.tzib .zc-turn-avatar {
    background: linear-gradient(135deg, var(--zc-jade), #0AC07F);
    /* "Tzib" is wider than 2-letter initials — let the chip grow horizontally. */
    width: auto;
    min-width: 24px;
    padding: 0 6px;
}

/* User-side avatar is intentionally not rendered — bubble color +
   row-reverse alignment carry the role identity. */

.zc-shell .zc-turn-bubble {
    /* Bubble takes its natural content width up to 75% of the row.
       Long words wrap normally; URLs and code break only when they overflow. */
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--zc-text);
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.zc-shell .zc-turn.user .zc-turn-bubble {
    background: var(--zc-tenant-bg);
    border-color: var(--zc-tenant-ring);
}

/* CANVAS 2.0 — normal assistant (Mira) replies render as clean PROSE, not a
   heavy bubble (Gemini-style chat surface): no background/border, full reading
   width, slightly larger body type. The persona chip, the AI/Verified content-
   source pill, and the knowledge "Sources" citations all still render inside.
   Debug/trace "kind-*" turns keep their tinted bubbles for scannability. */
.zc-shell .zc-turn.tzib:not([class*="kind-"]) .zc-turn-bubble {
    background: none;
    border: none;
    max-width: 100%;
    padding: 2px 0;
    font-size: 14px;
    line-height: 1.6;
}

/* ── Debug-mode bubble variants ─────────────────────────────────────────
   Surfaced only when AppState.IsDebugMode is true (Debug button toggles it).
   Each kind gets a tiny uppercase tag and a distinct tint so backend traffic
   is scannable without dominating real Tzib responses. */

.zc-shell .zc-turn-kind-tag {
    display: inline-block;
    font-family: var(--zc-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
    opacity: .7;
}

.zc-shell .zc-turn.kind-debug .zc-turn-bubble,
.zc-shell .zc-turn.kind-thinking .zc-turn-bubble {
    background: rgba(122, 133, 153, 0.08);
    border-color: var(--zc-border);
    color: var(--zc-text-3);
    font-family: var(--zc-mono);
    font-size: 11.5px;
    line-height: 1.4;
}
.zc-shell .zc-turn.kind-thinking .zc-turn-bubble { font-style: italic; }

.zc-shell .zc-turn.kind-ai-trace .zc-turn-bubble,
.zc-shell .zc-turn.kind-mind-trace .zc-turn-bubble {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.22);
    color: var(--zc-text-2);
    font-family: var(--zc-mono);
    font-size: 11.5px;
    line-height: 1.4;
}

.zc-shell .zc-turn.kind-ai-trace .zc-turn-kind-tag {
    background: rgba(37, 99, 235, 0.18);
    color: var(--zc-blue);
}

.zc-shell .zc-turn.kind-mind-trace .zc-turn-kind-tag {
    background: var(--zc-jade-bg);
    color: var(--zc-jade);
}

.zc-shell .zc-turn.kind-system .zc-turn-bubble {
    background: var(--zc-amber-bg);
    border-color: rgba(245, 158, 11, 0.32);
    color: var(--zc-text);
}

.zc-shell .zc-turn.kind-system .zc-turn-kind-tag {
    background: rgba(245, 158, 11, 0.22);
    color: var(--zc-amber);
}

.zc-shell .zc-turn.kind-error .zc-turn-bubble {
    background: var(--zc-red-bg);
    border-color: rgba(220, 53, 69, 0.32);
    color: var(--zc-red);
}

.zc-shell .zc-turn.kind-error .zc-turn-kind-tag {
    background: rgba(220, 53, 69, 0.22);
    color: var(--zc-red);
}

/* Knowledge citations — collapsed by default behind a "Sources · N" toggle so a
   long provenance list doesn't dominate the bubble. Native <details>; no state. */
.zc-shell .zc-sources { margin-top: 8px; }
.zc-shell .zc-sources-summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72em;
    opacity: 0.7;
    cursor: pointer;
    list-style: none;
    user-select: none;
    width: fit-content;
}
.zc-shell .zc-sources-summary::-webkit-details-marker { display: none; }
.zc-shell .zc-sources-summary:hover { opacity: 1; }
.zc-shell .zc-sources-chev {
    font-size: 16px;
    transition: transform .15s ease;
}
.zc-shell .zc-sources[open] .zc-sources-chev { transform: rotate(90deg); }
.zc-shell .zc-sources-count {
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.14);
    color: #A855F7;
    font-weight: 600;
}
.zc-shell .zc-sources-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}

/* Active state on rail buttons — used by the Debug button when ON */
.zc-shell .zc-rail-btn.active {
    background: var(--zc-jade-bg);
    color: var(--zc-jade);
}

/* Active state on dock buttons — VAD ON, PTT recording */
.zc-shell .zc-ibtn.active {
    background: var(--zc-jade-bg);
    color: var(--zc-jade);
}

/* ── Pending file chips (Tier 1C) ───────────────────────────────────── */
.zc-shell .zc-pending-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px 2px;
}

.zc-shell .zc-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 8px;
    border-radius: var(--zc-r-pill);
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    font-size: 11px;
    color: var(--zc-text);
    max-width: 240px;
}

.zc-shell .zc-file-chip .zc-file-icon {
    font-size: 14px;
    color: var(--zc-text-3);
}

.zc-shell .zc-file-chip .zc-file-name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.zc-shell .zc-file-chip .zc-file-size {
    font-size: 10px;
    color: var(--zc-text-3);
    font-variant-numeric: tabular-nums;
}

.zc-shell .zc-file-chip .zc-file-x {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--zc-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    padding: 0;
}

.zc-shell .zc-file-chip .zc-file-x:hover {
    background: var(--zc-red-bg);
    color: var(--zc-red);
}

.zc-shell .zc-file-chip .zc-file-x .material-symbols-outlined {
    font-size: 12px;
}

/* ── Markdown bubble content (Tier 1B) ──────────────────────────────────
   Same look as Chatbox.razor's .md-content, scoped to the dock so the
   dock-history bubbles render headings, lists, code blocks, etc. */

.zc-shell .zc-turn-bubble {
    position: relative;
}

.zc-shell .zc-turn-bubble .md-content {
    font-size: 13px;
    line-height: 1.5;
    color: inherit;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.zc-shell .zc-turn-bubble .md-content > *:first-child { margin-top: 0; }
.zc-shell .zc-turn-bubble .md-content > *:last-child  { margin-bottom: 0; }

.zc-shell .zc-turn-bubble .md-content p {
    margin: 6px 0;
}

.zc-shell .zc-turn-bubble .md-content h1,
.zc-shell .zc-turn-bubble .md-content h2,
.zc-shell .zc-turn-bubble .md-content h3,
.zc-shell .zc-turn-bubble .md-content h4 {
    margin: 10px 0 6px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--md-heading, var(--zc-text));
}
.zc-shell .zc-turn-bubble .md-content h1 { font-size: 1.35em; }
.zc-shell .zc-turn-bubble .md-content h2 { font-size: 1.2em; }
.zc-shell .zc-turn-bubble .md-content h3 { font-size: 1.08em; }
.zc-shell .zc-turn-bubble .md-content h4 { font-size: 1em; }

.zc-shell .zc-turn-bubble .md-content strong { font-weight: 800; }
.zc-shell .zc-turn-bubble .md-content em     { font-style: italic; }

.zc-shell .zc-turn-bubble .md-content a {
    color: var(--md-link, var(--zc-tenant));
    text-decoration: underline;
    text-underline-offset: 2px;
}
.zc-shell .zc-turn-bubble .md-content a:hover {
    color: var(--md-link-hover, var(--zc-tenant));
}

.zc-shell .zc-turn-bubble .md-content ul,
.zc-shell .zc-turn-bubble .md-content ol {
    margin: 6px 0;
    padding-left: 22px;
}
.zc-shell .zc-turn-bubble .md-content li { margin: 2px 0; }

.zc-shell .zc-turn-bubble .md-content code {
    font-family: var(--zc-mono);
    font-size: .9em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--md-inline-code-bg, var(--zc-surface-2));
    color: var(--md-inline-code-text, var(--zc-jade));
    border: 1px solid var(--zc-border);
}

.zc-shell .zc-turn-bubble .md-content pre {
    position: relative;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--code-block-bg, var(--zc-bg-2));
    border: 1px solid var(--code-block-border, var(--zc-border));
    overflow-x: auto;
    font-family: var(--zc-mono);
    font-size: 12px;
    line-height: 1.5;
}

/* Collapsible long code blocks — chat.js (makeCodeBlocksCollapsible) adds the
   .code-collapsed class + a "Show more" button; THESE rules do the actual
   collapse/expand (was never ported to the canvas, so the button did nothing). */
.zc-shell .zc-turn-bubble .md-content pre.code-collapsed {
    max-height: 16em;
    overflow-y: hidden;
}
.zc-shell .zc-turn-bubble .md-content pre.code-collapsed::after {
    content: "";
    position: absolute;
    left: 1px; right: 1px; bottom: 1px;
    height: 3.5em;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(to bottom, transparent, var(--code-block-bg, var(--zc-bg-2)));
    pointer-events: none;
}
.zc-shell .zc-turn-bubble .md-content .code-expand-btn {
    display: inline-flex;
    align-items: center;
    margin: 4px 0 8px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--zc-text-2);
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.zc-shell .zc-turn-bubble .md-content .code-expand-btn:hover {
    background: var(--zc-surface);
    color: var(--zc-text);
}

.zc-shell .zc-turn-bubble .md-content pre code {
    padding: 0;
    background: transparent;
    border: none;
    color: var(--code-block-text, var(--zc-text));
    font-size: inherit;
}

.zc-shell .zc-turn-bubble .md-content blockquote {
    margin: 8px 0;
    padding: 4px 12px;
    border-left: 3px solid var(--md-blockquote-border, var(--zc-jade));
    background: var(--md-blockquote-bg, var(--zc-surface-2));
    color: var(--md-blockquote-text, var(--zc-text-2));
    border-radius: 4px;
}

.zc-shell .zc-turn-bubble .md-content table {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
}
.zc-shell .zc-turn-bubble .md-content th,
.zc-shell .zc-turn-bubble .md-content td {
    padding: 4px 8px;
    border: 1px solid var(--md-table-border, var(--zc-border));
}
.zc-shell .zc-turn-bubble .md-content th {
    background: var(--md-table-header-bg, var(--zc-surface-2));
    font-weight: 700;
}

.zc-shell .zc-turn-bubble .md-content hr {
    border: none;
    border-top: 1px solid var(--md-hr, var(--zc-border));
    margin: 10px 0;
}

/* Code block copy button — added by chat.js addCodeCopyButtons.
   Reuses the existing .code-copy-btn class so chat.js doesn't have to know
   we're inside a different shell. Always visible (low opacity), full opacity
   on pre-hover, jade flash when copied. */
.zc-shell .zc-turn-bubble .md-content pre .code-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    background: var(--code-copy-btn-bg, var(--zc-surface-2));
    color: var(--zc-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s, color .15s, background .15s;
    z-index: 2;
}
.zc-shell .zc-turn-bubble .md-content pre:hover .code-copy-btn { opacity: 1; }
.zc-shell .zc-turn-bubble .md-content pre .code-copy-btn:hover {
    color: var(--zc-text);
    background: var(--zc-surface);
    opacity: 1;
}
.zc-shell .zc-turn-bubble .md-content pre .code-copy-btn.copied {
    background: var(--code-copy-btn-success, var(--zc-jade-bg));
    color: var(--zc-jade);
    opacity: 1;
}
.zc-shell .zc-turn-bubble .md-content pre .code-copy-btn svg {
    width: 14px;
    height: 14px;
}

/* Same per-code-block copy button styling, scoped to the GeneralResponse
   card body (the chat-bubble selector above doesn't reach inside skill
   cards). Without this, chat.js attaches the buttons but they render as
   default browser buttons with no positioning and end up invisible. */
.zc-shell .zc-genresp-body pre {
    position: relative;
}
.zc-shell .zc-genresp-body pre .code-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    background: var(--code-copy-btn-bg, var(--zc-surface-2));
    color: var(--zc-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Default opacity raised from .55 so users see the button without having
       to hover-discover it. Chat bubbles can stay subtler; cards are a
       larger reading surface where the copy affordance should be obvious. */
    opacity: .85;
    transition: opacity .15s, color .15s, background .15s, transform .15s;
    z-index: 2;
}
.zc-shell .zc-genresp-body pre:hover .code-copy-btn { opacity: 1; transform: scale(1.05); }
.zc-shell .zc-genresp-body pre .code-copy-btn:hover {
    color: var(--zc-text);
    background: var(--zc-surface);
    opacity: 1;
}
.zc-shell .zc-genresp-body pre .code-copy-btn.copied {
    background: var(--code-copy-btn-success, var(--zc-jade-bg));
    color: var(--zc-jade);
    opacity: 1;
}
.zc-shell .zc-genresp-body pre .code-copy-btn svg {
    width: 14px;
    height: 14px;
}

/* Expanded-mode breathing room for the GeneralResponse card —
   in compact view the card chrome already pads via .zc-skill-card-body
   (14/18px), but at full size the markdown content (esp. wide code
   blocks) reads cramped against the card edge. Add an extra inset so
   code blocks have visible margin all around, and pre's get a little
   more internal padding for readability at large sizes. */
.zc-shell .zc-skill-card.is-expanded .zc-genresp {
    padding: 8px 12px;
}
.zc-shell .zc-skill-card.is-expanded .zc-genresp-body {
    padding-right: 12px;
}
.zc-shell .zc-skill-card.is-expanded .zc-genresp-body pre {
    padding: 14px 16px;
}

/* Bubble-level copy button — appears on Tzib bubbles only on hover */
.zc-shell .zc-turn.tzib .zc-turn-bubble .zc-bubble-copy {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    background: var(--zc-surface-2);
    color: var(--zc-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, color .15s;
}
.zc-shell .zc-turn.tzib .zc-turn-bubble:hover .zc-bubble-copy { opacity: .85; }
.zc-shell .zc-turn.tzib .zc-turn-bubble .zc-bubble-copy:hover {
    color: var(--zc-text);
    opacity: 1;
}
.zc-shell .zc-turn.tzib .zc-turn-bubble .zc-bubble-copy.copied {
    background: var(--zc-jade-bg);
    color: var(--zc-jade);
    opacity: 1;
}
.zc-shell .zc-turn.tzib .zc-turn-bubble .zc-bubble-copy .material-symbols-outlined {
    font-size: 13px;
}

/* Typing indicator — three pulsing dots while waiting on Tzib */
.zc-shell .zc-turn-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
}

.zc-shell .zc-turn-typing span:not(.zc-thinking-label) {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zc-text-3);
    animation: zc-typing 1.2s infinite ease-in-out;
}

.zc-shell .zc-turn-typing span:not(.zc-thinking-label):nth-child(2) { animation-delay: .2s; }
.zc-shell .zc-turn-typing span:not(.zc-thinking-label):nth-child(3) { animation-delay: .4s; }

@keyframes zc-typing {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-2px); }
}

/* ThinkingMessage label — sits next to the typing dots while the pipeline runs.
   Backend sends "Routing…" / "Synthesizing…" / etc. translated for the user's locale. */
.zc-shell .zc-thinking-label {
    margin-left: .6rem;
    font-size: .8rem;
    color: var(--text-muted, #888);
    font-style: italic;
}

/* Stop button (replaces Send while a Tzib reply is in flight). */
.zc-shell .zc-ibtn.zc-stop {
    color: var(--accent-danger, #d33);
}
.zc-shell .zc-ibtn.zc-stop:hover {
    background: rgba(221, 51, 51, .08);
}


/* Language-code badge on the rail Language button — small chip overlaid
   on the icon (e.g. "EN", "ES"). The drawer label already says
   "Language · EN" so the badge is mainly a desktop affordance. */
.zc-shell .zc-rail-btn-lang {
    position: relative;
}
.zc-shell .zc-rail-lang-code {
    position: absolute;
    bottom: 1px;
    right: 1px;
    background: var(--zc-tenant, var(--zc-jade));
    color: #ffffff;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    padding: 2px 3px;
    border-radius: 4px;
    pointer-events: none;
}

/* Tier D-1 — file chips inside a bubble (download links). */
.zc-shell .zc-bubble-files {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .55rem;
}
.zc-shell .zc-file-chip-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .55rem;
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    border-radius: 999px;
    background: var(--surface-elev1, rgba(255,255,255,.6));
    cursor: pointer;
    color: inherit;
    font: inherit;
    line-height: 1;
}
.zc-shell .zc-file-chip-link:hover {
    background: var(--accent-tint, rgba(80,130,255,.08));
    border-color: var(--accent, #4a78ff);
}

/* Tier D-2 — inline HTMLFragment iframe inside a bubble. */
.zc-shell .zc-bubble-html {
    display: block;
    width: 100%;
    min-height: 200px;
    margin-top: .55rem;
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    border-radius: .5rem;
    background: #fff;
}

/* Tier F-2/F-3 — VAD strip with state-driven glow ring. */
.zc-shell .zc-vad-strip {
    display: flex; align-items: center; justify-content: space-between;
    padding: .45rem .8rem;
    margin: 0 0 .55rem 0;
    border-radius: .6rem;
    background: var(--surface-elev1, rgba(255,255,255,.6));
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    transition: box-shadow .25s ease, border-color .25s ease;
}
.zc-shell .zc-vad-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; }
.zc-shell .zc-vad-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent, #4a78ff);
    box-shadow: 0 0 0 0 currentColor;
    animation: zc-vad-pulse 1.4s infinite ease-out;
}
.zc-shell .zc-vad-actions { display: inline-flex; gap: .35rem; }
.zc-shell .zc-vad-glow.zc-vad-state-listening {
    border-color: #2ea043;
    box-shadow: 0 0 0 3px rgba(46,160,67,.15);
}
.zc-shell .zc-vad-glow.zc-vad-state-listening .zc-vad-dot { background: #2ea043; color: #2ea043; }

.zc-shell .zc-vad-glow.zc-vad-state-speaking {
    border-color: #4a78ff;
    box-shadow: 0 0 0 3px rgba(80,130,255,.18);
}
.zc-shell .zc-vad-glow.zc-vad-state-speaking .zc-vad-dot { background: #4a78ff; color: #4a78ff; }

.zc-shell .zc-vad-glow.zc-vad-state-processing {
    border-color: #c97a00;
    box-shadow: 0 0 0 3px rgba(201,122,0,.15);
}
.zc-shell .zc-vad-glow.zc-vad-state-processing .zc-vad-dot { background: #c97a00; color: #c97a00; }

@keyframes zc-vad-pulse {
    0%   { box-shadow: 0 0 0 0   currentColor; }
    70%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0   transparent; }
}

/* Tier E-1 — drag-and-drop overlay over the input frame. */
.zc-shell .zc-input-frame { position: relative; }
.zc-shell .zc-input-frame.drag-over {
    outline: 2px dashed var(--accent, #4a78ff);
    outline-offset: -4px;
}
.zc-shell .zc-drag-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    gap: .5rem;
    background: rgba(80, 130, 255, .08);
    color: var(--accent, #4a78ff);
    font-weight: 600;
    pointer-events: none;
    border-radius: inherit;
    z-index: 5;
}

/* Tier E-4 — Add-to-Library toggle on each pending file chip. */
/* Add-to-Library toggle on file chips (Tier E-4). Mirrors Classic Chatbox's
   .add-to-library-toggle — same jade-green active state, same hover affordance,
   visible "Add to Library" label so the action is discoverable. */
.zc-shell .zc-file-lib {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--zc-text-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    margin: 0 .1rem 0 .2rem;
    border-radius: 4px;
    font-size: 11px;
    transition: color .15s ease, background .15s ease;
}
.zc-shell .zc-file-lib:hover {
    color: var(--brand-jade, var(--zc-jade));
    background: var(--zc-jade-bg);
}
.zc-shell .zc-file-lib.active {
    color: var(--brand-jade, var(--zc-jade));
}
.zc-shell .zc-file-lib .material-symbols-outlined { font-size: 1rem; }
.zc-shell .zc-file-lib-text { white-space: nowrap; }

/* Tier E-4 — PTT transcribing spinner (replaces the mic icon while waiting for the recognizer). */
.zc-shell .zc-ptt-spinner {
    display: inline-flex; gap: 3px; align-items: center;
}
.zc-shell .zc-ptt-spinner span {
    width: 4px; height: 4px; border-radius: 50%;
    background: currentColor;
    animation: zc-ptt-pulse 900ms infinite ease-in-out;
}
.zc-shell .zc-ptt-spinner span:nth-child(2) { animation-delay: .15s; }
.zc-shell .zc-ptt-spinner span:nth-child(3) { animation-delay: .30s; }
@keyframes zc-ptt-pulse {
    0%, 80%, 100% { opacity: .25; transform: scale(.85); }
    40%           { opacity: 1;   transform: scale(1.15); }
}
.zc-shell .zc-ibtn.transcribing { color: var(--accent, #4a78ff); }

/* Tier D-3 — ContentSource verification pill on Tzib bubbles.
   Solid backgrounds + white text — mirrors Chatbox.razor's .content-source.
   Sits at the top of the bubble, before the markdown content. */
/* ChatGPT-style reply — no persona chip above the prose; the AI/Verified
   provenance is a QUIET colored text label (green Verified / blue Verified+AI /
   gray AI), not a solid pill. Clean prose carries the response. */
.zc-shell .zc-turn.tzib:not([class*="kind-"]) .zc-turn-avatar { display: none; }
.zc-shell .zc-content-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .01em;
    color: var(--zc-text-3);
}
.zc-shell .zc-content-source .material-symbols-outlined {
    font-size: 13px;
    color: inherit;
}
.zc-shell .zc-cs-validatedknowledge { color: #0BB36C; }   /* Verified */
.zc-shell .zc-cs-mixed             { color: #3B82F6; }   /* Verified + AI */
.zc-shell .zc-cs-generated         { color: var(--zc-text-3); }  /* AI */

/* Action row below each reply (ChatGPT/Gemini) — quiet, always-visible controls:
   the provenance tag + copy sit together beneath the prose. */
.zc-shell .zc-turn-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
.zc-shell .zc-turn-actions .zc-content-source { margin-bottom: 0; }
/* Copy lives in the action row now (not the old absolute hover-corner):
   borderless, always visible, subtle — hover darkens. */
.zc-shell .zc-turn.tzib .zc-turn-bubble .zc-turn-actions .zc-bubble-copy {
    position: static;
    width: auto;
    height: auto;
    padding: 2px;
    border: none;
    background: none;
    opacity: .5;
    color: var(--zc-text-3);
}
.zc-shell .zc-turn.tzib .zc-turn-bubble .zc-turn-actions .zc-bubble-copy:hover {
    opacity: 1;
    color: var(--zc-text);
}

/* Input frame — two rows: textarea on top, button strip below.
   Mirrors the Classic Chatbox .chat-input-frame structure. */
.zc-shell .zc-input-frame {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 12px;
    padding: 6px 8px 8px;
    transition: border-color .15s, box-shadow .15s;
}

.zc-shell .zc-input-frame:focus-within {
    border-color: var(--zc-tenant);
    box-shadow: 0 0 0 3px var(--zc-tenant-ring);
}

/* Button strip — left group / right group, justified */
.zc-shell .zc-input-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.zc-shell .zc-input-buttons-left,
.zc-shell .zc-input-buttons-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Tzib | GPT segmented toggle */
.zc-shell .zc-mode-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-r-pill);
    padding: 2px;
    margin-right: 4px;
}

.zc-shell .zc-mode-label {
    padding: 4px 10px;
    border-radius: var(--zc-r-pill);
    font-size: 11px;
    font-weight: 700;
    color: var(--zc-text-3);
    transition: all .12s;
    line-height: 1;
}

.zc-shell .zc-mode-label:hover {
    color: var(--zc-text);
}

.zc-shell .zc-mode-label.active {
    background: var(--zc-tenant);
    color: var(--btn-primary-text, #fff);
}

/* Assistant engine — single pill + upward dropdown (replaces the 2-segment toggle). */
.zc-shell .zc-mode-dd { position: relative; margin-right: 4px; }
.zc-shell .zc-mode-dd-btn {
    display: inline-flex; align-items: center; gap: 1px;
    height: 28px; padding: 0 5px 0 11px; border-radius: var(--zc-r-pill);
    border: 1px solid var(--zc-border); background: var(--zc-surface);
    font-size: 11px; font-weight: 700; color: var(--zc-text-2); cursor: pointer;
    transition: all .12s; line-height: 1;
}
.zc-shell .zc-mode-dd-btn:hover { color: var(--zc-text); border-color: var(--zc-text-3); }
.zc-shell .zc-mode-dd-btn.is-tzib {
    background: var(--zc-tenant); border-color: var(--zc-tenant); color: var(--btn-primary-text, #fff);
}
.zc-shell .zc-mode-dd-caret { font-size: 16px; }
.zc-shell .zc-mode-dd-btn.is-tzib .zc-mode-dd-caret { color: rgba(255,255,255,.85); }

.zc-shell .zc-mode-dd-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
.zc-shell .zc-mode-dd-menu {
    position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 70;
    min-width: 190px; background: var(--zc-surface); border: 1px solid var(--zc-border);
    border-radius: 10px; box-shadow: var(--zc-shadow-md); padding: 5px;
}
.zc-shell .zc-mode-dd-item {
    position: relative; display: flex; flex-direction: column; align-items: flex-start;
    width: 100%; padding: 7px 28px 7px 9px; border-radius: 7px; cursor: pointer; text-align: left;
}
.zc-shell .zc-mode-dd-item:hover { background: var(--zc-surface-2); }
.zc-shell .zc-mode-dd-sep { height: 1px; margin: 5px 4px; background: var(--zc-border); }

/* Folio context band — the identity header the composer grows out of.
   Bleeds to the dock card's edges (negative margins cancel .zc-dock padding)
   so it reads as an attached tab, not a detached pill row. One tenant-toned
   identity; everything else quiet. */
.zc-shell .zc-folio-chip {
    display: flex; align-items: center; gap: 6px;
    margin: -14px -16px 0;              /* bleed to the card's inner edges */
    padding: 5px 12px;
    border-bottom: 1px solid var(--zc-border);
    border-radius: 17px 17px 0 0;       /* match the 18px card, minus its border */
}

/* The opener — the interactive identity/pick region. Fills the band; the New
   button (empty state only) sits to its right. */
.zc-shell .zc-folio-chip-main {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 5px 7px; border-radius: 9px;
    background: transparent; border: 0; cursor: pointer; text-align: left;
    transition: background .15s ease;
}
.zc-shell .zc-folio-chip-main:hover { background: var(--zc-tenant-bg); }
.zc-shell .zc-folio-chip-main:focus-visible { outline: 2px solid var(--zc-tenant); outline-offset: -2px; }
.zc-shell .zc-folio-chip-static { cursor: default; }
.zc-shell .zc-folio-chip-static:hover { background: transparent; }

.zc-shell .zc-folio-chip-tile {
    display: grid; place-items: center; flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--zc-tenant-bg); color: var(--zc-tenant);
}
.zc-shell .zc-folio-chip-tile .material-symbols-outlined { font-size: 15px; }
/* No-folio state — the tile goes quiet (no brand tone until a folio is chosen). */
.zc-shell .zc-folio-chip-empty .zc-folio-chip-tile { background: var(--zc-surface-2); color: var(--zc-text-3); }

.zc-shell .zc-folio-chip-kind {
    flex-shrink: 0;
    font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--zc-tenant);
}
.zc-shell .zc-folio-chip-name {
    flex: 1 1 auto; min-width: 0;       /* absorb slack + allow truncation */
    font-size: 12.5px; font-weight: 650; color: var(--zc-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zc-shell .zc-folio-chip-placeholder { color: var(--zc-text-3); font-weight: 600; }
.zc-shell .zc-folio-chip-type {
    flex-shrink: 0;
    font-size: 10px; font-weight: 600; color: var(--zc-text-3);
    padding: 1px 8px; border-radius: 999px; background: var(--zc-surface-2);
}
.zc-shell .zc-folio-chip-caret {
    font-size: 16px; color: var(--zc-text-3);
    transition: color .15s ease;
}
/* Caret zone — its own button (opens the switcher), split from the identity. */
.zc-shell .zc-folio-chip-caret-btn {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 7px;
    background: transparent; border: 0; cursor: pointer;
    transition: background .15s ease;
}
.zc-shell .zc-folio-chip-caret-btn:hover { background: var(--zc-tenant-bg); }
.zc-shell .zc-folio-chip-caret-btn:hover .zc-folio-chip-caret { color: var(--zc-tenant); }
.zc-shell .zc-folio-chip-caret-btn:focus-visible { outline: 2px solid var(--zc-tenant); outline-offset: -2px; }

/* New folio button — tenant-tone pill, shown only in the no-folio state. */
.zc-shell .zc-folio-chip-new {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 11px 5px 8px; border-radius: 999px;
    background: var(--zc-tenant-bg); color: var(--zc-tenant); border: 0;
    cursor: pointer; font-size: 11.5px; font-weight: 700;
    transition: box-shadow .15s ease;
}
.zc-shell .zc-folio-chip-new:hover { box-shadow: inset 0 0 0 1px var(--zc-tenant); }
.zc-shell .zc-folio-chip-new:focus-visible { outline: 2px solid var(--zc-tenant); outline-offset: 2px; }
.zc-shell .zc-folio-chip-new .material-symbols-outlined { font-size: 16px; }


@media (prefers-reduced-motion: reduce) {
    .zc-shell .zc-folio-chip-main,
    .zc-shell .zc-folio-chip-new,
    .zc-shell .zc-folio-chip-caret-btn,
    .zc-shell .zc-folio-chip-caret { transition: none; }
}

/* Folio switcher dropdown — opens upward out of the composer's top edge. */
.zc-shell .zc-folio-switch { position: static; }
.zc-shell .zc-folio-switch-menu {
    position: absolute; left: 16px; bottom: calc(100% + 8px); z-index: 70;
    width: min(320px, calc(100% - 32px));
    background: var(--zc-surface); border: 1px solid var(--zc-border);
    border-radius: 12px; box-shadow: var(--zc-shadow-md);
    padding: 5px; max-height: 320px; overflow-y: auto;
}
.zc-shell .zc-folio-switch-head {
    padding: 5px 9px 6px;
    font-size: 10px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--zc-text-3);
}
.zc-shell .zc-folio-switch-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 9px; border-radius: 8px; cursor: pointer; text-align: left;
    background: transparent; border: 0; color: var(--zc-text);
}
.zc-shell .zc-folio-switch-item:hover { background: var(--zc-surface-2); }
.zc-shell .zc-folio-switch-item .material-symbols-outlined { font-size: 17px; color: var(--zc-text-3); }
.zc-shell .zc-folio-switch-item.active { color: var(--zc-tenant); }
.zc-shell .zc-folio-switch-item.active .material-symbols-outlined { color: var(--zc-tenant); }
.zc-shell .zc-folio-switch-muted { opacity: .6; cursor: default; }
/* Leave folio — reads as a subtle exit; warms to red on hover. */
.zc-shell .zc-folio-switch-exit:hover { background: var(--zc-red-bg); color: var(--zc-red); }
.zc-shell .zc-folio-switch-exit:hover .material-symbols-outlined { color: var(--zc-red); }
.zc-shell .zc-folio-switch-muted:hover { background: transparent; }
.zc-shell .zc-folio-switch-name {
    flex: 1 1 auto; min-width: 0;
    font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zc-shell .zc-folio-switch-check { margin-left: auto; font-size: 16px !important; color: var(--zc-tenant) !important; }
.zc-shell .zc-mode-dd-item-title { font-size: 12.5px; font-weight: 700; color: var(--zc-text); }
.zc-shell .zc-mode-dd-item-sub { font-size: 10.5px; color: var(--zc-text-3); }
.zc-shell .zc-mode-dd-item.active .zc-mode-dd-item-title { color: var(--zc-tone-jade); }
.zc-shell .zc-mode-dd-check {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 17px; color: var(--zc-tone-jade);
}

.zc-shell .zc-ibtn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    color: var(--zc-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    padding: 0;
}

.zc-shell .zc-ibtn:hover:not(:disabled) {
    background: var(--zc-surface);
    color: var(--zc-text);
}

.zc-shell .zc-ibtn:disabled {
    cursor: not-allowed;
    opacity: .4;
}

/* Language button in the dock — icon + code chip. The code label drops off in
   narrow layouts (right-docked Focus / mobile) so the row never gets squeezed. */
.zc-shell .zc-ibtn-lang { width: auto; min-width: 32px; padding: 0 8px; gap: 4px; }
.zc-shell .zc-ibtn-lang-code { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.zc-shell.zc-dock-focus .zc-ibtn-lang { width: 32px; padding: 0; }
.zc-shell.zc-dock-focus .zc-ibtn-lang-code { display: none; }
@media (max-width: 640px) {
    .zc-shell .zc-ibtn-lang { width: 32px; padding: 0; }
    .zc-shell .zc-ibtn-lang-code { display: none; }
}

.zc-shell .zc-ibtn svg {
    width: 16px;
    height: 16px;
}

/* Material symbol sizing inside dock buttons — keep them visually aligned with svg buttons */
.zc-shell .zc-ibtn .material-symbols-outlined {
    font-size: 18px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.zc-shell .zc-ibtn.zc-send {
    background: var(--zc-tenant);
    color: #fff;
}

.zc-shell .zc-ibtn.zc-send:hover:not(:disabled) {
    background: #009966;
    color: #fff;
}

.zc-shell .zc-ibtn.zc-send:disabled {
    background: var(--zc-surface-3);
    color: var(--zc-text-4);
}

/* Textarea sized to match Classic Chatbox (.chat-input) so the dock feels familiar */
.zc-shell .zc-dock-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--zc-text);
    resize: none;
    padding: 7px 6px;
    min-height: 38px;
    max-height: 200px;
    line-height: 19px;
    box-sizing: border-box;
}

.zc-shell .zc-dock-input::placeholder { color: var(--zc-text-3); }

/* Disabled state while ChatCanvas Stage 4 is still creating the MIND session.
   Subtle pulse on the placeholder keeps the user oriented without making the
   dock feel broken. */
.zc-shell .zc-dock-input-pending {
    opacity: 0.6;
    cursor: progress;
}
.zc-shell .zc-dock-input-pending::placeholder {
    animation: zc-dock-pending-pulse 1.4s ease-in-out infinite;
}
@keyframes zc-dock-pending-pulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1.0; }
}

/* RESPONSIVE ==============================================================
   Phone breakpoint: rail collapses out of the grid into a slide-in drawer
   triggered by the hamburger in the topbar. Dock spans full width.
   ========================================================================= */


/* Rail-button text labels — hidden on desktop (icon-only rail).
   Revealed in drawer mode at ≤640px. */
.zc-shell .zc-rail-label {
    display: none;
}

/* Rail scrim — only used in drawer mode. Component renders it conditionally. */
.zc-shell .zc-rail-scrim {
    display: none;
}

@media (max-width: 640px) {
    /* Body collapses to one column — panel leaves the grid flow and becomes a
       slide-in drawer toggled by the topbar hamburger. */
    .zc-shell .zc-body {
        grid-template-columns: 1fr;
    }
    .zc-shell { --zc-rail-w: 240px; }

    /* Work panel = mobile drawer: fixed, off-screen until opened (.zc-panel-mobile-open). */
    .zc-shell .zc-panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(300px, 84vw);
        height: auto;
        transform: translateX(-100%);
        transition: transform .22s ease-out, box-shadow .22s ease-out;
        z-index: 250;
    }
    .zc-shell .zc-panel.zc-panel-mobile-open {
        transform: translateX(0);
        box-shadow: var(--zc-shadow-lg, 0 12px 40px rgba(0,0,0,.4));
    }
    /* The desktop panel-toggle is irrelevant on phones — the mobile hamburger
       (in the top row) drives the drawer instead. */
    .zc-shell .zc-panel-toggle { display: none; }

    /* Rail becomes a fixed slide-in drawer with text labels alongside icons. */
    .zc-shell .zc-rail {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 240px;
        max-width: 80vw;
        align-items: stretch;
        padding: 8px 12px;
        transform: translateX(-100%);
        transition: transform .22s ease-out, box-shadow .22s ease-out;
        z-index: 250;
    }
    .zc-shell .zc-rail.zc-rail-open {
        transform: translateX(0);
        box-shadow: var(--zc-shadow-lg);
    }

    /* Show the scrim when the drawer is open (component mounts the element). */
    .zc-shell .zc-rail-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--dialog-overlay, rgba(0, 0, 0, .55));
        z-index: 240;
        animation: zc-fade-in .12s ease-out;
    }

    /* Buttons become full-width rows: icon left, label right. */
    .zc-shell .zc-rail-logo,
    .zc-shell .zc-rail-btn,
    .zc-shell .zc-rail-avatar {
        width: 100%;
        height: 44px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 0 10px;
        border-radius: 10px;
    }

    /* Logo gets its brand text alongside the mark when open. */
    .zc-shell .zc-rail-logo .zc-rail-img,
    .zc-shell .zc-rail-logo .zc-rail-mark {
        flex-shrink: 0;
    }

    /* Reveal labels in drawer mode. */
    .zc-shell .zc-rail-label {
        display: inline;
        font-size: 13px;
        font-weight: 600;
        color: var(--zc-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Section headers left-aligned with consistent indent. */
    .zc-shell .zc-rail-section {
        align-self: flex-start;
        padding-left: 10px;
    }

    .zc-shell .zc-canvas-inner { padding: 20px 16px 220px; }
    .zc-shell .zc-dock-wrap {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        transform: none;
    }

    /* Picker modals (tenant, language, history) get more vertical room and
       tighter side padding on phone — denser lists, fewer rows hidden behind
       the scroll fold. */
    .zc-shell .zc-modal-overlay { padding: 16px 8px; }
    .zc-shell .zc-modal-panel { max-height: 90vh; }
}

/* ================================================================
   SKILL CARDS — adaptive (one component, four contexts)
   Per ZybronChatCanvas conops §5.6.5: same Razor + same DOM, the
   .is-compact / .is-expanded wrapper class drives layout. Mobile
   media queries handle the iPhone variants of each.
   ================================================================ */

.zc-shell .zc-skill-cards-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--zc-strip-gap, 14px);
    /* Margin replaced with padding — overflow-x:auto implicitly clips
       vertical content in most engines, so card shadows + rounded corners
       were getting cut off at top/bottom of each card. Padding gives them
       breathing room inside the same scroll container. */
    margin: 0;
    padding: 18px 0;
    width: 100%;
    /* Was 1140px — clamped two cards at ~1256px on wide displays even with
       plenty of empty canvas to the right. Let the strip fill the full
       canvas-inner width; the per-card clamp (~610px max) still keeps any
       single card from going absurd, and overflow-x handles >3-card cases. */
    max-width: 100%;
    overflow-x: auto;
    /* Explicitly allow vertical overflow so card shadows / focus rings
       aren't clipped — overrides the implicit clip from overflow-x:auto. */
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    /* Hide scrollbar but keep functionality — the bar would clip card shadows
       and visually compete with the dock. Wheel + drag still scroll fine. */
    scrollbar-width: none;
}
.zc-shell .zc-skill-cards-strip::-webkit-scrollbar { display: none; }
.zc-shell .zc-skill-cards-strip > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

/* Carousel wrapper injected by chat.js so the prev/next arrows overlay
   the strip edges without joining its flex row. Arrows are hidden until
   the strip actually overflows, and at-start / at-end states fade the
   relevant arrow so the user gets a clear "no more this way" signal. */
.zc-shell .zc-strip-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
}
.zc-shell .zc-strip-wrap > .zc-skill-cards-strip {
    /* When wrapped, the strip takes the parent's width — drop its own
       max-width so the wrap controls the column. */
    max-width: 100%;
}
.zc-shell .zc-strip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.zc-shell .zc-strip-arrow-prev { left: -8px; }
.zc-shell .zc-strip-arrow-next { right: -8px; }
.zc-shell .zc-strip-wrap.has-overflow .zc-strip-arrow {
    opacity: 0.85;
    pointer-events: auto;
}
.zc-shell .zc-strip-wrap.has-overflow .zc-strip-arrow:hover { opacity: 1; }
/* Override the carousel-arrow hover transform: that rule sets `scale(1.05)`
   alone, which clobbers the `translateY(-50%)` we use to vertically center
   the strip arrows. Combine both transforms so the arrow grows in place
   instead of snapping down to top:50%. */
.zc-shell .zc-strip-arrow:hover {
    transform: translateY(-50%) scale(1.05);
}
.zc-shell .zc-strip-wrap.at-start .zc-strip-arrow-prev,
.zc-shell .zc-strip-wrap.at-end   .zc-strip-arrow-next {
    opacity: 0;
    pointer-events: none;
}
/* In dock-focus the minimized-chip strip is pinned to the bottom, so the scroll arrows belong THERE
   — not floating at the canvas vertical center. Fix them to the chip row and flank its left/right. */
.zc-shell.zc-dock-focus .zc-strip-arrow {
    position: fixed;
    top: auto;
    bottom: 20px;                 /* ~vertically centered on the ~54px chip row (pinned bottom:10px) */
    transform: none;
    z-index: 203;                 /* above the chips (202) */
}
.zc-shell.zc-dock-focus .zc-strip-arrow:hover { transform: scale(1.05); }
.zc-shell.zc-dock-focus .zc-strip-arrow-prev { left: calc(var(--zc-rail-w) + 6px); }
.zc-shell.zc-dock-focus:not(.zc-panel-collapsed) .zc-strip-arrow-prev { left: calc(var(--zc-panel-w) - 12px); }
.zc-shell.zc-dock-focus .zc-strip-arrow-next { right: calc(var(--zc-focus-chat-w, 440px) + 14px); }

@media (max-width: 640px) {
    /* On mobile, native horizontal pan + (CSS-driven) column stack handle
       it — hide arrows so they don't clip card edges. */
    .zc-shell .zc-strip-arrow { display: none; }
}

/* When only one card is open, center it horizontally on the canvas. The
   single card becomes the focal point — paired with the dock below to
   form a clear card↔chat reading flow. */
.zc-shell .zc-skill-cards-strip.is-solo {
    justify-content: center;
    margin: 36px auto 24px auto;
}

/* =================================================================
   GATHER CARD — generalized renderer styles (global, not scoped)
   See ZybronSkillDefs.md v1.1 §"Skill Card Pattern"
   ================================================================= */

.zc-gather-empty {
    color: var(--zc-text-muted, #9aa6b2);
    font-style: italic;
    padding: 14px 6px;
    font-size: 13px;
}

/* Active prompt banner — the ONE focal question right now. Sits at top so
   the eye lands here first, then the user types in the dock below. */
.zc-gather-active-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 0 18px 0;
    border-radius: 10px;
    background: linear-gradient(135deg,
        rgba(255, 196, 84, 0.16) 0%,
        rgba(255, 196, 84, 0.05) 100%);
    border-left: 4px solid var(--zc-warn, #ffc454);
    animation: zc-banner-rise 240ms ease-out;
}

.zc-gather-active-tag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--zc-warn, #ffc454);
    background: rgba(255, 196, 84, 0.20);
    margin-top: 2px;
    white-space: nowrap;
}

.zc-gather-active-prompt {
    flex: 1;
    color: var(--zc-text, #1a2330);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.55;
}

@keyframes zc-banner-rise {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Subtle separator between banner and the variable list */
.zc-gather-separator {
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        var(--zc-border) 20%,
        var(--zc-border) 80%,
        transparent 100%);
    margin: 0 0 16px 0;
}

/* ─── AI Picker ──────────────────────────────────────────────────
   Rendered above the variable rows when a skill opts in via
   Validation.Provider = "<Module>.Picker" (currently folio.browse only).
   The hero block is the single high-confidence pick; the list below
   surfaces ranked alternatives, each with a one-line LLM-written reason. */
.zc-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(60, 100, 180, 0.04);
    border: 1px solid rgba(60, 100, 180, 0.15);
    border-radius: 10px;
    margin-bottom: 12px;
}
.zc-picker-heading {
    font-weight: 600;
    font-size: 13px;
    color: var(--zc-text, #222);
}
.zc-picker-echo {
    font-size: 12px;
    color: var(--zc-text-muted, #666);
    font-style: italic;
    margin-top: -2px;
}
.zc-picker-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--zc-bg, #fff);
    border: 1px solid rgba(60, 100, 180, 0.35);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 120ms ease, transform 80ms ease;
}
.zc-picker-hero:hover {
    border-color: rgba(60, 100, 180, 0.7);
}
.zc-picker-hero:active { transform: translateY(1px); }
.zc-picker-hero-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.zc-picker-hero-code {
    font-family: var(--zc-mono, monospace);
    font-size: 12px;
    background: var(--zc-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
}
.zc-picker-hero-title {
    font-weight: 600;
    font-size: 14px;
}
.zc-picker-hero-reason {
    font-size: 12px;
    color: var(--zc-text-muted, #555);
}
.zc-picker-hero-cta {
    align-self: flex-end;
    font-size: 12px;
    color: rgb(60, 100, 180);
    font-weight: 600;
}
.zc-picker-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Bound the candidate list so a long pool (8+ folios) doesn't push the
       card past the chat container and end up overlapping the chat input.
       Scroll the list internally instead. ~360px holds 5-6 rows before
       scrolling kicks in — enough to be useful, small enough to keep the
       footer + input visible on a standard chat width. */
    max-height: 360px;
    overflow-y: auto;
    /* Keep the inner scrollbar out of the way so it doesn't crowd the row
       content. Falls back to platform default if these CSS vars aren't set. */
    scrollbar-width: thin;
    scrollbar-color: var(--zc-border, rgba(120, 130, 150, 0.3)) transparent;
}
.zc-picker-list::-webkit-scrollbar { width: 6px; }
.zc-picker-list::-webkit-scrollbar-track { background: transparent; }
.zc-picker-list::-webkit-scrollbar-thumb {
    background-color: var(--zc-border, rgba(120, 130, 150, 0.3));
    border-radius: 3px;
}

.zc-picker-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    /* Visible row separator so candidates don't blur into a wall of text. */
    border: 1px solid transparent;
    background-color: var(--zc-surface-2);
}
.zc-picker-row:hover {
    background-color: var(--zc-tone-jade-bg);
    border-color: var(--zc-tone-jade);
}
.zc-picker-row:active {
    transform: translateY(1px);
    background-color: var(--zc-tone-violet-bg);
    border-color: var(--zc-tone-violet);
}
.zc-picker-row:focus-visible {
    outline: 2px solid var(--zc-tone-jade);
    outline-offset: 1px;
}
.zc-picker-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.zc-picker-row-code {
    font-family: var(--zc-mono, monospace);
    font-size: 11px;
    background: var(--zc-surface-2);
    padding: 1px 5px;
    border-radius: 3px;
}
.zc-picker-row-title { font-weight: 500; font-size: 13px; }
.zc-picker-row-reason {
    font-size: 12px;
    color: var(--zc-text-muted, #666);
    padding-left: 4px;
}
.zc-picker-kind, .zc-picker-status {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 10px;
    padding: 1px 7px;
}
.zc-picker-kind {
    color: var(--zc-text-muted, #666);
    background: var(--zc-surface-2);
}
.zc-picker-status {
    color: rgba(150, 100, 0, 0.85);
    background: rgba(220, 160, 0, 0.12);
}
.zc-picker-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid var(--zc-border);
    margin-top: 4px;
}
.zc-picker-foot-pill {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--zc-surface-2);
    color: var(--zc-text-muted, #666);
    padding: 2px 8px;
    border-radius: 10px;
}
.zc-picker-foot-pill.is-on {
    background: rgba(60, 100, 180, 0.12);
    color: rgb(60, 100, 180);
}
.zc-picker-foot-hint {
    font-size: 11px;
    color: var(--zc-text-muted, #888);
    flex: 1;
}
.zc-picker-foot-link {
    background: none;
    border: none;
    padding: 0;
    color: rgb(60, 100, 180);
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
}
.zc-picker-foot-link:hover { text-decoration: none; }

/* ─── Create-mode body (folio.resolve only) ─────────────────────── */
.zc-picker-create {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--zc-bg, #fff);
    border: 1px dashed rgba(60, 100, 180, 0.4);
    border-radius: 8px;
}
.zc-picker-create-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(60, 100, 180);
    font-weight: 600;
}
.zc-picker-create-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.zc-picker-create-field {
    display: flex;
    gap: 10px;
    align-items: baseline;
}
.zc-picker-create-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--zc-text-muted, #888);
    min-width: 50px;
}
.zc-picker-create-value {
    font-weight: 500;
    font-size: 14px;
}
.zc-picker-create-value.is-empty {
    color: var(--zc-text-muted, #aaa);
    font-style: italic;
    font-weight: 400;
}
.zc-picker-create-reason {
    font-size: 12px;
    color: var(--zc-text-muted, #666);
    font-style: italic;
}

/* ─── AskCreate proposal hero ────────────────────────────────────── */
.zc-picker-proposal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(220, 160, 0, 0.06);
    border: 1px solid rgba(220, 160, 0, 0.3);
    border-radius: 8px;
}
.zc-picker-proposal-q {
    font-size: 13px;
    color: var(--zc-text, #222);
}
.zc-picker-proposal-why {
    font-size: 11px;
    color: var(--zc-text-muted, #666);
    font-style: italic;
}
.zc-picker-proposal-actions {
    display: flex;
    gap: 8px;
}
.zc-picker-btn {
    border: 1px solid var(--zc-border);
    background: var(--zc-bg, #fff);
    color: var(--zc-text, #222);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.zc-picker-btn:hover { background: var(--zc-surface-2); }
.zc-picker-btn-primary {
    background: rgb(60, 100, 180);
    border-color: rgb(60, 100, 180);
    color: #fff;
}
.zc-picker-btn-primary:hover { background: rgb(50, 90, 170); }
.zc-picker-row.is-disabled { opacity: .5; pointer-events: none; }

/* ═══ FOLIO RESOLVE CARD ══════════════════════════════════════════
   Dedicated folio.resolve card — explicit "new vs. existing" gate.
   Reuses .zc-picker-list / .zc-picker-row / .zc-picker-kind etc. for the
   candidate picker; the rules below cover the gate, create form, and the
   resolved footer. All colors resolve through --zc-* canvas tokens. */
.zc-resolve { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.zc-resolve-head { display: flex; flex-direction: column; gap: 2px; }
.zc-resolve-title { font-weight: 700; font-size: 14px; color: var(--zc-text); }
.zc-resolve-prompt { font-size: 12px; color: var(--zc-text-muted); line-height: 1.35; }

/* Entry gate — two big choice buttons side by side (stacks on narrow). */
.zc-resolve-gate { display: flex; gap: 10px; flex-wrap: wrap; }
.zc-resolve-gate-btn {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px;
    border: 1px solid var(--zc-border);
    border-radius: 12px;
    background: var(--zc-surface-2);
    color: var(--zc-text);
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, background .12s;
}
.zc-resolve-gate-btn:hover {
    border-color: var(--zc-tone-violet);
    background: var(--zc-tone-violet-bg);
}
.zc-resolve-gate-btn .material-symbols-outlined { font-size: 22px; color: var(--zc-tone-violet); }
.zc-resolve-gate-label { font-weight: 600; font-size: 13px; }
.zc-resolve-gate-sub { font-size: 11px; color: var(--zc-text-muted); }

/* Create branch — name field + locked type. */
.zc-resolve-create, .zc-resolve-pick { display: flex; flex-direction: column; gap: 10px; }
.zc-resolve-field { display: flex; flex-direction: column; gap: 4px; }
.zc-resolve-field-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--zc-text-muted);
}
.zc-resolve-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--zc-border);
    border-radius: 8px;
    background: var(--zc-surface);
    color: var(--zc-text);
    font-size: 13px;
}
.zc-resolve-input:focus { outline: none; border-color: var(--zc-tone-violet); }
.zc-resolve-locked {
    font-size: 13px;
    font-weight: 600;
    color: var(--zc-text);
    padding: 6px 0;
}
.zc-resolve-locked-note { font-weight: 400; font-size: 11px; color: var(--zc-text-muted); }
.zc-resolve-actions { display: flex; justify-content: flex-end; gap: 8px; }
.zc-resolve-empty { font-size: 12px; color: var(--zc-text-muted); padding: 10px; text-align: center; }

/* Resolved footer. */
.zc-resolve-done { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.zc-resolve-done-icon { color: #22C55E; font-size: 22px; }
.zc-resolve-done-body { display: flex; flex-direction: column; gap: 4px; }
.zc-resolve-done-line { font-size: 13px; color: var(--zc-text); }

/* ─── Collaborate mode footer ────────────────────────────────────
   Card-side exit affordance for Collaborate Mode skills. Sits at the
   bottom of the gather card and posts the configured SyntheticMessage
   into the chat when clicked. */
.zc-gather-collaborate-foot {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px 4px;
    /* Pin the exit button to the bottom of the card. The card body is a
       fixed-height flex column, so margin-top:auto absorbs any free space
       above the foot — the Done button lands bottom-right on every card
       regardless of how much content it has (short Type/Audience cards
       match tall Objective/Schedule cards). */
    margin-top: auto;
    border-top: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
}
.zc-gather-collaborate-done {
    appearance: none;
    background: var(--accent, rgb(60, 100, 180));
    color: #fff;
    border: 1px solid var(--accent, rgb(60, 100, 180));
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.zc-gather-collaborate-done:hover { filter: brightness(0.92); }
.zc-gather-collaborate-done:active { filter: brightness(0.85); }

/* ─── Result footer ──────────────────────────────────────────────
   Shown after the post-gather Execute handler completes (e.g. folio.new
   wrote ZB-CM-0004). Confirms what was created so the user has closure. */
.zc-gather-result {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-top: 4px;
    background: rgba(40, 167, 69, 0.08);
    border: 1px solid rgba(40, 167, 69, 0.25);
    border-radius: 8px;
}
.zc-gather-result-check {
    color: #28a745;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
}
.zc-gather-result-text { flex: 1; min-width: 0; }
.zc-gather-result-summary {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.zc-gather-result-code {
    font-family: var(--zc-mono, monospace);
    font-size: 12px;
    background: var(--zc-surface-2);
    border-radius: 4px;
    padding: 1px 6px;
}
.zc-gather-result-kind {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--zc-text-muted, #666);
    background: var(--zc-surface-2);
    border-radius: 10px;
    padding: 1px 8px;
}
.zc-gather-result-detail {
    font-size: 13px;
    color: var(--zc-text-muted, #555);
    margin-top: 2px;
}

/* Numbered result list — pin numbers match the map markers. Tap a row to
   submit the pick to Tzib (same shape as map-pin clicks). Grows to fill
   the remaining card body and only scrolls when the list overflows the
   available height (typical: 5 rows fit without scroll on the compact
   card; long lists scroll). */
.zc-gather-result-items {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.zc-gather-result-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.zc-gather-result-item:hover,
.zc-gather-result-item:focus-visible {
    background: var(--zc-surface-3);
    border-color: var(--zc-jade);
    outline: none;
}
.zc-gather-result-item-num {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent, #00D68F);
    color: var(--on-accent, #0b0f14);
    font-weight: 700;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.zc-gather-result-item-body { flex: 1; min-width: 0; }
.zc-gather-result-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 13px;
}
.zc-gather-result-item-rating {
    font-size: 11px;
    color: var(--warning, #fbbf24);
    font-weight: 500;
}
.zc-gather-result-item-subtitle {
    font-size: 12px;
    /* Bumped contrast — earlier version used 0.6 which faded the address
       into the card background in the 3-card layout where each column is
       narrow. The address should be readable at a glance. */
    color: var(--zc-text, rgba(255, 255, 255, 0.85));
    margin-top: 2px;
    /* Allow the address to wrap to a second line instead of disappearing
       behind an ellipsis when the card column is narrow. Two lines is
       enough for any street + city + state line; longer addresses still
       cap with ellipsis on the second line. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}
.zc-gather-result-item-detail {
    font-size: 11px;
    color: var(--zc-text-muted, rgba(255, 255, 255, 0.72));
    margin-top: 3px;
}

/* ── Destination POI block (route navigation result) ─────────────────
   Replaces the "✓ Done" footer when a route is computed and the
   destination has Place Details. Google-Maps-ish layout: name + rating
   + open-now chips on top, address, action buttons (phone, website),
   collapsed hours. */
.zc-gather-destpoi {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zc-gather-destpoi-photo {
    width: 100%;
    max-height: 140px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 4px;
}
.zc-gather-destpoi-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.zc-gather-destpoi-name {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    min-width: 0;
}
.zc-gather-destpoi-rating {
    font-size: 12px;
    color: var(--warning, #fbbf24);
    font-weight: 500;
}
.zc-gather-destpoi-open {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 500;
}
.zc-gather-destpoi-open.is-open {
    background: rgba(0, 214, 143, 0.15);
    color: var(--accent, #00D68F);
}
.zc-gather-destpoi-open.is-closed {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.zc-gather-destpoi-address {
    font-size: 12px;
    color: var(--zc-text-muted, rgba(255, 255, 255, 0.65));
}
.zc-gather-destpoi-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.zc-gather-destpoi-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--info, #60a5fa);
    text-decoration: none;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    transition: background 120ms ease, border-color 120ms ease;
}
.zc-gather-destpoi-action:hover {
    background: var(--zc-surface-3);
    border-color: var(--zc-jade);
}
.zc-gather-destpoi-action .material-symbols-outlined { font-size: 14px; }
.zc-gather-destpoi-hours {
    font-size: 12px;
    color: var(--zc-text-muted, rgba(255, 255, 255, 0.65));
    margin-top: 4px;
}
.zc-gather-destpoi-hours summary {
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}
.zc-gather-destpoi-hours ul {
    list-style: none;
    margin: 4px 0 0;
    padding: 0 0 0 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Generic AI response card (GeneralResponse) ───────────────────
   The "show" surface for General-route answers with rich detail
   (code blocks, tables, structured lists). Re-uses the chat
   markdown CSS so syntax highlighting, copy buttons and code
   collapse all just work. */
.zc-genresp {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}
.zc-genresp-empty {
    color: var(--zc-text-muted, rgba(255, 255, 255, 0.5));
    font-size: 12px;
    padding: 8px 4px;
}
.zc-genresp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.zc-genresp-kind {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--zc-text-muted, rgba(255, 255, 255, 0.6));
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    padding: 2px 10px;
}
.zc-genresp-copy-all {
    /* Pin to the LEFT (next to the kind chip) so the SkillCard chrome's
       close X — which lives in the top-right corner in expanded mode —
       doesn't overlap. In compact mode there is no X so this just sits
       beside the chip; either way the right corner is reserved for chrome. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    color: var(--zc-text-muted, rgba(255, 255, 255, 0.7));
    background: transparent;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.zc-genresp-copy-all:hover {
    background: var(--zc-surface-2);
    border-color: var(--zc-jade);
    color: var(--zc-text);
}
.zc-genresp-copy-all.is-copied {
    background: var(--code-copy-btn-success, rgba(0, 214, 143, 0.15));
    border-color: var(--accent, #00D68F);
    color: var(--accent, #00D68F);
}
.zc-genresp-copy-all .material-symbols-outlined { font-size: 13px; }
.zc-genresp-body {
    font-size: 13px;
    color: var(--zc-text, rgba(255, 255, 255, 0.92));
    line-height: 1.55;
    overflow-x: auto;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 4px;
    overscroll-behavior: contain;
}
.zc-genresp-body > *:first-child { margin-top: 0; }
.zc-genresp-body > *:last-child { margin-bottom: 0; }
.zc-genresp-body pre {
    /* Match the chat-bubble code block (see `.zc-turn-bubble .md-content pre`):
       SOLID theme tokens, not the translucent --surface-1-alpha60 / --border-alpha15
       aliases. Those alpha tokens resolve to a near-white tint + a white-rgba
       border on the Light theme, so the box vanished against the white card
       (dark theme hid the bug because the same alphas read dark). --zc-bg-2
       (--surface-2) and --zc-border are real themed surfaces that contrast in
       both modes, giving the box a visible fill + outline everywhere. */
    background: var(--code-block-bg, var(--zc-bg-2));
    border: 1px solid var(--code-block-border, var(--zc-border));
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    font-size: 12px;
}
.zc-genresp-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.zc-genresp-body th,
.zc-genresp-body td {
    border: 1px solid var(--zc-border);
    padding: 6px 8px;
    text-align: left;
}
.zc-genresp-body th { background: var(--zc-surface-2); }
.zc-genresp-body ul,
.zc-genresp-body ol { padding-left: 1.25rem; }

/* ─── Variable rows ──────────────────────────────────────────────
   Layout: pill (left) | label + value stacked (right).
   The check / pill on the LEFT mirrors checklist UX — eye scans down
   the column to see what's done, what's pending. */

.zc-gather-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 18px 0;
    /* When the card has more rows than fit comfortably, scroll the rows section
       internally so the active-prompt banner stays visible at the top. The cap
       leaves room for the banner above + the card chrome around it; on shorter
       viewports the canvas-inner's overflow-y still picks up any remainder. */
    max-height: 56vh;
    overflow-y: auto;
    /* Small inset for the scrollbar so it doesn't crowd the row content. */
    padding-right: 4px;
    /* Hide horizontal scrollbar that could appear from the row's box-shadow. */
    overflow-x: hidden;
}

.zc-gather-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: start;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    transition: background-color 140ms ease, box-shadow 140ms ease;
    background: rgba(0, 0, 0, 0.02);
}

/* Per-state row backgrounds */
.zc-gather-row.is-untouched { background: rgba(0, 0, 0, 0.02); }
.zc-gather-row.is-drafting  { background: rgba(99, 168, 255, 0.10); }
.zc-gather-row.is-active    { background: rgba(255, 196, 84, 0.10); }
.zc-gather-row.is-in-edit   { background: rgba(99, 168, 255, 0.16); }
.zc-gather-row.is-confirmed { background: rgba(102, 217, 163, 0.07); }
.zc-gather-row.is-stale     { background: rgba(255, 152, 0, 0.12); }

/* The "Tzib is asking about THIS one right now" treatment. Strong accent
   so the eye finds it instantly — the pill on the left also pulses. */
.zc-gather-row.is-current {
    background: rgba(255, 196, 84, 0.20);
    box-shadow: inset 4px 0 0 0 var(--zc-warn, #ffc454);
    animation: zc-current-pulse 2.4s ease-in-out infinite;
}

.zc-gather-row.is-current .zc-gather-row-label {
    color: var(--zc-text, #1a2330);
    font-weight: 700;
}

@keyframes zc-current-pulse {
    0%, 100% { box-shadow: inset 4px 0 0 0 var(--zc-warn, #ffc454); }
    50%      { box-shadow: inset 4px 0 0 0 var(--zc-warn, #ffc454),
                          0 0 16px 0 rgba(255, 196, 84, 0.22); }
}

/* The pill column — sits in the 36px-wide left column */
.zc-gather-row-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding-top: 1px;
}

.zc-gather-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}

.zc-pill-untouched {
    color: var(--zc-text-muted, #9aa6b2);
    background: transparent;
    font-weight: 400;
    opacity: 0.45;
    font-size: 14px;
}

.zc-pill-drafting {
    color: var(--zc-info, #2563eb);
    background: rgba(99, 168, 255, 0.18);
}

.zc-pill-active {
    color: var(--zc-warn, #b8860b);
    background: rgba(255, 196, 84, 0.22);
    box-shadow: 0 0 0 1px rgba(255, 196, 84, 0.40);
    padding: 0 10px;
    font-size: 11px;
}

.zc-pill-in-edit {
    color: var(--zc-info, #2563eb);
    background: rgba(99, 168, 255, 0.22);
    padding: 0 10px;
    font-size: 11px;
}

.zc-pill-confirmed {
    color: var(--zc-success, #15803d);
    background: rgba(102, 217, 163, 0.30);
    box-shadow: 0 0 0 1px rgba(102, 217, 163, 0.40);
}

.zc-pill-stale {
    color: var(--zc-warn-strong, #c2410c);
    background: rgba(255, 152, 0, 0.18);
    padding: 0 10px;
    font-size: 11px;
}

/* The label + value column — stacked vertically */
.zc-gather-row-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.zc-gather-row-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--zc-text-muted, #6b7785);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.zc-gather-row-value {
    color: var(--zc-text, #1a2330);
    font-size: 14px;
    line-height: 1.5;
}

.zc-gather-row-clickable {
    cursor: text;
    border-radius: 4px;
    padding: 1px 4px;
    margin: -1px -4px;
    transition: background-color 100ms ease;
}

.zc-gather-row-clickable:hover {
    background-color: var(--zc-hover, var(--zc-surface-2));
}

.zc-gather-row-empty {
    color: var(--zc-text-muted, #9aa6b2);
    opacity: 0.55;
    font-style: italic;
    font-size: 13px;
}

.zc-gather-row-text {
    display: inline-block;
    word-break: break-word;
    font-weight: 500;
}

.zc-gather-row-draft {
    margin: 0;
    padding: 8px 10px;
    background: var(--zc-surface-2);
    border-radius: 6px;
    font-family: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13.5px;
    line-height: 1.55;
}

.zc-gather-row-list {
    margin: 0;
    padding-left: 18px;
}

.zc-gather-row-list li {
    margin: 3px 0;
}

/* ─── Edit affordance: pencil icon visible on hover (and always on touch) ─ */

.zc-gather-row-value-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.zc-gather-row-value-wrap > :first-child {
    flex: 1;
    min-width: 0;
}

.zc-gather-row-edit-icon {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    color: var(--zc-text-muted, #9aa6b2);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-1px);
    transition: opacity 140ms ease, background-color 120ms ease, color 120ms ease;
}

.zc-gather-row:hover .zc-gather-row-edit-icon {
    opacity: 0.85;
}

.zc-gather-row-edit-icon:hover {
    background: rgba(99, 168, 255, 0.14);
    color: var(--zc-info, #2563eb);
    opacity: 1 !important;
}

/* On touch devices AND on narrow viewports (squeezed desktop simulating
   iPhone), hover is unreliable — keep the pencil always visible so the
   affordance is discoverable. */
@media (hover: none), (pointer: coarse), (max-width: 640px) {
    .zc-gather-row-edit-icon { opacity: 0.6; }
}

/* ─── Inline edit input (Slice 1.3) ───────────────────────────────────── */

.zc-gather-row-edit-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1.5px solid var(--zc-info, #2563eb);
    background: var(--zc-surface, #fff);
    color: var(--zc-text, #1a2330);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 168, 255, 0.16);
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

.zc-gather-row-edit-input:focus {
    border-color: var(--zc-accent, #4a90e2);
    box-shadow: 0 0 0 3px rgba(99, 168, 255, 0.28);
}

.zc-gather-row-edit-textarea {
    resize: vertical;
    min-height: 70px;
    max-height: 240px;
}

/* Auto-grow as you type (field-sizing: content, Chromium 123+), drag-resizable,
   and never one-line. Degrades gracefully to a 2-row resizable box where
   field-sizing is unsupported. Used for every inline-edit field (small + expanded
   card) so values wrap and expand instead of truncating. */
.zc-gather-row-edit-autogrow {
    field-sizing: content;
    min-height: 40px;
    max-height: 320px;
    resize: vertical;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}

.zc-gather-row-edit-hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--zc-text-muted, #9aa6b2);
}

.zc-gather-row-edit-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    line-height: 1.4;
    margin: 0 1px;
}

/* Save / Cancel buttons inside the edit row — required for mobile (no Enter/Esc). */
.zc-gather-row-edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.zc-gather-row-edit-btn {
    appearance: none;
    border: 0;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 100ms ease, transform 60ms ease, background-color 120ms ease;
}

.zc-gather-row-edit-btn-save {
    background: var(--zc-accent, #4a90e2);
    color: var(--zc-accent-fg, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.zc-gather-row-edit-btn-save:hover { background: var(--zc-accent-hover, #3a7bc8); }
.zc-gather-row-edit-btn-save:active { transform: translateY(1px); }

.zc-gather-row-edit-btn-cancel {
    background: transparent;
    color: var(--zc-text-muted, #6b7785);
    border: 1px solid var(--zc-border);
}

.zc-gather-row-edit-btn-cancel:hover {
    background: var(--zc-surface-2);
    color: var(--zc-text, #1a2330);
}

/* Hide the keyboard-shortcut hint on touch devices AND on narrow viewports
   (squeezed desktop windows simulating iPhone — pointer is still fine, but
   the screen-real-estate justification holds). The Save / Cancel buttons
   cover them either way. */
@media (hover: none), (pointer: coarse), (max-width: 640px) {
    .zc-gather-row-edit-hint { display: none; }
}

/* Typing dots for the Drafting state */
.zc-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.zc-typing-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    animation: zc-typing-bounce 1.2s infinite ease-in-out;
}

.zc-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.zc-typing-dots span:nth-child(3) { animation-delay: 0.30s; }

@keyframes zc-typing-bounce {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1.0; transform: translateY(-2px); }
}

/* Footer / primary action */
.zc-gather-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0 2px 0;
    border-top: 1px solid var(--zc-border);
    margin-top: 8px;
}

.zc-gather-primary {
    appearance: none;
    border: 0;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--zc-accent, #4a90e2);
    color: var(--zc-accent-fg, #fff);
    transition: opacity 120ms ease, background-color 120ms ease, transform 60ms ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.zc-gather-primary:hover:not(:disabled) {
    background: var(--zc-accent-hover, #3a7bc8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.zc-gather-primary:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.zc-gather-primary:disabled {
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Frame: compact (default — sits on the canvas strip) ──────── */
.zc-shell .zc-skill-card.is-compact {
    /* Fluid sizing — uses available canvas real estate without breaking on
       narrow or huge screens, and capped so the card never extends under
       the dock (~200px reserved at the bottom).
         width  = clamp(480px, 40vw, 720px)
         height = fills available canvas height up to 680px
       Mobile (≤640px) overrides below. */
    /* Sized 15% smaller than the previous footprint — applied to width, the
       preferred vw value, the max cap, and the height clamp values. Bottom
       reservation unchanged (still clears the dock); the card just occupies
       less of the available canvas.
       --zc-scale (admin-editable, SiteTheme.CanvasScale, default 0.9) is a
       master multiplier on the card footprint — ships the "90%" density that
       read better in use. See ZybronChatCanvas.md §3.5.3. */
    width: clamp(calc(410px * var(--zc-scale, 0.9)), calc(34vw * var(--zc-scale, 0.9)), calc(610px * var(--zc-scale, 0.9)));
    flex: 0 0 auto;
    height: clamp(375px, calc((100vh - 320px) * 0.85), 510px);
    background: var(--zc-surface);
    /* Match the dock chrome (.zc-dock) so cards read with the same lift +
       border weight regardless of theme. On dark theme this is barely
       noticeable; on light theme it gives the cards visible boundaries
       against the near-white canvas. */
    border: 1px solid var(--zc-border);
    border-radius: 18px;
    padding: var(--zc-card-pad, 16px);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    box-shadow: var(--zc-shadow-md);
    color: var(--zc-text);
    display: flex;
    flex-direction: column;
}

/* Forward the flex chain through the shell so the body (and map) grow to
   fill the card's height. Without this, the map stays at min-height and
   leaves empty space at the bottom of the card. */
.zc-shell .zc-skill-card.is-compact .zc-skill-card-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.zc-shell .zc-skill-card.is-compact:hover {
    transform: translateY(-2px);
    box-shadow: var(--zc-shadow-md);
    border-color: var(--zc-text-3);
}

/* ── Frame: expanded (fullscreen overlay) ─────────────────────── */
.zc-shell .zc-skill-card.is-expanded {
    cursor: default;
    /* The card itself becomes a fixed positioning container; .zc-skill-card-shell
       inside is the visible expanded panel. */
}
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-shell {
    position: fixed;
    /* Nearly full-screen — small inset all around, just enough room at the
       bottom to keep the chat dock + composer visible. User can adjust the
       input box independently. */
    top: 70px;
    left: 4vw;
    right: 4vw;
    bottom: 24px;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 18px;
    box-shadow: var(--zc-shadow-lg);
    z-index: 201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

/* ── Folio detail card — soft tenant-brand glow + tinted edge on its host shell ──
   The shell owns the visible outer border and clips the card's own shadow, so the
   glow must live here. Scoped via :has so no other skill card is affected. Colour =
   the tenant/admin brand token (--zc-tenant), jade fallback. (0,5,0) beats the base
   (0,4,0) shell rules. */
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-shell:has(.folio-detail-card) {
    --fd-tglow: var(--zc-tenant-bg, var(--zc-jade-bg, rgba(0, 214, 143, .14)));
    box-shadow: var(--zc-shadow-lg), 0 0 52px -12px var(--fd-tglow);
}
@supports (background: color-mix(in srgb, red, blue)) {
    .zc-shell .zc-skill-card.is-expanded .zc-skill-card-shell:has(.folio-detail-card) {
        --fd-tglow: color-mix(in srgb, var(--zc-tenant, var(--zc-jade, #00D68F)) 32%, transparent);
        border-color: color-mix(in srgb, var(--zc-tenant, var(--zc-jade, #00D68F)) 22%, var(--zc-border));
    }
}

/* ── Launch Config card — same soft glow + tinted edge as the folio card, in the
   launch-config blue. Scoped via :has(.zc-lc) so no other card is affected. */
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-shell:has(.zc-lc) {
    --lc-glow: rgba(59, 130, 246, .14);
    box-shadow: var(--zc-shadow-lg), 0 0 52px -12px var(--lc-glow);
}
@supports (background: color-mix(in srgb, red, blue)) {
    .zc-shell .zc-skill-card.is-expanded .zc-skill-card-shell:has(.zc-lc) {
        --lc-glow: color-mix(in srgb, #3B82F6 32%, transparent);
        border-color: color-mix(in srgb, #3B82F6 22%, var(--zc-border));
    }
}

/* No scrim in expanded mode — card sits above canvas without dimming, so the
   user keeps full visibility + control of the dock. Class kept (no-op) in case
   any old markup references it. */
/* Canvas 2.0 — expand-in animation. A card can't CSS-transition from in-flow
   (compact) to position:fixed (expanded), so the expanded shell scales + fades
   IN, which reads as the card "expanding" to fill the lane. */
@keyframes zc-card-expand-in {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
}
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-shell {
    animation: zc-card-expand-in .5s cubic-bezier(.16, .84, .3, 1);
}

.zc-shell .zc-skill-card-scrim { display: none; }

/* ── Canvas 2.0 CAROUSEL ──────────────────────────────────────────────────
   With >1 open card, the ACTIVE card is expanded (fills the lane) and the
   non-active (compact) cards become small clickable chips in a strip at the
   BOTTOM of the lane. Click a chip → it becomes active (expands; the previous
   contracts to a chip). Solo (1 card) keeps the full-lane expand, no strip. */

/* Chip strip at the bottom of the lane. */
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) {
    position: fixed;
    left: calc(var(--zc-rail-w) + 44px);   /* room for the ‹ scroll arrow */
    right: calc(var(--zc-focus-chat-w, 440px) + 52px);   /* room for the › arrow */
    bottom: 10px;
    width: auto;
    max-width: none;
    /* Padding inside the scroll area so chip shadows aren't clipped by overflow. */
    padding: 12px 6px 14px;
    gap: 10px;
    z-index: 202;                 /* above the expanded shell (201) so chips are clickable */
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo)::-webkit-scrollbar { display: none; }
.zc-shell.zc-dock-focus:not(.zc-panel-collapsed) .zc-skill-cards-strip:not(.is-solo) {
    left: calc(var(--zc-panel-w) + 16px);
}
/* The active (expanded) card takes NO space in the strip — only its fixed shell renders. */
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) .zc-skill-card.is-expanded {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
}
/* Expanded shell clears the bottom chip strip when there are multiple cards. */
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) .zc-skill-card.is-expanded .zc-skill-card-shell {
    bottom: 86px;
}
/* Non-active card = a small clickable chip (header only). */
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) .zc-skill-card.is-compact {
    width: auto;
    min-width: 160px;
    max-width: 250px;
    max-height: 54px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 14px;
    /* Tone spine down the left edge (per-accent) for a defined, branded object. */
    box-shadow: inset 3px 0 0 var(--chip-spine, transparent), var(--zc-shadow-md);
    transition: transform .12s, box-shadow .12s;
}
/* Body is hidden — center the header (icon + name) vertically in the chip. */
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) .zc-skill-card.is-compact .zc-skill-card-shell {
    justify-content: center;
}
/* Branded chip: tighten the header so the icon + name + type sit within the chip,
   and let the name use the full width — the expand/close buttons fade in on hover
   at the right edge (over a small surface backing) instead of always crowding it. */
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) .zc-skill-card.is-compact .zc-skill-card-header.is-branded {
    padding: 7px 12px 7px 9px;
    margin-bottom: 0;
    position: relative;
}
/* Expand is redundant — clicking the chip already expands it. Keep only the × (dismiss),
   revealed on hover at the right edge over a small surface fade so it never covers the name. */
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) .zc-skill-card.is-compact .zc-skill-card-expand {
    display: none;
}
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) .zc-skill-card.is-compact .zc-skill-card-dismiss {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .12s;
    background: var(--zc-surface);
    border-radius: 7px;
    box-shadow: -10px 0 10px 2px var(--zc-surface);
}
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) .zc-skill-card.is-compact:hover .zc-skill-card-dismiss { opacity: 1; }
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) .zc-skill-card.is-compact:hover {
    transform: translateY(-2px);
    box-shadow: var(--zc-shadow-lg);
}
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) .zc-skill-card.is-compact .zc-skill-card-header {
    padding: 8px 12px;
}
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) .zc-skill-card.is-compact .zc-skill-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zc-shell.zc-dock-focus .zc-skill-cards-strip:not(.is-solo) .zc-skill-card.is-compact .zc-skill-card-body {
    display: none;
}

/* ── Header (compact + expanded both render it; CSS varies padding) ── */
.zc-shell .zc-skill-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-header {
    margin-bottom: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--zc-border);
}
.zc-shell .zc-skill-card-title {
    font-weight: 700;
    font-size: var(--zc-card-title, 12px);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zc-text-2);
}

/* ── Branded chip identity (icon tile + name + type) — the compressed card in the
   bottom strip. Icon tile is tone-tinted per card kind; name is the artifact's real
   name (reported after hydration), type is the kind label. ── */
.zc-shell .zc-skill-card-header.is-branded { justify-content: flex-start; }
.zc-shell .zc-skill-card-icon {
    width: 32px; height: 32px; flex: none; border-radius: 9px;
    display: grid; place-items: center;
    color: #fff; background: var(--zc-tone-indigo);
}
.zc-shell .zc-skill-card-icon .material-symbols-outlined { font-size: 18px; }
/* Solid tone badge (white glyph) — reads as a distinct branded object, not a pale wash. */
.zc-shell .zc-skill-card-icon.accent-jade   { background: var(--zc-tone-jade); }
.zc-shell .zc-skill-card-icon.accent-violet { background: var(--zc-tone-violet); }
.zc-shell .zc-skill-card-icon.accent-amber  { background: var(--zc-tone-amber); }
.zc-shell .zc-skill-card-icon.accent-teal   { background: var(--zc-tone-teal); }
.zc-shell .zc-skill-card-icon.accent-indigo { background: var(--zc-tone-indigo); }
.zc-shell .zc-skill-card-icon.accent-blue   { background: var(--zc-tone-blue); }

/* Per-accent chip spine colour (consumed by the compressed chip box-shadow below). */
.zc-shell .zc-skill-card.accent-jade   { --chip-spine: var(--zc-tone-jade); }
.zc-shell .zc-skill-card.accent-violet { --chip-spine: var(--zc-tone-violet); }
.zc-shell .zc-skill-card.accent-amber  { --chip-spine: var(--zc-tone-amber); }
.zc-shell .zc-skill-card.accent-teal   { --chip-spine: var(--zc-tone-teal); }
.zc-shell .zc-skill-card.accent-indigo { --chip-spine: var(--zc-tone-indigo); }
.zc-shell .zc-skill-card.accent-blue   { --chip-spine: var(--zc-tone-blue); }
.zc-shell .zc-skill-card-idn { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.zc-shell .zc-skill-card-name {
    font-size: 13.5px; font-weight: 650; color: var(--zc-text); line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zc-shell .zc-skill-card-type {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--zc-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zc-shell .zc-skill-card-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zc-jade);
    animation: zc-pulse-dot 1.2s ease-in-out infinite;
}
@keyframes zc-pulse-dot {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1.0; }
}
.zc-shell .zc-skill-card-close,
.zc-shell .zc-skill-card-expand,
.zc-shell .zc-skill-card-dismiss {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--zc-text-3);
    border-radius: 6px;
    padding: 4px;
    display: inline-flex;
}
/* First control in the header group gets the auto margin so the whole group
   sits right; siblings tuck in beside it (no per-button auto, or they'd each
   force their own gap). */
.zc-shell .zc-skill-card-close,
.zc-shell .zc-skill-card-expand { margin-left: auto; }
.zc-shell .zc-skill-card-close:hover,
.zc-shell .zc-skill-card-expand:hover,
.zc-shell .zc-skill-card-dismiss:hover { color: var(--zc-text); background: var(--zc-surface-2); }
/* Match the header title's compact icon scale. */
.zc-shell .zc-skill-card-expand .material-symbols-outlined,
.zc-shell .zc-skill-card-dismiss .material-symbols-outlined { font-size: 18px; }

/* Body — flex column so the map can expand to fill available space */
.zc-shell .zc-skill-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Expanded card body: NO outer scroll. Let inner content (e.g. the tab body
   inside LibraryDocumentDetail) own the scrolling so sticky headers / tab
   strips / download buttons stay visible while only the content area scrolls.
   Cards that need a single-scroll wrapper can override per-card. */
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-body {
    padding: 20px 28px 24px;
    overflow: hidden;
    min-height: 0;
}
/* Inner tab content (e.g. LibraryDocumentDetail) often sets its own min-width
   to force a baseline layout in compact mode. In expanded mode the card fills
   the viewport, so relax that constraint AND let children expand to fill the
   available height — the card has fixed size, the inner scroll lives inside. */
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-body > * {
    min-width: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
/* The list/browse cards carry no inner padding of their own in expanded — the
   chrome body padding above is the single, uniform inset so Library, Knowledge
   and Folio line up identically. Library's root sets an inline compact padding,
   so override it here (Knowledge's root has none; Folio is handled in its own
   rule). */
.zc-shell .zc-skill-card.is-expanded .zc-libdoclist { padding: 0 !important; }

/* Status visuals — three lifecycle states surface on the card frame:
     Pending → soft pulsing jade glow (Tzib is materializing this card)
     Active  → steady soft glow (eye lands here; it's the focus)
     Done    → dimmed + desaturated (completed; no longer the focus). No dashed
               border — the dim contrast is enough to communicate "finished".

   When several cards are on the canvas at once, `.is-active` makes the live
   one stand out and `.is-done` quiets the rest. */

.zc-shell .zc-skill-card.is-pending {
    border-color: var(--zc-jade);
    animation: zc-pulse 1.6s ease-in-out infinite;
}

.zc-shell .zc-skill-card.is-active {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14),
                0 0 0 1px rgba(255, 255, 255, 0.06),
                0 0 0 3px rgba(0, 214, 143, 0.18),
                0 0 22px 0 rgba(0, 214, 143, 0.10);
    transition: box-shadow 240ms ease, opacity 240ms ease;
}

.zc-shell .zc-skill-card.is-done {
    opacity: 0.62;
    filter: saturate(0.85);
    transition: opacity 240ms ease, filter 240ms ease;
}

.zc-shell .zc-skill-card.is-done:hover {
    opacity: 0.92;
    filter: none;
}

@keyframes zc-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 214, 143, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(0, 214, 143, 0.18); }
}

/* ── Tablet / squeezed window: stack vertical, fluid width ────── */
/* !important + overflow-x: hidden on the inner scroller as a safety net.
   With more than one card, the desktop card width clamp(410px, ...) wins on
   width via stacking-context details, leaving the strip in row-direction
   with horizontal overflow. The !important + overflow-x:hidden combo
   guarantees a vertical scroll at narrow widths regardless of which rule
   wins the cascade race. */
@media (max-width: 1024px) {
    .zc-shell .zc-canvas-inner {
        overflow-x: hidden;
    }
    .zc-shell .zc-skill-cards-strip {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 12px;
        padding: 0 16px;
        max-width: 100% !important;
        overflow-x: hidden;
    }
    .zc-shell .zc-skill-cards-strip.is-solo {
        margin: 24px auto 16px auto;
        justify-content: flex-start;
    }
    .zc-shell .zc-skill-card.is-compact {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;     /* don't let flex shrink/grow the card height */
        height: auto !important;
        max-height: none !important;   /* let content drive height; canvas-inner scrolls */
        min-height: 0 !important;
    }
    .zc-shell .zc-skill-card.is-compact .zc-skill-card-body {
        overflow: visible;             /* belt + suspenders against any inherited clip */
    }
}

/* Non-expandable cards: no pointer cursor, no hover lift. The GatherCard sets
   Expandable=false; nothing to expand to (all content already visible inline). */
.zc-shell .zc-skill-card.is-not-expandable {
    cursor: default;
}
.zc-shell .zc-skill-card.is-not-expandable:hover {
    transform: none;
    box-shadow: var(--zc-shadow-sm);
    border-color: var(--zc-border);
}

/* ── Mobile (iPhone-sized): full-width, tighter padding, smaller glow ── */
/* Header chrome cleanup is handled by the 1024px block above so it kicks in
   for tablet/squeezed-window cases too, not just true mobile. */
@media (max-width: 640px) {
    .zc-shell .zc-skill-cards-strip {
        gap: 10px;
        padding: 0 12px;
        margin: 16px 0;
    }
    .zc-shell .zc-skill-cards-strip.is-solo {
        margin: 16px auto 12px auto;
        padding: 0 12px;
    }
    .zc-shell .zc-skill-card.is-compact {
        width: 100% !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 14px;
        border-radius: 14px;
    }

    /* Active glow scales down on mobile so it doesn't bleed into edges */
    .zc-shell .zc-skill-card.is-active {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12),
                    0 0 0 2px rgba(0, 214, 143, 0.18);
    }
    /* Expanded card: fullscreen except for the dock at the bottom */
    .zc-shell .zc-skill-card.is-expanded .zc-skill-card-shell {
        top: 0; left: 0; right: 0; bottom: 140px;
        border-radius: 0;
    }

    /* Gather card rows: tighter padding, single-column-friendly */
    .zc-gather-rows {
        gap: 8px;
    }
    .zc-gather-row {
        grid-template-columns: 28px 1fr;
        gap: 10px;
        padding: 10px;
    }
    .zc-gather-active-banner {
        padding: 10px 12px;
        margin-bottom: 14px;
        font-size: 13.5px;
    }
    .zc-gather-active-tag {
        font-size: 9.5px;
        padding: 2px 7px;
    }
}

/* ================================================================
   ATLAS TRIP CARD — content (one render; CSS adapts per context)
   ================================================================ */

.zc-shell .atlas-trip-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 10px;
}

/* Summary: endpoints + meta + status. Compact = tight; expanded = breathes. */
.zc-shell .atlas-trip-card-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zc-shell .atlas-trip-card-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--zc-text-2);
    font-size: 13px;
    font-style: italic;
}
.zc-shell .atlas-trip-card-status .material-symbols-outlined {
    font-size: 16px;
    color: var(--zc-jade);
    animation: zc-spin 2s linear infinite;
}
@keyframes zc-spin {
    from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}

.zc-shell .atlas-trip-card-endpoints {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.zc-shell .atlas-trip-card-endpoints > div {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.zc-shell .atlas-trip-card-endpoints .material-symbols-outlined {
    font-size: 16px;
    color: var(--zc-jade);
}

/* Destination POI inline block — rating / open-now / phone / website /
   today's hours under the destination endpoint when PlaceDetails resolved.
   Indented to align with the place text above (icon column + gap). */
.zc-shell .atlas-trip-card-dest-poi {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-left: 22px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--zc-text-2);
    align-items: center !important;
}
.zc-shell .atlas-trip-card-dest-poi .material-symbols-outlined {
    font-size: 13px;
    color: var(--zc-text-3);
}
.zc-shell .atlas-trip-card-dest-rating { color: #FBBF24; font-weight: 600; }
.zc-shell .atlas-trip-card-dest-openstate {
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
}
.zc-shell .atlas-trip-card-dest-openstate.is-open  { background: rgba(0, 214, 143, 0.16); color: #00D68F; }
.zc-shell .atlas-trip-card-dest-openstate.is-closed{ background: rgba(239, 68, 68, 0.16); color: #EF4444; }
.zc-shell .atlas-trip-card-dest-phone,
.zc-shell .atlas-trip-card-dest-website {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--zc-text-2);
    text-decoration: none;
}
.zc-shell .atlas-trip-card-dest-phone:hover,
.zc-shell .atlas-trip-card-dest-website:hover { color: var(--zc-text); text-decoration: underline; }
.zc-shell .atlas-trip-card-dest-hours { color: var(--zc-text-3); }

.zc-shell .atlas-trip-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 12px;
    color: var(--zc-text-2);
    padding-top: 6px;
    border-top: 1px solid var(--zc-border);
}
.zc-shell .atlas-trip-card-meta b { color: var(--zc-text); }
.zc-shell .atlas-trip-card-via { color: var(--zc-text-3); }
.zc-shell .atlas-trip-card-altpill {
    margin-left: auto;
    background: var(--zc-surface-2);
    color: var(--zc-text-3);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

/* Per-leg color legend for multi-modal trips (walk → bus → rail → walk).
   Each chip's swatch resolves from --route-color-{mode} so it always matches
   the polyline drawn on the map. */
.zc-shell .atlas-trip-card-leglegend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding-top: 6px;
}
.zc-shell .atlas-trip-card-legchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    padding: 2px 8px 2px 6px;
    font-size: 11px;
    color: var(--zc-text-2);
    line-height: 1.5;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.zc-shell .atlas-trip-card-legchip:hover {
    background: var(--zc-surface-3, var(--zc-surface-2));
    border-color: var(--zc-text-3);
    transform: translateY(-1px);
}
.zc-shell .atlas-trip-card-legchip:active {
    transform: translateY(0);
}
.zc-shell .atlas-trip-card-legchip:focus-visible {
    outline: 2px solid var(--zc-accent, var(--zc-text-2));
    outline-offset: 2px;
}
.zc-shell .atlas-trip-card-legchip-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--zc-border);
}
.zc-shell .atlas-trip-card-legchip-label {
    font-weight: 600;
    color: var(--zc-text);
}
.zc-shell .atlas-trip-card-legchip-dist {
    color: var(--zc-text-3);
}

/* Inline replan feedback — shown when a mode switch + Get Route returns
   nothing useful (e.g. transit requested but no transit reaches the
   destination). Stays visible until the next successful replan. */
.zc-shell .atlas-trip-card-replan-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--zc-text-2);
    line-height: 1.45;
}
.zc-shell .atlas-trip-card-replan-notice .material-symbols-outlined {
    font-size: 16px;
    color: var(--zc-text-3);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Map — fills available vertical space. Compact: bounded; expanded: flex. */
.zc-shell .atlas-trip-card-map {
    flex: 1;
    /* Compact: map gets the bulk of the card's vertical real estate via flex:1.
       The floor is intentionally modest (not the summary's typical ~80px height)
       because the summary can grow tall — a multi-leg transit trip renders two
       wrapped rows of line pills. The compact card is height-capped (≤510px), so
       a large floor here would push summary + map past the card and the map's
       square bottom would spill past the card's rounded corner. flex:1 still
       makes the map dominant whenever the summary is short. */
    min-height: 200px;
    background: var(--zc-surface-2);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-map { min-height: 280px; }
.zc-shell .atlas-trip-card-map > .atlas-map-container { width: 100%; height: 100%; }

/* Alternatives — hidden in compact, shown in expanded */
.zc-shell .atlas-trip-card-alternatives { display: none; }
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-alternatives {
    display: block;
    margin-top: 4px;
}
.zc-shell .atlas-trip-card-alternatives h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zc-text-2);
    margin: 0 0 8px;
}
.zc-shell .atlas-trip-card-alt {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--zc-border);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}
.zc-shell .atlas-trip-card-alt b { color: var(--zc-text); }

/* Mobile: tighter map height in compact, beefier in expanded */
@media (max-width: 640px) {
    .zc-shell .atlas-trip-card-map { min-height: 180px; }
    .zc-shell .zc-skill-card.is-expanded .atlas-trip-card-map { min-height: 50vh; }
}

/* ── Atlas trip card — directions drawer (expanded only) ───────── */

/* Compact: drawer + TMC header hidden; card uses single-column flex (summary on top, map). */
.zc-shell .zc-skill-card.is-compact .atlas-trip-card-drawer { display: none; }
.zc-shell .zc-skill-card.is-compact .atlas-trip-card-tmc    { display: none; }

/* Expanded: TMC bar across the top, then 2-column grid — drawer left (320px),
   summary + map on the right. Endpoints in the right summary are hidden in
   expanded since the drawer already shows them. */
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "tmc      tmc"
        "drawer   summary"
        "drawer   map";
    gap: 0;
    height: 100%;
}
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-tmc     { grid-area: tmc; }
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-drawer  { grid-area: drawer; }
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-summary { grid-area: summary; padding: 12px 18px; border-bottom: 1px solid var(--zc-border); }
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-map     { grid-area: map; border-radius: 0; min-height: 0; }

/* Hide the entire top summary in expanded — endpoints live in the drawer,
   meta lives in the floating pill on the map. Compact still uses the
   summary block since there's no drawer there. */
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-summary { display: none; }
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card {
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "tmc      tmc"
        "drawer   map";
}

.zc-shell .atlas-trip-card-drawer {
    background: var(--zc-surface-2);
    border-right: 1px solid var(--zc-border);
    overflow-y: auto;
    padding: 12px 14px;
}
.zc-shell .atlas-trip-card-drawer header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.zc-shell .atlas-trip-card-drawer header span {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zc-text-2);
}

.zc-shell .atlas-trip-card-stops {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.zc-shell .atlas-trip-card-stop {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 10px;
    padding: 10px 12px;
}
.zc-shell .atlas-trip-card-stop-letter {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: white;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--zc-text-3);
}
.zc-shell .atlas-trip-card-stop.origin      .atlas-trip-card-stop-letter { background: var(--zc-jade); }
.zc-shell .atlas-trip-card-stop.waypoint    .atlas-trip-card-stop-letter { background: #F59E0B; }
.zc-shell .atlas-trip-card-stop.destination .atlas-trip-card-stop-letter { background: #DC2626; }

.zc-shell .atlas-trip-card-stop-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.zc-shell .atlas-trip-card-stop-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--zc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zc-shell .atlas-trip-card-stop-addr {
    font-size: 11px;
    color: var(--zc-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zc-shell .atlas-trip-card-drawer-alts {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--zc-border);
}
.zc-shell .atlas-trip-card-drawer-alts h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zc-text-3);
    margin: 0 0 8px;
}

/* Mobile expanded — drawer collapses to top instead of side */
@media (max-width: 640px) {
    .zc-shell .zc-skill-card.is-expanded .atlas-trip-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "summary"
            "drawer"
            "map";
    }
    .zc-shell .atlas-trip-card-drawer {
        max-height: 30vh;
        border-right: none;
        border-bottom: 1px solid var(--zc-border);
    }
}

/* ── Atlas trip card — TMC-style top header (expanded only) ───── */

.zc-shell .atlas-trip-card-tmc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--zc-surface);
    border-bottom: 1px solid var(--zc-border);
    min-height: 48px;
}

.zc-shell .atlas-trip-card-tmc-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .12em;
    color: var(--zc-text);
    flex-shrink: 0;
}
.zc-shell .atlas-trip-card-tmc-brand .material-symbols-outlined {
    font-size: 22px;
    color: var(--zc-jade);
}

.zc-shell .atlas-trip-card-tmc-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    padding: 4px 12px;
    height: 32px;
    max-width: 520px;
}
.zc-shell .atlas-trip-card-tmc-search .material-symbols-outlined {
    font-size: 18px;
    color: var(--zc-text-3);
}
.zc-shell .atlas-trip-card-tmc-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--zc-text-2);
    cursor: not-allowed;
}
.zc-shell .atlas-trip-card-tmc-search input::placeholder { color: var(--zc-text-3); }

/* ── Mode pills (display-only, mirrors legacy Drive/Bike/Walk/Transit row) ── */
.zc-shell .atlas-trip-card-modes {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.zc-shell .atlas-trip-card-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--zc-text-3);
}
.zc-shell .atlas-trip-card-mode .material-symbols-outlined {
    font-size: 14px;
}
.zc-shell .atlas-trip-card-mode.is-active {
    background: var(--zc-jade-bg);
    border-color: var(--zc-jade);
    color: var(--zc-jade);
}
/* Disabled when a prior replan proved this mode has no route for the
   current origin/destination pair. Stays clickable-looking just enough
   to read, but visibly inert; the inline notice + native tooltip carry
   the "why". Reset when a new trip Payload arrives. */
.zc-shell .atlas-trip-card-mode:disabled,
.zc-shell .atlas-trip-card-mode.is-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto;     /* keep title tooltip visible on hover */
    background: var(--zc-surface-2);
    border-color: var(--zc-border);
    color: var(--zc-text-3);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Mobile expanded — TMC header full-width above stacked drawer + map */
@media (max-width: 640px) {
    .zc-shell .zc-skill-card.is-expanded .atlas-trip-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas:
            "tmc"
            "summary"
            "drawer"
            "map";
    }
    .zc-shell .atlas-trip-card-tmc { padding: 8px 12px; }
    .zc-shell .atlas-trip-card-tmc-search { display: none; }  /* save space */
}

/* ── Expanded SkillCard — hide title strip; ATLAS bar is the header ── */

/* Header collapses to zero height. The X close button floats top-right
   so the user can dismiss without the dedicated header strip. */
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-header {
    border-bottom: none;
    padding: 0;
    margin: 0;
    height: 0;
    min-height: 0;
}
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-title,
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-icon,
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-idn,
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-status-dot { display: none; }
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 10;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
}
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-close:hover {
    background: var(--zc-surface);
    color: var(--zc-text);
}
/* Body padding off in expanded ONLY for the Atlas trip card — its grid + embedded
   full-bleed map own their spacing. Scoped via :has() so it no longer clobbers
   the inner padding (set on `.is-expanded .zc-skill-card-body` above) for every
   other card. Without this scope, Library / Knowledge / Folio / GeneralResponse
   expanded views ran edge-to-edge with no padding. */
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-body:has(.atlas-trip-card) { padding: 0; overflow: hidden; }
/* Compact: clip the body so the embedded map (which self-clips to its own rounded
   rect) can never poke past the card's rounded corners if content runs tall — the
   default body overflow is visible, which let the map spill out the bottom on
   multi-leg transit trips. */
.zc-shell .zc-skill-card.is-compact .zc-skill-card-body:has(.atlas-trip-card) { overflow: hidden; }

/* ── Atlas drawer — restyled to mimic legacy directions panel ── */

/* Stops as input rows (legacy look) */
.zc-shell .atlas-trip-card-stops {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zc-shell .atlas-trip-card-stop {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
}
.zc-shell .atlas-trip-card-stop-input {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 8px;
    padding-right: 4px;
}
.zc-shell .atlas-trip-card-stop-input input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    padding: 7px 10px;
    color: var(--zc-text);
    cursor: default;
    min-width: 0;
}
.zc-shell .atlas-trip-card-stop-action {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--zc-text-3);
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
}
.zc-shell .atlas-trip-card-stop-action:hover { color: var(--zc-text); background: var(--zc-surface-2); }
.zc-shell .atlas-trip-card-stop-action .material-symbols-outlined { font-size: 16px; }

.zc-shell .atlas-trip-card-add-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px;
    border: 1px dashed var(--zc-border);
    border-radius: 8px;
    background: transparent;
    color: var(--zc-text-3);
    font-size: 12px;
    cursor: pointer;
    margin-top: 2px;
}
.zc-shell .atlas-trip-card-add-stop:hover { border-color: var(--zc-text-3); color: var(--zc-text-2); }
.zc-shell .atlas-trip-card-add-stop .material-symbols-outlined { font-size: 16px; }

/* Mode pills: inline horizontal, evenly distributed, no wrap */
.zc-shell .atlas-trip-card-modes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 14px 0 12px;
}
.zc-shell .atlas-trip-card-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 8px;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--zc-text-3);
    overflow: hidden;
    white-space: nowrap;
}
.zc-shell .atlas-trip-card-mode .material-symbols-outlined { font-size: 14px; }
.zc-shell .atlas-trip-card-mode.is-active {
    background: var(--zc-jade-bg);
    border-color: var(--zc-jade);
    color: var(--zc-jade);
}

/* Get Route button — full-width jade primary */
.zc-shell .atlas-trip-card-get-route {
    width: 100%;
    background: var(--zc-jade);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    margin-bottom: 14px;
}
.zc-shell .atlas-trip-card-get-route .material-symbols-outlined { font-size: 18px; }
.zc-shell .atlas-trip-card-get-route:hover { filter: brightness(0.95); }

/* Routes list — Route 1/2/3 cards. Active = jade tint + checkmark. */
.zc-shell .atlas-trip-card-routes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.zc-shell .atlas-trip-card-route {
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
}
.zc-shell .atlas-trip-card-route.is-active {
    background: var(--zc-jade-bg);
    border-color: var(--zc-jade);
}
.zc-shell .atlas-trip-card-route-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.zc-shell .atlas-trip-card-route-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--zc-text);
}
.zc-shell .atlas-trip-card-route.is-active .atlas-trip-card-route-name { color: var(--zc-jade); }
.zc-shell .atlas-trip-card-route-check { font-size: 18px; color: var(--zc-jade); }
.zc-shell .atlas-trip-card-route-via {
    font-size: 11px;
    color: var(--zc-text-3);
    margin-bottom: 4px;
}
.zc-shell .atlas-trip-card-route-meta {
    display: flex;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--zc-text-2);
}

/* ── TMC search-input cursor + clear button ───────────────────── */
.zc-shell .atlas-trip-card-tmc-search input { cursor: text; }
.zc-shell .atlas-trip-card-tmc-clear {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--zc-text-3);
    padding: 2px;
    display: inline-flex;
}
.zc-shell .atlas-trip-card-tmc-clear:hover { color: var(--zc-text); }
.zc-shell .atlas-trip-card-tmc-clear .material-symbols-outlined { font-size: 16px; }

/* ── Drawer hide/show toggle (TMC bar, top-right) ─────────────── */
.zc-shell .atlas-trip-card-drawer-toggle {
    background: transparent;
    border: 1px solid var(--zc-border);
    cursor: pointer;
    color: var(--zc-text-2);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-right: 36px; /* leave room for the absolute X close button */
}
.zc-shell .atlas-trip-card-drawer-toggle:hover {
    background: var(--zc-surface-2);
    color: var(--zc-text);
}
.zc-shell .atlas-trip-card-drawer-toggle .material-symbols-outlined { font-size: 18px; }

/* ── Drawer-hidden layout: map fills full width ──────────────── */
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card.drawer-hidden {
    grid-template-columns: 1fr;
    grid-template-areas:
        "tmc"
        "summary"
        "map";
}
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card.drawer-hidden .atlas-trip-card-drawer {
    display: none;
}

/* Floating route summary — bottom-center over the map (legacy Atlas pattern).
   Subtle pill that doesn't compete with the route polyline or markers. */
.zc-shell .atlas-trip-card-floating-summary {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    background: var(--bg-alpha88, rgba(255, 255, 255, 0.92));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--zc-text-2);
    display: flex;
    gap: 6px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 12;
    max-width: calc(100% - 80px);  /* leave room for the radar toggle */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.zc-shell .atlas-trip-card-floating-summary b { color: var(--zc-text); }

/* Floating reopen bubble — shown only while the dock is hidden, anchored
   bottom-right where the dock's corner sat. Carries the Zybron mark; jade
   ring keeps it discoverable against the canvas. */
.zc-shell .zc-dock-reopen {
    position: fixed;
    bottom: 18px;
    right: 24px;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zc-surface);
    border: 2px solid var(--zc-jade);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    z-index: 55;
    box-shadow: var(--zc-shadow-md);
    transition: transform .12s, box-shadow .12s;
}
.zc-shell .zc-dock-reopen:hover {
    transform: translateY(-2px);
    box-shadow: var(--zc-shadow-lg, var(--zc-shadow-md));
}
.zc-shell .zc-dock-reopen-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.zc-shell .zc-dock-reopen-mark {
    font-weight: 700;
    font-size: 22px;
    color: var(--zc-jade);
}

/* Dock fully hidden — drop the dock; the floating reopen bubble stays. */
.zc-shell.zc-dock-hidden .zc-dock-wrap {
    display: none !important;
}

/* ── Focus mode — two-state dock (ZybronChatCanvas.md §3.5.2) ──────────────
   Chat docks to the right as a full-height column; the canvas reflows its
   card strip into the remaining left lane. NO scrim — cards stay lit and
   interactive beside the conversation. Replaces the old centered overlay +
   50%-black scrim. Width is admin-editable via --zc-focus-chat-w. */
.zc-shell.zc-dock-focus .zc-dock-wrap {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    transform: none;
    width: var(--zc-focus-chat-w, 440px);
    max-width: var(--zc-focus-chat-w, 440px);
    height: auto;
    align-items: stretch;
    padding: 0 16px 16px 0;
}
.zc-shell.zc-dock-focus .zc-dock { height: 100%; }

/* Resize handle — only interactive in Focus mode, where the dock is a right-
   pinned full-height column. Sits on the dock's left edge; drag to set
   --zc-focus-chat-w (persisted). Hidden/inert in Work + Peek modes. */
.zc-dock-resize { display: none; }
.zc-shell.zc-dock-focus .zc-dock-resize {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 230;            /* above the dock card (220) so it always grabs */
    touch-action: none;
}
/* Visible affordance — a subtle bar that brightens on hover/drag. */
.zc-shell.zc-dock-focus .zc-dock-resize::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 48px;
    border-radius: 999px;
    background: var(--zc-border, rgba(0, 0, 0, .14));
    transition: background .12s ease, height .12s ease;
}
.zc-shell.zc-dock-focus .zc-dock-resize:hover::before {
    background: var(--zc-accent, var(--zc-jade));
    height: 72px;
}
/* Reserve the right lane so cards never sit under the docked chat. In Focus
   the dock is docked right (not floating over the bottom), so the tall bottom
   gutter that Work mode needs becomes dead space and forces a needless vertical
   scroll — collapse it back to normal padding here (covers the home variant's
   320px bottom too). */
.zc-shell.zc-dock-focus .zc-canvas-inner,
.zc-shell.zc-dock-focus .zc-canvas-inner.zc-canvas-home {
    padding-right: calc(var(--zc-focus-chat-w, 440px) + 24px);
    padding-bottom: 24px;
    /* Center the artifact card(s) vertically in the lane (Canvas 2.0). */
    justify-content: center;
}

/* Expanded card in Focus mode — the chat is docked to the right lane (z-index
   220, above the card's 201), so a normal fullscreen expand (right: 4vw) slides
   under the dock and the composer covers the card's right edge. Pull the card's
   right edge in to clear the docked chat column so it fills ONLY the open left
   lane. Bottom returns to a small inset since the dock no longer floats over the
   bottom in Focus. */
.zc-shell.zc-dock-focus .zc-skill-card.is-expanded .zc-skill-card-shell {
    top: 16px;
    left: calc(var(--zc-rail-w) + 16px);   /* clear the microrail, stay in the lane */
    right: calc(var(--zc-focus-chat-w, 440px) + 24px);   /* clear the chat column */
    bottom: 16px;
}
.zc-shell.zc-dock-focus:not(.zc-panel-collapsed) .zc-skill-card.is-expanded .zc-skill-card-shell {
    left: calc(var(--zc-panel-w) + 16px);   /* when the drawer is open */
}

/* CANVAS 2.0 — Focus / split view. The chevron on the composer toggles this.
   Chat (conversation + composer) docks to the RIGHT in the same on-canvas prose
   format (not boxed); the middle lane — between the rail and the chat — is where
   artifact cards surface. TEST: that lane is shown as a dashed purple frame. */

/* Conversation → right column, above the composer (same on-canvas format).
   `bottom` tracks the observed composer height (published as --zc-composer-h from
   VoiceModeService.js setupComposerHeightObserver) the same way the fullscreen mode
   does — but with focus-mode's own composer inset of 16px (see .zc-dock-wrap below)
   instead of 18px. Fallback 260px matches the tallest common composer state so first
   paint (before the observer publishes) already has room. */
.zc-shell.zc-dock-focus .zc-dock-history {
    left: auto !important;
    right: 0 !important;
    width: var(--zc-focus-chat-w, 440px) !important;
    max-width: var(--zc-focus-chat-w, 440px) !important;
    top: 16px !important;
    bottom: calc(16px + var(--zc-composer-h, 260px) + 40px) !important;
    padding: 20px 20px 8px !important;
}
/* Composer → a contained box at the bottom of the right column (not full-height). */
.zc-shell.zc-dock-focus .zc-dock-wrap {
    top: auto;
    bottom: 16px;
    height: auto;
}
.zc-shell.zc-dock-focus .zc-dock { height: auto; }

/* Artifact-card lane (the middle) — real artifact cards render here via the
   skill-card system; the placeholder frame was removed now that the lane exists. */

/* Mobile split toggle — segmented "Card | Chat" pill. Hidden by default; the
   mobile media query shows it in focus mode. Desktop keeps the true split. */
.zc-shell .zc-msplit-toggle {
    display: none;
    align-items: center;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    box-shadow: var(--zc-shadow-sm);
}
.zc-shell .zc-msplit-btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--zc-text-3);
    transition: background .12s, color .12s;
}
.zc-shell .zc-msplit-btn.is-active {
    background: var(--zc-tenant, var(--zc-jade));
    color: #fff;
}

/* iPhone vertical — drop the position pills entirely; dock is always
   bottom-only on phones. */
@media (max-width: 640px) {
    /* Focus stays bottom-only on phones — no right dock, no reflow (there's
       no room for a side-by-side lane). The taller transcript still applies. */
    .zc-shell.zc-dock-focus .zc-dock-wrap {
        left: 50%;
        right: auto;
        top: auto;
        bottom: 18px;
        transform: translateX(calc(-50% + var(--zc-rail-w) / 2));
        width: calc(100% - 64px);
        max-width: var(--zc-dock-w);
        height: auto;
        padding: 0;
    }
    .zc-shell.zc-dock-focus .zc-canvas-inner { padding-right: 24px; }
    /* Focus dock is bottom-only on phones — undo the right-lane reservation so
       an expanded card goes back to fullscreen-minus-dock (handled by the
       narrow-width expanded rule above). */
    .zc-shell.zc-dock-focus .zc-skill-card.is-expanded .zc-skill-card-shell {
        left: 0;
        right: 0;
        bottom: 140px;
    }
}

/* FOLIO BROWSE CARD (v0.10) ==================================================
   Compact + expanded forms — emitted by folio.browse, rendered inside the
   chat stream. Compact shows totals + 5 recent chips; expanded reveals
   filter tabs, search, type filter, and the sortable table.
   See ZybronSkillDefs-Folio.md §8.2.
   ========================================================================= */
.zc-shell .folio-browse-card {
    /* Flat inside the SkillCard chrome (matches Library / Knowledge). The chrome
       already supplies the surface + border + rounding, so this card no longer
       paints its own — that was the redundant inner border. It's a height-bounded
       flex column so the folio list scrolls inside the card instead of clipping
       at the card edge. Colors come from the admin theme via --zc-* tokens. */
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    color: var(--zc-text);
    border: none;
    /* No own padding — the compact card frame (.is-compact, 18px) and the
       expanded body (20/28/24) supply the inset, so the KPI bar lines up at the
       same level as Knowledge / Library (whose roots also pad to 0). */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.zc-shell .folio-browse-card.is-expanded { padding: 0; }
/* Only the list grows/shrinks; the header rows (KPI bar, pills, search, bulk
   bar, footer) keep their natural height. Without this, a tall list or the
   bulk-action bar squeezed the flex column and clipped the pills row (which
   has overflow-y:hidden for its horizontal scroll). The `.folio-browse-list`
   rule below re-enables flex on the list (later = wins the specificity tie). */
.zc-shell .folio-browse-card > * { flex-shrink: 0; }
/* Same guard for the Library + Knowledge list cards (height-bounded flex
   columns). Only their list scrolls; the KPI/pills/search rows never shrink.
   Each card's list re-enables flex via its own inline flex:1 (inline beats
   this external rule). */
.zc-shell .zc-libdoclist > * { flex-shrink: 0; }
.zc-shell .zc-kbreview > * { flex-shrink: 0; }

.zc-shell .folio-browse-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--zc-text-muted, #9ca3af);
    padding: 8px 4px;
}

.zc-shell .folio-browse-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.zc-shell .folio-browse-header-main { flex: 1; min-width: 0; }
.zc-shell .folio-browse-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--zc-accent, #2563eb);
}
.zc-shell .folio-browse-eyebrow .material-symbols-outlined { font-size: 16px; }
.zc-shell .folio-browse-title {
    font-size: 15px;
    font-weight: 600;
    margin: 4px 0 0 0;
    line-height: 1.3;
}
.zc-shell .folio-browse-title-muted {
    font-weight: 400;
    color: var(--zc-text-muted, #9ca3af);
}
.zc-shell .folio-browse-query {
    font-size: 12px;
    color: var(--zc-text-muted, #9ca3af);
    margin-top: 3px;
    font-style: italic;
}
.zc-shell .folio-browse-expand {
    background: transparent;
    border: 1px solid var(--zc-border, rgba(255,255,255,0.12));
    color: var(--zc-text-muted, #cbd5e1);
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    line-height: 1;
    transition: background-color 80ms ease, color 80ms ease;
}
.zc-shell .folio-browse-expand:hover {
    background: var(--zc-surface-2, #1f2937);
    color: var(--zc-text, #e5e7eb);
}

/* COMPACT — chip list of recents. */
.zc-shell .folio-browse-recents {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.zc-shell .folio-browse-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--zc-surface-2, #1f2937);
    color: var(--zc-text, #e5e7eb);
    border: 1px solid var(--zc-border, rgba(255,255,255,0.10));
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    max-width: 220px;
    overflow: hidden;
    transition: background-color 80ms ease, border-color 80ms ease, transform 80ms ease;
}
.zc-shell .folio-browse-chip:hover {
    background: var(--zc-surface-3, #2d3748);
    border-color: var(--zc-accent, #2563eb);
}
.zc-shell .folio-browse-chip:active { transform: translateY(1px); }
.zc-shell .folio-browse-chip-code {
    font-weight: 600;
    color: var(--zc-accent, #2563eb);
    flex: 0 0 auto;
}
.zc-shell .folio-browse-chip-name {
    color: var(--zc-text-muted, #cbd5e1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zc-shell .folio-browse-muted {
    font-size: 12px;
    color: var(--zc-text-muted, #9ca3af);
}

/* EXPANDED — tabs · toolbar · table · footer. */
/* Stage filters as PILLS (matches the Knowledge / Library chip pills) on a
   single non-wrapping row — "Closed" never drops to a second line; the row
   scrolls horizontally if the card is too narrow to fit all pills. */
.zc-shell .folio-browse-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    /* No reserved scrollbar space — keeps the pill row exactly one pill tall so
       the search bar below lines up with Knowledge / Library. macOS overlay
       scrollbars don't take layout space; the row still scrolls horizontally. */
    padding-bottom: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--zc-border) transparent;
}
.zc-shell .folio-browse-tabs::-webkit-scrollbar { height: 6px; }
.zc-shell .folio-browse-tabs::-webkit-scrollbar-track { background: transparent; }
.zc-shell .folio-browse-tabs::-webkit-scrollbar-thumb { background: var(--zc-border); border-radius: 3px; }
.zc-shell .folio-browse-tab {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--zc-border);
    color: var(--zc-text-muted, #9ca3af);
    padding: 3px 10px;
    cursor: pointer;
    font-size: 0.82em;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 12px;
    transition: color 80ms ease, border-color 80ms ease, background-color 80ms ease;
}
.zc-shell .folio-browse-tab:hover {
    color: var(--zc-text, #e5e7eb);
    background: var(--zc-surface-2);
}
/* Active pill = blue, consistent with Library / Knowledge (admin --info via --zc-blue). */
.zc-shell .folio-browse-tab.is-active {
    color: var(--zc-blue);
    border-color: var(--zc-blue);
    background: color-mix(in srgb, var(--zc-blue) 16%, transparent);
}
/* Divider between the scope pills (Mine/All) and the status pills (New…Closed). */
.zc-shell .folio-browse-tab-divider {
    flex: 0 0 auto;
    align-self: center;
    color: var(--zc-text-muted);
    opacity: 0.5;
    padding: 0 2px;
    user-select: none;
}

.zc-shell .folio-browse-toolbar {
    display: flex;
    gap: 8px;
    /* 12px to match the KPI→pills→search rhythm of the Knowledge / Library
       cards so the search bars line up card-to-card. */
    margin-top: 12px;
    align-items: center;
}
.zc-shell .folio-browse-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    background: var(--zc-surface-2, #1f2937);
    border: 1px solid var(--zc-border, rgba(255,255,255,0.10));
    border-radius: 6px;
    padding: 5px 8px;
}
.zc-shell .folio-browse-search .material-symbols-outlined {
    font-size: 16px;
    color: var(--zc-text-muted, #9ca3af);
}
.zc-shell .folio-browse-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--zc-text, #e5e7eb);
    font-size: 13px;
}
.zc-shell .folio-browse-type-filter {
    background: var(--zc-surface-2, #1f2937);
    color: var(--zc-text, #e5e7eb);
    border: 1px solid var(--zc-border, rgba(255,255,255,0.10));
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 13px;
    cursor: pointer;
}
.zc-shell .folio-browse-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zc-surface-2, #1f2937);
    color: var(--zc-text-muted, #9ca3af);
    border: 1px solid var(--zc-border, rgba(255,255,255,0.10));
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
}
.zc-shell .folio-browse-refresh:hover {
    color: var(--zc-text, #e5e7eb);
    border-color: var(--zc-tone-violet, #8b5cf6);
}
.zc-shell .folio-browse-refresh .material-symbols-outlined {
    font-size: 16px;
}

.zc-shell .folio-browse-list {
    margin-top: 10px;
    /* Fill remaining card height AND cap at 60vh so a long folio list always
       gets its own vertical scrollbar regardless of how the chrome resolves
       its height (mirrors the Library list). */
    flex: 1 1 auto;
    min-height: 120px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* No outer box around the list — the mini-card rows carry their own borders,
       matching the Library / Knowledge lists (which have no container border). */
    scrollbar-width: thin;
    scrollbar-color: var(--zc-border) transparent;
}
/* Expanded (near-fullscreen) skill card: use the FULL height — the 60vh cap above
   is for the bounded/compact case and left the canvas half-empty when expanded. */
.zc-shell .zc-skill-card.is-expanded .folio-browse-list { max-height: none; }
.zc-shell .folio-browse-list::-webkit-scrollbar { width: 8px; }
.zc-shell .folio-browse-list::-webkit-scrollbar-track { background: transparent; }
.zc-shell .folio-browse-list::-webkit-scrollbar-thumb {
    background-color: var(--zc-border);
    border-radius: 4px;
}
.zc-shell .folio-browse-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
}
/* Fixed column widths — Name (col 4) absorbs the remainder; the rest are
   sized to their content so the table never grows past the card width.
   Col 1 is the bulk-select checkbox. */
.zc-shell .folio-browse-table th:nth-child(1),
.zc-shell .folio-browse-table td:nth-child(1) { width: 32px; text-align: center; }  /* Checkbox */
.zc-shell .folio-browse-table th:nth-child(2),
.zc-shell .folio-browse-table td:nth-child(2) { width: 62px; }   /* Status   */
.zc-shell .folio-browse-table th:nth-child(3),
.zc-shell .folio-browse-table td:nth-child(3) { width: 104px; }  /* Code     */
.zc-shell .folio-browse-table th:nth-child(5),
.zc-shell .folio-browse-table td:nth-child(5) { width: 80px; }   /* Type     */
.zc-shell .folio-browse-table th:nth-child(6),
.zc-shell .folio-browse-table td:nth-child(6) { width: 58px; }   /* Priority */
.zc-shell .folio-browse-table th:nth-child(7),
.zc-shell .folio-browse-table td:nth-child(7) { width: 92px; white-space: nowrap; }  /* Created */
.zc-shell .folio-browse-table td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
}
.zc-shell .folio-browse-check-col input[type="checkbox"] { cursor: pointer; margin: 0; }
.zc-shell .folio-browse-lock {
    font-size: 14px;
    color: var(--zc-text-muted, #9ca3af);
    opacity: 0.5;
}

/* Bulk action bar — owner-gated state change for the checked folios. */
.zc-shell .folio-browse-bulkbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--zc-tone-violet-bg, rgba(139,92,246,0.10));
    border: 1px solid var(--zc-tone-violet, #8b5cf6);
    border-radius: 6px;
}
.zc-shell .folio-browse-bulk-count { font-size: 12px; font-weight: 600; color: var(--zc-text, #e5e7eb); }
.zc-shell .folio-browse-bulk-confirm { font-size: 12px; color: var(--zc-text, #e5e7eb); }
.zc-shell .folio-browse-bulk-msg {
    margin-top: 8px;
    font-size: 12px;
    color: var(--zc-text-muted, #9ca3af);
}
.zc-shell .folio-browse-action.is-primary {
    background: var(--zc-tone-violet, #8b5cf6);
    color: #fff;
    border-color: var(--zc-tone-violet, #8b5cf6);
}
.zc-shell .folio-browse-action.is-danger {
    background: var(--zc-red-bg, rgba(220,38,38,0.12));
    color: var(--zc-red, #ef4444);
    border-color: var(--zc-red, #ef4444);
}
.zc-shell .folio-browse-action:disabled { opacity: 0.5; cursor: default; }
.zc-shell .folio-browse-table th {
    text-align: left;
    background: var(--zc-surface-2, #1f2937);
    color: var(--zc-text-muted, #9ca3af);
    padding: 6px 8px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--zc-border, rgba(255,255,255,0.08));
    position: sticky;
    top: 0;
}
/* Clickable sort headers + per-column type filter. */
.zc-shell .folio-browse-th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 80ms ease;
}
.zc-shell .folio-browse-th-sort:hover { color: var(--zc-text); }
.zc-shell .folio-browse-th-filter {
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--zc-text-muted);
    background: transparent;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    padding: 2px 4px;
    cursor: pointer;
    max-width: 120px;
}
.zc-shell .folio-browse-th-filter.is-active {
    color: var(--zc-blue);
    border-color: var(--zc-blue);
}
.zc-shell .folio-browse-row td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--zc-border, rgba(255,255,255,0.06));
    color: var(--zc-text, #e5e7eb);
}
.zc-shell .folio-browse-row {
    cursor: pointer;
    transition: background-color 80ms ease;
}
.zc-shell .folio-browse-row:hover { background: var(--zc-surface-2, #1f2937); }
.zc-shell .folio-browse-row:last-child td { border-bottom: none; }
.zc-shell .folio-browse-row-code {
    font-weight: 600;
    color: var(--zc-accent, #2563eb);
    white-space: nowrap;
}
.zc-shell .folio-browse-row-name { font-weight: 500; }

.zc-shell .folio-browse-status {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--zc-surface-3, #374151);
    color: var(--zc-text-muted, #cbd5e1);
}
.zc-shell .folio-browse-status.is-new        { background: rgba(59, 130, 246, 0.18); color: #60a5fa; }
.zc-shell .folio-browse-status.is-triage     { background: rgba(250, 204, 21, 0.18); color: #facc15; }
.zc-shell .folio-browse-status.is-prioritize { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
.zc-shell .folio-browse-status.is-solve      { background: rgba(14, 165, 233, 0.18); color: #38bdf8; }
.zc-shell .folio-browse-status.is-execute    { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.zc-shell .folio-browse-status.is-closed     { background: rgba(148, 163, 184, 0.22); color: #94a3b8; }

.zc-shell .folio-browse-footer {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--zc-border, rgba(255,255,255,0.06));
}
.zc-shell .folio-browse-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--zc-border, rgba(255,255,255,0.12));
    border-radius: 6px;
    color: var(--zc-text, #e5e7eb);
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease;
}
.zc-shell .folio-browse-action:hover {
    background: var(--zc-surface-2, #1f2937);
    border-color: var(--zc-accent, #2563eb);
}
.zc-shell .folio-browse-action .material-symbols-outlined { font-size: 16px; }

/* ───────────────────────── Builder process-list card ─────────────────────────
   Canvas-native landing for the Builder module (SkillKinds.BuilderProcessList).
   ZybronAdmin-only. Mirrors the Folio/Knowledge list-card visual language. */
.zc-shell .builder-list-card { display:flex; flex-direction:column; gap:12px; min-height:0; max-height:100%; }
.zc-shell .builder-list-empty,
.zc-shell .builder-list-empty-rows {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:28px 12px; opacity:0.7; text-align:center;
}
.zc-shell .builder-list-empty .material-symbols-outlined,
.zc-shell .builder-list-empty-rows .material-symbols-outlined { font-size:32px; }

.zc-shell .builder-list-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; flex-wrap:wrap;
}
.zc-shell .builder-list-filters { display:flex; gap:6px; flex-wrap:wrap; }
.zc-shell .builder-list-tab {
    padding:4px 10px; border-radius:999px; font-size:0.8em; cursor:pointer;
    background:transparent; color:var(--zc-text, #e5e7eb);
    border:1px solid var(--zybron-border, rgba(148,163,184,0.25));
}
.zc-shell .builder-list-tab.is-active {
    background:var(--zc-accent, #2563eb); border-color:var(--zc-accent, #2563eb);
    color:var(--btn-primary-text, #fff);
}
.zc-shell .builder-list-toolbar-right { display:flex; align-items:center; gap:8px; }
.zc-shell .builder-list-search {
    padding:5px 10px; border-radius:8px; font-size:0.82em; min-width:160px;
    background:var(--zc-surface-2, #1f2937); color:var(--zc-text, #e5e7eb);
    border:1px solid var(--zybron-border, rgba(148,163,184,0.25));
}
.zc-shell .builder-list-new {
    display:inline-flex; align-items:center; gap:4px; cursor:pointer;
    padding:5px 12px; border-radius:8px; font-size:0.82em; font-weight:600;
    background:var(--zc-accent, #2563eb); color:var(--btn-primary-text, #fff);
    border:1px solid var(--zc-accent, #2563eb);
}
.zc-shell .builder-list-new .material-symbols-outlined { font-size:16px; }

.zc-shell .builder-list-loading { padding:18px; opacity:0.7; font-size:0.85em; }

.zc-shell .builder-list-rows {
    list-style:none; margin:0; padding:0 2px 2px 0;
    display:flex; flex-direction:column; gap:2px;
    flex:1 1 auto; min-height:0; overflow-y:auto; max-height:52vh;
}
/* Module accordion header — clickable, like the webapp hierarchy tree. */
.zc-shell .builder-list-group-head {
    display:flex; align-items:center; gap:6px; cursor:pointer;
    padding:7px 8px; margin-top:4px; border-radius:8px;
    font-size:0.72em; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--zc-text, #e5e7eb); opacity:0.78;
    background:var(--zc-surface-2, rgba(148,163,184,0.08));
    border:1px solid transparent;
    position:sticky; top:0; z-index:1;
}
.zc-shell .builder-list-group-head:hover { opacity:1; border-color:var(--zybron-border, rgba(148,163,184,0.25)); }
.zc-shell .builder-list-group-head.is-open { opacity:1; }
.zc-shell .builder-list-chevron { font-size:18px; flex-shrink:0; }
.zc-shell .builder-list-group-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zc-shell .builder-list-group-count {
    flex-shrink:0; font-size:0.92em; letter-spacing:0; text-transform:none;
    padding:1px 7px; border-radius:999px; opacity:0.85;
    background:var(--bg-alpha, rgba(0,0,0,0.25));
}
.zc-shell .builder-list-row {
    display:flex; align-items:center; gap:10px; cursor:pointer;
    padding:8px 10px; border-radius:10px;
    border:1px solid var(--zybron-border, rgba(148,163,184,0.18));
    background:var(--card-bg, rgba(255,255,255,0.02));
}
.zc-shell .builder-list-row:hover { border-color:var(--zc-accent, #2563eb); }
.zc-shell .builder-list-row.is-readonly { opacity:0.72; }
.zc-shell .builder-list-row-icon .material-symbols-outlined { font-size:20px; }
.zc-shell .builder-list-row-main { display:flex; flex-direction:column; min-width:0; flex:1; }
.zc-shell .builder-list-row-name { font-weight:600; font-size:0.9em; }
.zc-shell .builder-list-row-desc {
    font-size:0.74em; opacity:0.65; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.zc-shell .builder-list-row-meta { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.zc-shell .builder-list-pill {
    display:inline-flex; align-items:center; gap:3px;
    padding:2px 7px; border-radius:999px; font-size:0.68em; opacity:0.85;
    background:var(--zc-surface-2, rgba(148,163,184,0.12));
}
.zc-shell .builder-list-pill-ro .material-symbols-outlined { font-size:12px; }

/* ── Generic Artifact cards (ArtifactList picker rows + ArtifactDetail) ─────────
   Canvas-native chrome for the registry-driven artifact cards. Reuses the same
   tokens as the rest of the shell (no hardcoded surface/border hex). The detail
   field controls themselves use the gold-standard .zc-gather-row-edit-* classes. */
.zc-shell .zc-artifact-row {
    display:flex; align-items:center; gap:10px; width:100%;
    padding:8px 10px; border-radius:10px;
    border:1px solid var(--zc-border); background:transparent;
    color:inherit; cursor:pointer; text-align:left; min-width:0; overflow:hidden;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.zc-shell .zc-artifact-row:hover { background:var(--zc-surface-2); border-color:var(--zc-text-3); }
.zc-shell .zc-artifact-row-ico { color:var(--zc-jade, #00D68F); font-size:22px; flex-shrink:0; }
.zc-shell .zc-artifact-row-title {
    display:block; font-weight:500;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.zc-shell .zc-artifact-row-meta {
    display:flex; gap:6px; flex-wrap:wrap; align-items:center;
    font-size:0.8em; color:var(--zc-text-2);
}
.zc-shell .zc-artifact-chip {
    display:inline-flex; align-items:center;
    padding:1px 8px; border-radius:999px; font-size:0.92em;
    background:var(--zc-surface-3, var(--zc-surface-2)); color:var(--zc-text-2);
    text-transform:capitalize;
}
.zc-shell .zc-artifact-create {
    display:flex; align-items:center; gap:8px; margin-top:10px;
    padding-top:10px; border-top:1px solid var(--zc-border);
}
.zc-shell .zc-artifact-create .zc-gather-row-edit-input { flex:1; min-width:0; }

.zc-shell .zc-artifact-detail {
    display:flex; flex-direction:column; gap:12px;
    min-width:min(380px,100%); max-width:100%; box-sizing:border-box; overflow-y:auto;
}
.zc-shell .zc-artifact-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.zc-shell .zc-artifact-head-title { font-weight:700; font-size:1.05em; color:var(--zc-text); }
.zc-shell .zc-artifact-field { display:flex; flex-direction:column; gap:4px; }
.zc-shell .zc-artifact-foot {
    display:flex; align-items:center; justify-content:space-between;
    margin-top:4px; padding-top:8px; border-top:1px solid var(--zc-border);
}
.zc-shell .zc-artifact-foot-id { font-size:11px; color:var(--zc-text-3); font-family:var(--zc-mono, monospace); }
.zc-shell .zc-artifact-foot-note { font-size:11px; color:var(--zc-text-3); }
.zc-shell .zc-artifact-foot-err { font-size:11px; color:var(--zc-red, #dc3545); }
.zc-shell .zc-artifact-foot-ok {
    font-size:11px; color:var(--zc-jade, #00D68F);
    display:inline-flex; align-items:center; gap:3px;
}

/* ── Campaign A3 / Terms-of-Reference card ─────────────────────────────────── */
.zc-shell .zc-a3 { display:flex; flex-direction:column; gap:12px; min-width:min(360px,100%); max-width:100%; box-sizing:border-box; overflow-y:auto; }
.zc-shell .zc-a3.is-wide { min-width:min(740px,100%); }
.zc-shell .zc-a3-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.zc-shell .zc-a3-kicker { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--zc-text-2); }
.zc-shell .zc-a3-kicker .material-symbols-outlined { font-size:17px; }
.zc-shell .zc-a3-title { font-weight:700; font-size:16px; color:var(--zc-text); }
.zc-shell .zc-a3-sub { color:var(--zc-text-2); font-size:12.5px; }
.zc-shell .zc-a3-obj { color:var(--zc-text); font-style:italic; padding:8px 10px; background:var(--zc-surface-2); border-radius:var(--zc-r-sm,12px); border-left:2px solid var(--zc-jade,#00D68F); }
.zc-shell .zc-artifact-chip.is-ready { color:var(--zc-jade,#00D68F); background:rgba(0,214,143,.12); }
.zc-shell .zc-artifact-chip.is-draft { color:var(--zc-amber,#F59E0B); background:rgba(245,158,11,.12); }
.zc-shell .zc-artifact-chip.is-launched { color:var(--zc-blue,#3B82F6); background:rgba(59,130,246,.14); }
.zc-shell .zc-artifact-chip.is-completed { color:var(--zc-text-2); background:var(--zc-surface-3); }

.zc-shell .zc-a3-id { display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start; font-size:12.5px; color:var(--zc-text-2); padding-bottom:10px; border-bottom:1px solid var(--zc-border); }
.zc-shell .zc-a3-id b { color:var(--zc-text); font-weight:600; }
/* One identity field: label stacked tight above its single-line value; value + undo/pen stay on one row. */
.zc-shell .zc-a3-idf { display:flex; flex-direction:column; gap:3px; min-width:0; }
.zc-shell .zc-a3-idf-line { display:inline-flex; align-items:center; gap:6px; min-height:18px; }
.zc-shell .zc-a3-idf-val { color:var(--zc-text-2); cursor:text; border-radius:6px; }
.zc-shell .zc-a3-idf-line .zc-card-undo { font-size:14px; }

.zc-shell .zc-a3-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.zc-shell .zc-a3-col { display:flex; flex-direction:column; gap:14px; padding:12px 0; min-width:0; }
.zc-shell .zc-a3-left { padding-right:18px; border-right:1px solid var(--zc-border); }
.zc-shell .zc-a3-right { padding-left:18px; }
.zc-shell .zc-a3-colhead { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--zc-text); }
/* GENERIC live-update flash — any artifact card (ArtifactLiveCard base) adds .zc-card-flash to a cell
   the AI just changed, for a brief tenant-accent pulse so the user sees WHAT moved without the whole
   card blanking. Fades once (the base clears it after ~2.6s). */
.zc-shell .zc-card-flash {
    animation: zc-card-flash-kf 2.4s ease-out;
    border-radius: 8px;
}
@keyframes zc-card-flash-kf {
    0%   { background: color-mix(in srgb, var(--zc-tenant) 24%, transparent);
           box-shadow: 0 0 0 6px color-mix(in srgb, var(--zc-tenant) 24%, transparent); }
    70%  { background: color-mix(in srgb, var(--zc-tenant) 10%, transparent);
           box-shadow: 0 0 0 6px color-mix(in srgb, var(--zc-tenant) 10%, transparent); }
    100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}

/* GENERIC per-field undo/redo affordance — shows on a field the AI has changed this session (any card
   via ArtifactLiveCard.CanRevert). Mirrors the click-to-edit pen: subtle, brightens on hover. Clicking
   toggles the field between the AI's value (undo) and the prior value (redo). */
.zc-shell .zc-card-undo {
    font-size: 15px;
    cursor: pointer;
    opacity: 0.45;
    color: var(--zc-tenant);
    transition: opacity 0.12s ease, transform 0.12s ease;
    vertical-align: middle;
}
.zc-shell .zc-card-undo:hover { opacity: 1; transform: scale(1.12); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   TASK detail card — canvas-native, on the standard artifact pattern (matches Charter/Brainstorm).
   Shared header (zc-bb-head) + these zc-task-* sections. All colors via --zc- tokens.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* overflow-y:auto + min-height:0 — the card owns its own scroll, same as every sibling
   (.zc-bb, .zc-a3, .zc-artifact-detail, .zc-orca, .zc-dq). The expanded card body is
   deliberately `overflow:hidden` and hands its child `height:100%`, so a root without
   this is simply CLIPPED at the card edge with no scrollbar anywhere — a task with a
   long description or technical notes lost everything below the fold. .zc-task was the
   only artifact card missing the rule. min-height:0 matters: without it the flex child
   refuses to shrink below its content and overflow-y never engages. */
.zc-shell .zc-task { display:flex; flex-direction:column; gap:12px; min-width:min(400px,100%); max-width:100%; box-sizing:border-box; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.zc-shell .zc-task-loading { opacity:0.7; padding:8px 0; }
.zc-shell .zc-task-error { color:var(--zc-red); padding:8px 0; }

/* Title */
.zc-shell .zc-task-title { font-size:17px; font-weight:650; line-height:1.25; color:var(--zc-text); }
.zc-shell .zc-task-title-txt { cursor:text; border-radius:7px; }
.zc-shell .zc-task-title-txt:hover { color:var(--zc-tenant); }

/* Meta chip row */
.zc-shell .zc-task-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:12px; color:var(--zc-text-2); }
.zc-shell .zc-task-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 9px 2px 7px; border-radius:999px; font-size:11.5px; font-weight:600; border:1px solid transparent; }
.zc-shell .zc-task-chip .material-symbols-outlined { font-size:14px; }
.zc-shell .zc-task-chip.is-muted { color:var(--zc-text-2); background:var(--zc-surface-2); border-color:var(--zc-border); }
.zc-shell .zc-task-chip.is-new        { color:var(--zc-tone-indigo); background:color-mix(in srgb, var(--zc-tone-indigo) 14%, transparent); }
.zc-shell .zc-task-chip.is-triage     { color:var(--zc-tone-amber);  background:color-mix(in srgb, var(--zc-tone-amber) 15%, transparent); }
.zc-shell .zc-task-chip.is-prioritize { color:var(--zc-tone-violet); background:color-mix(in srgb, var(--zc-tone-violet) 14%, transparent); }
.zc-shell .zc-task-chip.is-solve      { color:var(--zc-tone-teal);   background:color-mix(in srgb, var(--zc-tone-teal) 15%, transparent); }
.zc-shell .zc-task-chip.is-execute    { color:var(--zc-tone-jade);   background:color-mix(in srgb, var(--zc-tone-jade) 15%, transparent); }
.zc-shell .zc-task-chip.is-closed     { color:var(--zc-text-2);      background:var(--zc-surface-2); }
.zc-shell .zc-task-chip.is-default    { color:var(--zc-text-2);      background:var(--zc-surface-2); }
.zc-shell .zc-task-chip.is-new, .zc-shell .zc-task-chip.is-triage, .zc-shell .zc-task-chip.is-prioritize,
.zc-shell .zc-task-chip.is-solve, .zc-shell .zc-task-chip.is-execute { cursor:pointer; }
/* Severity tint */
.zc-shell .zc-task-chip.zc-sev-low      { color:var(--zc-tone-teal);   background:color-mix(in srgb, var(--zc-tone-teal) 13%, transparent); }
.zc-shell .zc-task-chip.zc-sev-medium   { color:var(--zc-tone-amber);  background:color-mix(in srgb, var(--zc-tone-amber) 14%, transparent); }
.zc-shell .zc-task-chip.zc-sev-high     { color:var(--zc-tone-amber);  background:color-mix(in srgb, var(--zc-tone-amber) 22%, transparent); }
.zc-shell .zc-task-chip.zc-sev-critical { color:var(--zc-red);         background:var(--zc-red-bg); }
.zc-shell .zc-task-meta-date { display:inline-flex; align-items:center; gap:3px; color:var(--zc-text-3); font-size:11.5px; }
.zc-shell .zc-task-meta-date .material-symbols-outlined { font-size:13px; }

/* Sections */
.zc-shell .zc-task-sec { display:flex; flex-direction:column; gap:5px; padding-top:10px; border-top:1px solid var(--zc-border); }
.zc-shell .zc-task-sec-label { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--zc-text-3); }
.zc-shell .zc-task-val { font-size:13.5px; line-height:1.5; color:var(--zc-text); white-space:pre-wrap; word-break:break-word; cursor:text; border-radius:7px; padding:1px 0; }
.zc-shell .zc-task-empty { font-size:13px; color:var(--zc-text-4); font-style:italic; cursor:text; }

/* Classification grid */
.zc-shell .zc-task-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; }
.zc-shell .zc-task-field { display:flex; flex-direction:column; gap:3px; border-radius:8px; }
.zc-shell .zc-task-field .zc-gather-row-label { display:flex; align-items:center; gap:5px; }

/* Identity read-only rows */
.zc-shell .zc-task-idrows { display:flex; flex-direction:column; gap:2px; }
.zc-shell .zc-task-idrow { display:flex; justify-content:space-between; gap:10px; font-size:12px; }
.zc-shell .zc-task-idrow .k { color:var(--zc-text-3); }
.zc-shell .zc-task-idrow .v { font-family:var(--zc-mono, monospace); color:var(--zc-text-2); text-align:right; word-break:break-all; }

/* Created-date pill (in the meta row) — click to reveal the IDs/dates popover. Keeps the card clean;
   the GUID/folio/timestamps are on demand, not always-on clutter. */
.zc-shell .zc-task-metapill {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 6px 2px 8px; border-radius:999px;
    font-size:11.5px; color:var(--zc-text-3);
    background:transparent; border:1px solid transparent; cursor:pointer;
    transition:background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.zc-shell .zc-task-metapill:hover,
.zc-shell .zc-task-metapill.is-open { background:var(--zc-surface-2); border-color:var(--zc-border); color:var(--zc-text-2); }
.zc-shell .zc-task-metapill .material-symbols-outlined { font-size:13px; }
.zc-shell .zc-task-metapill-caret { opacity:0.6; margin-left:-1px; }
/* The revealed identity popover — the old Identity rows, on demand. */
.zc-shell .zc-task-idpop {
    display:flex; flex-direction:column; gap:2px;
    margin-top:-4px; padding:8px 11px;
    border:1px solid var(--zc-border); border-radius:9px;
    background:var(--zc-surface-2);
}

/* Footer */
.zc-shell .zc-task-foot { display:flex; align-items:center; justify-content:space-between; padding-top:9px; border-top:1px solid var(--zc-border); }
.zc-shell .zc-task-foot-id { font-family:var(--zc-mono, monospace); font-size:11px; color:var(--zc-text-3); }
.zc-shell .zc-task-foot-status { display:inline-flex; align-items:center; gap:10px; }
.zc-shell .zc-task-foot-hint { font-size:11px; color:var(--zc-text-3); }
.zc-shell .zc-task-foot-err { font-size:11px; color:var(--zc-red); }
.zc-shell .zc-task-foot-ok { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--zc-tone-jade); }
.zc-shell .zc-task-foot-ok .material-symbols-outlined { font-size:14px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   KPI Campaign Monitor dashboard (KpiMonitorCard). Portfolio analytics; --zc- tokens only.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.zc-shell .zc-kpi { display:flex; flex-direction:column; gap:14px; min-width:min(520px,100%); max-width:100%; box-sizing:border-box; }
/* Expanded: the dashboard is taller than the card — the card body is overflow:hidden by design, so
   .zc-kpi owns its own vertical scroll (fills the body, scrolls the header/tabs/table together).
   Scrollbar hidden (same pattern as the chat dock / rail) — scroll works, no visible bar. */
.zc-shell .zc-skill-card.is-expanded .zc-kpi {
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding-bottom:8px;
    scrollbar-width:none; -ms-overflow-style:none;
}
.zc-shell .zc-skill-card.is-expanded .zc-kpi::-webkit-scrollbar { width:0; height:0; display:none; }
.zc-shell .zc-kpi-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.zc-shell .zc-kpi-kicker { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--zc-tenant); }
.zc-shell .zc-kpi-kicker .material-symbols-outlined { font-size:17px; }
.zc-shell .zc-kpi-range { font-size:11.5px; color:var(--zc-text-3); }
.zc-shell .zc-kpi-loading { opacity:0.7; padding:10px 0; }
.zc-shell .zc-kpi-empty { color:var(--zc-text-3); padding:10px 0; }

/* Tabs — Portfolio Overview · Top Recipients · User Lookup (green-underline active, like the demo). */
.zc-shell .zc-kpi-tabs { display:flex; gap:4px; border-bottom:1px solid var(--zc-border); margin-top:-2px; }
.zc-shell .zc-kpi-tabs button { appearance:none; background:none; border:none; cursor:pointer;
    padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--zc-text-3);
    border-bottom:2px solid transparent; margin-bottom:-1px; transition:color 0.12s ease, border-color 0.12s ease; }
.zc-shell .zc-kpi-tabs button:hover { color:var(--zc-text-2); }
.zc-shell .zc-kpi-tabs button.is-active { color:var(--zc-tenant); border-bottom-color:var(--zc-tenant); }
.zc-shell .zc-kpi-panel { display:flex; flex-direction:column; gap:14px; }
.zc-shell .zc-kpi-panel.is-hidden { display:none; }

/* Empty-tab placeholder (Top Recipients / User Lookup, for now). */
.zc-shell .zc-kpi-placeholder { display:flex; align-items:center; gap:14px; padding:40px 24px;
    border:1px dashed var(--zc-border); border-radius:12px; color:var(--zc-text-3); }
.zc-shell .zc-kpi-placeholder .material-symbols-outlined { font-size:34px; color:var(--zc-text-4); }
.zc-shell .zc-kpi-placeholder b { display:block; color:var(--zc-text-2); font-size:14px; }
.zc-shell .zc-kpi-placeholder span { font-size:12.5px; }

/* Stat cards — label · big value · subtitle (matches the demo header). */
.zc-shell .zc-kpi-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.zc-shell .zc-kpi-stat { display:flex; flex-direction:column; gap:3px; padding:14px 16px; border:1px solid var(--zc-border); border-radius:12px; background:var(--zc-surface); }
.zc-shell .zc-kpi-stat-label { display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--zc-text-3); }
.zc-shell .zc-kpi-info { font-size:14px; color:var(--zc-text-4); cursor:help; transition:color 0.12s ease; }
.zc-shell .zc-kpi-info:hover { color:var(--zc-text-2); }
.zc-shell .zc-kpi-stat-value { font-size:26px; font-weight:700; color:var(--zc-text); line-height:1.15; }
.zc-shell .zc-kpi-stat-sub { font-size:12px; color:var(--zc-text-3); }
@media (max-width:760px) { .zc-shell .zc-kpi-stats { grid-template-columns:1fr; } }

/* Charts */
.zc-shell .zc-kpi-charts { display:grid; grid-template-columns:2fr 1fr; gap:12px; }
.zc-shell .zc-kpi-chart { border:1px solid var(--zc-border); border-radius:11px; background:var(--zc-surface); padding:11px 13px; min-width:0; }
.zc-shell .zc-kpi-chart-wide { grid-column:1 / -1; }
.zc-shell .zc-kpi-charts .zc-kpi-chart-wide:only-child { grid-column:1 / -1; }
.zc-shell .zc-kpi-chart-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--zc-text-3); margin-bottom:8px; }
/* Chart header row (title/subtitle + range dropdown), used by the Daily Awards chart. */
.zc-shell .zc-kpi-chart-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.zc-shell .zc-kpi-chart-head .zc-kpi-chart-label { font-size:14px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--zc-text); margin-bottom:0; }
.zc-shell .zc-kpi-chart-sub { font-size:11.5px; color:var(--zc-text-3); margin-top:2px; }
.zc-shell .zc-kpi-range-sel { font-size:12.5px; padding:5px 9px; border:1px solid var(--zc-border); border-radius:8px; background:var(--zc-surface); color:var(--zc-text); cursor:pointer; flex-shrink:0; }
.zc-shell .zc-kpi-chart-tools { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; }
.zc-shell .zc-kpi-chart-dl { display:inline-grid; place-items:center; width:30px; height:30px; border:1px solid var(--zc-border); border-radius:8px; background:var(--zc-surface); color:var(--zc-text-2); cursor:pointer; }
.zc-shell .zc-kpi-chart-dl:hover { border-color:var(--zc-tenant); color:var(--zc-tenant); }
.zc-shell .zc-kpi-chart-dl .material-symbols-outlined { font-size:18px; }
.zc-shell .zc-kpi-canvas { position:relative; height:220px; }
@media (max-width: 900px) { .zc-shell .zc-kpi-charts { grid-template-columns:1fr; } }

/* Per-campaign table */
.zc-shell .zc-kpi-sec-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--zc-text-3); }
.zc-shell .zc-kpi-table { display:flex; flex-direction:column; border:1px solid var(--zc-border); border-radius:11px; overflow:hidden; }
.zc-shell .zc-kpi-tr { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; align-items:center; gap:8px; padding:9px 13px; font-size:13px; border-top:1px solid var(--zc-border); }
.zc-shell .zc-kpi-tr:first-child { border-top:none; }
.zc-shell .zc-kpi-th { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--zc-text-3); background:var(--zc-surface-2); }
.zc-shell .zc-kpi-tr .num { text-align:right; font-variant-numeric:tabular-nums; }
.zc-shell .zc-kpi-cname { color:var(--zc-text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zc-shell .zc-kpi-chip { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600; color:var(--zc-text-2); background:var(--zc-surface-2); border:1px solid var(--zc-border); }
.zc-shell .zc-kpi-chip.zc-kpi-active { color:var(--zc-tone-jade); background:color-mix(in srgb, var(--zc-tone-jade) 14%, transparent); border-color:transparent; }
.zc-shell .zc-kpi-chip.zc-kpi-ended { color:var(--zc-text-3); }
.zc-shell .zc-kpi-chip.zc-kpi-scheduled { color:var(--zc-tone-indigo); background:color-mix(in srgb, var(--zc-tone-indigo) 15%, transparent); border-color:transparent; }

/* Campaigns table (replaces the mode/campaign charts) — summary line · search+tabs · sortable-ish table. */
.zc-shell .zc-kpi-camps-summary { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--zc-tenant); }
.zc-shell .zc-kpi-camps-summary b { color:var(--zc-text-4); font-weight:400; margin:0 3px; }
.zc-shell .zc-kpi-camps-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.zc-shell .zc-kpi-camps-search { display:flex; align-items:center; gap:6px; flex:1; min-width:200px;
    padding:7px 11px; border:1px solid var(--zc-border); border-radius:9px; background:var(--zc-surface); }
.zc-shell .zc-kpi-camps-search .material-symbols-outlined { font-size:17px; color:var(--zc-text-3); }
.zc-shell .zc-kpi-camps-search input { flex:1; border:none; background:none; outline:none; color:inherit; font-size:13px; min-width:0; }
.zc-shell .zc-kpi-camps-tabs { display:inline-flex; border:1px solid var(--zc-border); border-radius:9px; overflow:hidden; }
.zc-shell .zc-kpi-camps-tabs button { appearance:none; background:none; border:none; cursor:pointer;
    padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--zc-text-3); border-left:1px solid var(--zc-border); }
.zc-shell .zc-kpi-camps-tabs button:first-child { border-left:none; }
.zc-shell .zc-kpi-camps-tabs button:hover { color:var(--zc-text-2); }
.zc-shell .zc-kpi-camps-tabs button.is-active { color:var(--zc-text); background:var(--zc-surface-3, var(--zc-surface-2)); }

.zc-shell .zc-kpi-camptable { display:flex; flex-direction:column; border:1px solid var(--zc-border); border-radius:11px; overflow:hidden; }
.zc-shell .zc-kpi-ctr { display:grid; grid-template-columns:1.6fr 0.9fr 1.7fr 1.3fr 1fr 0.6fr 1fr; align-items:center; gap:10px;
    padding:11px 14px; font-size:13px; border-top:1px solid var(--zc-border); }
.zc-shell .zc-kpi-ctr:first-child { border-top:none; }
.zc-shell .zc-kpi-cth { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--zc-text-3); background:var(--zc-surface-2); }
.zc-shell .zc-kpi-ctr .num { text-align:right; font-variant-numeric:tabular-nums; }
.zc-shell .zc-kpi-cname { color:var(--zc-text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zc-shell .zc-kpi-cperiod, .zc-shell .zc-kpi-ctz { color:var(--zc-text-3); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zc-shell .zc-kpi-cempty { display:block; text-align:center; color:var(--zc-text-3); padding:16px; }

/* Top Recipients leaderboard (# · Name · Email · Total · Awards · Campaigns · Last reward). */
.zc-shell .zc-kpi-reciptable { display:flex; flex-direction:column; border:1px solid var(--zc-border); border-radius:11px; overflow:hidden; }
.zc-shell .zc-kpi-rtr { display:grid; grid-template-columns:0.5fr 1.5fr 2fr 1.1fr 0.8fr 1fr 1.2fr; align-items:center; gap:10px;
    padding:10px 14px; font-size:13px; border-top:1px solid var(--zc-border); }
.zc-shell .zc-kpi-rtr:first-child { border-top:none; }
.zc-shell .zc-kpi-rth { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--zc-text-3); background:var(--zc-surface-2); }
.zc-shell .zc-kpi-rtr .num { text-align:right; font-variant-numeric:tabular-nums; }
.zc-shell .zc-kpi-rank { color:var(--zc-text-4); font-weight:600; }
.zc-shell .zc-kpi-remail { color:var(--zc-text-3); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* clickable leaderboard row → jumps to User Lookup */
.zc-shell .zc-kpi-rtr-click { cursor:pointer; transition:background .12s ease; }
.zc-shell .zc-kpi-rtr-click:hover { background:var(--zc-surface-2); }

/* ── User Lookup tab ─────────────────────────────────────────────────────── */
/* Single non-shrinking column (mirrors .zc-kpi-panel): the tables take natural full
   height and the outer .zc-kpi invisible scroll carries the overflow — otherwise each
   table is a direct flex child of .zc-kpi and gets crushed (By-campaign → one row). */
.zc-shell .zc-kpi-lookup { display:flex; flex-direction:column; gap:14px; flex:0 0 auto; }
.zc-shell .zc-kpi-lookup > * { flex:0 0 auto; }
.zc-shell .zc-kpi-lookup-search { display:flex; align-items:center; gap:10px; }
.zc-shell .zc-kpi-search-box { position:relative; flex:1 1 auto; }
.zc-shell .zc-kpi-suggest { position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:20; display:flex; flex-direction:column; background:var(--zc-surface); border:1px solid var(--zc-border); border-radius:11px; box-shadow:0 10px 30px rgba(0,0,0,.14); overflow:hidden; max-height:320px; overflow-y:auto; scrollbar-width:none; }
.zc-shell .zc-kpi-suggest::-webkit-scrollbar { display:none; }
.zc-shell .zc-kpi-suggest-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:none; border-top:1px solid var(--zc-border); background:none; text-align:left; cursor:pointer; }
.zc-shell .zc-kpi-suggest-item:first-child { border-top:none; }
.zc-shell .zc-kpi-suggest-item:hover { background:var(--zc-surface-2); }
.zc-shell .zc-kpi-suggest-av { width:30px; height:30px; font-size:11px; flex-shrink:0; }
.zc-shell .zc-kpi-suggest-txt { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.zc-shell .zc-kpi-suggest-name { font-size:13px; font-weight:600; color:var(--zc-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zc-shell .zc-kpi-suggest-email { font-size:11.5px; color:var(--zc-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zc-shell .zc-kpi-suggest-coins { flex-shrink:0; font-size:11.5px; font-weight:700; color:var(--zc-tenant); font-variant-numeric:tabular-nums; }
.zc-shell .zc-kpi-lookup-search .zc-kpi-camps-search { flex:1 1 auto; }
.zc-shell .zc-kpi-lookup-btn { padding:8px 16px; border:none; border-radius:9px; background:var(--zc-tenant); color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
.zc-shell .zc-kpi-lookup-btn:disabled { opacity:.6; cursor:default; }
.zc-shell .zc-kpi-lookup-clear { background:none; border:1px solid var(--zc-border); border-radius:9px; padding:8px 14px; color:var(--zc-text-2); font-size:13px; font-weight:600; cursor:pointer; }
.zc-shell .zc-kpi-lookup-clear:hover { border-color:var(--zc-tenant); color:var(--zc-tenant); }
.zc-shell .zc-kpi-empty { padding:22px; text-align:center; color:var(--zc-text-3); font-size:13px; border:1px dashed var(--zc-border); border-radius:11px; }

.zc-shell .zc-kpi-user-head { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--zc-border); border-radius:12px; background:var(--zc-surface); }
.zc-shell .zc-kpi-avatar { width:48px; height:48px; border-radius:50%; background:var(--zc-tenant); color:#fff; display:grid; place-items:center; font-size:16px; font-weight:700; flex-shrink:0; }
.zc-shell .zc-kpi-user-name { font-size:16px; font-weight:700; color:var(--zc-text); }
.zc-shell .zc-kpi-user-email { font-size:13px; color:var(--zc-text-3); }

.zc-shell .zc-kpi-sec-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--zc-text-3); }

/* by-campaign table (4 cols) */
.zc-shell .zc-kpi-table { display:flex; flex-direction:column; border:1px solid var(--zc-border); border-radius:11px; overflow:hidden; }
.zc-shell .zc-kpi-utr { display:grid; grid-template-columns:2fr 1fr 1.2fr 1.4fr; align-items:center; gap:10px; padding:10px 14px; font-size:13px; border-top:1px solid var(--zc-border); }
.zc-shell .zc-kpi-utr:first-child { border-top:none; }
.zc-shell .zc-kpi-uth { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--zc-text-3); background:var(--zc-surface-2); }
.zc-shell .zc-kpi-utr .num { text-align:right; font-variant-numeric:tabular-nums; }
.zc-shell .zc-kpi-cname { font-weight:600; color:var(--zc-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* timeline header + pager */
.zc-shell .zc-kpi-lookup-tlhead { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.zc-shell .zc-kpi-tl-left { display:inline-flex; align-items:center; gap:10px; }
.zc-shell .zc-kpi-tl-dl { display:inline-flex; align-items:center; gap:4px; text-decoration:none; font-size:11px; font-weight:700; color:var(--zc-tenant); border:1px solid var(--zc-border); border-radius:7px; padding:3px 8px; }
.zc-shell .zc-kpi-tl-dl:hover { border-color:var(--zc-tenant); background:color-mix(in srgb, var(--zc-tenant) 8%, transparent); }
.zc-shell .zc-kpi-tl-dl .material-symbols-outlined { font-size:14px; }
.zc-shell .zc-kpi-pager { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--zc-text-3); font-variant-numeric:tabular-nums; }
.zc-shell .zc-kpi-pager button { padding:4px 10px; border:1px solid var(--zc-border); border-radius:7px; background:var(--zc-surface); color:var(--zc-tenant); font-size:12px; font-weight:600; cursor:pointer; }
.zc-shell .zc-kpi-pager button:disabled { opacity:.5; cursor:default; color:var(--zc-text-4); }

/* timeline table (5 cols) */
.zc-shell .zc-kpi-tltable { display:flex; flex-direction:column; border:1px solid var(--zc-border); border-radius:11px; overflow:hidden; }
.zc-shell .zc-kpi-tltr { display:grid; grid-template-columns:1.8fr 1.8fr 1.1fr 1fr 1fr; align-items:center; gap:10px; padding:9px 14px; font-size:12.5px; border-top:1px solid var(--zc-border); }
.zc-shell .zc-kpi-tltr:first-child { border-top:none; }
.zc-shell .zc-kpi-tlth { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--zc-text-3); background:var(--zc-surface-2); }
.zc-shell .zc-kpi-tltr .num { text-align:right; font-variant-numeric:tabular-nums; }
.zc-shell .zc-kpi-tltime { color:var(--zc-text-2); font-variant-numeric:tabular-nums; }
.zc-shell .zc-kpi-dir { font-size:11px; font-weight:700; color:var(--zc-text-3); }

/* ── Exports tab ─────────────────────────────────────────────────────────── */
.zc-shell .zc-kpi-exp-intro { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--zc-border); border-radius:12px; background:var(--zc-surface); }
.zc-shell .zc-kpi-exp-intro .material-symbols-outlined { font-size:26px; color:var(--zc-tenant); }
.zc-shell .zc-kpi-exp-intro b { display:block; font-size:14px; color:var(--zc-text); }
.zc-shell .zc-kpi-exp-intro span { font-size:12.5px; color:var(--zc-text-3); }
.zc-shell .zc-kpi-exp-controls { display:flex; flex-wrap:wrap; gap:18px; }
.zc-shell .zc-kpi-exp-seg { display:inline-flex; align-items:center; gap:8px; }
.zc-shell .zc-kpi-exp-seglabel { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--zc-text-3); }
.zc-shell .zc-kpi-exp-seg button { padding:6px 13px; border:1px solid var(--zc-border); background:var(--zc-surface); color:var(--zc-text-2); font-size:12.5px; font-weight:600; cursor:pointer; }
.zc-shell .zc-kpi-exp-seg button:first-of-type { border-radius:8px 0 0 8px; }
.zc-shell .zc-kpi-exp-seg button:last-of-type { border-radius:0 8px 8px 0; border-left:none; }
.zc-shell .zc-kpi-exp-seg button.is-active { background:var(--zc-tenant); border-color:var(--zc-tenant); color:#fff; }

.zc-shell .zc-kpi-exp-list { display:flex; flex-direction:column; border:1px solid var(--zc-border); border-radius:12px; overflow:hidden; }
.zc-shell .zc-kpi-exp-item { display:flex; align-items:center; gap:14px; padding:14px 16px; border-top:1px solid var(--zc-border); }
.zc-shell .zc-kpi-exp-item:first-child { border-top:none; }
.zc-shell .zc-kpi-exp-meta { flex:1 1 auto; min-width:0; }
.zc-shell .zc-kpi-exp-title { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--zc-text); }
.zc-shell .zc-kpi-exp-badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--zc-tenant); background:color-mix(in srgb, var(--zc-tenant) 14%, transparent); padding:2px 7px; border-radius:6px; }
.zc-shell .zc-kpi-exp-desc { font-size:12px; color:var(--zc-text-3); margin-top:2px; }
.zc-shell .zc-kpi-exp-btn { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; text-decoration:none; padding:8px 15px; border-radius:9px; background:var(--zc-tenant); color:#fff; font-size:12.5px; font-weight:700; cursor:pointer; }
.zc-shell .zc-kpi-exp-btn:hover { filter:brightness(1.06); }
.zc-shell .zc-kpi-exp-btn .material-symbols-outlined { font-size:17px; }
.zc-shell .zc-kpi-exp-note { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--zc-text-3); }
.zc-shell .zc-kpi-exp-note .material-symbols-outlined { font-size:15px; }

/* Structured Budget panel — rough plan sizing (per-person / per-week / ~trips / implied $/trip). */
.zc-shell .zc-a3-budget { margin-top:4px; padding:9px 11px; border:1px solid var(--zc-border); border-radius:9px; background:var(--zc-surface-2); cursor:pointer; }
.zc-shell .zc-a3-budget:hover { border-color:var(--zc-tenant); }
.zc-shell .zc-a3-budget-total { font-size:18px; font-weight:800; color:var(--zc-text); display:flex; align-items:baseline; gap:6px; }
.zc-shell .zc-a3-budget-total span { font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--zc-text-3); }
.zc-shell .zc-a3-budget-stats { display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:5px; font-size:12px; color:var(--zc-text-2); }
.zc-shell .zc-a3-budget-stats b { color:var(--zc-text); font-weight:700; }
.zc-shell .zc-a3-budget-stats .hl { color:var(--zc-tenant); }
.zc-shell .zc-a3-budget-stats .hl b { color:var(--zc-tenant); }
.zc-shell .zc-a3-budget-note { margin-top:6px; font-size:11.5px; color:var(--zc-text-3); }
/* Metrics → KPI tiles (name · baseline → target · unit). */
.zc-shell .zc-a3-kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:7px; margin-top:4px; cursor:pointer; }
.zc-shell .zc-a3-kpi { padding:8px 10px; border:1px solid var(--zc-border); border-radius:8px; background:var(--zc-surface-2); }
.zc-shell .zc-a3-kpis:hover .zc-a3-kpi { border-color:color-mix(in srgb, var(--zc-tenant) 40%, var(--zc-border)); }
.zc-shell .zc-a3-kpi-name { font-size:11px; font-weight:700; color:var(--zc-text-2); text-transform:uppercase; letter-spacing:.03em; }
.zc-shell .zc-a3-kpi-vals { display:flex; align-items:baseline; gap:4px; margin-top:3px; font-size:13px; }
.zc-shell .zc-a3-kpi-vals .base { color:var(--zc-text-3); }
.zc-shell .zc-a3-kpi-vals .arrow { color:var(--zc-text-3); }
.zc-shell .zc-a3-kpi-vals .target { font-weight:800; color:var(--zc-tenant); }
.zc-shell .zc-a3-kpi-vals .unit { font-size:11px; color:var(--zc-text-3); }
/* Campaign Area panel — full-width mini-map below the A3 columns. MapLibre needs a sized box. */
.zc-shell .zc-a3-area { margin-top:16px; }
.zc-shell .zc-a3-map { margin-top:7px; height:260px; border-radius:10px; overflow:hidden; border:1px solid var(--zc-border); background:var(--zc-surface-2); }
.zc-shell .zc-a3-map .maplibregl-ctrl-group { border-radius:8px; }
.zc-shell .zc-a3-sec { display:flex; flex-direction:column; gap:3px; }
.zc-shell .zc-a3-sec-label { display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--zc-text-3); }
.zc-shell .zc-a3-sec-label .n { color:var(--zc-jade,#00D68F); }
.zc-shell .zc-a3-sec-label .field { margin-left:auto; font-family:var(--zc-mono,monospace); font-size:9.5px; color:var(--zc-text-3); opacity:.6; text-transform:none; letter-spacing:0; }
.zc-shell .zc-a3-val { font-size:13px; color:var(--zc-text); }

.zc-shell .zc-a3-text { cursor:text; }
.zc-shell .zc-a3-text .zc-a3-pen { opacity:0; font-size:13px; color:var(--zc-blue,#3B82F6); vertical-align:-2px; margin-left:4px; }
.zc-shell .zc-a3-text:hover .zc-a3-pen { opacity:.7; }
/* Rendered markdown inside an A3 section — TIGHT + visual (bullets, bold, small tables) so a
   section reads as structured content, not a paragraph slab. Compact spacing throughout. */
.zc-shell .zc-a3-md { font-size:13px; color:var(--zc-text); line-height:1.45; }
.zc-shell .zc-a3-md > :first-child { margin-top:0; }
.zc-shell .zc-a3-md > :last-child { margin-bottom:0; }
.zc-shell .zc-a3-md p { margin:0 0 5px; }
.zc-shell .zc-a3-md ul, .zc-shell .zc-a3-md ol { margin:2px 0 5px; padding-left:18px; }
.zc-shell .zc-a3-md li { margin:1px 0; }
.zc-shell .zc-a3-md li::marker { color:var(--zc-text-3); }
.zc-shell .zc-a3-md strong { font-weight:700; color:var(--zc-text); }
.zc-shell .zc-a3-md code { font-family:var(--zc-mono,monospace); font-size:12px; background:var(--zc-surface-2); padding:1px 4px; border-radius:4px; }
.zc-shell .zc-a3-md h1, .zc-shell .zc-a3-md h2, .zc-shell .zc-a3-md h3, .zc-shell .zc-a3-md h4 { font-size:12.5px; font-weight:700; margin:6px 0 3px; text-transform:none; letter-spacing:0; }
.zc-shell .zc-a3-md table { border-collapse:collapse; margin:4px 0; font-size:12px; }
.zc-shell .zc-a3-md th, .zc-shell .zc-a3-md td { border:1px solid var(--zc-border); padding:3px 7px; text-align:left; }
.zc-shell .zc-a3-md th { background:var(--zc-surface-2); font-weight:700; }
.zc-shell .zc-a3-md .zc-a3-pen { opacity:0; font-size:13px; color:var(--zc-blue,#3B82F6); margin-left:4px; }
.zc-shell .zc-a3-md:hover .zc-a3-pen { opacity:.7; }
.zc-shell .zc-a3-empty { cursor:pointer; color:var(--zc-text-3); font-style:italic; font-size:12.5px; }
.zc-shell .zc-a3-empty:hover { color:var(--zc-blue,#3B82F6); }

.zc-shell .zc-a3-inline { display:flex; gap:14px; flex-wrap:wrap; }
.zc-shell .zc-a3-mini { display:flex; flex-direction:column; gap:1px; font-size:12.5px; }
.zc-shell .zc-a3-mini label { font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--zc-text-3); }
.zc-shell .zc-a3-kpi { display:flex; flex-direction:column; align-items:flex-start; padding:6px 12px; border-radius:var(--zc-r-xs,8px); background:var(--zc-surface-2); min-width:84px; }
.zc-shell .zc-a3-kpi b { font-size:18px; font-weight:700; color:var(--zc-jade,#00D68F); line-height:1.1; }
.zc-shell .zc-a3-kpi label { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--zc-text-3); }

.zc-shell .zc-a3-timeline { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--zc-text-2); }
.zc-shell .zc-a3-tl-cap { font-weight:600; color:var(--zc-text); white-space:nowrap; }
.zc-shell .zc-a3-tl-bar { flex:1; height:6px; border-radius:999px; background:var(--zc-surface-3); overflow:hidden; }
.zc-shell .zc-a3-tl-fill { display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--zc-jade,#00D68F),#3ee0a8); }
.zc-shell .zc-a3-tl-days { white-space:nowrap; color:var(--zc-text-3); }

.zc-shell .zc-a3-budget { display:flex; align-items:center; gap:10px; }
.zc-shell .zc-a3-bud-bar { flex:1; height:8px; border-radius:999px; background:var(--zc-surface-3); overflow:hidden; }
.zc-shell .zc-a3-bud-fill { display:block; height:100%; background:linear-gradient(90deg,var(--zc-blue,#3B82F6),#7aa9f7); }
.zc-shell .zc-a3-bud-cap { font-size:12px; color:var(--zc-text-2); white-space:nowrap; }
.zc-shell .zc-a3-edit-hint { cursor:pointer; color:var(--zc-text-3); font-style:italic; }
.zc-shell .zc-a3-edit-hint:hover { color:var(--zc-blue,#3B82F6); }

.zc-shell .zc-a3-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; padding-top:12px; border-top:1px solid var(--zc-border); }
.zc-shell .zc-a3-ready { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.zc-shell .zc-a3-ready-line { display:flex; justify-content:space-between; font-size:12px; color:var(--zc-text-2); }
.zc-shell .zc-a3-meter { height:7px; border-radius:999px; background:var(--zc-surface-3); overflow:hidden; }
.zc-shell .zc-a3-meter > span { display:block; height:100%; background:linear-gradient(90deg,var(--zc-jade,#00D68F),#3ee0a8); }
.zc-shell .zc-a3-missing { font-size:11.5px; color:var(--zc-text-3); }
.zc-shell .zc-a3-missing b { color:var(--zc-amber,#F59E0B); font-weight:600; }
.zc-shell .zc-a3-ready-btn { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:var(--zc-r-xs,8px); border:0; background:var(--zc-jade,#00D68F); color:#04140d; font-weight:600; font-size:12.5px; cursor:pointer; white-space:nowrap; }
.zc-shell .zc-a3-ready-btn:disabled { opacity:.4; cursor:not-allowed; }
.zc-shell .zc-a3-foot-actions { display:flex; align-items:center; gap:8px; }
.zc-shell .zc-a3-savenote { font-size:11px; color:var(--zc-text-3); text-align:right; }
.zc-shell .zc-a3-savenote.err { color:var(--zc-red,#dc3545); }
.zc-shell .zc-a3-savenote.ok { color:var(--zc-jade,#00D68F); }

/* ── Brainstorm idea-map board (core.brainstormer detail) ──────────────────── */
.zc-shell .zc-bb { display:flex; flex-direction:column; gap:12px; min-width:min(360px,100%); max-width:100%; box-sizing:border-box; overflow-y:auto; }
.zc-shell .zc-bb.is-wide { min-width:min(760px,100%); }
.zc-shell .zc-bb-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.zc-shell .zc-bb-kicker { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--zc-text-2); }
.zc-shell .zc-bb-kicker .material-symbols-outlined { color:var(--zc-amber,#F59E0B); font-size:17px; }
.zc-shell .zc-bb-title { font-weight:700; font-size:16px; color:var(--zc-text); }
.zc-shell .zc-bb-seed { display:flex; gap:8px; align-items:flex-start; padding:9px 11px; background:var(--zc-surface-2); border-radius:var(--zc-r-sm,12px); border-left:2px solid var(--zc-amber,#F59E0B); cursor:text; }
.zc-shell .zc-bb-seed .material-symbols-outlined { color:var(--zc-amber,#F59E0B); font-size:18px; }
.zc-shell .zc-bb-seed-q { font-style:italic; color:var(--zc-text); }
.zc-shell .zc-bb-seed .zc-gather-row-edit-input { flex:1; }
.zc-shell .zc-bb-counts { display:flex; gap:14px; font-size:12px; color:var(--zc-text-2); }
.zc-shell .zc-bb-counts b { color:var(--zc-text); }
.zc-shell .zc-bb-section-label { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--zc-text-3); margin-top:2px; }

.zc-shell .zc-bb-directions { display:flex; flex-direction:column; gap:6px; padding:11px; border-radius:var(--zc-r-sm,12px);
    background:linear-gradient(180deg,rgba(245,158,11,.07),rgba(245,158,11,.02)); border:1px solid rgba(245,158,11,.22); }
.zc-shell .zc-bb-direction { display:flex; gap:8px; align-items:center; }
.zc-shell .zc-bb-direction .material-symbols-outlined { color:var(--zc-amber,#F59E0B); font-size:17px; }
.zc-shell .zc-bb-direction .txt { font-weight:500; }
.zc-shell .zc-bb-direction .theme { margin-left:auto; font-size:11px; color:var(--zc-text-3); }

.zc-shell .zc-bb-forest { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.zc-shell .zc-bb-theme { background:var(--zc-surface-2); border:1px solid var(--zc-border); border-radius:var(--zc-r-sm,12px); padding:10px 11px; display:flex; flex-direction:column; gap:7px; }
.zc-shell .zc-bb-theme.is-new { border-style:dashed; justify-content:center; align-items:center; color:var(--zc-text-3); cursor:pointer; min-height:60px; }
.zc-shell .zc-bb-theme-hd { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.zc-shell .zc-bb-theme-hd .dot { width:8px; height:8px; border-radius:50%; }
.zc-shell .zc-bb-theme-hd .n { margin-left:auto; font-size:10px; color:var(--zc-text-3); }
.zc-shell .zc-bb-idea { display:flex; gap:6px; align-items:flex-start; font-size:12.5px; color:var(--zc-text); padding:6px 8px; border-radius:7px; background:var(--zc-surface); border:1px solid var(--zc-border); }
.zc-shell .zc-bb-idea.star { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.06); }
.zc-shell .zc-bb-idea .zc-bb-star { font-size:15px; color:var(--zc-amber,#F59E0B); flex-shrink:0; cursor:pointer; }
.zc-shell .zc-bb-idea .txt { flex:1; min-width:0; }
.zc-shell .zc-bb-add { font-size:11.5px; color:var(--zc-text-3); cursor:pointer; font-style:italic; }
.zc-shell .zc-bb-add:hover { color:var(--zc-jade,#00D68F); }

.zc-shell .zc-bb-synthesis { font-size:13px; color:var(--zc-text-2); padding:10px 12px; background:var(--zc-surface-2); border-radius:var(--zc-r-sm,12px); cursor:text; }
.zc-shell .zc-bb-synthesis .zc-gather-row-edit-input { width:100%; }
.zc-shell .zc-bb-empty { color:var(--zc-text-3); font-style:italic; }
.zc-shell .zc-bb-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--zc-border); }
.zc-shell .zc-bb-foot-left { display:flex; gap:14px; align-items:center; font-size:12px; color:var(--zc-text-3); }
.zc-shell .zc-bb-savenote { color:var(--zc-text-3); }
.zc-shell .zc-bb-savenote.ok { color:var(--zc-jade,#00D68F); display:inline-flex; align-items:center; gap:3px; }
.zc-shell .zc-bb-cta { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:var(--zc-r-xs,8px); border:0; background:var(--zc-jade,#00D68F); color:#04140d; font-weight:600; font-size:12.5px; cursor:pointer; white-space:nowrap; }
.zc-shell .zc-bb-cta:disabled { opacity:.45; cursor:default; }
.zc-shell .zc-bb-cta.ghost { background:transparent; color:var(--zc-text-2); border:1px solid var(--zc-border); }
.zc-shell .zc-bb-foot-right { display:flex; align-items:center; gap:8px; }
.zc-shell .zc-bb-savenote.warn { color:var(--zc-amber,#F59E0B); display:inline-flex; align-items:center; gap:3px; }
/* Click-to-edit affordance on idea text + theme names */
.zc-shell .zc-bb-edit-txt { cursor:text; border-radius:4px; }
.zc-shell .zc-bb-edit-txt:hover { background:var(--zc-surface-2); box-shadow:0 0 0 3px var(--zc-surface-2); }
.zc-shell .zc-bb-idea .zc-bb-del { font-size:14px; color:var(--zc-text-3); cursor:pointer; flex-shrink:0; opacity:0; transition:opacity .12s; }
.zc-shell .zc-bb-idea:hover .zc-bb-del { opacity:1; }
.zc-shell .zc-bb-idea .zc-bb-del:hover { color:var(--zc-red,#dc3545); }
.zc-shell .zc-bb-idea textarea.txt { width:100%; resize:none; }
/* Status chip → archive/reopen menu */
.zc-shell .zc-bb-head-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
/* Header controls BLEND with the card: uniform height/radius, quiet by default; primary actions
   carry a soft tenant-accent tint rather than a loud solid fill. Reads as part of the card chrome
   (same visual family as the card's collapse control), not stickers laid on top. */
.zc-shell .zc-bb-mini-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    height:28px; padding:0 11px; border-radius:8px;
    border:1px solid transparent; background:transparent;
    color:var(--zc-text-2); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.zc-shell .zc-bb-mini-btn:hover { background:var(--zc-surface-2); color:var(--zc-text); }
.zc-shell .zc-bb-mini-btn:disabled { opacity:.5; cursor:default; }
.zc-shell .zc-bb-mini-btn .material-symbols-outlined { font-size:16px; }
/* Icon-only control (⋯) — square, quiet, matches the card's collapse button footprint. */
.zc-shell .zc-bb-mini-btn.is-icon { width:28px; padding:0; }
/* Primary action (config action buttons, e.g. Create Campaign) — soft accent, not a solid slab. */
.zc-shell .zc-bb-mini-btn.is-primary {
    color:var(--zc-tenant);
    background:color-mix(in srgb, var(--zc-tenant) 12%, transparent);
    border-color:color-mix(in srgb, var(--zc-tenant) 26%, transparent);
}
.zc-shell .zc-bb-mini-btn.is-primary:hover {
    background:color-mix(in srgb, var(--zc-tenant) 20%, transparent);
    color:var(--zc-tenant);
}
/* Reserve space on the right so the header's actions clear the card's absolute collapse button
   (top:10px; right:12px) in expanded view — no more ⋯ tucked under the ⤡. Applies to every
   artifact card that uses the shared header. */
.zc-shell .zc-skill-card.is-expanded .zc-bb-head { padding-right: 40px; }
.zc-shell .zc-bb-status { position:relative; }
.zc-shell .zc-bb-status .zc-artifact-chip { display:inline-flex; align-items:center; gap:1px; border:0; cursor:pointer; font:inherit; }
.zc-shell .zc-bb-status-menu { position:absolute; top:calc(100% + 4px); right:0; z-index:30; min-width:130px; background:var(--zc-surface); border:1px solid var(--zc-border); border-radius:var(--zc-r-sm,10px); box-shadow:0 8px 24px rgba(0,0,0,.18); padding:4px; }
.zc-shell .zc-bb-status-menu button { display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border:0; background:transparent; color:var(--zc-text); font-size:12.5px; text-align:left; cursor:pointer; border-radius:6px; white-space:nowrap; }
.zc-shell .zc-bb-status-menu button:hover { background:var(--zc-surface-2); }
.zc-shell .zc-bb-status-menu button .material-symbols-outlined { font-size:16px; color:var(--zc-text-3); }
/* Shared artifact-card header: ⋯ overflow menu + soft click-catcher + danger (Delete) row. */
.zc-shell .zc-bb-backdrop { position:fixed; inset:0; z-index:20; background:transparent; }
.zc-shell .zc-bb-more-menu { min-width:150px; }
.zc-shell .zc-bb-status-menu button.zc-bb-more-danger { color:var(--zc-red,#dc3545); }
.zc-shell .zc-bb-status-menu button.zc-bb-more-danger .material-symbols-outlined { color:var(--zc-red,#dc3545); }

/* ─── LaunchConfigCard — Monitor Dashboard demo styling ────────────────────
   The card reuses the zc-a3-* structural classes (sections, id-fields, ready
   meter) from the Charter card and adds zc-lc-* for the type-specific config
   preview (read-only tables + kv blocks). Kept minimal — the demo layout is
   dense info-rich; polish comes in a later pass. */
.zc-shell .zc-lc { }
.zc-shell .zc-lc-row { display:flex; flex-wrap:wrap; gap:16px 24px; align-items:baseline; padding:2px 0; }
.zc-shell .zc-lc-cfg-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin:6px 0 10px; }
.zc-shell .zc-lc-cfg-block { border:1px solid var(--zc-border-1, #e2e6ea); border-radius:8px; padding:8px 10px; background:var(--zc-surface-1, #fafbfc); }
.zc-shell .zc-lc-cfg-h { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--zc-text-3); margin:6px 0 4px; }
.zc-shell .zc-lc-cfg-kv { display:flex; justify-content:space-between; gap:8px; padding:2px 0; font-size:12px; color:var(--zc-text-2); }
.zc-shell .zc-lc-cfg-kv b { font-weight:600; color:var(--zc-text-1); }
.zc-shell .zc-lc-cfg-kv span { font-variant-numeric:tabular-nums; }
.zc-shell .zc-lc-cfg-tbl { width:100%; border-collapse:collapse; margin:4px 0 10px; font-size:11.5px; }
.zc-shell .zc-lc-cfg-tbl th { text-align:left; padding:4px 8px; font-weight:700; color:var(--zc-text-3); border-bottom:1px solid var(--zc-border-1, #e2e6ea); }
.zc-shell .zc-lc-cfg-tbl td { padding:3px 8px; border-bottom:1px solid var(--zc-border-1, #e2e6ea); font-variant-numeric:tabular-nums; }
.zc-shell .zc-lc-cfg-tbl td.hl { font-weight:700; color:var(--zc-jade, #00D68F); }
.zc-shell .zc-lc-cfg-note { font-size:12px; color:var(--zc-text-3); padding:6px 0; }
.zc-shell .zc-lc-raw { font-family:var(--zc-mono, monospace); font-size:11px; padding:8px 10px; background:var(--zc-surface-1, #f7f8f9); border-radius:6px; overflow-x:auto; max-height:260px; }

/* ── Composer: generic Composer document card (Tiptap editor over Body) ─────── */
.zc-shell .zc-composer-toolbar { display:flex; align-items:center; gap:10px; margin:6px 0 8px; }
.zc-shell .zc-comp-btn { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
    padding:4px 10px; border-radius:7px; cursor:pointer; border:1px solid var(--zc-border-1, #e2e6ea);
    background:var(--zc-surface-1, #fafbfc); color:var(--zc-text-2); }
.zc-shell .zc-comp-btn:hover { border-color:var(--zc-accent, #7C3AED); color:var(--zc-text-1); }
.zc-shell .zc-comp-btn.primary { background:var(--zc-accent, #7C3AED); border-color:var(--zc-accent, #7C3AED); color:#fff; }
.zc-shell .zc-comp-btn .material-symbols-outlined { font-size:15px; }
.zc-shell .zc-comp-save { margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--zc-text-3); }
.zc-shell .zc-comp-right { margin-left:auto; display:inline-flex; align-items:center; gap:8px; }
.zc-shell .zc-comp-wc { font-size:11px; color:var(--zc-text-3); font-variant-numeric:tabular-nums; }

/* Fill the card: the expanded shell gives .zc-a3 height:100%, so the doc grows to
   consume the space left after the header + toolbar (kills the dead space at the
   bottom). The editor (FillHeight) fills the doc and scrolls INTERNALLY. */
.zc-shell .zc-composer { flex:1 1 auto; min-height:0; }
.zc-shell .zc-composer-doc { display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
    border:1px solid var(--zc-border-1, #e2e6ea); border-radius:10px;
    background:var(--zc-surface-0, #fff); overflow:hidden; }
.zc-shell .zc-composer-doc .tiptap-editor-wrapper,
.zc-shell .zc-composer-doc .tiptap-viewer-container { flex:1 1 auto; min-height:0; }
.zc-shell .zc-composer-doc .tiptap-viewer-container { overflow-y:auto; }

/* Branded letterhead at the top of the rendered doc (view mode) — previews the export. */
.zc-shell .zc-composer-letterhead { display:flex; align-items:center; gap:14px; flex:0 0 auto;
    padding:16px 26px 12px; border-bottom:2px solid var(--zc-jade,#00D68F); }
.zc-shell .zc-composer-letterhead img { height:34px; width:auto; object-fit:contain; }
.zc-shell .zc-composer-letterhead .zc-lh-name { font-size:14px; font-weight:700; color:var(--zc-text); line-height:1.2; }
.zc-shell .zc-composer-letterhead .zc-lh-sub { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--zc-text-3); margin-top:2px; }

/* Report typography — a clean document read for the rendered markdown. */
.zc-shell .zc-composer-doc .tiptap-rendered-content { padding:22px 26px 28px; color:var(--zc-text); font-size:14px; line-height:1.65; }
.zc-shell .zc-composer-doc .tiptap-rendered-content > :first-child { margin-top:0; }
.zc-shell .zc-composer-doc .tiptap-rendered-content h1 { font-size:22px; font-weight:800; margin:0 0 6px; padding-bottom:6px; border-bottom:1px solid var(--zc-border); }
.zc-shell .zc-composer-doc .tiptap-rendered-content h2 { font-size:16.5px; font-weight:700; margin:22px 0 8px; }
.zc-shell .zc-composer-doc .tiptap-rendered-content h3 { font-size:13.5px; font-weight:700; margin:16px 0 5px; color:var(--zc-text-2); }
.zc-shell .zc-composer-doc .tiptap-rendered-content p { margin:0 0 10px; }
.zc-shell .zc-composer-doc .tiptap-rendered-content ul,
.zc-shell .zc-composer-doc .tiptap-rendered-content ol { margin:0 0 12px 22px; padding:0; }
.zc-shell .zc-composer-doc .tiptap-rendered-content li { margin:3px 0; }
.zc-shell .zc-composer-doc .tiptap-rendered-content strong { font-weight:700; color:var(--zc-text); }
.zc-shell .zc-composer-doc .tiptap-rendered-content table { border-collapse:collapse; width:100%; margin:10px 0 14px; font-size:12.5px; }
.zc-shell .zc-composer-doc .tiptap-rendered-content th { background:var(--zc-surface-2); text-align:left; padding:6px 9px; border:1px solid var(--zc-border); font-weight:700; }
.zc-shell .zc-composer-doc .tiptap-rendered-content td { padding:5px 9px; border:1px solid var(--zc-border); vertical-align:top; }
.zc-shell .zc-composer-doc .tiptap-rendered-content blockquote { border-left:3px solid var(--zc-jade,#00D68F); padding:4px 14px; margin:10px 0; background:var(--zc-surface-2); color:var(--zc-text-2); border-radius:0 6px 6px 0; }
.zc-shell .zc-composer-doc .tiptap-rendered-content hr { border:none; border-top:1px solid var(--zc-border); margin:18px 0; }
.zc-shell .zc-composer-doc .tiptap-rendered-content code { font-size:12px; background:var(--zc-surface-2); padding:1px 5px; border-radius:4px; }

/* ── LaunchConfig: step-wise "determining type" state ─────────────────────── */
.zc-shell .zc-lc-typewait { display:flex; align-items:center; gap:8px; padding:10px 12px; font-size:12px;
    color:var(--zc-text-3); background:var(--zc-surface-1, #fafbfc); border:1px dashed var(--zc-border-1, #e2e6ea); border-radius:8px; }
.zc-shell .zc-lc-typewait .zc-spin { font-size:18px; color:var(--zc-accent, #6366F1); animation:zc-lc-spin 1.1s linear infinite; }
@keyframes zc-lc-spin { to { transform:rotate(360deg); } }

/* ── LaunchConfig: streak / challenge graphic ─────────────────────────────── */
.zc-shell .zc-lc-streak { --streak-accent:#F59E0B; margin:6px 0 12px; padding:10px 12px; border-radius:10px;
    border:1px solid color-mix(in srgb, var(--streak-accent) 35%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--streak-accent) 12%, transparent), transparent 70%); }
.zc-shell .zc-lc-streak-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.zc-shell .zc-lc-streak-badge { font-size:20px; color:var(--streak-accent); }
.zc-shell .zc-lc-streak-title { font-weight:700; font-size:13px; }
.zc-shell .zc-lc-streak-goal { margin-left:auto; font-size:11.5px; font-weight:700; color:var(--streak-accent);
    padding:2px 8px; border-radius:10px; background:color-mix(in srgb, var(--streak-accent) 16%, transparent); }
.zc-shell .zc-lc-streak-pips { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.zc-shell .zc-lc-pip { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 4px;
    border-radius:7px; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
    color:var(--streak-accent); background:color-mix(in srgb, var(--streak-accent) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--streak-accent) 40%, transparent); }
.zc-shell .zc-lc-pip .material-symbols-outlined { font-size:15px; }
.zc-shell .zc-lc-pip.is-milestone { background:color-mix(in srgb, var(--streak-accent) 30%, transparent); }
.zc-shell .zc-lc-pip.is-finish { color:#fff; background:var(--streak-accent); border-color:var(--streak-accent); }
.zc-shell .zc-lc-cfg-modes { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.zc-shell .zc-lc-mode-chip { font-size:10.5px; padding:2px 7px; border-radius:9px; color:var(--zc-text-2);
    background:var(--zc-surface-2, #eef1f4); border:1px solid var(--zc-border-1, #e2e6ea); }


/* ─────────────────────────────────────────────────────────────────────────────
   ORCA board (.zc-orca-*) — the four-lane Objectives→Risks→Controls→Assurance
   catalog card (OrcaBoard.razor). Lane identities: O=blue R=amber C=jade A=cyan.
   Gap-flagged items get the red treatment; fully-traced items get a jade edge.
   Modeled on the .zc-bb-* brainstorm board. See ZybronSkillDefs-ORCA.md.
   ───────────────────────────────────────────────────────────────────────────── */
.zc-shell .zc-orca { display:flex; flex-direction:column; gap:12px; min-width:min(360px,100%); max-width:100%; box-sizing:border-box; overflow-y:auto; }
.zc-shell .zc-orca-title { font-weight:700; font-size:16px; }
.zc-shell .zc-orca-edit-txt { cursor:text; border-radius:4px; }
.zc-shell .zc-orca-edit-txt:hover { background:rgba(255,255,255,.04); }
.zc-shell .zc-orca-section-label { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--zc-text-3); margin-top:4px; }
.zc-shell .zc-orca-section-label .hint { color:var(--zc-text-3); font-weight:400; text-transform:none; letter-spacing:0; }
.zc-shell .zc-orca-empty { color:var(--zc-text-3); font-style:italic; }

/* counts */
.zc-shell .zc-orca-counts { display:flex; gap:8px; }
.zc-shell .zc-orca-pill { flex:1; display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:var(--zc-r-sm,12px); background:var(--zc-surface-2); border:1px solid var(--zc-border); }
.zc-shell .zc-orca-pill b { font-size:20px; line-height:1; font-family:var(--zc-mono,ui-monospace,Menlo,monospace); }
.zc-shell .zc-orca-pill span { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--zc-text-3); }
.zc-shell .zc-orca-pill.o b { color:var(--zc-blue,#3B82F6); }
.zc-shell .zc-orca-pill.r b { color:var(--zc-amber,#F59E0B); }
.zc-shell .zc-orca-pill.c b { color:var(--zc-jade,#00D68F); }
.zc-shell .zc-orca-pill.a b { color:var(--zc-cyan,#22D3EE); }

/* health strip — the headline (derived gaps) */
.zc-shell .zc-orca-health { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border-radius:var(--zc-r-sm,12px);
    background:linear-gradient(180deg,rgba(244,104,92,.08),rgba(244,104,92,.02)); border:1px solid rgba(244,104,92,.25); }
.zc-shell .zc-orca-health .material-symbols-outlined { color:var(--zc-red,#F4685C); }
.zc-shell .zc-orca-health .h-txt { font-size:12.5px; }
.zc-shell .zc-orca-health .h-txt b { color:var(--zc-red,#F4685C); }
.zc-shell .zc-orca-health.is-clean { background:linear-gradient(180deg,rgba(0,214,143,.08),rgba(0,214,143,.02)); border-color:rgba(0,214,143,.25); }
.zc-shell .zc-orca-health.is-clean .material-symbols-outlined { color:var(--zc-jade,#00D68F); }
.zc-shell .zc-orca-flags { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.zc-shell .zc-orca-flag { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:2px 8px; border-radius:999px;
    background:rgba(244,104,92,.12); color:var(--zc-red,#F4685C); border:1px solid rgba(244,104,92,.3); }
.zc-shell .zc-orca-flag .material-symbols-outlined { font-size:13px; }

/* line-of-sight (compact) */
.zc-shell .zc-orca-los { display:flex; flex-direction:column; gap:6px; padding:11px; border-radius:var(--zc-r-sm,12px); background:var(--zc-surface-2); border:1px solid var(--zc-border); }
.zc-shell .zc-orca-los-lab { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--zc-text-3); font-weight:700; }
.zc-shell .zc-orca-chain { display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:12px; }
.zc-shell .zc-orca-chain .node { padding:3px 8px; border-radius:6px; font-weight:600; }
.zc-shell .zc-orca-chain .node.o { background:rgba(59,130,246,.14); color:var(--zc-blue,#3B82F6); }
.zc-shell .zc-orca-chain .node.r { background:rgba(245,158,11,.14); color:var(--zc-amber,#F59E0B); }
.zc-shell .zc-orca-chain .node.c { background:rgba(0,214,143,.14); color:var(--zc-jade,#00D68F); }
.zc-shell .zc-orca-chain .node.a { background:rgba(34,211,238,.14); color:var(--zc-cyan,#22D3EE); }
.zc-shell .zc-orca-chain .arrow { color:var(--zc-text-3); font-size:14px; }
.zc-shell .zc-orca-chain .brk { color:var(--zc-red,#F4685C); font-size:14px; }
.zc-shell .zc-orca-ok { color:var(--zc-jade,#00D68F); font-size:11px; margin-left:4px; }
.zc-shell .zc-orca-brk { color:var(--zc-red,#F4685C); font-size:11px; }

/* the four-lane board */
.zc-shell .zc-orca-board { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.zc-shell .zc-orca-lane { display:flex; flex-direction:column; gap:7px; min-width:0; }
.zc-shell .zc-orca-lane-hd { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding-bottom:2px; border-bottom:2px solid; }
.zc-shell .zc-orca-lane-hd .material-symbols-outlined { font-size:15px; }
.zc-shell .zc-orca-lane-hd .n { margin-left:auto; color:var(--zc-text-3); font-family:var(--zc-mono,ui-monospace,Menlo,monospace); }
.zc-shell .zc-orca-lane.o .zc-orca-lane-hd { color:var(--zc-blue,#3B82F6); border-color:var(--zc-blue,#3B82F6); }
.zc-shell .zc-orca-lane.r .zc-orca-lane-hd { color:var(--zc-amber,#F59E0B); border-color:var(--zc-amber,#F59E0B); }
.zc-shell .zc-orca-lane.c .zc-orca-lane-hd { color:var(--zc-jade,#00D68F); border-color:var(--zc-jade,#00D68F); }
.zc-shell .zc-orca-lane.a .zc-orca-lane-hd { color:var(--zc-cyan,#22D3EE); border-color:var(--zc-cyan,#22D3EE); }

.zc-shell .zc-orca-item { background:var(--zc-surface-2); border:1px solid var(--zc-border); border-radius:var(--zc-r-xs,8px); padding:8px 9px; display:flex; flex-direction:column; gap:5px; position:relative; }
.zc-shell .zc-orca-item .idbadge { font-family:var(--zc-mono,ui-monospace,Menlo,monospace); font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px; align-self:flex-start; }
.zc-shell .zc-orca-lane.o .idbadge { background:rgba(59,130,246,.16); color:var(--zc-blue,#3B82F6); }
.zc-shell .zc-orca-lane.r .idbadge { background:rgba(245,158,11,.16); color:var(--zc-amber,#F59E0B); }
.zc-shell .zc-orca-lane.c .idbadge { background:rgba(0,214,143,.16); color:var(--zc-jade,#00D68F); }
.zc-shell .zc-orca-lane.a .idbadge { background:rgba(34,211,238,.16); color:var(--zc-cyan,#22D3EE); }
.zc-shell .zc-orca-item .txt { font-size:12.5px; color:var(--zc-text); line-height:1.35; word-break:break-word; }
.zc-shell .zc-orca-links { display:flex; flex-wrap:wrap; gap:4px; }
.zc-shell .zc-orca-links .link-ref { font-family:var(--zc-mono,ui-monospace,Menlo,monospace); font-size:9.5px; padding:1px 5px; border-radius:4px; background:var(--zc-surface-3); color:var(--zc-text-3); }
.zc-shell .zc-orca-item.good { border-color:rgba(0,214,143,.35); }
.zc-shell .zc-orca-item.gap { border-color:rgba(244,104,92,.5); background:rgba(244,104,92,.05); }
.zc-shell .zc-orca-gapline { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; color:var(--zc-red,#F4685C); font-weight:600; }
.zc-shell .zc-orca-gapline .material-symbols-outlined { font-size:13px; }
.zc-shell .zc-orca-del { position:absolute; top:6px; right:6px; font-size:14px; color:var(--zc-text-3); cursor:pointer; opacity:0; transition:opacity .12s; }
.zc-shell .zc-orca-item:hover .zc-orca-del { opacity:1; }
.zc-shell .zc-orca-del:hover { color:var(--zc-red,#F4685C); }
.zc-shell .zc-orca-add { font-size:11px; color:var(--zc-text-3); font-style:italic; cursor:pointer; padding:2px; }
.zc-shell .zc-orca-add:hover { color:var(--zc-text-2); }
.zc-shell .zc-orca-theatre { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--zc-text-3); cursor:pointer; opacity:.6; }
.zc-shell .zc-orca-theatre .material-symbols-outlined { font-size:12px; }
.zc-shell .zc-orca-theatre:hover { opacity:1; }
.zc-shell .zc-orca-theatre.on { color:var(--zc-red,#F4685C); font-weight:600; opacity:1; }

/* diagnosis + foot */
.zc-shell .zc-orca-synthesis { font-size:13px; color:var(--zc-text-2); padding:10px 12px; background:var(--zc-surface-2); border-radius:var(--zc-r-sm,12px); cursor:text; }
.zc-shell .zc-orca-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--zc-border); }
.zc-shell .zc-orca-foot-left { display:flex; gap:14px; font-size:12px; color:var(--zc-text-3); align-items:center; flex-wrap:wrap; }
.zc-shell .zc-orca-savenote { display:inline-flex; align-items:center; gap:3px; }
.zc-shell .zc-orca-savenote.ok { color:var(--zc-jade,#00D68F); }
.zc-shell .zc-orca-cta { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:var(--zc-r-xs,8px); border:0; background:var(--zc-jade,#00D68F); color:#04140d; font-weight:600; font-size:12.5px; cursor:pointer; white-space:nowrap; }

/* ─────────────────────────────────────────────────────────────────────────────
   Decision Quality board (.zc-dq-*) — the six-link scorecard card
   (DecisionQualityBoard.razor). Accent = violet (quality of thinking). The headline
   number and the weakest-link treatment are DERIVED at render from the scores —
   nothing here depends on a stored weakestLink. See ZybronSkillDefs-DQ.md.
   ───────────────────────────────────────────────────────────────────────────── */
.zc-shell .zc-dq { display:flex; flex-direction:column; gap:12px; min-width:min(360px,100%); max-width:100%; box-sizing:border-box; overflow-y:auto; --dq:var(--zc-tone-violet,#A78BFA); }
.zc-shell .zc-dq-title { font-weight:700; font-size:16px; }
.zc-shell .zc-dq-edit-txt { cursor:text; border-radius:4px; }
.zc-shell .zc-dq-edit-txt:hover { background:rgba(255,255,255,.04); }
.zc-shell .zc-dq-section-label { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--zc-text-3); margin-top:4px; }
.zc-shell .zc-dq-section-label .hint { color:var(--zc-text-3); font-weight:400; text-transform:none; letter-spacing:0; }
.zc-shell .zc-dq-empty { color:var(--zc-text-3); font-style:italic; }

/* the decision statement (the "seed" equivalent) */
.zc-shell .zc-dq-statement { display:flex; gap:8px; align-items:flex-start; padding:9px 11px; background:var(--zc-surface-2); border-radius:var(--zc-r-sm,12px); border-left:2px solid var(--dq); cursor:text; }
.zc-shell .zc-dq-statement .material-symbols-outlined { color:var(--dq); font-size:18px; flex-shrink:0; }
.zc-shell .zc-dq-statement-q { font-style:italic; color:var(--zc-text); }

/* title row + quality chip — the % is a small working metric, not the headline */
.zc-shell .zc-dq-titlerow { display:flex; align-items:baseline; gap:12px; }
.zc-shell .zc-dq-titlerow .zc-dq-title { flex:1; min-width:0; }
.zc-shell .zc-dq-qchip { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-family:var(--zc-mono,ui-monospace,Menlo,monospace); font-size:11px; font-weight:700; color:var(--dq); white-space:nowrap; }
.zc-shell .zc-dq-qchip::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.zc-shell .zc-dq-qchip.is-weak { color:var(--zc-red,#F4685C); }
.zc-shell .zc-dq-qchip .sub { color:var(--zc-text-3); font-weight:500; }

/* decision block — the call + what leadership needs (replaces the overall-quality box) */
.zc-shell .zc-dq-decision { padding:13px 15px; border-radius:var(--zc-r-sm,12px);
    background:var(--zc-tone-violet-bg,rgba(167,139,250,.14)); border:1px solid rgba(167,139,250,.24); border-left:3px solid var(--dq); }
.zc-shell .zc-dq-dc-k { display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--dq); }
.zc-shell .zc-dq-dc-k .material-symbols-outlined { font-size:17px; }
.zc-shell .zc-dq-dc-body { font-size:13px; line-height:1.55; color:var(--zc-text); margin-top:7px; cursor:text; white-space:pre-wrap; }
.zc-shell .zc-dq-dc-body.empty { color:var(--zc-text-3); font-style:italic; }

/* compact — slim bar rows */
.zc-shell .zc-dq-preview { display:flex; flex-direction:column; gap:5px; }
.zc-shell .zc-dq-row { display:flex; align-items:center; gap:8px; font-size:12px; }
.zc-shell .zc-dq-row .nm { width:96px; color:var(--zc-text-2); }
.zc-shell .zc-dq-bar { flex:1; height:6px; border-radius:999px; background:var(--zc-surface-3); overflow:hidden; }
.zc-shell .zc-dq-bar > i { display:block; height:100%; border-radius:999px; background:var(--dq); }
.zc-shell .zc-dq-row.is-weak .nm { color:var(--zc-red,#F4685C); }
.zc-shell .zc-dq-row.is-weak .zc-dq-bar > i { background:var(--zc-red,#F4685C); }
.zc-shell .zc-dq-row .pct { width:34px; text-align:right; font-family:var(--zc-mono,ui-monospace,Menlo,monospace); font-size:11px; color:var(--zc-text-3); }

/* expanded — the six links, strict 3-col × 2-row grid (1 2 3 / 4 5 6); weakest tinted in place */
.zc-shell .zc-dq-elements { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.zc-shell .zc-dq-el { background:var(--zc-surface-2); border:1px solid var(--zc-border); border-radius:var(--zc-r-sm,12px); padding:10px 12px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.zc-shell .zc-dq-el.weakest { border-color:rgba(244,104,92,.45); background:rgba(244,104,92,.05); }
.zc-shell .zc-dq-el-hd { display:flex; align-items:center; gap:8px; }
.zc-shell .zc-dq-el-dot { width:9px; height:9px; border-radius:50%; background:var(--dq); flex-shrink:0; }
.zc-shell .zc-dq-el.weakest .zc-dq-el-dot { background:var(--zc-red,#F4685C); }
.zc-shell .zc-dq-el-name { font-weight:600; font-size:13.5px; }
.zc-shell .zc-dq-el-sub { font-size:11px; color:var(--zc-red,#F4685C); margin-left:auto; }
.zc-shell .zc-dq-el-pct { font-family:var(--zc-mono,ui-monospace,Menlo,monospace); font-size:13px; font-weight:700; margin-left:auto; color:var(--dq); }
.zc-shell .zc-dq-el.weakest .zc-dq-el-sub + .zc-dq-el-pct { margin-left:8px; }
.zc-shell .zc-dq-el.weakest .zc-dq-el-pct { color:var(--zc-red,#F4685C); }
.zc-shell .zc-dq-score-input { width:70px; margin-left:auto; }
.zc-shell .zc-dq-el.weakest .zc-dq-score-input { margin-left:8px; }
.zc-shell .zc-dq-el-bar { height:7px; border-radius:999px; background:var(--zc-surface-3); overflow:hidden; }
.zc-shell .zc-dq-el-bar > i { display:block; height:100%; border-radius:999px; background:var(--dq); }
.zc-shell .zc-dq-el.weakest .zc-dq-el-bar > i { background:var(--zc-red,#F4685C); }
.zc-shell .zc-dq-el-note { font-size:12px; color:var(--zc-text-2); cursor:text; }

/* synthesis + foot */
.zc-shell .zc-dq-synthesis { font-size:13px; color:var(--zc-text-2); padding:10px 12px; background:var(--zc-surface-2); border-radius:var(--zc-r-sm,12px); cursor:text; }
.zc-shell .zc-dq-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--zc-border); }
.zc-shell .zc-dq-foot-left { display:flex; gap:14px; font-size:12px; color:var(--zc-text-3); align-items:center; flex-wrap:wrap; }
.zc-shell .zc-dq-savenote { display:inline-flex; align-items:center; gap:3px; }
.zc-shell .zc-dq-savenote.ok { color:var(--zc-jade,#00D68F); }
.zc-shell .zc-dq-cta { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:var(--zc-r-xs,8px); border:0; background:var(--zc-jade,#00D68F); color:#04140d; font-weight:600; font-size:12.5px; cursor:pointer; white-space:nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   §8.3 RESPONSIVE OBLIGATION — the dense desktop cards on a phone viewport
   ═══════════════════════════════════════════════════════════════════════════

   §8.3: "ArtifactListCard, LibraryDocumentListCard, LibraryDocumentDetailCard and
   ChatDock are dense desktop layouts. Each requires a pass against the existing
   canvas.css breakpoints before it is considered shipped on mobile. Sharing the
   code does not discharge this."

   Measured 2026-08-03: ChatDock already had 13 phone rules; the other three had
   ZERO. This block is that first pass.

   Written conservatively and defensively, because it is authored without a running
   phone (Phase F is blocked on the Xcode toolchain). Every rule here either removes
   a fixed dimension, allows wrapping, or contains overflow — none introduces new
   fixed geometry. The failure mode of a rule being unnecessary is "slightly roomier
   than needed"; the failure mode of the fixed widths it overrides is a card the user
   cannot read or dismiss. NEEDS A VISUAL PASS on a real device before §8.3 is
   ticked — this makes the cards safe, not finished.

   Scoped to (max-width: 640px) to match the breakpoint the rest of the file already
   uses, so the phone story stays in one vocabulary.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ── Containment: a card may scroll ITSELF, but must never make the page
       scroll sideways. This is the single most common way a dense desktop card
       breaks a phone, and it is cheap to prevent globally for the card body. ── */
    .zc-shell .zc-skill-card,
    .zc-shell .zc-skill-card * {
        max-width: 100%;
        box-sizing: border-box;
    }
    .zc-shell .zc-skill-card { overflow-x: hidden; }

    /* ── ArtifactListCard ────────────────────────────────────────────────────
       The row is a single-line flex with an icon, an ellipsised title and a wrapping
       meta strip. That survives a narrow viewport; the create-row does not — an
       input and a button side by side leave the input unusably narrow. Stack it. */
    .zc-shell .zc-artifact-create {
        flex-direction: column;
        align-items: stretch;
    }
    .zc-shell .zc-artifact-create .zc-gather-row-edit-input { width: 100%; }

    /* The detail pane carries min-width:min(380px,100%) — already phone-safe — but
       its rows need to stop competing for horizontal space. */
    .zc-shell .zc-artifact-head { gap: 6px; }
    .zc-shell .zc-artifact-foot {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Row tap target. 8px padding gives ~34px of height; below the 44px minimum
       for a comfortable touch target, and these rows are the primary control. */
    .zc-shell .zc-artifact-row { padding: 11px 10px; }

    /* The type rail is a horizontal filter strip on desktop. Let it scroll on its
       own axis rather than wrap into a tall block that pushes the list off-screen. */
    .zc-shell .zc-type-rail {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .zc-shell .zc-type-rail::-webkit-scrollbar { display: none; }

    /* ── LibraryDocumentListCard ─────────────────────────────────────────────
       Height-bounded flex column whose children are explicitly flex-shrink:0 (see
       the guard above). On a phone the non-list rows — KPIs, pills, search — eat the
       viewport before the list gets any. Let them wrap instead of holding a row. */
    .zc-shell .zc-libdoclist { min-width: 0; }
    .zc-shell .zc-libdoclist > * { flex-wrap: wrap; }

    /* ── LibraryDocumentDetailCard ───────────────────────────────────────────
       1,339 lines of tabbed detail (Overview | Chunks | Index). Tabs must scroll
       horizontally rather than wrap into stacked rows that bury the content. */
    .zc-shell .zc-libdoc-detail { min-width: 0; }
    .zc-shell .zc-libdoc-detail [role="tablist"] {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Boards (Brainstorm / Orca / DecisionQuality) ────────────────────────
       Not named in §8.3 but structurally identical — multi-column grids that assume
       desktop width. Collapse to one column rather than letting columns shrink below
       readability. */
    .zc-shell .zc-brainstorm-board,
    .zc-shell .zc-orca-board,
    .zc-shell .zc-dq-board { grid-template-columns: 1fr; }

    /* ── Any table inside a card scrolls in its own container ─────────────── */
    .zc-shell .zc-skill-card table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ============================================================================
   LAUNCH CONFIG CARD — full Metropia launch surface
   Ported from _MetropiaDemos/zybron-canvas-wireframe.html (§ SKILL CARD 2).
   Everything is scoped under .zc-lc so the demo's generic helper classes
   (.zc-pip, .zc-block, .zc-footbar) can keep their
   demo names without colliding with anything else in the shell.
   Demo → shell var mapping: --mono → --zc-mono, --zc-tone-red* aliased below.
   ============================================================================ */
/* Scrolling stays; the bar does not. A visible track down the right edge of a card
   this dense reads as chrome and shifts the layout the moment Advanced adds a row.
   Trackpad / wheel / keyboard scrolling are unaffected. */
.zc-shell .zc-lc { scrollbar-width:none; -ms-overflow-style:none; }
.zc-shell .zc-lc::-webkit-scrollbar { width:0; height:0; }

.zc-shell .zc-lc {
    --zc-tone-red:    var(--zc-red, #DC3545);
    --zc-tone-red-bg: var(--zc-red-bg, rgba(220,53,69,.10));
    display: block;
    min-width: min(360px, 100%);
    max-width: 100%;
    box-sizing: border-box;
}
.zc-shell .zc-lc.is-wide { min-width: min(940px, 100%); }

/* ── Demo helper primitives (scoped) ──────────────────────────────────────── */
.zc-shell .zc-lc .zc-pip { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:9999px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--zc-surface-3); color:var(--zc-text-3); }
.zc-shell .zc-lc .zc-pip .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.zc-shell .zc-lc .zc-pip.jade   { background:var(--zc-tone-jade-bg);   color:var(--zc-tone-jade); }
.zc-shell .zc-lc .zc-pip.amber  { background:var(--zc-tone-amber-bg);  color:var(--zc-tone-amber); }
.zc-shell .zc-lc .zc-pip.blue   { background:var(--zc-tone-blue-bg);   color:var(--zc-tone-blue); }
.zc-shell .zc-lc .zc-pip.indigo { background:var(--zc-tone-violet-bg); color:var(--zc-tone-violet); }
.zc-shell .zc-lc .zc-pip.grey   { background:var(--zc-surface-3);      color:var(--zc-text-3); }
.zc-shell .zc-lc .zc-cmeta { font-size:11px; color:var(--zc-text-3); }
.zc-shell .zc-lc .zc-openbtn { display:inline-flex; align-items:center; gap:5px; background:var(--zc-surface); border:1px solid var(--zc-border); color:var(--zc-text-2); padding:5px 12px; border-radius:9999px; font-size:11.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.zc-shell .zc-lc .zc-openbtn:hover { border-color:var(--zc-jade-ring); color:var(--zc-jade); }
.zc-shell .zc-lc .zc-openbtn:disabled { opacity:.5; cursor:default; }
.zc-shell .zc-lc .zc-block { border:1px solid var(--zc-border); border-radius:var(--zc-r-sm); padding:14px 16px; margin-bottom:12px; background:var(--zc-surface-2); }
.zc-shell .zc-lc .zc-block-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.zc-shell .zc-lc .zc-block-title { font-size:13px; font-weight:700; color:var(--zc-text); display:inline-flex; align-items:center; gap:6px; }
.zc-shell .zc-lc .zc-block-title .material-symbols-outlined { font-size:16px; color:var(--zc-jade); }
.zc-shell .zc-lc .zc-block-sub { font-size:11px; color:var(--zc-text-3); }
.zc-shell .zc-lc .zc-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

/* ── Top chrome ──────────────────────────────────────────────────────────
   The shared artifact header kicker ("LAUNCH CONFIG") restated the card title
   sitting right under it, and the pip row restated the gate. Both are gone here;
   the header row collapses to just its ⋯ menu, so content starts at the name.
   Scoped to .zc-lc — every other artifact card keeps its kicker. */
.zc-shell .zc-lc .zc-bb-kicker { display:none; }
.zc-shell .zc-lc .zc-bb-head { justify-content:flex-end; min-height:0; margin-bottom:2px; }

/* Advanced + design notes live on the tab strip: they govern what it exposes. */
.zc-shell .zc-lc .lc-tabs-tools { margin-left:auto; display:flex; align-items:center; gap:6px; flex:none; padding:0 0 6px 12px; }
.zc-shell .zc-lc .lc-adv-switch { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--zc-text-2); font-weight:600; cursor:pointer; padding:3px 10px 3px 4px; border-radius:9999px; background:var(--zc-surface-2); border:1px solid var(--zc-border); position:relative; white-space:nowrap; }
.zc-shell .zc-lc .lc-adv-switch input { position:absolute; opacity:0; pointer-events:none; }
.zc-shell .zc-lc .lc-adv-track { width:24px; height:13px; border-radius:9999px; background:var(--zc-border); position:relative; transition:background .15s; flex:none; }
.zc-shell .zc-lc .lc-adv-track::before { content:''; position:absolute; top:1px; left:1px; width:11px; height:11px; border-radius:9999px; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.zc-shell .zc-lc .lc-adv-switch input:checked ~ .lc-adv-track { background:var(--zc-jade); }
.zc-shell .zc-lc .lc-adv-switch input:checked ~ .lc-adv-track::before { transform:translateX(11px); }
.zc-shell .zc-lc .lc-notes-toggle { width:24px; height:24px; border-radius:7px; border:1px solid transparent; background:transparent; color:var(--zc-text-4); display:grid; place-items:center; cursor:pointer; font-family:inherit; flex:none; }
.zc-shell .zc-lc .lc-notes-toggle:hover { background:var(--zc-surface-2); color:var(--zc-text-3); }
.zc-shell .zc-lc .lc-notes-toggle.is-on { background:var(--zc-jade-bg); color:var(--zc-jade); }
.zc-shell .zc-lc .lc-notes-toggle .material-symbols-outlined { font-size:15px; }

/* ── Header: name + crumbs ───────────────────────────────────────────────── */
.zc-shell .zc-lc .lc-hdr { margin-bottom:12px; }
.zc-shell .zc-lc .lc-hdr-name { background:transparent; border:none; outline:none; font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--zc-text); width:100%; padding:2px 0; font-family:inherit; }
.zc-shell .zc-lc .lc-hdr-name::placeholder { color:var(--zc-text-4); font-weight:600; }
.zc-shell .zc-lc .lc-hdr-name:hover, .zc-shell .zc-lc .lc-hdr-name:focus { background:var(--zc-surface-2); border-radius:6px; padding:2px 8px; margin:-2px -8px; }

/* ── Launch gate ─────────────────────────────────────────────────────────── */
.zc-shell .zc-lc .lc-gate { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 16px; background:var(--zc-surface-2); border:1px solid var(--zc-border); border-radius:var(--zc-r-sm); margin-bottom:16px; }
.zc-shell .zc-lc .lc-gate-score { display:flex; align-items:baseline; gap:4px; padding-right:14px; border-right:1px solid var(--zc-border); }
.zc-shell .zc-lc .lc-gate-score .big { font-size:28px; font-weight:800; color:var(--zc-tone-amber); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.zc-shell .zc-lc .lc-gate-score .of { font-size:14px; color:var(--zc-text-3); font-weight:600; }
.zc-shell .zc-lc .lc-gate-score .cap { margin-left:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--zc-text-3); align-self:center; }
.zc-shell .zc-lc .lc-gate-score .cap.go, .zc-shell .zc-lc .lc-gate-score .big.go { color:var(--zc-jade); }
/* The plain meter survives for the COLLAPSED card summary, which shows score + bar in
   a strip too short to label ten segments. Expanded, the segmented track replaces it. */
.zc-shell .zc-lc .lc-gate-meter { height:8px; background:var(--zc-surface-3); border-radius:9999px; overflow:hidden; grid-column:1/-1; order:5; }
.zc-shell .zc-lc .lc-gate-meter i { display:block; height:100%; background:linear-gradient(90deg, var(--zc-tone-amber), var(--zc-tone-jade)); transition:width .25s ease; }

/* ── The gate meter and the checklist are the same object ─────────────────────
   They used to be two rows: a scrolling breadcrumb of the open check names, and a
   plain progress bar underneath. That repeated the same fact twice and clipped the
   names on any card narrower than the full list. Now each check owns one segment of
   the bar and sits on top of it, so the row reads as both a checklist and a meter.

   Every check keeps its slot whether it passes or not — the bar shows WHICH ten,
   not just how many. Nothing reflows as checks clear; only colour changes. */
.zc-shell .zc-lc .lc-gate-track {
    grid-column:1/-1; order:5;
    display:flex; gap:0; min-width:0;        /* gap:0 — the bar is ONE line, not ten pills */
}
.zc-shell .zc-lc .lc-gate-seg {
    flex:1 1 0; min-width:0;                 /* equal slices; min-width:0 lets labels ellipsis */
    display:flex; flex-direction:column; gap:5px;
    background:none; border:none; padding:0; margin:0;
    font-family:inherit; text-align:left; cursor:pointer;
}
.zc-shell .zc-lc .lc-gate-seg .lbl {
    font-size:10.5px; font-weight:600; letter-spacing:.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    /* Centred over its own slice. Left-aligning them made the gaps look arbitrary —
       slices are equal width but labels are not, so the eye read the ragged right
       edges as uneven spacing rather than as ten equal columns. */
    text-align:center; padding:0 4px;
}
/* Segments butt edge-to-edge so a run of cleared checks reads as one continuous
   stretch of colour — the unbroken bar was the part that worked. Only the outer
   ends round; interior joins stay square so neighbours fuse. */
.zc-shell .zc-lc .lc-gate-seg .bar {
    height:6px; background:var(--zc-surface-3);
    transition:background .25s ease, opacity .25s ease;
}
.zc-shell .zc-lc .lc-gate-seg:first-child .bar { border-radius:9999px 0 0 9999px; }
.zc-shell .zc-lc .lc-gate-seg:last-child  .bar { border-radius:0 9999px 9999px 0; }
.zc-shell .zc-lc .lc-gate-seg.ok .lbl  { color:var(--zc-text-3); }
.zc-shell .zc-lc .lc-gate-seg.ok .bar  { background:var(--zc-tone-jade); }
.zc-shell .zc-lc .lc-gate-seg.open .lbl { color:var(--zc-tone-amber); }
.zc-shell .zc-lc .lc-gate-seg.open .bar { background:var(--zc-tone-amber); opacity:.32; }
.zc-shell .zc-lc .lc-gate-seg:hover .lbl { color:var(--zc-text); text-decoration:underline; text-underline-offset:3px; }
.zc-shell .zc-lc .lc-gate-seg:hover .bar { opacity:1; }

.zc-shell .zc-lc .lc-gate > .lc-launchpad { grid-column:2 / -1; justify-self:end; }
.zc-shell .zc-lc .lc-blocker.fixed { color:var(--zc-tone-jade); cursor:default; }
.zc-shell .zc-lc button.lc-blocker.fixed:hover { color:var(--zc-tone-jade); text-decoration:none; }
.zc-shell .zc-lc .lc-launchpad { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

/* Key switch — clickable when all clear, twists when armed */
.zc-shell .zc-lc .lc-keysw { background:var(--zc-surface); border:1px solid var(--zc-border); color:var(--zc-text-3); padding:4px 10px 4px 6px; border-radius:9999px; font-size:11px; font-weight:700; display:inline-flex; align-items:center; gap:6px; cursor:not-allowed; font-family:inherit; opacity:.65; transition:opacity .2s, color .2s, border-color .2s, background .2s; }
.zc-shell .zc-lc .lc-keysw .bezel { display:inline-flex; align-items:center; gap:2px; padding:2px 6px; background:var(--zc-surface-3); border-radius:9999px; font-size:9px; letter-spacing:.06em; }
.zc-shell .zc-lc .lc-keysw .tick { padding:1px 4px; border-radius:4px; }
.zc-shell .zc-lc .lc-keysw .tick.off { background:var(--zc-tone-red-bg); color:var(--zc-tone-red); }
.zc-shell .zc-lc .lc-keysw .tick.arm { color:var(--zc-text-4); }
.zc-shell .zc-lc .lc-keysw.ready { cursor:pointer; opacity:1; color:var(--zc-tone-amber); border-color:var(--zc-tone-amber); }
.zc-shell .zc-lc .lc-keysw.ready .bezel { background:var(--zc-tone-amber-bg); }
.zc-shell .zc-lc .lc-keysw[aria-pressed="true"] { color:var(--zc-jade); border-color:var(--zc-jade); background:var(--zc-jade-bg); }
.zc-shell .zc-lc .lc-keysw[aria-pressed="true"] .bezel { background:var(--zc-jade-bg); }
.zc-shell .zc-lc .lc-keysw[aria-pressed="true"] .tick.arm { background:var(--zc-jade); color:#fff; }

/* Rocket — armed / firing / done */
.zc-shell .zc-lc .lc-rocket { background:var(--zc-surface); border:1px solid var(--zc-border); color:var(--zc-text-3); padding:6px 14px; border-radius:9999px; font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:6px; cursor:not-allowed; font-family:inherit; }
.zc-shell .zc-lc .lc-rocket .material-symbols-outlined { font-size:16px; }
.zc-shell .zc-lc .lc-rocket.armed { background:linear-gradient(135deg,var(--zc-jade),var(--zc-tone-teal)); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(0,214,143,.35); cursor:pointer; }
.zc-shell .zc-lc .lc-rocket.armed:hover { box-shadow:0 8px 22px rgba(0,214,143,.45); transform:translateY(-1px); }
.zc-shell .zc-lc .lc-rocket.firing { animation:lc-shake .09s linear infinite; cursor:default; }
.zc-shell .zc-lc .lc-rocket.firing .material-symbols-outlined { animation:lc-liftoff 1.15s cubic-bezier(.4,0,.75,0) forwards; }
.zc-shell .zc-lc .lc-rocket.done { cursor:default; animation:none; background:var(--zc-jade-bg); border-color:var(--zc-jade); color:var(--zc-jade); box-shadow:none; }
.zc-shell .zc-lc .lc-rocket.done .material-symbols-outlined { display:none; }
@keyframes lc-shake { 0%,100%{transform:translate(0,0);} 25%{transform:translate(-1px,.5px);} 75%{transform:translate(1px,-.5px);} }
@keyframes lc-liftoff {
    0%   { transform: translateY(0) scale(1); opacity:1; }
    22%  { transform: translateY(3px) scale(.97); opacity:1; }
    100% { transform: translateY(-96px) scale(.55); opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
    .zc-shell .zc-lc .lc-rocket.firing,
    .zc-shell .zc-lc .lc-rocket.firing .material-symbols-outlined { animation:none; }
}

/* Live controls + frozen banner */
.zc-shell .zc-lc .lc-live-ctl { display:inline-flex; align-items:center; gap:8px; }
.zc-shell .zc-lc .lc-live-dot { width:8px; height:8px; border-radius:50%; background:var(--zc-jade); box-shadow:0 0 0 0 var(--zc-jade); animation:lc-ping 1.9s ease-out infinite; }
.zc-shell .zc-lc .lc-live-txt { font-size:12px; font-weight:700; color:var(--zc-jade); white-space:nowrap; }
@keyframes lc-ping { 0%{box-shadow:0 0 0 0 rgba(0,214,143,.55);} 70%{box-shadow:0 0 0 8px rgba(0,214,143,0);} 100%{box-shadow:0 0 0 0 rgba(0,214,143,0);} }

/* ── Campaign type — a segmented control ─────────────────────────────────
   One exclusive choice, so it reads as one object rather than six loose pills
   that wrap into a cloud. The description shares the row instead of orphaning
   its own italic line under the group. */
.zc-shell .zc-lc .lc-typebar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; min-width:0; }
.zc-shell .zc-lc .lc-typebar-l { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--zc-text-3); flex:none; }
.zc-shell .zc-lc .lc-seg {
    display:inline-flex; align-items:stretch; max-width:100%; overflow-x:auto; scrollbar-width:none;
    background:var(--zc-surface-2); border:1px solid var(--zc-border); border-radius:9999px;
}
.zc-shell .zc-lc .lc-seg::-webkit-scrollbar { display:none; }
.zc-shell .zc-lc .lc-seg button {
    background:none; border:none; padding:6px 14px; font-family:inherit; font-size:12px; font-weight:600;
    color:var(--zc-text-2); cursor:pointer; white-space:nowrap;
}
.zc-shell .zc-lc .lc-seg button + button { border-left:1px solid var(--zc-border); }
.zc-shell .zc-lc .lc-seg button:hover:not(.is-active):not(:disabled) { color:var(--zc-text); background:var(--zc-surface-3); }
.zc-shell .zc-lc .lc-seg button:disabled { cursor:default; opacity:.55; }
/* A type Metropia cannot author yet: present, so the surface still shows the full set of
   mechanics, but visibly not a choice. Greyed rather than hidden — hiding it would imply
   Metropia does not do it at all. */
.zc-shell .zc-lc .lc-seg button.is-unavailable { color:var(--zc-text-4); background:var(--zc-surface-3); opacity:.6; cursor:not-allowed; }
.zc-shell .zc-lc .lc-seg button.is-unavailable:hover { color:var(--zc-text-4); background:var(--zc-surface-3); }
/* The active segment is the only filled cell — the pill outline stays whole around it. */
.zc-shell .zc-lc .lc-seg button.is-active { background:var(--zc-jade-bg); color:var(--zc-jade); font-weight:700; }
.zc-shell .zc-lc .lc-seg button:first-child { border-radius:9999px 0 0 9999px; padding-left:16px; }
.zc-shell .zc-lc .lc-seg button:last-child { border-radius:0 9999px 9999px 0; padding-right:16px; }
.zc-shell .zc-lc .lc-variant-desc { margin:0; flex:1 1 240px; min-width:0; font-size:12px; color:var(--zc-text-3); font-style:italic; }

/* ── Section tabs ────────────────────────────────────────────────────────── */
.zc-shell .zc-lc .lc-tabs { display:flex; align-items:center; gap:2px; border-bottom:1px solid var(--zc-border); margin-bottom:18px; min-width:0; }
/* min-width:0 is what lets this shrink below its content instead of widening the card. */
.zc-shell .zc-lc .lc-tabs-scroll { display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.zc-shell .zc-lc .lc-tabs-scroll::-webkit-scrollbar { display:none; }
.zc-shell .zc-lc .lc-tabs button { background:none; border:none; padding:10px 14px; color:var(--zc-text-3); font-weight:600; font-size:13px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; font-family:inherit; display:inline-flex; align-items:center; gap:6px; }
.zc-shell .zc-lc .lc-tabs button:hover { color:var(--zc-text); }
.zc-shell .zc-lc .lc-tabs button.is-active { color:var(--zc-jade); border-bottom-color:var(--zc-jade); }
.zc-shell .zc-lc .lc-tabs button .n { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:6px; background:var(--zc-surface-3); color:var(--zc-text-3); font-size:11px; font-weight:800; }
.zc-shell .zc-lc .lc-tabs button.is-active .n { background:var(--zc-jade-bg); color:var(--zc-jade); }
.zc-shell .zc-lc .lc-tab-panel { animation:zc-lc-fade .18s ease; }
@keyframes zc-lc-fade { from { opacity:0; } to { opacity:1; } }
.zc-shell .zc-lc .lc-tab-panel .lc-sec { margin-top:0; padding-top:0; border-top:none; }

/* ── Section spine ───────────────────────────────────────────────────────── */
.zc-shell .zc-lc .lc-sec { margin:22px 0 0; padding-top:22px; border-top:1px dashed var(--zc-border); }
.zc-shell .zc-lc .lc-sec:first-of-type { border-top:none; padding-top:0; }
.zc-shell .zc-lc .lc-sec-h { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.zc-shell .zc-lc .lc-sec-h h3 { margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--zc-text); }
.zc-shell .zc-lc .lc-sec-h h4 { margin:0; font-size:13px; font-weight:700; color:var(--zc-text); }
.zc-shell .zc-lc .lc-sec-hint { font-size:12px; color:var(--zc-text-3); }
.zc-shell .zc-lc .lc-adv-tick { display:inline-block; background:var(--zc-tone-violet-bg); color:var(--zc-tone-violet); font-size:9px; font-weight:800; letter-spacing:.06em; padding:1px 6px; border-radius:4px; margin-left:4px; vertical-align:middle; }

/* ── Field grid with provenance ──────────────────────────────────────────── */
.zc-shell .zc-lc .lc-fields { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 14px; }
.zc-shell .zc-lc .lc-f { display:flex; flex-direction:column; gap:2px; padding:8px 10px; background:var(--zc-surface-2); border:1px solid var(--zc-border); border-radius:8px; position:relative; min-width:0; }
.zc-shell .zc-lc .lc-f > label { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--zc-text-3); font-weight:700; }
.zc-shell .zc-lc .lc-f .lc-val { font-size:14px; font-weight:600; color:var(--zc-text); cursor:text; min-height:19px; overflow-wrap:anywhere; }
.zc-shell .zc-lc .lc-f .lc-val.lc-num, .zc-shell .zc-lc .lc-f .lc-val.lc-date { font-variant-numeric:tabular-nums; }
.zc-shell .zc-lc .lc-f .lc-val.lc-seeded { background:var(--zc-tone-jade-bg); color:var(--zc-tone-jade); padding:2px 6px; margin-left:-6px; border-radius:4px; align-self:flex-start; font-weight:700; }
.zc-shell .zc-lc .lc-f .lc-val.lc-empty { color:var(--zc-text-4); font-style:italic; font-weight:500; }
/* Dropdown for closed value sets — sits in the tile like a value, not like a form control:
   no chrome until you interact with it, so a row of fields still reads as data. */
.zc-shell .zc-lc .lc-f .lc-select {
    appearance:none; -webkit-appearance:none;
    background:transparent; border:1px solid transparent; border-radius:5px;
    color:var(--zc-text); font:inherit; font-size:14px; font-weight:600;
    width:100%; padding:1px 20px 1px 4px; margin-left:-4px; cursor:pointer; outline:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--zc-text-4) 50%),linear-gradient(135deg,var(--zc-text-4) 50%,transparent 50%);
    background-position:right 8px center,right 3px center; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.zc-shell .zc-lc .lc-f .lc-select:hover:not(:disabled) { border-color:var(--zc-border); background-color:var(--zc-surface); }
.zc-shell .zc-lc .lc-f .lc-select:focus { border-color:var(--zc-jade-ring); background-color:var(--zc-surface); }
.zc-shell .zc-lc .lc-f .lc-select:disabled { cursor:default; opacity:.7; background-image:none; }
.zc-shell .zc-lc .lc-f .lc-select.lc-seeded { color:var(--zc-tone-jade); font-weight:700; }
/* A legacy value that predates the constraint — flagged, not silently corrected. */
.zc-shell .zc-lc .lc-f .lc-select.is-offlist { color:var(--zc-tone-amber); font-weight:700; }
.zc-shell .zc-lc .lc-f .lc-select option { background:var(--zc-surface); color:var(--zc-text); font-weight:500; }

.zc-shell .zc-lc .lc-f .lc-edit { background:var(--zc-surface); border:1px solid var(--zc-jade-ring); border-radius:5px; color:var(--zc-text); font:inherit; font-size:14px; font-weight:600; width:100%; padding:1px 4px; outline:none; box-sizing:border-box; }

/* ── Mode selection — Identity & schedule ───────────────────────────────── */
.zc-shell .zc-lc .lc-modes { margin-top:14px; padding-top:12px; border-top:1px dashed var(--zc-border); }
.zc-shell .zc-lc .lc-modes-l { display:block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--zc-text-3); margin-bottom:8px; }
.zc-shell .zc-lc .lc-modes-row { display:flex; gap:6px; flex-wrap:wrap; }
.zc-shell .zc-lc .lc-mode-chip {
    display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:9999px;
    border:1px solid var(--zc-border); background:var(--zc-surface-2); color:var(--zc-text-3);
    font:inherit; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.zc-shell .zc-lc .lc-mode-chip:hover:not(:disabled) { border-color:var(--zc-border-2); color:var(--zc-text); }
.zc-shell .zc-lc .lc-mode-chip.is-on { background:var(--zc-jade-bg); border-color:var(--zc-jade-ring); color:var(--zc-jade); }
.zc-shell .zc-lc .lc-mode-chip:disabled { cursor:default; opacity:.55; }
.zc-shell .zc-lc .lc-mode-chip .material-symbols-outlined { font-size:15px; }
.zc-shell .zc-lc .lc-modes-hint { margin:8px 0 0; font-size:11.5px; color:var(--zc-text-3); }

/* ── Design notes (hidden until the "i" toggle) ──────────────────────────── */
.zc-shell .zc-lc .lc-note { margin-top:12px; padding:12px 14px; background:var(--zc-jade-bg); border-left:3px solid var(--zc-jade); border-radius:0 8px 8px 0; }
.zc-shell .zc-lc:not(.is-notes) .lc-note { display:none; }
.zc-shell .zc-lc .lc-note b { display:block; font-size:12px; font-weight:800; color:var(--zc-text); margin-bottom:4px; }
.zc-shell .zc-lc .lc-note p { margin:0; font-size:12px; color:var(--zc-text-2); line-height:1.55; }
.zc-shell .zc-lc .lc-note p + p { margin-top:6px; }

/* ── Inputs strip — what Identity & schedule feeds the projection ────────
   Reads as provenance, not as controls: each chip is a shortcut back to the
   field it came from, so the numbers below always have a visible origin. */
.zc-shell .zc-lc .lc-inputs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:12px; border-bottom:1px dashed var(--zc-border); }
.zc-shell .zc-lc .lc-inputs-l { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--zc-text-3); flex:none; margin-right:2px; }
.zc-shell .zc-lc .lc-input { display:inline-flex; align-items:baseline; gap:5px; padding:4px 11px; background:var(--zc-surface-2); border:1px solid var(--zc-border); border-radius:9999px; font-family:inherit; cursor:pointer; white-space:nowrap; }
.zc-shell .zc-lc .lc-input:hover { border-color:var(--zc-jade-ring); background:var(--zc-jade-bg); }
.zc-shell .zc-lc .lc-input b { font-size:13px; font-weight:800; color:var(--zc-text); font-variant-numeric:tabular-nums; }
.zc-shell .zc-lc .lc-input span { font-size:11px; color:var(--zc-text-3); }
/* An unset run window is the one input whose absence changes what the panel can say. */
.zc-shell .zc-lc .lc-input.is-missing { border-color:var(--zc-tone-amber); background:var(--zc-tone-amber-bg); }
.zc-shell .zc-lc .lc-input.is-missing b, .zc-shell .zc-lc .lc-input.is-missing span { color:var(--zc-tone-amber); }

/* ── Levers ──────────────────────────────────────────────────────────────── */
.zc-shell .zc-lc .lc-lever { background:var(--zc-surface-2); border:1px solid var(--zc-border); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.zc-shell .zc-lc .lc-lever-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.zc-shell .zc-lc .lc-lever-top h4 { margin:0 0 2px; font-size:13px; font-weight:700; color:var(--zc-text); }
.zc-shell .zc-lc .lc-lever-top p { margin:0; font-size:11px; color:var(--zc-text-3); }
.zc-shell .zc-lc .lc-odds-read { text-align:right; }
.zc-shell .zc-lc .lc-odds-read .big { display:block; font-size:16px; font-weight:800; color:var(--zc-jade); letter-spacing:-.01em; }
.zc-shell .zc-lc .lc-odds-read .cap { font-size:10px; color:var(--zc-text-3); }
.zc-shell .zc-lc .lc-range { width:100%; -webkit-appearance:none; appearance:none; background:transparent; height:24px; cursor:pointer; }
.zc-shell .zc-lc .lc-range::-webkit-slider-runnable-track { height:6px; background:linear-gradient(90deg,var(--zc-tone-jade),var(--zc-tone-teal)); border-radius:9999px; }
.zc-shell .zc-lc .lc-range::-moz-range-track { height:6px; background:linear-gradient(90deg,var(--zc-tone-jade),var(--zc-tone-teal)); border-radius:9999px; }
.zc-shell .zc-lc .lc-range::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--zc-jade); box-shadow:0 2px 6px rgba(0,0,0,.15); margin-top:-6px; cursor:pointer; }
.zc-shell .zc-lc .lc-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--zc-jade); box-shadow:0 2px 6px rgba(0,0,0,.15); cursor:pointer; }
.zc-shell .zc-lc .lc-lever-stops { display:flex; justify-content:space-between; font-size:10px; color:var(--zc-text-4); margin-top:2px; }
.zc-shell .zc-lc .lc-lever-stops .on { color:var(--zc-jade); font-weight:700; }
.zc-shell .zc-lc .lc-odds-feas { margin:10px 0 0; font-size:12px; color:var(--zc-text-2); }
.zc-shell .zc-lc .lc-odds-feas b { color:var(--zc-text); font-weight:700; font-variant-numeric:tabular-nums; }

/* ── Allocation bar ──────────────────────────────────────────────────────── */
.zc-shell .zc-lc .lc-alloc { background:var(--zc-surface-2); border:1px solid var(--zc-border); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.zc-shell .zc-lc .lc-alloc-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.zc-shell .zc-lc .lc-alloc-h h4 { margin:0; font-size:13px; font-weight:700; color:var(--zc-text); }
.zc-shell .zc-lc .lc-alloc-h p { margin:0; font-size:11px; color:var(--zc-text-3); flex:1; }
.zc-shell .zc-lc .lc-vs-top { display:flex; align-items:baseline; gap:8px; font-size:12px; color:var(--zc-text-2); margin-bottom:6px; flex-wrap:wrap; }
.zc-shell .zc-lc .lc-vs-v { font-size:18px; font-weight:800; color:var(--zc-text); font-variant-numeric:tabular-nums; }
.zc-shell .zc-lc .lc-vs-v.over { color:var(--zc-tone-red); }
.zc-shell .zc-lc .lc-vs-pct { margin-left:auto; font-size:11px; color:var(--zc-text-3); font-weight:700; }
.zc-shell .zc-lc .lc-mixwrap { position:relative; height:14px; background:var(--zc-surface-3); border-radius:9999px; overflow:visible; margin-bottom:8px; }
.zc-shell .zc-lc .lc-mix { position:absolute; inset:0; border-radius:9999px; overflow:hidden; display:flex; }
.zc-shell .zc-lc .lc-mix > span { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:800; padding:0 6px; overflow:hidden; text-shadow:0 1px 2px rgba(0,0,0,.30); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zc-shell .zc-lc .lc-mix > span.thin { padding:0; text-indent:9999px; }
.zc-shell .zc-lc .lc-mix > span.is-picked { outline:2px solid var(--zc-text); outline-offset:-3px; }
.zc-shell .zc-lc .lc-vs-mark { position:absolute; top:-2px; bottom:-2px; transform:translateX(-1px); }
.zc-shell .zc-lc .lc-vs-mark i { display:block; width:2px; height:100%; background:var(--zc-text); }
.zc-shell .zc-lc .lc-vs-mark u { position:absolute; left:-24px; top:-16px; font-size:9px; text-decoration:none; color:var(--zc-text-3); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.zc-shell .zc-lc .lc-vs-mark.flip u { left:6px; }
.zc-shell .zc-lc .lc-vs-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:11px; flex-wrap:wrap; }
.zc-shell .zc-lc .lc-mix-key { display:flex; gap:12px; flex-wrap:wrap; }
.zc-shell .zc-lc .lc-mix-key span { display:inline-flex; align-items:center; gap:5px; color:var(--zc-text-2); }
.zc-shell .zc-lc .lc-mix-key i { width:8px; height:8px; border-radius:2px; display:inline-block; }
.zc-shell .zc-lc .zc-cmeta.over { color:var(--zc-tone-red); font-weight:700; }
.zc-shell .zc-lc .lc-alloc-total { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--zc-border); }
.zc-shell .zc-lc .lc-alloc-total > div { display:flex; flex-direction:column; gap:2px; }
.zc-shell .zc-lc .lc-alloc-total b { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--zc-text-3); font-weight:700; }
.zc-shell .zc-lc .lc-alloc-total .t { font-size:20px; font-weight:800; color:var(--zc-text); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.zc-shell .zc-lc .lc-alloc-total .t.over { color:var(--zc-tone-red); }
.zc-shell .zc-lc .lc-alloc-total em { font-size:11px; color:var(--zc-text-3); font-style:normal; }
.zc-shell .zc-lc .lc-forecast { margin-top:12px; padding:10px 12px; background:var(--zc-surface); border-radius:8px; display:flex; gap:10px; align-items:flex-start; }
.zc-shell .zc-lc .lc-forecast .g { font-size:16px; color:var(--zc-text-3); }
.zc-shell .zc-lc .lc-forecast p { margin:0; font-size:12px; color:var(--zc-text-2); line-height:1.5; }

/* ── Mode picker + editor ────────────────────────────────────────────────── */
.zc-shell .zc-lc .lc-mode-row { display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:10px; margin-top:2px; min-width:0; }
.zc-shell .zc-lc .lc-picker { border:1px dashed var(--zc-border); border-radius:8px; padding:10px 12px; margin-top:14px; min-width:0; }
.zc-shell .zc-lc .lc-picker legend { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--zc-text-3); font-weight:700; padding:0 6px; }
.zc-shell .zc-lc .lc-picker-row { display:flex; gap:6px; flex-wrap:wrap; }
.zc-shell .zc-lc .lc-picker-radio { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--zc-border); border-radius:9999px; font-size:12px; font-weight:600; color:var(--zc-text-2); cursor:pointer; background:none; font-family:inherit; text-align:left; }
.zc-shell .zc-lc .lc-picker-radio .sw { width:8px; height:8px; border-radius:9999px; flex:none; }
.zc-shell .zc-lc .lc-picker-radio .lc-picker-meta { color:var(--zc-text-3); font-weight:500; font-size:11px; margin-left:4px; }
.zc-shell .zc-lc .lc-picker-radio.is-active { background:var(--zc-jade-bg); border-color:var(--zc-jade-ring); color:var(--zc-text); }
.zc-shell .zc-lc .lc-picker-radio.unfunded { opacity:.55; }
.zc-shell .zc-lc .lc-picker-radio.unfunded .lc-picker-meta { color:var(--zc-text-4); }
.zc-shell .zc-lc .lc-editor { margin-top:12px; padding:14px 16px; background:var(--zc-surface); border:1px solid var(--zc-border); border-radius:8px; min-width:0; }
.zc-shell .zc-lc .lc-editor-h { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.zc-shell .zc-lc .lc-editor-h .sw { width:10px; height:10px; border-radius:9999px; flex:none; }
.zc-shell .zc-lc .lc-editor-h h5 { margin:0; font-size:14px; font-weight:800; color:var(--zc-text); }
.zc-shell .zc-lc .lc-ed-share { margin-left:auto; font-size:11px; color:var(--zc-text-3); font-weight:600; }
.zc-shell .zc-lc .lc-ed-lever { margin-bottom:12px; }
.zc-shell .zc-lc .lc-ed-lever:last-of-type { margin-bottom:0; }
.zc-shell .zc-lc .lc-ed-lbl { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; }
.zc-shell .zc-lc .lc-ed-lbl label { font-size:12px; color:var(--zc-text-2); font-weight:600; }
.zc-shell .zc-lc .lc-ed-lbl output { font-size:13px; font-weight:800; color:var(--zc-jade); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zc-shell .zc-lc .lc-ed-hint { margin:4px 0 0; font-size:11px; color:var(--zc-text-3); }
.zc-shell .zc-lc .lc-ed-result { margin:10px 0 0; padding-top:10px; border-top:1px dashed var(--zc-border); font-size:12px; color:var(--zc-text-2); }
.zc-shell .zc-lc .lc-ed-result b { color:var(--zc-text); font-weight:700; font-variant-numeric:tabular-nums; }
.zc-shell .zc-lc .lc-ed-result.off { color:var(--zc-text-3); font-style:italic; }
.zc-shell .zc-lc .lc-vars { display:flex; gap:14px; flex-wrap:wrap; border-top:1px dashed var(--zc-border); margin-top:12px; padding-top:11px; font-size:10px; color:var(--zc-text-4); font-family:var(--zc-mono); }
.zc-shell .zc-lc .lc-vars i { color:var(--zc-tone-violet); font-style:normal; }
.zc-shell .zc-lc .lc-var-v { font-weight:700; color:var(--zc-text-3); }

/* Budget panel — tightened so it fits without scrolling */
.zc-shell .zc-lc .lc-budget-tight .lc-lever { padding:10px 14px; margin-bottom:10px; }
.zc-shell .zc-lc .lc-budget-tight .lc-lever-top { margin-bottom:8px; }
.zc-shell .zc-lc .lc-budget-tight .lc-lever-top h4 { font-size:12px; }
.zc-shell .zc-lc .lc-budget-tight .lc-odds-read .big { font-size:14px; }
.zc-shell .zc-lc .lc-budget-tight .lc-range { height:18px; }
.zc-shell .zc-lc .lc-budget-tight .lc-lever-stops { font-size:9px; margin-top:0; }
.zc-shell .zc-lc .lc-budget-tight .lc-odds-feas { margin-top:6px; font-size:11px; }
.zc-shell .zc-lc .lc-budget-tight .lc-alloc { padding:10px 14px; margin-bottom:10px; }
.zc-shell .zc-lc .lc-budget-tight .lc-alloc-h { margin-bottom:6px; }
.zc-shell .zc-lc .lc-budget-tight .lc-alloc-h h4 { font-size:12px; }
.zc-shell .zc-lc .lc-budget-tight .lc-vs-top { margin-bottom:4px; }
.zc-shell .zc-lc .lc-budget-tight .lc-vs-v { font-size:16px; }
.zc-shell .zc-lc .lc-budget-tight .lc-mixwrap { height:12px; margin-bottom:6px; }
.zc-shell .zc-lc .lc-budget-tight .lc-mix > span { font-size:9px; }
.zc-shell .zc-lc .lc-budget-tight .lc-alloc-total { margin-top:10px; padding-top:8px; gap:8px; }
.zc-shell .zc-lc .lc-budget-tight .lc-alloc-total b { font-size:9px; }
.zc-shell .zc-lc .lc-budget-tight .lc-alloc-total .t { font-size:16px; }
.zc-shell .zc-lc .lc-budget-tight .lc-alloc-total em { font-size:10px; }
.zc-shell .zc-lc .lc-budget-tight .lc-forecast { padding:8px 10px; margin-top:8px; }
.zc-shell .zc-lc .lc-budget-tight .lc-forecast p { font-size:11px; line-height:1.4; }
.zc-shell .zc-lc .lc-budget-tight .lc-picker { padding:8px 10px; margin-top:0; }
.zc-shell .zc-lc .lc-budget-tight .lc-picker legend { font-size:9px; padding:0 4px; }
.zc-shell .zc-lc .lc-budget-tight .lc-picker-row { flex-direction:column; gap:4px; }
.zc-shell .zc-lc .lc-budget-tight .lc-picker-radio { padding:5px 8px; font-size:11px; width:100%; justify-content:flex-start; }
.zc-shell .zc-lc .lc-budget-tight .lc-picker-radio .lc-picker-meta { font-size:10px; margin-left:auto; }
.zc-shell .zc-lc .lc-budget-tight .lc-editor { margin-top:0; padding:10px 12px; }
.zc-shell .zc-lc .lc-budget-tight .lc-editor-h { margin-bottom:6px; }
.zc-shell .zc-lc .lc-budget-tight .lc-editor-h h5 { font-size:12px; }
.zc-shell .zc-lc .lc-budget-tight .lc-ed-share { font-size:10px; }
.zc-shell .zc-lc .lc-budget-tight .lc-ed-lever { margin-bottom:6px; }
.zc-shell .zc-lc .lc-budget-tight .lc-ed-lbl label { font-size:11px; }
.zc-shell .zc-lc .lc-budget-tight .lc-ed-lbl output { font-size:12px; }
.zc-shell .zc-lc .lc-budget-tight .lc-ed-hint { font-size:10px; }
.zc-shell .zc-lc .lc-budget-tight .lc-ed-result { margin-top:6px; padding-top:6px; font-size:11px; }

/* ── Benchmark strip — one line on the Budget panel, not a tab ──────────── */
.zc-shell .zc-lc .lc-bench-strip { display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--zc-border); flex-wrap:wrap; }
.zc-shell .zc-lc .lc-bench-l { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--zc-text-3); flex:none; }
.zc-shell .zc-lc .lc-bench-bar { position:relative; flex:1 1 160px; min-width:120px; height:6px; background:var(--zc-surface-3); border-radius:9999px; }
.zc-shell .zc-lc .lc-bench-bar .band { position:absolute; top:0; bottom:0; background:var(--zc-tone-jade-bg); border:1px solid var(--zc-tone-jade); border-radius:9999px; }
.zc-shell .zc-lc .lc-bench-bar .pin { position:absolute; top:-4px; width:2px; height:14px; background:var(--zc-text); transform:translateX(-1px); transition:left .2s ease; }
.zc-shell .zc-lc .lc-bench-bar .pin.over { background:var(--zc-tone-red); }
.zc-shell .zc-lc .lc-bench-bar .pin.under { background:var(--zc-tone-amber); }
.zc-shell .zc-lc .lc-bench-r { font-size:11px; color:var(--zc-text-3); flex:none; font-variant-numeric:tabular-nums; }
.zc-shell .zc-lc .lc-bench-r b { color:var(--zc-text-2); font-weight:700; }
.zc-shell .zc-lc .lc-bench-r b.over { color:var(--zc-tone-red); }

/* ── Atlas GIS (Targeting) ───────────────────────────────────────────────── */
.zc-shell .zc-lc .gis { border:1px solid var(--zc-border); border-radius:var(--zc-r-sm); overflow:hidden; background:var(--zc-surface-2); min-width:0; max-width:100%; }
.zc-shell .zc-lc .gis-bar { display:flex; align-items:center; gap:6px; padding:8px 10px; background:var(--zc-surface); border-bottom:1px solid var(--zc-border); flex-wrap:wrap; }
.zc-shell .zc-lc .gis-tool { display:inline-flex; align-items:center; gap:5px; background:var(--zc-surface-2); border:1px solid var(--zc-border); color:var(--zc-text-2); padding:5px 10px; border-radius:8px; font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.zc-shell .zc-lc .gis-tool .g { font-family:var(--zc-mono); font-size:12px; color:var(--zc-tone-violet); line-height:1; }
.zc-shell .zc-lc .gis-tool:hover { border-color:var(--zc-tone-violet); color:var(--zc-text); }
.zc-shell .zc-lc .gis-tool[aria-pressed="true"] { background:var(--zc-tone-violet-bg); border-color:var(--zc-tone-violet); color:var(--zc-tone-violet); font-weight:700; }
.zc-shell .zc-lc .gis-div { width:1px; height:20px; background:var(--zc-border); margin:0 3px; }
.zc-shell .zc-lc .gis-spacer { flex:1; }
.zc-shell .zc-lc .gis-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,264px); min-height:340px; min-width:0; }
.zc-shell .zc-lc .gis-map { position:relative; background:var(--zc-surface-3); min-height:340px; overflow:hidden; }
.zc-shell .zc-lc .gis-map svg { display:block; width:100%; height:100%; }
/* The Atlas embed replaces the schematic plate — it needs real height, and its own
   map container manages its interop, so nothing here may clip or transform it. */
.zc-shell .zc-lc .gis-map .atlas-gis-embed { position:absolute; inset:0; display:grid; grid-template-columns:240px minmax(0,1fr); }
.zc-shell .zc-lc .gis-map .atlas-gis-embed-map { position:relative; min-width:0; }

/* Zone library — the list is selection; the map is geometry. Kept narrow so the map
   still carries the panel, and scrollable because a tenant's region library grows. */
.zc-shell .zc-lc .atlas-gis-embed-list {
    display:flex; flex-direction:column; min-height:0; overflow-y:auto;
    background:var(--zc-surface); border-right:1px solid var(--zc-border); padding:8px;
    scrollbar-width:thin;
}
.zc-shell .zc-lc .atlas-gis-embed-search { display:flex; align-items:center; gap:6px; padding:5px 8px; margin-bottom:8px; background:var(--zc-surface-2); border:1px solid var(--zc-border); border-radius:8px; }
.zc-shell .zc-lc .atlas-gis-embed-search .material-symbols-outlined { font-size:16px; color:var(--zc-text-4); }
.zc-shell .zc-lc .atlas-gis-embed-search input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--zc-text); font:inherit; font-size:12px; }
.zc-shell .zc-lc .atlas-gis-embed-group { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--zc-text-3); margin:10px 2px 5px; }
.zc-shell .zc-lc .atlas-gis-embed-empty { margin:0 2px 6px; font-size:11.5px; color:var(--zc-text-4); line-height:1.45; }
.zc-shell .zc-lc .atlas-gis-embed-item {
    display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:7px;
    border:1px solid transparent; cursor:default; user-select:none;
}
.zc-shell .zc-lc .atlas-gis-embed-item:hover { background:var(--zc-surface-2); border-color:var(--zc-border); }
.zc-shell .zc-lc .atlas-gis-embed-item > .material-symbols-outlined { font-size:15px; color:var(--zc-text-4); flex:none; }
.zc-shell .zc-lc .atlas-gis-embed-item.is-bound > .material-symbols-outlined { color:var(--zc-tone-jade); }
.zc-shell .zc-lc .atlas-gis-embed-item .nm {
    flex:1; min-width:0; text-align:left; background:none; border:none; padding:0; cursor:pointer;
    font:inherit; font-size:12px; color:var(--zc-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.zc-shell .zc-lc .atlas-gis-embed-item .nm:hover { color:var(--zc-jade); }
.zc-shell .zc-lc .atlas-gis-embed-item .add,
.zc-shell .zc-lc .atlas-gis-embed-item .rm {
    flex:none; background:none; border:none; padding:2px; cursor:pointer; display:grid; place-items:center;
    color:var(--zc-text-4); border-radius:5px; opacity:0;
}
.zc-shell .zc-lc .atlas-gis-embed-item:hover .add,
.zc-shell .zc-lc .atlas-gis-embed-item:hover .rm { opacity:1; }
.zc-shell .zc-lc .atlas-gis-embed-item .add:hover { color:var(--zc-tone-jade); background:var(--zc-tone-jade-bg); }
.zc-shell .zc-lc .atlas-gis-embed-item .rm:hover { color:var(--zc-tone-red); background:var(--zc-tone-red-bg); }
.zc-shell .zc-lc .atlas-gis-embed-item .add .material-symbols-outlined,
.zc-shell .zc-lc .atlas-gis-embed-item .rm .material-symbols-outlined { font-size:15px; }

/* The floating draw toolbar centres on the MAP, not the whole embed, now that a
   panel occupies the left. */
.zc-shell .zc-lc .atlas-gis-embed-map .atlas-gis-toolbar { left:50%; }

@media (max-width:900px) {
    .zc-shell .zc-lc .gis-map .atlas-gis-embed { grid-template-columns:minmax(0,1fr); }
    .zc-shell .zc-lc .atlas-gis-embed-list { display:none; }
}

/* The floating toolbar is hidden while IDLE — its persistent entry points (Circle /
   Square / Polygon / Edit / Fit) now live in the panel's tool row, which is the pattern
   AtlasGisSurface's public API exists for, and it stops the toolbar covering the middle
   of the map where you actually draw.
   
   It comes BACK while drawing, because the same element also holds Undo-point, Finish
   and Cancel — controls that act on the shape under the cursor. Hiding it outright would
   leave a polygon with no way to finish. `is-drawing` is set by the embed from the
   surface's own ActiveTool, so the two cannot disagree. */
.zc-shell .zc-skill-card.is-expanded .atlas-gis-embed.is-drawing .atlas-gis-toolbar { display:flex; }
.zc-shell .zc-skill-card.is-expanded .atlas-gis-embed .atlas-gis-hint { display:block; }

/* Draw tools — creation lives with the list it produces into. */
.zc-shell .zc-lc .atlas-gis-embed-tools { display:flex; align-items:center; gap:2px; flex-wrap:wrap; padding:2px 0 4px; }
.zc-shell .zc-lc .atlas-gis-embed-tools button {
    display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border-radius:7px;
    background:none; border:1px solid transparent; color:var(--zc-text-2);
    font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.zc-shell .zc-lc .atlas-gis-embed-tools button:hover { background:var(--zc-surface-2); border-color:var(--zc-border); color:var(--zc-text); }
.zc-shell .zc-lc .atlas-gis-embed-tools button.is-on { background:var(--zc-jade-bg); border-color:var(--zc-jade-ring); color:var(--zc-jade); }
.zc-shell .zc-lc .atlas-gis-embed-tools button .material-symbols-outlined { font-size:15px; }
.zc-shell .zc-lc .atlas-gis-embed-tools .sep { width:1px; align-self:stretch; margin:2px 4px; background:var(--zc-border); }
.zc-shell .zc-lc .gis-map-badge { position:absolute; left:8px; bottom:8px; background:var(--zc-surface); border:1px solid var(--zc-border); border-radius:6px; padding:3px 8px; font-family:var(--zc-mono); font-size:10px; color:var(--zc-text-3); }
.zc-shell .zc-lc .gis-map-scale { position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:4px; color:var(--zc-text-3); font-size:10px; font-family:var(--zc-mono); }
.zc-shell .zc-lc .gis-map-scale i { display:block; width:52px; height:4px; border:1px solid var(--zc-text-3); border-top:none; }
.zc-shell .zc-lc .gis-auto-note { position:absolute; left:12px; top:12px; max-width:280px; padding:10px 12px; background:var(--zc-surface); border-left:3px solid var(--zc-jade); border-radius:0 8px 8px 0; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.zc-shell .zc-lc .gis-auto-note b { display:block; font-size:12px; font-weight:800; color:var(--zc-text); margin-bottom:4px; }
.zc-shell .zc-lc .gis-auto-note p { margin:0; font-size:11.5px; line-height:1.45; color:var(--zc-text-2); }
.zc-shell .zc-lc .gis-layers { border-left:1px solid var(--zc-border); background:var(--zc-surface); display:flex; flex-direction:column; min-width:0; }
.zc-shell .zc-lc .gis-layers-h { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--zc-text-3); border-bottom:1px solid var(--zc-border); }
.zc-shell .zc-lc .gis-layer { display:block; width:100%; text-align:left; background:none; border:none; border-left:3px solid transparent; padding:10px 12px; cursor:pointer; font-family:inherit; border-bottom:1px solid var(--zc-border); }
.zc-shell .zc-lc .gis-layer:hover { background:var(--zc-surface-2); }
.zc-shell .zc-lc .gis-layer[aria-current="true"] { background:var(--zc-tone-violet-bg); border-left-color:var(--zc-tone-violet); }
.zc-shell .zc-lc .gis-layer-top { display:flex; align-items:center; gap:7px; }
.zc-shell .zc-lc .gis-swatch { width:11px; height:11px; border-radius:3px; flex:none; border:1px solid rgba(255,255,255,.28); }
.zc-shell .zc-lc .gis-layer-nm { font-size:12.5px; font-weight:600; flex:1; color:var(--zc-text); }
.zc-shell .zc-lc .gis-layer-meta { margin-top:4px; font-family:var(--zc-mono); font-size:10.5px; color:var(--zc-text-3); }
.zc-shell .zc-lc .gis-layer-tags { margin-top:6px; display:flex; gap:4px; flex-wrap:wrap; }
.zc-shell .zc-lc .gis-tag { font-size:9.5px; padding:2px 6px; border-radius:9999px; border:1px solid var(--zc-border); color:var(--zc-text-3); }
.zc-shell .zc-lc .gis-tag.on   { border-color:var(--zc-tone-jade);   color:var(--zc-tone-jade);   background:var(--zc-tone-jade-bg); }
.zc-shell .zc-lc .gis-tag.auto { border-color:var(--zc-tone-violet); color:var(--zc-tone-violet); background:var(--zc-tone-violet-bg); }
.zc-shell .zc-lc .gis-tag.disp { border-color:var(--zc-tone-blue);   color:var(--zc-tone-blue);   background:var(--zc-tone-blue-bg); }
.zc-shell .zc-lc .gis-layers-add { padding:10px 12px; }
.zc-shell .zc-lc .gis-roles { display:flex; gap:18px; flex-wrap:wrap; padding:11px 13px; border-top:1px solid var(--zc-border); background:var(--zc-surface); align-items:center; }
.zc-shell .zc-lc .gis-roles-l { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--zc-text-3); }
.zc-shell .zc-lc .gis-role { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--zc-text-2); }
.zc-shell .zc-lc .gis-role input { accent-color:var(--zc-jade); }
.zc-shell .zc-lc .gis-role code { font-family:var(--zc-mono); font-size:10.5px; color:var(--zc-text-3); }
.zc-shell .zc-lc .gis-checks { display:flex; flex-wrap:wrap; gap:6px; padding:10px 13px; border-top:1px solid var(--zc-border); background:var(--zc-surface-2); }
.zc-shell .zc-lc .gis-chk { font-size:10px; font-family:var(--zc-mono); padding:3px 7px; border-radius:4px; }
.zc-shell .zc-lc .gis-chk.ok   { background:var(--zc-tone-jade-bg);  color:var(--zc-tone-jade); }
.zc-shell .zc-lc .gis-chk.warn { background:var(--zc-tone-amber-bg); color:var(--zc-tone-amber); }

/* ── Advanced mechanic blocks ────────────────────────────────────────────── */
.zc-shell .zc-lc .lc-grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.zc-shell .zc-lc .lc-block-sm { background:var(--zc-surface-2); border:1px solid var(--zc-border); border-radius:8px; padding:10px 12px; }
.zc-shell .zc-lc .lc-block-sm h4 { margin:0 0 8px; font-size:12px; font-weight:700; color:var(--zc-text); }
.zc-shell .zc-lc .lc-sm-row { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--zc-text-2); padding:3px 0; border-bottom:1px solid var(--zc-border); }
.zc-shell .zc-lc .lc-sm-row:last-child { border-bottom:none; }
.zc-shell .zc-lc .lc-sm-row b { color:var(--zc-text); font-weight:700; font-variant-numeric:tabular-nums; }
/* A derived row is read-only, so it should not look like a field waiting for input.
   The source tag is what makes read-only legible rather than broken. */
.zc-shell .zc-lc .lc-sm-row.is-derived b { display:inline-flex; align-items:baseline; gap:6px; }
.zc-shell .zc-lc .lc-sm-row.is-derived .src { font-size:9.5px; font-weight:600; font-style:normal; letter-spacing:.03em; color:var(--zc-tone-jade); background:var(--zc-tone-jade-bg); padding:1px 5px; border-radius:4px; white-space:nowrap; }
.zc-shell .zc-lc .lc-sm-row.is-derived span { color:var(--zc-text-3); }
.zc-shell .zc-lc .lc-raw { font-family:var(--zc-mono); font-size:11px; color:var(--zc-text-2); background:var(--zc-surface); border:1px solid var(--zc-border); border-radius:8px; padding:10px 12px; max-height:280px; overflow:auto; white-space:pre-wrap; word-break:break-word; }

/* ── Advanced-only visibility ────────────────────────────────────────────── */
.zc-shell .zc-lc .lc-adv-only.lc-adv-only { display:none !important; }
.zc-shell .zc-lc.is-adv .lc-adv-only.lc-adv-only { display:initial !important; }
.zc-shell .zc-lc.is-adv .lc-fields .lc-adv-only.lc-adv-only { display:flex !important; }
.zc-shell .zc-lc.is-adv .lc-sec.lc-adv-only.lc-adv-only { display:block !important; }
.zc-shell .zc-lc.is-adv .lc-tab-panel.lc-adv-only.lc-adv-only { display:block !important; }
.zc-shell .zc-lc.is-adv .lc-vars.lc-adv-only.lc-adv-only { display:flex !important; }
.zc-shell .zc-lc.is-adv .gis-checks.lc-adv-only.lc-adv-only { display:flex !important; }
.zc-shell .zc-lc.is-adv .gis-role.lc-adv-only.lc-adv-only { display:flex !important; }
.zc-shell .zc-lc.is-adv .lc-tabs button.lc-adv-only.lc-adv-only,
.zc-shell .zc-lc.is-adv .gis-tool.lc-adv-only.lc-adv-only { display:inline-flex !important; }

/* ── Foot bar ────────────────────────────────────────────────────────────── */
.zc-shell .zc-lc .zc-footbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0 0; border-top:1px solid var(--zc-border); margin-top:18px; flex-wrap:wrap; }
.zc-shell .zc-lc .zc-footbar-status { font-size:12px; color:var(--zc-text-3); display:inline-flex; align-items:center; gap:6px; }
.zc-shell .zc-lc .zc-footbar-status .material-symbols-outlined { font-size:14px; color:var(--zc-tone-jade); }
.zc-shell .zc-lc .zc-footbar-status.err { color:var(--zc-tone-red); }
.zc-shell .zc-lc .zc-footbar-status.err .material-symbols-outlined { color:var(--zc-tone-red); }
.zc-shell .zc-lc .zc-footbar-actions { display:flex; gap:8px; align-items:center; }

/* ── Confetti (body-level overlay painted by launchconfig.js) ────────────── */
.lc-confetti { position:fixed; inset:0; pointer-events:none; z-index:9990; overflow:hidden; }
.lc-confetti i { position:absolute; display:block; width:8px; height:13px; border-radius:1.5px; animation:lc-fall var(--dur) cubic-bezier(.18,.7,.5,1) forwards; }
@keyframes lc-fall {
    0%   { transform: translate3d(0,0,0) rotate(0deg); opacity:1; }
    100% { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)); opacity:0; }
}

/* ── Narrow layouts ──────────────────────────────────────────────────────── */
@media (max-width:1100px) { .zc-shell .zc-lc .lc-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) {
    .zc-shell .zc-lc .lc-mode-row { grid-template-columns:1fr; }
    .zc-shell .zc-lc .lc-grid-3, .zc-shell .zc-lc .zc-grid-3 { grid-template-columns:1fr; }
    .zc-shell .zc-lc .gis-main { grid-template-columns:1fr; }
        .zc-shell .zc-lc .lc-fields { grid-template-columns:minmax(0,1fr); }
    .zc-shell .zc-lc .lc-gate { grid-template-columns:1fr; }
    .zc-shell .zc-lc .lc-gate-score { border-right:none; padding-right:0; }
    .zc-shell .zc-lc .lc-alloc-total { grid-template-columns:1fr; }
    }