/* ──────────────────────────────────────────────────────────
   Planning Workbench — Four-panel data visualization
   Lives inside #vizDrawerContent (Analytics drawer)
   ────────────────────────────────────────────────────────── */

/* ── CSS Custom Properties ─────────────────────────────── */
:root {
  /* SP-506 decouple: workbench-local tokens DERIVE from the theme layer
     (styles/themes.css) so the panel follows EVERY theme — including any new
     vibe — instead of only the hand-listed ones. Collapsed the old :root +
     prefers-color-scheme + 4 [data-theme] hardcoded blocks into this. */
  --wb-text: var(--text-primary);
  --wb-secondary: var(--text-secondary);
  --wb-muted: var(--text-muted);
  --wb-border: var(--border-default);
  --wb-surface: var(--bg-secondary);
  --wb-surface-alt: var(--bg-tertiary);
}

/* ── Stats Row ─────────────────────────────────────────── */
.wb-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.wb-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  background: var(--wb-surface-alt);
  border-radius: 8px;
  border: 0.5px solid var(--wb-border);
}

.wb-stat-value {
  font-size: 20px;
  font-weight: 500;
  color: var(--wb-text);
  line-height: 1.2;
}

.wb-stat-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--wb-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

/* ── Two-column grid for half-width panels ─────────────── */
.wb-grid-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

/* ── Full-width panels ─────────────────────────────────── */
.wb-panel-full {
  width: 100%;
  margin-top: 8px;
}

.wb-panel-full:first-of-type {
  margin-top: 0;
}

/* ── Panel Chrome ──────────────────────────────────────── */
.wb-panel {
  border: 0.5px solid var(--wb-border);
  border-radius: 10px;
  background: var(--wb-surface);
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
}

.wb-panel-header {
  display: flex;
  align-items: center;
  padding: 7px 12px;
  background: var(--wb-surface-alt);
  gap: 8px;
  border-bottom: 0.5px solid var(--wb-border);
  min-height: 28px;
}

.wb-panel-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-muted);
}

.wb-panel-meta {
  font-size: 9px;
  color: var(--wb-muted);
  opacity: 0.7;
}

.wb-panel-controls {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.wb-toggle-btn,
.wb-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--wb-muted);
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.wb-toggle-btn:hover,
.wb-expand-btn:hover {
  opacity: 1;
  background: var(--wb-surface);
}

.wb-panel-body {
  padding: 10px;
  overflow-x: auto;
}

/* ── Expanded (overlay) state ──────────────────────────── */
.wb-expanded {
  position: fixed !important;
  top: 60px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.wb-expanded .wb-panel-header {
  flex-shrink: 0;
}

.wb-expanded .wb-panel-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;  /* required for flex child overflow to work */
}

/* ── Mobile close button (injected by JS into .wb-panel-header when expanded) ── */
.wb-mobile-close {
  display: none;
}

.wb-expanded .wb-mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  color: var(--wb-text);
  font-size: 18px;
  cursor: pointer;
  margin-left: auto;
  transition: background 0.12s, transform 0.12s;
}

.wb-expanded .wb-mobile-close:active {
  background: var(--wb-border);
  transform: scale(0.92);
}

/* ── Empty state ───────────────────────────────────────── */
.wb-empty {
  text-align: center;
  color: var(--wb-muted);
  font-size: 11px;
  padding: 20px;
}

/* ── Sankey ─────────────────────────────────────────────── */
#wbSankeyBody {
  min-height: 250px;
  position: relative;
}

#wbSankeyChart svg {
  display: block;
}

.wb-sankey-tooltip {
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  white-space: nowrap;
}

/* ── Bubble Matrix ──────────────────────────────────────── */
.wb-bubble-matrix {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wb-bubble-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.wb-bubble-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  flex: 1;
}

.wb-bubble-corner {
  min-width: 80px;
  flex: 0 0 80px;
}

.wb-bubble-stage {
  min-width: 80px;
  flex: 0 0 80px;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.wb-bubble-ch {
  font-size: 9px;
  font-weight: 500;
  color: var(--wb-muted);
  writing-mode: horizontal-tb;
  text-align: center;
  word-break: break-word;
  padding: 0 2px;
  line-height: 1.15;
}

.wb-bubble-data {
  position: relative;
}

.wb-bubble {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}

.wb-bubble:hover {
  transform: scale(1.15);
}

.wb-bubble-label {
  font-size: 9px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ── Donut Array ────────────────────────────────────────── */
.wb-donut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wb-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.wb-donut-canvas {
  display: block;
}

.wb-donut-center {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.wb-donut-total {
  font-size: 16px;
  font-weight: 500;
  color: var(--wb-text);
}

.wb-donut-stage {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-top: 4px;
  text-transform: uppercase;
}

.wb-donut-legend {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.wb-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--wb-secondary);
}

.wb-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.wb-legend-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Stacked Bar ────────────────────────────────────────── */
.wb-stacked-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wb-stacked-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}

.wb-stacked-label {
  width: 90px;
  flex-shrink: 0;
  text-align: right;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.wb-stacked-bar-container {
  flex: 1;
  height: 20px;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  background: var(--wb-surface-alt);
}

.wb-stacked-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  transition: opacity 0.15s;
}

.wb-stacked-segment:hover {
  opacity: 0.85;
}

.wb-stacked-count {
  width: 30px;
  flex-shrink: 0;
  text-align: right;
  font-size: 10px;
  font-weight: 500;
  color: var(--wb-muted);
}

.wb-stacked-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 0.5px solid var(--wb-border);
}

.wb-stacked-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--wb-secondary);
}

/* ── RESPONSIVE BREAKPOINTS ────────────────────────────── */

/* Narrow desktop (user tests at 687px) */
@media (max-width: 768px) {
  .wb-grid-half {
    grid-template-columns: 1fr;
  }
  .wb-donut-grid {
    grid-template-columns: 1fr 1fr;
  }
  .wb-stats-row {
    gap: 6px;
  }
  .wb-stat-value {
    font-size: 17px;
  }
  .wb-bubble-corner,
  .wb-bubble-stage {
    min-width: 64px;
    flex: 0 0 64px;
  }
  .wb-stacked-label {
    width: 72px;
  }

  /* ── Mobile expanded: full-viewport takeover ── */
  .wb-expanded {
    position: fixed !important;
    inset: 0;
    z-index: 1000;
    border-radius: 0;
    box-shadow: none;
    background: var(--wb-surface);
    padding: 0;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* panel itself doesn't scroll — body does */
  }

  .wb-expanded .wb-panel-header {
    flex-shrink: 0;
    z-index: 5;
    background: var(--wb-surface-alt);
    padding: 10px 12px;
    min-height: 44px;
  }

  .wb-expanded .wb-panel-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    min-height: 0;  /* required for flex child overflow to work */
  }

  /* When any panel is expanded, hide siblings via JS-toggled class */
  .wb-panel.wb-hidden-by-expand,
  .wb-panel-full.wb-hidden-by-expand,
  .wb-grid-half.wb-hidden-by-expand,
  .wb-stats-row.wb-hidden-by-expand {
    display: none !important;
  }
}

/* Mobile: everything stacks, donuts go 1-column */
@media (max-width: 480px) {
  .wb-grid-half {
    grid-template-columns: 1fr;
  }
  .wb-donut-grid {
    grid-template-columns: 1fr;
  }
  .wb-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .wb-stat-card {
    padding: 6px 4px;
  }
  .wb-stat-value {
    font-size: 15px;
  }
  .wb-stat-label {
    font-size: 8px;
  }
  .wb-panel-body {
    padding: 6px;
  }
  #wbSankeyBody {
    min-height: 140px;
  }
  .wb-bubble-cell {
    min-width: 32px;
    min-height: 32px;
  }
  .wb-bubble-corner,
  .wb-bubble-stage {
    min-width: 48px;
    flex: 0 0 48px;
    font-size: 8px;
  }
  .wb-stacked-label {
    width: 52px;
    font-size: 8px;
  }
  .wb-stacked-row {
    height: 18px;
  }
  .wb-stacked-bar-container {
    height: 14px;
  }
}

/* SP-462 (2026-05-26): workspace-imported plan mode visuals.
   When the loaded plan was built outside the SPA's master-plan pipeline,
   the Goal grid is hidden (it would otherwise trigger a Generate that
   fails common-pool validation) and a banner above it explains the mode +
   surfaces a "Regenerate in the admin app" link (gated to Admin/owner). */
.workbench--workspace-imported #objectiveSection {
  /* SP-462 v6: hide the Goal grid (would otherwise trigger a Generate
     that fails common-pool validation). */
  display: none !important;
}
/* SP-465 (2026-05-26 per Beau): in workspace-imported mode the user
   can change Start Date + Regenerate, but nothing else. Hide Duration,
   Intensity, and the in-column Generate button — the in-card Regenerate
   inside #workspaceImportedBanner is the only Generate affordance. */
.workbench--workspace-imported .generate-controls [data-tour-step="duration"],
.workbench--workspace-imported .generate-controls [data-tour-step="intensity"],
.workbench--workspace-imported .generate-controls .sticky-buttons {
  display: none !important;
}
/* SP-468 (2026-05-26): in workspace-imported mode the Start Date is rendered
   inside the banner card (.ws-imported-date-row) so its causal link to
   REGENERATE is visible. The original #startDate form-col is hidden but stays
   in the DOM so Start-new-plan can reveal an in-sync control. */
.workbench--workspace-imported .generate-controls .form-col[data-tour-step="startdate"] {
  display: none;
}
/* SP-462 v6 (2026-05-26): white-card guided-action layout.
   SP-468 (2026-05-26): IA cleanup — single locked-signal (inline lock icon),
   verb-matched heading ("Regenerate this plan"), Start Date moved inside the
   card, Advanced details disclosure removed. */
/* SP-516: route the imported-workspace banner through the vibe token layer
   (bg / text / border tokens resolve to the v-layer per vibe; hex are
   base-theme fallbacks). JARGAN orange stays the brand signal. */
#workspaceImportedBanner.ws-imported-card {
  display: block;
  background: var(--bg-secondary, #fff);
  color: var(--text-primary, #1a1a1a);
  border: 1px solid var(--border-default, #e0e0e0);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 4px 0 16px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.ws-imported-lock {
  color: var(--v-accent-brand-aa, #DD5100);
  flex-shrink: 0;
}
.ws-imported-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted, #999);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: color 0.18s ease, background 0.18s ease;
}
.ws-imported-info-btn:hover,
.ws-imported-info-btn[aria-expanded="true"] {
  color: var(--v-accent-brand-aa, #DD5100);
  background: var(--v-accent-brand-tint, rgba(221, 81, 0, 0.08));
}
.ws-imported-info-pop {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  max-width: 280px;
  padding: 10px 12px;
  background: var(--v-surface-sunken, #1a1a1a);
  color: var(--v-ink, #fff);
  border: 1px solid var(--border-default, transparent);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
.ws-imported-info-pop[hidden] {
  display: none;
}
.ws-imported-h {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  line-height: 1.3;
}
.ws-imported-h-text {
  flex: 1 1 auto;
}
.ws-imported-h .ws-imported-info-btn {
  margin-left: auto;
  flex-shrink: 0;
}
.ws-imported-p {
  margin: 0 0 14px;
  color: var(--text-secondary, #555);
  font-size: 13px;
  line-height: 1.5;
}
.ws-imported-date-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
}
.ws-imported-date-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #666);
}
.ws-imported-date-input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #1a1a1a);
  border: 1px solid var(--border-default, #d0d0d0);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ws-imported-date-input:hover {
  border-color: var(--border-default, #b3b3b3);
}
.ws-imported-date-input:focus-visible {
  outline: none;
  border-color: var(--v-accent-brand, #DD5100);
  box-shadow: 0 0 0 3px var(--v-accent-brand-soft, rgba(221, 81, 0, 0.18));
}
.ws-imported-regen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  background: var(--v-accent-brand, #DD5100);
  color: var(--v-on-accent, #fff);
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.ws-imported-regen-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--v-accent-brand, #DD5100) 85%, #000);
  box-shadow: 0 1px 4px var(--v-accent-brand-soft, rgba(221, 81, 0, 0.3));
}
.ws-imported-regen-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--v-accent-brand-soft, rgba(221, 81, 0, 0.25));
}
.ws-imported-regen-btn:disabled {
  background: var(--border-default, #ccc);
  color: var(--text-muted, #fff);
  cursor: not-allowed;
}
.ws-imported-regen-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ws-imported-regen-loading[hidden],
.ws-imported-regen-text[hidden],
.ws-imported-info-pop[hidden] {
  display: none !important;
}
.ws-imported-gate {
  margin: 0 0 14px;
  padding: 8px 12px;
  background: var(--bg-tertiary, #fafafa);
  color: var(--text-secondary, #666);
  border-radius: 6px;
  font-size: 12px;
  font-style: italic;
}
.ws-imported-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 12.5px;
}
.ws-imported-link {
  color: var(--text-secondary, #666);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s ease;
}
.ws-imported-link:hover {
  color: var(--v-accent-brand-aa, #DD5100);
  text-decoration: underline;
}
.ws-imported-link-sep {
  color: var(--border-default, #ccc);
  font-weight: 400;
}
/* SP-468 (2026-05-26): .ws-imported-advanced rules removed along with the
   <details>Advanced details</details> block in renderWorkspaceImportedBanner.
   The content duplicated the info popover, and the grayed-but-expandable
   styling read as both disabled and expandable simultaneously. */

/* ──────────────────────────────────────────────────────────
   SP-531 — Deliverable Media field (parity with Blazor Plan
   Generator's Media column). Rendered inside .deliverable-detail
   (desktop) and .date-item-content (mobile). Theme-following
   surface, so text uses theme variables (they flip with the
   background in dark themes, preserving contrast).
   ────────────────────────────────────────────────────────── */
.deliverable-media-field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
}
.deliverable-media-label {
  font-size: var(--text-xs, 11px);
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #999);
}
.deliverable-media-empty {
  font-size: var(--text-sm, 13px);
  color: var(--text-muted, #999);
  font-style: italic;
}
.deliverable-media-values {
  display: flex;
  flex-direction: column; /* SP-540: one media per line so its status badge reads clearly */
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.deliverable-media-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.deliverable-media-chip {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border-default, #cccccc);
  border-radius: 4px;
  background: var(--bg-secondary, #f8f8f8);
  font-size: var(--text-sm, 13px);
  color: var(--text-primary, #1a1a1a);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deliverable-media-assets {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
}
.deliverable-asset-chip {
  display: inline-block;
  padding: 1px 6px;
  border: 1px dashed var(--border-default, #cccccc);
  border-radius: 3px;
  font-size: var(--text-xs, 11px);
  color: var(--text-secondary, #666666);
}

/* SP-540: per-deliverable media STATUS badges. Fixed-palette (hardcoded per
   the contrast rule) so each status reads at a glance regardless of theme.
   All pairings measured >= 4.5:1. */
.media-status-badge {
  display: inline-block;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 10px; border: 1px solid transparent; white-space: nowrap;
}
.media-status-done      { background: #E6F4EA; color: #1E7B34; border-color: #A8D5B5; }
.media-status-progress  { background: #E7F0FB; color: #1552A0; border-color: #A9C7ED; }
.media-status-planned   { background: rgba(221,81,0,0.10); color: #A8380A; border-color: rgba(221,81,0,0.35); }
.media-status-archived  { background: #EEEEEE; color: #555555; border-color: #CCCCCC; }
.media-status-neutral   { background: #F0F0F0; color: #444444; border-color: #D6D6D6; }
.media-status-none      { background: #F3F3F3; color: #595959; border-color: #DADADA; }

/* SP-533: deliverable detail drawer — edit parity + lock dots */
.detail-header-actions { display: inline-flex; align-items: center; gap: 8px; }
.detail-edit-toggle {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px;
  border: 1px solid #c9c4bb; background: #fff; color: #1a1a1a; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.detail-edit-toggle:hover { background: #f2efe9; }
.detail-edit-toggle.editing { background: #DD5100; border-color: #DD5100; color: #fff; }
.detail-fields { display: flex; flex-direction: column; gap: 10px; }
.detail-field .detail-labelrow,
.detail-brief-labelrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.detail-edit-input, .detail-edit-select, .detail-brief-edit {
  width: 100%; box-sizing: border-box; font-size: 12px; color: #1a1a1a;
  background: #fff; border: 1px solid #c9c4bb; border-radius: 6px; padding: 5px 7px;
  margin-top: 2px; outline: none; appearance: auto;
}
.detail-edit-input:focus, .detail-edit-select:focus, .detail-brief-edit:focus { border-color: #DD5100; }
.detail-edit-input[readonly] { background: #f2efe9; color: #555; cursor: not-allowed; }
.lock-dot {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
  border: 2px solid #b8b2a7; background: transparent; cursor: pointer; flex: none;
}
.lock-dot.locked { background: #DD5100; border-color: #DD5100; }
.lock-dot:hover { border-color: #DD5100; }

/* ============================================================
   SP-534 — Plan spreadsheet (Table view) + inline edit
   CRAFT rebuild (Beau, 2026-07-03): reads as part of the
   workbench, not a raw HTML grid. Rows are soft surfaces with a
   brand-tint hover and an orange selection spine; the header
   borrows the .wb-panel uppercase-muted label treatment; inline
   controls use the brand focus-ring (no beige #c9c4bb). All color
   routes through theme + --v-* vibe tokens so it repaints per skin.
   ============================================================ */
.plan-table-toolbar {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 4px 2px 12px; gap: 8px;
}
.plan-table-toolbar.hidden { display: none; }
.table-edit-toggle {
  font-size: 10px; font-weight: 600; padding: 6px 14px; border-radius: 8px;
  border: 1px solid var(--border-default); background: var(--bg-primary);
  color: var(--text-secondary); cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.08em;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.table-edit-toggle:hover { border-color: var(--v-accent-brand, #DD5100); color: var(--v-accent-brand, #DD5100); }
.table-edit-toggle.editing {
  background: var(--v-accent-brand, #DD5100); border-color: var(--v-accent-brand, #DD5100);
  color: var(--v-on-accent, #fff);
  box-shadow: 0 1px 6px var(--v-accent-brand-soft, rgba(221,81,0,0.28));
}

.plan-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; table-layout: auto; }
.plan-table.hidden { display: none; }
/* BU-514: the mobile deliverables list is hidden on desktop. renderResults toggles the `hidden`
   class onto #resultsTable for the desktop form factor, but there was no rule honouring it (the app
   has no global .hidden), so both tables showed. Show exactly one table per form factor. */
.results-table-mobile.hidden { display: none !important; }
.plan-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-secondary); padding: 9px 10px; text-align: left;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
.plan-table thead th:first-child { border-top-left-radius: 10px; }
.plan-table thead th:last-child { border-top-right-radius: 10px; }
.plan-table td {
  padding: 10px; border-bottom: 1px solid var(--border-default);
  color: var(--text-primary); vertical-align: top; line-height: 1.45;
}
.plan-row { cursor: pointer; transition: background .12s ease; }
.plan-row:not(.editing):hover td { background: var(--v-accent-brand-tint, rgba(221,81,0,0.06)); }
.plan-row.selected td { background: var(--v-accent-brand-tint, rgba(221,81,0,0.10)); }
.plan-row.selected td:first-child { box-shadow: inset 3px 0 0 var(--v-accent-brand, #DD5100); }
.plan-row.editing { cursor: default; }
.plan-row.editing td { background: var(--bg-secondary); }
.plan-row:last-child td { border-bottom: none; }

/* Column sizing + emphasis */
.plan-table .pt-date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.plan-table .pt-stage { font-weight: 600; }
.plan-table .pt-brief { min-width: 220px; max-width: 340px; color: var(--text-secondary); }
.plan-table .pt-media { min-width: 150px; }
.plan-table .pt-readonly, .plan-table .pt-unit { color: var(--text-muted); }

/* Brief expand/collapse */
.pt-brief-wrap { line-height: 1.55; }
.pt-brief-wrap.clamped {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pt-brief-toggle {
  margin-top: 5px; font-size: 10px; font-weight: 600; color: var(--v-accent-brand, #DD5100);
  background: none; border: none; padding: 0; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.pt-brief-toggle:hover { text-decoration: underline; }

/* Inline-edit controls — brand focus ring, no beige */
.pt-input, .pt-select, .pt-textarea {
  width: 100%; box-sizing: border-box; font-size: 12px; color: var(--text-primary);
  background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 7px;
  padding: 6px 8px; outline: none; font-family: inherit;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.pt-select { appearance: auto; }
.pt-textarea { resize: vertical; line-height: 1.45; }
.pt-input:hover, .pt-select:hover, .pt-textarea:hover { border-color: var(--text-muted); }
.pt-input:focus, .pt-select:focus, .pt-textarea:focus {
  border-color: var(--v-accent-brand, #DD5100);
  box-shadow: 0 0 0 3px var(--v-accent-brand-soft, rgba(221,81,0,0.18));
}

/* In the Media cell the SP-531 "Media" field label is redundant with the
   column header — hide it and lay the chips out compactly. */
.plan-table .pt-media .deliverable-media-field { margin: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
.plan-table .pt-media .deliverable-media-label { display: none; }

/* SP-534: detail drawer relocated to #resultsPanel and docked as a fixed
   right-side overlay so it paints over the Table view as well as the Calendar
   (it was trapped inside #calendarView / display:none in table mode). */
.calendar-detail.detail-overlay {
  position: fixed; top: 0; right: 0; height: 100vh;
  width: 0; z-index: 1000; overflow: hidden;
  background: var(--bg-secondary); border-left: 1px solid var(--border-default);
  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.14);
  transition: width 0.16s ease;
}
.calendar-detail.detail-overlay.visible { width: 384px; max-width: 92vw; }

/* ============================================================
   SP-541 — Deliverable detail drawer overhaul
   Icon + label + value on a 2-column grid (22px icon rail + 1fr
   content), Lucide icons, tokenized color (brand accent + funnel
   stage color + SP-540 status), no redundant Date (the header
   owns it), no cutoff (everything wraps). Toggle .show-grid on
   .calendar-detail to reveal the transparent design grid that
   justifies the layout (8px baseline + 22px icon rail).
   ============================================================ */
/* SP-542 (compress ~25% + de-noise): tighter header, no per-field separators
   (whitespace + the icon rail carry the structure), smaller type/icons. */
.calendar-detail .detail-header {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px; background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}
.detail-date-icon { display: inline-flex; color: var(--v-accent-brand, #DD5100); flex: none; }
.detail-date-icon svg { width: 15px; height: 15px; }
.calendar-detail .detail-date { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.01em; }
.calendar-detail .detail-header-actions { margin-left: auto; }
.calendar-detail .detail-content { padding: 6px 14px 12px; position: relative; }

/* Field grid: [20px icon rail][1fr content]. Fields separated by whitespace,
   NOT borders (SP-542: favor whitespace over separators). */
.detail-fields { display: flex; flex-direction: column; gap: 0; }
.dfield {
  display: grid; grid-template-columns: 20px 1fr; align-items: start; column-gap: 9px;
  padding: 4px 0;
}
.dfield-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--v-accent-brand, #DD5100); padding-top: 1px; opacity: 0.9; }
.dfield-icon svg { width: 14px; height: 14px; }
.dfield-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dfield-label {
  font-size: 9px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-secondary); display: flex; align-items: center; gap: 6px;
}
.dfield-value {
  font-size: 12px; color: var(--text-primary); line-height: 1.35;
  overflow-wrap: anywhere; word-break: break-word;
}
.dfield-value.dfield-stage { font-weight: 600; }
.dfield .detail-edit-input, .dfield .detail-edit-select { margin-top: 2px; }

/* Section heads (Media, Brief) — icon + uppercase label, brand rail color. SP-542: tighter. */
.detail-section-head {
  display: flex; align-items: center; gap: 6px; margin: 11px 0 5px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-secondary);
}
.detail-section-head svg { width: 13px; height: 13px; color: var(--v-accent-brand, #DD5100); flex: none; }

/* SP-542: media as light CONTENT, not stacked bordered boxes. The media name is
   plain bold text (no box); asset chips are tiny; secondary "Planned" spec media
   collapses behind an expander. */
.detail-media-section .deliverable-media-field { margin-top: 0; }
.detail-media-section .deliverable-media-label { display: none; }
.detail-media-section .deliverable-media-values { gap: 5px; }
.detail-media-section .deliverable-media-chip {
  white-space: normal; max-width: 100%; border: none; background: transparent; padding: 0;
  font-size: 12px; font-weight: 600; color: var(--text-primary);
}
.detail-media-section .deliverable-asset-chip { font-size: 10px; padding: 0 5px; border-style: solid; border-color: var(--border-default); opacity: 0.85; }
/* Progressive disclosure: collapsed "Planned" spec media */
.media-planned-collapse { margin-top: 4px; }
.media-planned-collapse > summary {
  cursor: pointer; list-style: none; font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-secondary); padding: 2px 0; user-select: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.media-planned-collapse > summary::-webkit-details-marker { display: none; }
.media-planned-collapse > summary::before { content: '\25B8'; color: var(--v-accent-brand, #DD5100); transition: transform .12s ease; display: inline-block; }
.media-planned-collapse[open] > summary::before { transform: rotate(90deg); }
.media-planned-collapse .deliverable-media-values { margin-top: 4px; }

/* Brief: label as section head; clamped by default with an expand toggle. */
.detail-brief-labelrow .detail-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary);
}
.detail-brief-labelrow .detail-label svg { width: 13px; height: 13px; color: var(--v-accent-brand, #DD5100); flex: none; }
.detail-brief-content { font-size: 12px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.detail-brief-content.clamped {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.detail-brief-toggle {
  margin-top: 4px; font-size: 10px; font-weight: 600; color: var(--v-accent-brand, #DD5100);
  background: none; border: none; padding: 0; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em;
}
.detail-brief-toggle:hover { text-decoration: underline; }
/* SP-542: the brief edit textarea must actually hide in view mode. The app's
   .hidden utility does not cover this element (compression exposed the leak). */
.calendar-detail .detail-brief-edit.hidden { display: none; }

/* Copy Prompt action — SP-542: smaller, brand-tinted, full width */
.calendar-detail .detail-actions { margin: 9px 0 2px; }
.calendar-detail .btn-copy-prompt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  padding: 6px 12px; font-size: 11px; font-weight: 600; cursor: pointer;
  border-radius: 7px; border: 1px solid var(--v-accent-brand, #DD5100);
  background: var(--v-accent-brand-tint, rgba(221,81,0,0.08)); color: var(--v-accent-brand-aa, #A8380A);
  transition: background .15s ease, color .15s ease;
}
.calendar-detail .btn-copy-prompt:hover { background: var(--v-accent-brand, #DD5100); color: var(--v-on-accent, #fff); }
/* SP-542: smaller status badges */
.detail-media-section .media-status-badge { font-size: 9px; padding: 0 6px; }

/* Transparent design grid overlay — justifies the layout (8px baseline + icon rail) */
.calendar-detail.show-grid .detail-content::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 40;
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,120,255,0.16) 0, rgba(0,120,255,0.16) 1px, transparent 1px, transparent 8px),
    linear-gradient(to right, rgba(221,81,0,0.18) 0, rgba(221,81,0,0.18) 1px, transparent 1px),
    linear-gradient(to right, transparent 32px, rgba(221,81,0,0.18) 32px, rgba(221,81,0,0.18) 33px, transparent 33px);
  background-position: 0 0, 16px 0, 16px 0;
  background-repeat: repeat, repeat-y, repeat-y;
}

/* ============================================================
   SP-543 — drawer task-priority reorder + progressive disclosure
   Order: 1) channel + platform icon, 1.5) media status, 2) voice +
   description, 3) brief (term popovers), 4) Copy Brief | Copy Prompt,
   5) Fiverr. Secondary metadata (Type/Stage/Unit) in a details drawer.
   ============================================================ */
/* mode toggle — the app has no global .hidden=display:none for these nodes */
#ddPrimary.hidden, #detailFields.hidden, #ddSecondary.hidden { display: none !important; }

.dd-primary { display: flex; flex-direction: column; gap: 9px; }

/* 1) channel + platform */
.dd-channel { display: flex; align-items: center; gap: 8px; }
.dd-channel-icon { display: inline-flex; color: var(--v-accent-brand, #DD5100); flex: none; }
.dd-channel-icon svg { width: 18px; height: 18px; }
.dd-channel-name { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.2; overflow-wrap: anywhere; }
.dd-platform { font-size: 10px; font-weight: 600; letter-spacing: 0.03em; color: var(--text-secondary); margin-left: auto; white-space: nowrap; background: var(--bg-tertiary); padding: 2px 8px; border-radius: 10px; }

/* 1.5) media status */
.dd-media .deliverable-media-field { flex-direction: column; align-items: flex-start; gap: 3px; margin: 0; }
.dd-media .deliverable-media-label { display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); }
.dd-media .deliverable-media-values { gap: 4px; }
/* SP-549 audit: long media names (…/SCIMJW/…) were clipping at mobile — the base
   .deliverable-media-chip has overflow:hidden + no break opportunity. Let them wrap. */
.dd-media .deliverable-media-chip { border: none; background: transparent; padding: 0; font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: normal; max-width: 100%; overflow: visible; overflow-wrap: anywhere; word-break: break-word; text-overflow: clip; }
.dd-media .deliverable-asset-chip { font-size: 10px; padding: 0 5px; }
.dd-media .media-status-badge { font-size: 9px; padding: 0 6px; }

/* 2) voice + description */
.dd-voice { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; border-top: 1px solid var(--border-default); }
.dd-voice-head { display: flex; align-items: center; gap: 7px; }
.dd-voice-icon { display: inline-flex; color: var(--v-accent-brand, #DD5100); flex: none; }
.dd-voice-icon svg { width: 14px; height: 14px; }
.dd-voice-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.dd-voice-desc { font-size: 12px; line-height: 1.45; color: var(--text-secondary); overflow-wrap: anywhere; }

/* 4) Copy Brief | Copy Prompt side by side */
.dd-copy-row { display: flex; gap: 8px; }
.dd-copy-row .btn-copy-prompt { flex: 1 1 0; min-width: 0; }
.dd-copy-row .btn-copy-prompt svg { width: 13px; height: 13px; flex: none; }

/* progressive-disclosure secondary details drawer */
.dd-details { margin-top: 10px; border-top: 1px solid var(--border-default); padding-top: 6px; }
.dd-details > summary { cursor: pointer; list-style: none; user-select: none; font-size: 9px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; }
.dd-details > summary::-webkit-details-marker { display: none; }
.dd-details > summary::before { content: '\25B8'; color: var(--v-accent-brand, #DD5100); display: inline-block; transition: transform .12s ease; }
.dd-details[open] > summary::before { transform: rotate(90deg); }
.dd-secondary-body { margin-top: 4px; }
/* SP-543: voice position-type tag */
.dd-voice-pos { font-size: 9px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--v-accent-brand-aa, #A8380A); background: var(--v-accent-brand-tint, rgba(221,81,0,0.10)); padding: 1px 7px; border-radius: 9px; margin-left: auto; white-space: nowrap; flex: none; }

/* SP-545: voice structure (Insight Language attributes in their position-type
   roles) — collapsed expander, compact tokenized rendering scoped to the drawer. */
.dd-voice-structure { margin-top: 6px; }
.dd-voice-structure > summary { cursor: pointer; list-style: none; user-select: none; font-size: 9px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; }
.dd-voice-structure > summary::-webkit-details-marker { display: none; }
/* SP-547: real Lucide chevron (the tiny triangle read as invisible) */
.dd-disc-chevron { width: 14px; height: 14px; color: var(--v-accent-brand, #DD5100); flex: none; transition: transform .14s ease; }
.dd-voice-structure[open] > summary .dd-disc-chevron { transform: rotate(90deg); }
/* SP-547: position visualization (reuses the SPA's createPositionVisualization SVG) */
/* SP-549: the viz palette now theme-adapts (_syncVizPalette), so the panel is a
   tokenized surface that follows the theme (was a fixed white panel in SP-548). */
.dd-voice-viz { margin: 6px 0 8px; width: 100%; overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 8px; padding: 4px; box-sizing: border-box; }
.dd-voice-viz svg { width: 100%; height: auto; display: block; max-height: 300px; }
.dd-voice-attrs { margin-top: 5px; display: flex; flex-direction: column; gap: 8px; }
.dd-voice-attrs .voice-attr-group { display: flex; flex-direction: column; gap: 3px; }
.dd-voice-attrs .voice-attr-role { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--v-accent-brand-aa, #A8380A); }
.dd-voice-attrs .voice-attr-item { display: flex; flex-direction: column; gap: 1px; }
.dd-voice-attrs .voice-attr-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.dd-voice-attrs .voice-attr-desc { font-size: 11px; line-height: 1.4; color: var(--text-secondary); overflow-wrap: anywhere; }
.dd-voice-attrs .voice-attr-children { margin: 2px 0 2px 12px; padding-left: 8px; border-left: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 3px; }
/* SP-546: ported Blazor voice-detail extras — position-type guidance + domain */
.dd-voice-guidance { margin: 0 0 8px; font-size: 11px; line-height: 1.45; color: var(--text-secondary); font-style: italic; }
.dd-voice-meta { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border-default); font-size: 11px; color: var(--text-primary); }
.dd-voice-meta .dd-vm-key { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin-right: 4px; }
/* SP-548: bounded internal scroll for the expanded voice detail so a tall
   structure (viz + long attribute list) contains itself instead of scrolling
   the whole drawer away from the header/media. */
.dd-voice-structure-body { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.dd-voice-structure-body::-webkit-scrollbar { width: 6px; }
.dd-voice-structure-body::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }

/* ── BU-512 (bullet 10): dispatch state as an ICON + hover POPOVER ── */
/* BU-512: date + dispatch icon INLINE on one line (the icon must not add row height). */
.pt-date-with-dispatch { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; }
.pt-dispatch { position: relative; display: inline-flex; }
.pt-dispatch-icon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px; border: 0; background: transparent; border-radius: 50%;
  cursor: pointer; color: #9aa1ac; line-height: 0;
}
.pt-dispatch-icon:hover:not(:disabled) { color: #6b7280; }
.pt-dispatch-icon:disabled { opacity: 0.5; cursor: default; }
.pt-dispatch.is-dispatched .pt-dispatch-icon { color: #1b7f3b; }
.pt-dispatch.is-dispatched .pt-dispatch-icon:hover:not(:disabled) { color: #12692f; }
.pt-dispatch-pop {
  position: absolute; bottom: calc(100% + 6px); left: -2px;
  transform: translateY(2px); z-index: 40;
  min-width: 150px; max-width: 240px; padding: 7px 10px; border-radius: 8px;
  background: #1f2430; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease;
  white-space: normal; text-align: left;
}
.pt-dispatch:hover .pt-dispatch-pop, .pt-dispatch:focus-within .pt-dispatch-pop {
  opacity: 1; transform: translateY(0);
}
.pt-dispatch-pop strong { font-size: 0.72rem; font-weight: 800; }
.pt-dispatch-pop span { font-size: 0.66rem; color: #cfd4dc; }
.pt-dispatch.is-dispatched .pt-dispatch-pop strong { color: #7fe0a0; }

/* ── BU-513: bulk dispatch buttons in the plan-table toolbar ── */
.pt-bulk-btn {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 7px;
  border: 1px solid rgba(107, 114, 128, 0.40);
  background: #fff;
  color: #5f6773;
  cursor: pointer;
  white-space: nowrap;
}
.pt-bulk-btn:hover:not(:disabled) { border-color: #6b7280; }
.pt-bulk-btn:disabled { opacity: 0.55; cursor: default; }
.pt-bulk-btn--on { border-color: rgba(27, 127, 59, 0.45); color: #12692f; }
.pt-bulk-btn--on:hover:not(:disabled) { background: rgba(27, 127, 59, 0.12); border-color: #1b7f3b; }