/* ============================================================================
   cockpit.css — "Claims Assessor / Manager Cockpit" surface.

   SCOPED THEME (do NOT re-theme the app): every rule below is namespaced under
   `#tab-my_dashboard.cockpit`. Nothing here leaks out.

   THEME-TOKEN MODEL (2026-06 light-default refactor)
   --------------------------------------------------
   Every surface / text / border / glow / shadow colour the cockpit paints is
   sourced from a `--ck-*` token declared on the `.cockpit` container. There are
   TWO complete value sets:

     • LIGHT  — the DEFAULT (bare `.cockpit` selector) AND `.cockpit[data-theme="light"]`.
                Matches the platform's light SPA: alabaster page, white cards with a
                hairline + soft shadow, obsidian text, mist-strong muted text, the
                shared --violet accent. AA-safe status TEXT variants.
     • DARK   — `.cockpit[data-theme="dark"]`. The PREVIOUS cockpit, captured VERBATIM
                (byte-identical to the old hardcoded dark surface). Dormant today;
                kept alive for a future app-wide dark mode. The real cockpit never
                emits data-theme="dark" — cockpit.js sets data-theme="light".

   Brand + status ACCENTS (violet / green / amber / red fills, icon tints) are
   SHARED across both themes — only their *text-on-surface* variants differ
   (status text needs AA contrast on a light card, so light mode darkens the
   green/amber/red used for type).

   Where the platform brand tokens in dashboard.css already align
   (--violet / --violet-light / --indigo, JetBrains Mono, the success/warning
   semantics) we REUSE them via var() with a local fallback so the preview file
   (cockpit_preview.html) renders standalone outside the SPA.

   Shared across the live tab AND cockpit_preview.html — keep it self-contained.
   ========================================================================== */

/* ===========================================================================
   THEME TOKENS — LIGHT (default + explicit [data-theme="light"])
   ===========================================================================
   The bare `.cockpit` selector carries the light set so the cockpit is light
   even if no data-theme attribute is present (defence-in-depth: the JS sets
   "light", but a missing attribute must still render light, never dark). */
#tab-my_dashboard.cockpit,
#tab-my_dashboard.cockpit[data-theme="light"] {
  /* --- Surfaces ----------------------------------------------------------- */
  --ck-bg: #F2F0EB;            /* == platform --alabaster (page background)   */
  --ck-surface-1: #FFFFFF;     /* cards / panels — match dashboard.css .card  */
  --ck-surface-2: #FFFFFF;     /* nested tiles (queue tiles, buckets, picks)  */
  --ck-surface-3: #F2F0EB;     /* hover / icon chips — faint alabaster wash   */
  /* --- Hairlines / borders ------------------------------------------------ */
  --ck-hair: rgba(0, 0, 0, 0.08);          /* matches .card / .stat hairline  */
  --ck-hair-strong: rgba(0, 0, 0, 0.12);   /* button + dashed borders         */
  /* --- Text --------------------------------------------------------------- */
  --ck-text-pure: #1A1A1A;     /* == --obsidian (strongest, e.g. KPI value)   */
  --ck-text: #1A1A1A;          /* == --obsidian (body / titles)               */
  --ck-muted: #5C5470;         /* == --mist-strong (AA muted, 7.10:1 on white)*/
  --ck-muted-dim: #5C5470;     /* AA-safe dim — same as muted on light        */
  /* --- Elevation / ambient ------------------------------------------------ */
  --ck-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);   /* == .card / .stat shadow    */
  --ck-shadow-strong: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* Ambient violet glow — a very faint tint on light (not the dark bloom).   */
  --ck-glow: radial-gradient(60% 60% at 50% 0%,
              rgba(108, 64, 236, 0.04),
              rgba(47, 60, 158, 0.02) 45%,
              transparent 72%);
  /* --- Brand accents (SHARED across themes) ------------------------------- */
  --ck-violet: var(--violet, #6C40EC);
  --ck-violet-light: var(--violet-light, #8B5CF6);
  --ck-indigo: var(--indigo, #2F3C9E);
  --ck-green: var(--color-success, #22C55E);   /* status FILL / icon glyph    */
  --ck-amber: var(--color-warning, #F59E0B);
  --ck-red: var(--color-error, #EF4444);
  /* Status TEXT — AA-safe on a white card (the surface the chips sit on).
     Distinct from the fills above so a coloured word reads at >=4.5:1, while
     fills/icons keep the vivid brand hue. The cockpit status text is small
     (9.5–11px) so it must clear the 4.5:1 NORMAL-text bar, not the 3:1 large
     bar — hence green is the green-700 sibling of dashboard.css's badge-active
     green-600 (#16a34a measures 3.30:1 on white, below AA; #15803d = 5.02:1).
     Amber/red match dashboard.css badge-draft/badge-funeral verbatim (both
     clear 4.5:1 on white). */
  --ck-green-text: #15803d;    /* green-700 (5.02:1 on white) — AA-safe        */
  --ck-amber-text: #b45309;    /* == .badge-draft  text (5.02:1 on white)      */
  --ck-red-text: #b91c1c;      /* == .badge-funeral text (6.47:1 on white)     */
  --ck-violet-text: var(--violet-dark, #4F2DB8);  /* info text (8.75:1 white)  */
  /* Soft status tints (badge/chip backgrounds) — light, low-alpha washes.    */
  --ck-green-soft: rgba(34, 197, 94, 0.15);
  --ck-amber-soft: rgba(245, 158, 11, 0.15);
  --ck-violet-soft: rgba(108, 64, 236, 0.10);
  --ck-status-neutral-bg: rgba(0, 0, 0, 0.05);  /* default (no-status) chip   */
  /* Attention accents — borders / sweeps that flag a breaching tile. The
     border is a darker amber (#c2620a) so it clears the WCAG 1.4.11 non-text
     3:1 bar against a white card (4.16:1); the vivid #F59E0B fill/icon/value
     still carries the state too, so colour is never the sole signal. */
  --ck-attn-border: #c2620a;
  --ck-attn-sweep: rgba(245, 158, 11, 0.6);
  --ck-kpi-sweep: rgba(108, 64, 236, 0.45);     /* top hairline sweep on KPI  */
  /* Shadows that carry brand colour (brand mark, primary button).            */
  --ck-brand-mark-shadow: 0 2px 8px rgba(108, 64, 236, 0.18);
  --ck-brand-mark-inset: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  --ck-btn-primary-shadow: 0 4px 12px rgba(108, 64, 236, 0.22);
  --ck-btn-primary-shadow-hover: 0 6px 18px rgba(108, 64, 236, 0.30);
  /* Skeleton shimmer sweep + error surface.                                  */
  --ck-skel-shimmer: rgba(0, 0, 0, 0.05);
  --ck-error-bg: rgba(239, 68, 68, 0.08);
  --ck-error-border: rgba(239, 68, 68, 0.28);
  --ck-gauge-track: var(--ck-hair);             /* light gauge track          */
  /* --- Geometry / type (theme-invariant, but tokenised for one source) ---- */
  --ck-radius: 14px;
  --ck-radius-sm: 10px;
  --ck-mono: var(--font-data, 'JetBrains Mono', 'SF Mono', Menlo, monospace);
  --ck-sans: var(--font-ui, 'Inter', 'Segoe UI', system-ui, sans-serif);
}

/* ===========================================================================
   THEME TOKENS — DARK (dormant; the PREVIOUS cockpit captured VERBATIM)
   ===========================================================================
   These reproduce the old hardcoded dark surface byte-for-byte. Do not edit to
   "match" light — this set is the historical record of the dark look. */
#tab-my_dashboard.cockpit[data-theme="dark"] {
  --ck-bg: #0E0E16;
  --ck-surface-1: #141525;
  --ck-surface-2: #1C1C2B;
  --ck-surface-3: #23233a;
  --ck-hair: rgba(255, 255, 255, 0.08);
  --ck-hair-strong: rgba(255, 255, 255, 0.14);
  --ck-text-pure: #FFFFFF;
  --ck-text: #F2F0EB;          /* == platform --alabaster                     */
  --ck-muted: #A8A3B8;         /* == platform --mist                          */
  --ck-muted-dim: #7c7790;
  --ck-shadow: none;           /* the dark surface used no drop shadow        */
  --ck-shadow-strong: none;
  --ck-glow: radial-gradient(60% 60% at 50% 0%,
              rgba(108, 64, 236, 0.18),
              rgba(47, 60, 158, 0.06) 45%,
              transparent 72%);
  --ck-violet: var(--violet, #6C40EC);
  --ck-violet-light: var(--violet-light, #8B5CF6);
  --ck-indigo: var(--indigo, #2F3C9E);
  --ck-green: var(--color-success, #22C55E);
  --ck-amber: var(--color-warning, #F59E0B);
  --ck-red: var(--color-error, #EF4444);
  /* On the dark surface the vivid fill IS the readable colour — status text
     reuses the brand hue (the old behaviour). */
  --ck-green-text: var(--ck-green);
  --ck-amber-text: var(--ck-amber);
  --ck-red-text: var(--ck-red);
  --ck-violet-text: var(--ck-violet-light);
  --ck-green-soft: rgba(34, 197, 94, 0.14);
  --ck-amber-soft: rgba(245, 158, 11, 0.16);
  --ck-violet-soft: rgba(108, 64, 236, 0.16);
  --ck-status-neutral-bg: rgba(255, 255, 255, 0.06);
  --ck-attn-border: rgba(245, 158, 11, 0.40);
  --ck-attn-sweep: rgba(245, 158, 11, 0.6);
  --ck-kpi-sweep: rgba(108, 64, 236, 0.55);
  --ck-brand-mark-shadow: 0 8px 24px rgba(108, 64, 236, 0.30);
  --ck-brand-mark-inset: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  --ck-btn-primary-shadow: 0 6px 20px rgba(108, 64, 236, 0.32);
  --ck-btn-primary-shadow-hover: 0 8px 26px rgba(108, 64, 236, 0.46);
  --ck-skel-shimmer: rgba(255, 255, 255, 0.06);
  --ck-error-bg: rgba(239, 68, 68, 0.10);
  --ck-error-border: rgba(239, 68, 68, 0.32);
  --ck-gauge-track: var(--ck-hair);
  --ck-radius: 14px;
  --ck-radius-sm: 10px;
  --ck-mono: var(--font-data, 'JetBrains Mono', 'SF Mono', Menlo, monospace);
  --ck-sans: var(--font-ui, 'Inter', 'Segoe UI', system-ui, sans-serif);
}

/* ===========================================================================
   CONTAINER
   =========================================================================== */
#tab-my_dashboard.cockpit {
  position: relative;
  background: var(--ck-bg);
  color: var(--ck-text);
  font-family: var(--ck-sans);
  border-radius: var(--ck-radius);
  /* Breathing room; on light it sits flush with the alabaster page so it reads
     as part of the SPA rather than a pulled-out dark panel. */
  margin: 4px 0 28px;
  padding: 22px 22px 30px;
  overflow: hidden;          /* clips the ambient glow to the panel        */
  isolation: isolate;        /* glow z-index stays inside the cockpit      */
  -webkit-font-smoothing: antialiased;
}

/* Ambient intelligence glow — token-driven so it's a faint tint on light and
   the original violet bloom on dark. */
#tab-my_dashboard.cockpit::before {
  content: "";
  position: absolute;
  top: -34vh;
  left: 50%;
  width: 140%;
  max-width: 1200px;
  height: 70vh;
  transform: translateX(-50%);
  background: var(--ck-glow);
  pointer-events: none;
  z-index: 0;
}

#tab-my_dashboard.cockpit > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
#tab-my_dashboard .ck-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ck-hair);
}
#tab-my_dashboard .ck-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
#tab-my_dashboard .ck-brand-mark {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ck-violet), var(--ck-indigo));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ck-brand-mark-inset), var(--ck-brand-mark-shadow);
}
#tab-my_dashboard .ck-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
#tab-my_dashboard .ck-wordmark {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ck-text-pure); white-space: nowrap;
}
#tab-my_dashboard .ck-eyebrow {
  font-size: 11px; color: var(--ck-muted); letter-spacing: 0.02em; margin-top: 2px;
}
#tab-my_dashboard .ck-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
#tab-my_dashboard .ck-live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ck-surface-1); border: 1px solid var(--ck-hair);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; color: var(--ck-text); white-space: nowrap;
  box-shadow: var(--ck-shadow);
}
#tab-my_dashboard .ck-live-pill .ck-lbl { color: var(--ck-muted); }
#tab-my_dashboard .ck-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ck-green);
  position: relative; flex-shrink: 0;
}
#tab-my_dashboard .ck-live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ck-green); animation: ckPulse 2.4s ease-out infinite;
}
@keyframes ckPulse {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { opacity: 0; }
}

/* Refresh button — ghost, matches the demo .btn family */
#tab-my_dashboard .ck-btn {
  font-family: var(--ck-sans); font-size: 12.5px; font-weight: 600;
  border-radius: 10px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--ck-hair-strong);
  background: transparent; color: var(--ck-text);
  transition: background .2s ease, border-color .2s ease, transform .1s ease, box-shadow .3s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
#tab-my_dashboard .ck-btn:hover { background: var(--ck-surface-3); }
#tab-my_dashboard .ck-btn:active { transform: scale(0.98); }
#tab-my_dashboard .ck-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--ck-bg), 0 0 0 4px var(--ck-violet-light);
}
#tab-my_dashboard .ck-btn[aria-disabled="true"],
#tab-my_dashboard .ck-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#tab-my_dashboard .ck-btn-primary {
  background: linear-gradient(135deg, var(--ck-violet), var(--ck-indigo));
  border-color: transparent; color: #fff;
  box-shadow: var(--ck-btn-primary-shadow);
}
#tab-my_dashboard .ck-btn-primary:hover {
  background: linear-gradient(135deg, #7a52ef, #39499f);
  box-shadow: var(--ck-btn-primary-shadow-hover);
}

/* ---------------------------------------------------------------------------
   Section scaffolding (demo lines 305-311)
   --------------------------------------------------------------------------- */
#tab-my_dashboard .ck-section-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ck-muted-dim); font-weight: 600;
  margin: 26px 0 12px; display: flex; align-items: center; gap: 10px;
}
#tab-my_dashboard .ck-section-label:first-of-type { margin-top: 4px; }
#tab-my_dashboard .ck-section-label .ck-line { flex: 1; height: 1px; background: var(--ck-hair); }
#tab-my_dashboard .ck-section-label .ck-tag {
  font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ck-muted-dim); font-family: var(--ck-mono); font-size: 11px;
}

/* ---------------------------------------------------------------------------
   KPI row (demo lines 313-367)
   --------------------------------------------------------------------------- */
#tab-my_dashboard .ck-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
#tab-my_dashboard .ck-kpi {
  background: var(--ck-surface-1);
  border: 1px solid var(--ck-hair);
  border-radius: var(--ck-radius);
  padding: 16px 16px 14px;
  position: relative; overflow: hidden;
  transition: border-color .4s ease;
  box-shadow: var(--ck-shadow);
}
#tab-my_dashboard .ck-kpi::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ck-kpi-sweep), transparent);
  opacity: 0; transition: opacity .5s ease;
}
#tab-my_dashboard .ck-kpi.is-attention { border-color: var(--ck-attn-border); }
#tab-my_dashboard .ck-kpi.is-attention::before {
  background: linear-gradient(90deg, transparent, var(--ck-attn-sweep), transparent);
  opacity: 1;
}
#tab-my_dashboard .ck-kpi-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 14px;
}
#tab-my_dashboard .ck-kpi-name { font-size: 12px; color: var(--ck-muted); letter-spacing: 0.01em; line-height: 1.3; }
#tab-my_dashboard .ck-kpi-ico { flex-shrink: 0; color: var(--ck-muted-dim); display: inline-flex; }
#tab-my_dashboard .ck-kpi.is-attention .ck-kpi-ico { color: var(--ck-amber); }
#tab-my_dashboard .ck-kpi-val {
  font-family: var(--ck-mono); font-size: 26px; font-weight: 600;
  color: var(--ck-text-pure); letter-spacing: -0.01em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
}
#tab-my_dashboard .ck-kpi.is-attention .ck-kpi-val { color: var(--ck-amber-text); }
#tab-my_dashboard .ck-kpi-sub {
  font-size: 11px; color: var(--ck-muted-dim); margin-top: 7px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--ck-mono); letter-spacing: 0;
}
#tab-my_dashboard .ck-kpi-sub .ck-chip {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px;
}
#tab-my_dashboard .ck-kpi-sub .ck-chip.ok { color: var(--ck-green-text); background: var(--ck-green-soft); }
#tab-my_dashboard .ck-kpi-sub .ck-chip.warn { color: var(--ck-amber-text); background: var(--ck-amber-soft); }

/* ---------------------------------------------------------------------------
   Panels (demo lines 514-527)
   --------------------------------------------------------------------------- */
#tab-my_dashboard .ck-panel {
  background: var(--ck-surface-1);
  border: 1px solid var(--ck-hair);
  border-radius: var(--ck-radius);
  padding: 18px;
  box-shadow: var(--ck-shadow);
}
#tab-my_dashboard .ck-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 15px;
}
#tab-my_dashboard .ck-panel-title { font-size: 13.5px; font-weight: 600; color: var(--ck-text); letter-spacing: 0.01em; }
#tab-my_dashboard .ck-panel-meta { font-size: 10.5px; color: var(--ck-muted-dim); font-family: var(--ck-mono); }

/* ---------------------------------------------------------------------------
   Work-queue tiles (demo .q-tile / .queue-list, lines 274-302)
   --------------------------------------------------------------------------- */
#tab-my_dashboard .ck-queue-list { display: flex; flex-direction: column; gap: 9px; }
#tab-my_dashboard .ck-q-tile {
  display: flex; align-items: center; gap: 13px;
  background: var(--ck-surface-2);
  border: 1px solid var(--ck-hair);
  border-radius: var(--ck-radius-sm);
  padding: 11px 13px;
  transition: border-color .4s ease, background .4s ease;
}
#tab-my_dashboard .ck-q-tile.is-breach { border-color: var(--ck-attn-border); }
#tab-my_dashboard .ck-q-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ck-surface-3); color: var(--ck-muted);
}
#tab-my_dashboard .ck-q-tile.is-breach .ck-q-ico { color: var(--ck-amber); }
#tab-my_dashboard .ck-q-body { flex: 1; min-width: 0; }
#tab-my_dashboard .ck-q-name {
  font-size: 12.5px; color: var(--ck-text); font-weight: 500;
  font-family: var(--ck-mono); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#tab-my_dashboard .ck-q-note { font-size: 10.5px; color: var(--ck-muted-dim); margin-top: 3px; }
#tab-my_dashboard .ck-q-val {
  font-family: var(--ck-mono); font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ck-text);
  display: flex; align-items: baseline; gap: 4px; white-space: nowrap; text-align: right;
}
#tab-my_dashboard .ck-q-val .ck-unit { font-size: 11px; color: var(--ck-muted-dim); font-weight: 500; }
#tab-my_dashboard .ck-q-val.is-breach { color: var(--ck-amber-text); }
#tab-my_dashboard .ck-q-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ck-hair);
  font-size: 11px; color: var(--ck-muted-dim); font-family: var(--ck-mono);
}
#tab-my_dashboard .ck-q-foot b { color: var(--ck-text); font-weight: 600; }

/* Status badge — glyph + word (never colour alone). Mirrors demo badge-attn. */
#tab-my_dashboard .ck-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px;
  color: var(--ck-muted); background: var(--ck-status-neutral-bg);
  font-family: var(--ck-sans);
}
#tab-my_dashboard .ck-status .ck-glyph { font-size: 10px; line-height: 1; }
#tab-my_dashboard .ck-status.warn { color: var(--ck-amber-text); background: var(--ck-amber-soft); }
#tab-my_dashboard .ck-status.ok { color: var(--ck-green-text); background: var(--ck-green-soft); }
#tab-my_dashboard .ck-status.info { color: var(--ck-violet-text); background: var(--ck-violet-soft); }

/* ---------------------------------------------------------------------------
   Layout grid — saved widget order reflected in a responsive CSS grid.
   (Full drag-rearrange/resize is P1 — this honours saved ORDER, no grid lib.)
   --------------------------------------------------------------------------- */
#tab-my_dashboard .ck-grid { display: flex; flex-direction: column; gap: 18px; }
#tab-my_dashboard .ck-widget { width: 100%; }

/* ---------------------------------------------------------------------------
   Catalogue picker (add / remove widgets — persists via PUT /layout)
   --------------------------------------------------------------------------- */
#tab-my_dashboard .ck-picker {
  margin-top: 4px;
  background: var(--ck-surface-1);
  border: 1px solid var(--ck-hair);
  border-radius: var(--ck-radius);
  padding: 18px;
  box-shadow: var(--ck-shadow);
}
#tab-my_dashboard .ck-picker[hidden] { display: none; }
#tab-my_dashboard .ck-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
#tab-my_dashboard .ck-pick {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--ck-surface-2);
  border: 1px solid var(--ck-hair);
  border-radius: var(--ck-radius-sm);
  padding: 13px 14px;
}
#tab-my_dashboard .ck-pick-body { flex: 1; min-width: 0; }
#tab-my_dashboard .ck-pick-title {
  font-size: 12.5px; font-weight: 600; color: var(--ck-text);
  display: flex; align-items: center; gap: 8px;
}
#tab-my_dashboard .ck-pick-type {
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ck-violet-text); background: var(--ck-violet-soft);
  padding: 1px 6px; border-radius: 4px; font-family: var(--ck-mono);
}
#tab-my_dashboard .ck-pick-desc { font-size: 11px; color: var(--ck-muted); margin-top: 5px; line-height: 1.45; }
#tab-my_dashboard .ck-pick-toggle {
  flex-shrink: 0; align-self: center;
  font-family: var(--ck-sans); font-size: 11.5px; font-weight: 600;
  border-radius: 8px; padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--ck-hair-strong); background: transparent; color: var(--ck-text);
  transition: background .2s ease, border-color .2s ease, transform .1s ease, box-shadow .3s ease;
}
#tab-my_dashboard .ck-pick-toggle:hover { background: var(--ck-surface-3); }
#tab-my_dashboard .ck-pick-toggle:active { transform: scale(0.97); }
#tab-my_dashboard .ck-pick-toggle:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--ck-bg), 0 0 0 4px var(--ck-violet-light);
}
#tab-my_dashboard .ck-pick.is-active .ck-pick-toggle {
  color: var(--ck-violet-text); border-color: rgba(108, 64, 236, 0.45); background: var(--ck-violet-soft);
}

/* ===========================================================================
   CLAIMS MANAGER (team-scope) widgets — added for the manager lens. All reuse
   the surface tokens above; nothing new leaks outside the cockpit.
   =========================================================================== */

/* Team KPI / queue-health: a KPI grid rendered INSIDE a panel (#ck-grid),
   distinct from the assessor's dedicated top strip. The embed variant drops the
   strip's outer margins so it sits flush in the panel body. */
#tab-my_dashboard .ck-kpi-row-embed { margin: 0; grid-template-columns: repeat(3, 1fr); }

/* ---------------------------------------------------------------------------
   STP arc gauge (geometry from platforma-tease-demo.html .gauge-wrap)
   --------------------------------------------------------------------------- */
#tab-my_dashboard .ck-gauge { display: flex; flex-direction: column; align-items: center; }
#tab-my_dashboard .ck-gauge-figure {
  position: relative;
  width: 100%;
  max-width: 240px;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 4px 0 2px;
}
#tab-my_dashboard .ck-gauge-svg { display: block; width: 100%; height: auto; }
/* Centre overlay — the visible numeric % + word, positioned in the arc bowl.
   The value is real text (a11y: never arc/colour alone); the parent .ck-gauge
   carries the aria-label, this overlay is aria-hidden to avoid double-reading. */
#tab-my_dashboard .ck-gauge-center {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  pointer-events: none;
}
#tab-my_dashboard .ck-gauge-pct {
  font-family: var(--ck-mono); font-size: 30px; font-weight: 600;
  color: var(--ck-text-pure); letter-spacing: -0.01em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
#tab-my_dashboard .ck-gauge-pct-empty { color: var(--ck-muted-dim); }
#tab-my_dashboard .ck-gauge-word { font-size: 11px; color: var(--ck-muted-dim); }
#tab-my_dashboard .ck-gauge-cap {
  font-size: 11.5px; color: var(--ck-muted-dim); text-align: center;
  margin-top: 8px; line-height: 1.5;
}
#tab-my_dashboard .ck-gauge-cap b { color: var(--ck-text); font-weight: 600; font-family: var(--ck-mono); }
/* Arc draw-in — uses a generous dash so the path renders fully without JS
   measuring getTotalLength; the keyframe sweeps the offset to 0. Killed by the
   prefers-reduced-motion blanket rule at the foot of this file. */
#tab-my_dashboard .ck-gauge-arc {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: ckGaugeDraw 1s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes ckGaugeDraw { to { stroke-dashoffset: 0; } }
/* Gauge track — the faint full semicircle behind the violet value arc. The JS
   paints stroke="var(--ck-gauge-track)" so the track follows the theme (faint
   white on dark, faint black hairline on light). */

/* ---------------------------------------------------------------------------
   Queue-health aging buckets — compact split breakdown reusing the KPI look.
   --------------------------------------------------------------------------- */
#tab-my_dashboard .ck-bucket-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
/* Actuary valuation tile — two captioned measurement-basis blocks (a
   "Technical provisions (GMM)" block and a "SAM / Capital" block), each a 3-up
   figure grid. The caption fences the two bases so a figure is never read across
   them. The TP block carries a sub-caption recording that the BEL is on a shared
   SAM & IFRS 17 basis (boundaries coincide, not yet differentiated). Tokens only
   (light/dark inherit). */
#tab-my_dashboard .ck-fig-block { margin-bottom: 12px; }
#tab-my_dashboard .ck-fig-block:last-of-type { margin-bottom: 0; }
#tab-my_dashboard .ck-fig-block .ck-bucket-row {
  grid-template-columns: repeat(3, 1fr);
}
#tab-my_dashboard .ck-fig-block-cap {
  font: 600 11px/1.2 var(--ck-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ck-muted);
  margin: 0 0 7px 1px;
}
/* Sub-caption directly under a block heading (e.g. the BEL basis note). Tightens
   the heading's bottom gap so the two read as a pair, then spaces the grid. */
#tab-my_dashboard .ck-fig-block-cap + .ck-fig-block-sub { margin-top: -3px; }
#tab-my_dashboard .ck-fig-block-sub {
  font: 400 11.5px/1.4 var(--ck-sans);
  color: var(--ck-muted);
  margin: 0 0 8px 1px;
}
#tab-my_dashboard .ck-fig-note {
  font: 400 12px/1.45 var(--ck-sans);
  color: var(--ck-muted);
  margin-top: 9px;
}
#tab-my_dashboard .ck-fig-note b { color: var(--ck-text); font-weight: 600; }
/* Section header inside a widget body (Underwriter lens: mix / risk / decrement
   sub-sections). A light divider-led label, weightier than a fig-note. */
#tab-my_dashboard .ck-sub-head {
  font: 600 12px/1.4 var(--ck-sans);
  color: var(--ck-text);
  margin: 14px 0 4px 1px;
  padding-top: 10px;
  border-top: 1px solid var(--ck-border, #e5e7eb);
}
#tab-my_dashboard .ck-sub-head:first-child { margin-top: 0; padding-top: 0; border-top: none; }
@media (max-width: 560px) {
  #tab-my_dashboard .ck-fig-block .ck-bucket-row { grid-template-columns: repeat(2, 1fr); }
}
#tab-my_dashboard .ck-bucket {
  background: var(--ck-surface-2);
  border: 1px solid var(--ck-hair);
  border-radius: var(--ck-radius-sm);
  padding: 13px 10px 11px;
  text-align: center;
  position: relative; overflow: hidden;
  transition: border-color .4s ease;
}
#tab-my_dashboard .ck-bucket.is-attention { border-color: var(--ck-attn-border); }
#tab-my_dashboard .ck-bucket-val {
  font-family: var(--ck-mono); font-size: 22px; font-weight: 600;
  color: var(--ck-text-pure); letter-spacing: -0.01em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
#tab-my_dashboard .ck-bucket.is-attention .ck-bucket-val { color: var(--ck-amber-text); }
#tab-my_dashboard .ck-bucket-lbl {
  font-size: 10px; color: var(--ck-muted); margin-top: 6px;
  letter-spacing: 0.01em; line-height: 1.25;
}

/* ---------------------------------------------------------------------------
   Skeletons / loading (demo shimmer slide, lines 470-482)
   --------------------------------------------------------------------------- */
#tab-my_dashboard .ck-skel {
  position: relative; overflow: hidden;
  background: var(--ck-surface-2);
  border: 1px solid var(--ck-hair);
  border-radius: var(--ck-radius-sm);
}
#tab-my_dashboard .ck-skel.kpi { height: 96px; }
#tab-my_dashboard .ck-skel.row { height: 58px; }
#tab-my_dashboard .ck-skel::after {
  content: ""; position: absolute; top: 0; left: -45%; bottom: 0; width: 45%;
  background: linear-gradient(90deg, transparent, var(--ck-skel-shimmer), transparent);
  animation: ckShimmer 1.2s ease-in-out infinite;
}
@keyframes ckShimmer { 0% { left: -45%; } 100% { left: 100%; } }

/* ---------------------------------------------------------------------------
   Empty + error states
   --------------------------------------------------------------------------- */
#tab-my_dashboard .ck-empty,
#tab-my_dashboard .ck-error {
  display: flex; align-items: center; gap: 13px;
  border-radius: var(--ck-radius-sm); padding: 18px 16px;
  font-size: 13px; line-height: 1.5;
}
#tab-my_dashboard .ck-empty {
  background: var(--ck-surface-2); border: 1px dashed var(--ck-hair-strong); color: var(--ck-muted);
}
#tab-my_dashboard .ck-empty b { color: var(--ck-text); font-weight: 600; }
#tab-my_dashboard .ck-empty .ck-ico,
#tab-my_dashboard .ck-error .ck-ico { flex-shrink: 0; }
#tab-my_dashboard .ck-empty .ck-ico { color: var(--ck-violet-light); }
#tab-my_dashboard .ck-error {
  background: var(--ck-error-bg); border: 1px solid var(--ck-error-border); color: var(--ck-text);
}
#tab-my_dashboard .ck-error .ck-ico { color: var(--ck-red); }
#tab-my_dashboard .ck-error .ck-error-body { flex: 1; min-width: 0; }
#tab-my_dashboard .ck-error b { color: var(--ck-text-pure); font-weight: 600; }
#tab-my_dashboard .ck-error .ck-detail { color: var(--ck-muted); font-size: 11.5px; margin-top: 3px; font-family: var(--ck-mono); }

/* visually-hidden live region (announced, not shown) */
#tab-my_dashboard .ck-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   Responsive — collapse KPI strip on narrow viewports
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  #tab-my_dashboard .ck-kpi-row,
  #tab-my_dashboard .ck-kpi-row-embed { grid-template-columns: 1fr; }
  /* Aging buckets: 6 → 3 across on narrow screens (two rows). */
  #tab-my_dashboard .ck-bucket-row { grid-template-columns: repeat(3, 1fr); }
  #tab-my_dashboard.cockpit { padding: 18px 14px 24px; }
}
@media (max-width: 420px) {
  #tab-my_dashboard .ck-bucket-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   Reduced motion — kill every animation/transition inside the cockpit.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #tab-my_dashboard.cockpit *,
  #tab-my_dashboard.cockpit *::before,
  #tab-my_dashboard.cockpit *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===========================================================================
   EXPERIENCE MONITOR v2 — the actuarial instrument (Actuary lens, design 2C).
   Approved visual direction 2026-07-02: hero A/E with deviation semantics, a
   deviation bar read against the expected (A/E = 1.0) line, drawn trend that
   grows with the weekly sweeps, Rand impact as the right rail. All colours
   are the cockpit's AA status TEXT tokens for type + brand fills for bars;
   unknowns stay honest muted dashes. Namespaced like everything else here.
   ========================================================================== */
#tab-my_dashboard.cockpit .ck-mon-lever{
  display:grid;grid-template-columns:172px 132px 1fr 190px;gap:0 22px;align-items:center;
  padding:17px 18px;border-bottom:1px solid var(--ck-hair);
}
#tab-my_dashboard.cockpit .ck-mon-lever:last-child{border-bottom:0}
#tab-my_dashboard.cockpit .ck-mon-lever:hover{background:var(--ck-surface-3)}
#tab-my_dashboard.cockpit .ck-mon-name{
  font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ck-muted);
}
#tab-my_dashboard.cockpit .ck-mon-flags{
  font-size:11.5px;color:var(--ck-muted);margin-top:5px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;
}
#tab-my_dashboard.cockpit .ck-mon-dot{
  width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--ck-amber);
}
#tab-my_dashboard.cockpit .ck-mon-badge{
  font-size:10.5px;font-weight:650;padding:2px 7px;border-radius:99px;
  background:rgba(239,68,68,.12);color:var(--ck-red-text);
}
#tab-my_dashboard.cockpit .ck-mon-badge.is-none{
  background:var(--ck-surface-3);color:var(--ck-muted);font-weight:550;border:1px solid var(--ck-hair);
}
#tab-my_dashboard.cockpit .ck-mon-hlbl{
  font-size:10.5px;font-weight:650;letter-spacing:.08em;color:var(--ck-muted);text-transform:uppercase;margin-bottom:6px;
}
#tab-my_dashboard.cockpit .ck-mon-hval{
  font-size:31px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;color:var(--ck-text-pure);
}
#tab-my_dashboard.cockpit .ck-mon-hval.is-adverse-hi{color:var(--ck-red-text)}
#tab-my_dashboard.cockpit .ck-mon-hval.is-adverse{color:var(--ck-amber-text)}
#tab-my_dashboard.cockpit .ck-mon-hval.is-fav{color:var(--ck-green-text)}
#tab-my_dashboard.cockpit .ck-mon-hval.is-na{color:var(--ck-muted);font-weight:500;font-size:16px;line-height:1.4}
#tab-my_dashboard.cockpit .ck-mon-lever.is-ops .ck-mon-hval{font-size:24px}
#tab-my_dashboard.cockpit .ck-mon-hsub{
  font-size:11.5px;color:var(--ck-muted);margin-top:7px;font-variant-numeric:tabular-nums;
}
#tab-my_dashboard.cockpit .ck-mon-devrow{display:flex;align-items:center;gap:10px}
#tab-my_dashboard.cockpit .ck-mon-dev{
  position:relative;flex:1;height:10px;border-radius:6px;background:var(--ck-surface-3);
  border:1px solid var(--ck-hair);
}
#tab-my_dashboard.cockpit .ck-mon-dev-base{
  position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ck-text);opacity:.55;border-radius:2px;
}
#tab-my_dashboard.cockpit .ck-mon-dev-fill{position:absolute;top:0;bottom:0;border-radius:6px}
#tab-my_dashboard.cockpit .ck-mon-dev-fill.is-adverse{
  background:linear-gradient(90deg,var(--ck-amber),var(--ck-red));
}
#tab-my_dashboard.cockpit .ck-mon-dev-fill.is-fav{
  background:linear-gradient(270deg,var(--ck-green),var(--ck-green-text));
}
#tab-my_dashboard.cockpit .ck-mon-devlbl{
  font-size:10.5px;color:var(--ck-muted);white-space:nowrap;font-variant-numeric:tabular-nums;
}
#tab-my_dashboard.cockpit .ck-mon-trend{margin-top:10px;display:flex;align-items:center;gap:10px}
#tab-my_dashboard.cockpit .ck-mon-trend svg{display:block;flex:none}
#tab-my_dashboard.cockpit .ck-mon-tl{font-size:10.5px;color:var(--ck-muted)}
#tab-my_dashboard.cockpit .ck-mon-rail{text-align:right}
#tab-my_dashboard.cockpit .ck-mon-rand{
  font-size:19px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ck-text-pure);
}
#tab-my_dashboard.cockpit .ck-mon-rand.is-excess{color:var(--ck-red-text)}
#tab-my_dashboard.cockpit .ck-mon-rand.is-fav{color:var(--ck-green-text)}
#tab-my_dashboard.cockpit .ck-mon-rand.is-na{color:var(--ck-muted);font-weight:500;font-size:14px}
#tab-my_dashboard.cockpit .ck-mon-rtag{font-size:10.5px;color:var(--ck-muted);margin-top:4px}
#tab-my_dashboard.cockpit .ck-mon-rtag u{
  text-decoration:underline dotted;text-underline-offset:2px;cursor:help;
}
#tab-my_dashboard.cockpit .ck-mon-bars{display:flex;align-items:flex-end;gap:3px;height:34px}
#tab-my_dashboard.cockpit .ck-mon-bars i{
  display:block;width:9px;border-radius:2.5px 2.5px 0 0;background:var(--ck-violet);opacity:.5;
}
#tab-my_dashboard.cockpit .ck-mon-bars i.is-hot{opacity:1}
@media (max-width:860px){
  #tab-my_dashboard.cockpit .ck-mon-lever{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px 18px}
  #tab-my_dashboard.cockpit .ck-mon-mid{grid-column:1/-1}
}