/* Presentation only: the existing four-step Caja sidebar and its controls. */
body.project-mode-letters .sidebar {
  --workflow-shape-mark: #089e9b;
  --workflow-shape-tint: #e5f5f3;
  --workflow-shape-ink: #086e6b;
  --workflow-structure-mark: #3478cf;
  --workflow-structure-tint: #e8f0fc;
  --workflow-structure-ink: #285e9f;
  --workflow-model-mark: #8562c7;
  --workflow-model-tint: #f0eaf9;
  --workflow-model-ink: #69479f;
  --workflow-tools-mark: #c58d36;
  --workflow-tools-tint: #faf2e5;
  --workflow-tools-ink: #825a19;
  --workflow-title: #26384c;
  --workflow-title-active: #182b40;
  --workflow-secondary: #52667b;
  --workflow-surface: #ffffff;
  --workflow-control-bg: #f5f7fa;
  --workflow-control-hover: #edf1f6;
  --workflow-control-selected: #e4eaf1;
  --workflow-control-ink: #455b70;
  --workflow-control-border: #c8d2dd;
  --workflow-control-selected-border: #7b8fa3;
}

/* Explicit dark palette: muted accents on dark tinted surfaces. */
:root:not([data-theme="light"]) body.project-mode-letters .sidebar {
  --workflow-shape-mark: #53b8b0;
  --workflow-shape-tint: #132c2d;
  --workflow-shape-ink: #86d5ce;
  --workflow-structure-mark: #77a3e0;
  --workflow-structure-tint: #192a43;
  --workflow-structure-ink: #a3c5f2;
  --workflow-model-mark: #b09bdc;
  --workflow-model-tint: #29233d;
  --workflow-model-ink: #cbb8f0;
  --workflow-tools-mark: #d5ab6b;
  --workflow-tools-tint: #30291f;
  --workflow-tools-ink: #e7c58c;
  --workflow-title: #dce6f1;
  --workflow-title-active: #f3f7fc;
  --workflow-secondary: #a5b5c7;
  --workflow-surface: #111d2a;
  --workflow-control-bg: #162330;
  --workflow-control-hover: #1d2d3d;
  --workflow-control-selected: #27384b;
  --workflow-control-ink: #b5c5d6;
  --workflow-control-border: #35475a;
  --workflow-control-selected-border: #8196ad;
}

body.project-mode-letters .sidebar :is(#workflowStep1Header, #shapeInputSection) {
  --step-mark: var(--workflow-shape-mark);
  --step-tint: var(--workflow-shape-tint);
  --step-ink: var(--workflow-shape-ink);
}
body.project-mode-letters .sidebar :is(#workflowStep2Header, #structureTypeSection) {
  --step-mark: var(--workflow-structure-mark);
  --step-tint: var(--workflow-structure-tint);
  --step-ink: var(--workflow-structure-ink);
}
body.project-mode-letters .sidebar :is(#workflowStep3Header, .fabrication-tab-group) {
  --step-mark: var(--workflow-model-mark);
  --step-tint: var(--workflow-model-tint);
  --step-ink: var(--workflow-model-ink);
}
body.project-mode-letters .sidebar :is(#workflowStep4Header, #toolsSection) {
  --step-mark: var(--workflow-tools-mark);
  --step-tint: var(--workflow-tools-tint);
  --step-ink: var(--workflow-tools-ink);
}

body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header) {
  min-height: 48px;
  gap: 10px;
  margin: 8px 3px 0;
  padding: 7px 9px 7px 8px;
  border-left: 3px solid color-mix(in srgb, var(--step-mark) 52%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--step-tint) 30%, var(--workflow-surface));
  color: var(--workflow-title);
  box-shadow: none;
  transform: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header):hover {
  border-left-color: var(--step-mark);
  background: color-mix(in srgb, var(--step-tint) 68%, var(--workflow-surface));
}

body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header)[aria-expanded="true"] {
  border-left-color: var(--step-mark);
  border-radius: 7px 7px 0 0;
  background: var(--step-tint);
  color: var(--workflow-title-active);
}

body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header)[aria-expanded="true"]:hover {
  background: color-mix(in srgb, var(--step-tint) 94%, var(--step-mark));
}

body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header):focus-visible {
  outline: 2px solid var(--step-ink);
  outline-offset: 2px;
}

body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header) .workflow-step-number {
  flex: 0 0 28px;
  width: 28px;
  height: 25px;
  border-color: color-mix(in srgb, var(--step-mark) 36%, var(--border));
  background: var(--step-tint);
  color: var(--step-ink);
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  box-shadow: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}

body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header)[aria-expanded="true"] .workflow-step-number {
  border-color: var(--step-mark);
  background: color-mix(in srgb, var(--step-tint) 90%, var(--step-mark));
}

body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header) .workflow-step-copy {
  gap: 3px;
}
body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header) .workflow-step-kicker {
  display: none;
}
body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header) .workflow-step-copy strong {
  color: inherit;
  font-size: 0.84rem;
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header) .workflow-step-copy small {
  max-width: 100%;
  overflow: hidden;
  color: var(--workflow-secondary);
  font-size: 0.68rem;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header) .workflow-step-chevron {
  border-color: var(--step-ink);
}

body.project-mode-letters .sidebar :is(#shapeInputSection, #structureTypeSection)[open],
body.project-mode-letters .sidebar #toolsSection[open] > .sidebar-panel-body {
  border-color: color-mix(in srgb, var(--step-mark) 22%, var(--border));
  background: color-mix(in srgb, var(--step-tint) 18%, var(--bg-elev));
  box-shadow: none;
}

/* All fabrication tabs share one neutral palette, including their panels. */
body.project-mode-letters .sidebar .fabrication-tab-group {
  --fabrication-tab-acrylic: var(--workflow-control-ink);
  --fabrication-tab-lid: var(--workflow-control-ink);
  --fabrication-tab-base: var(--workflow-control-ink);
  --fabrication-tab-tolerance: var(--workflow-control-ink);
  --fabrication-tab-tunnels: var(--workflow-control-ink);
  border-color: color-mix(in srgb, var(--workflow-model-mark) 22%, var(--border));
  background: var(--fabrication-panel-bg);
}
body.project-mode-letters .sidebar .fabrication-tab-group .sidebar-tab-button {
  border-color: var(--workflow-control-border);
  background: var(--workflow-control-bg);
  color: var(--workflow-control-ink);
  box-shadow: none;
  transform: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
body.project-mode-letters .sidebar .fabrication-tab-group .sidebar-tab-button:hover:not(:disabled) {
  border-color: var(--workflow-control-selected-border);
  background: var(--workflow-control-hover);
  color: var(--workflow-title-active);
  transform: none;
}
body.project-mode-letters .sidebar .fabrication-tab-group .sidebar-tab-button.active {
  border-color: var(--workflow-control-selected-border);
  background: var(--workflow-control-selected);
  color: var(--workflow-title-active);
  box-shadow: inset 0 -2px var(--workflow-control-selected-border);
}
body.project-mode-letters .sidebar .fabrication-tab-group .sidebar-tab-button .sidebar-tab-icon {
  color: currentColor;
  opacity: 1;
  filter: none;
}
body.project-mode-letters .sidebar .fabrication-tab-group .sidebar-tab-button::after {
  display: none;
}
body.project-mode-letters .sidebar .fabrication-tab-group .fabrication-tab-context {
  border-color: var(--workflow-control-border);
  background: var(--workflow-control-bg);
  color: var(--workflow-secondary);
}
body.project-mode-letters .sidebar .fabrication-tab-group .sidebar-tab-button:focus-visible {
  outline: 2px solid var(--workflow-control-selected-border);
  outline-offset: 2px;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header),
  body.project-mode-letters .sidebar :is(#workflowStep1Header, #workflowStep2Header, #workflowStep3Header, #workflowStep4Header) :is(.workflow-step-number, .workflow-step-chevron),
  body.project-mode-letters .sidebar .fabrication-tab-group :is(.sidebar-tab-button, .sidebar-tab-icon) {
    transition: none;
  }
}