/* Prototype accent ramps: theme resources, not OS personalization. */
:root {
  --wui-swatch-red: #ee4b62;
  --wui-swatch-orange: #f59733;
  --wui-swatch-green: #3fbd80;
  --wui-swatch-teal: #16b2c7;
  --wui-swatch-blue: #4095f6;
  --wui-swatch-purple: #ad6df4;
  --wui-accent-light: #005fb8;
  --wui-accent-dark: #60cdff;
  /* Companion ramps are PacKit palette extensions, not native WinUI severities. */
  --wui-companion-light: #16734b;
  --wui-companion-dark: #89d9ae;
  /* Application identity colors are independent of the interactive accent. */
  --wui-brand-1password: #4858bd;
  --wui-brand-7zip: #2e7d32;
  --wui-brand-adobe: #d92d20;
  --wui-brand-microsoft: #0078d4;
  --wui-brand-bluebeam: #005a9e;
  --wui-brand-box: #0061d5;
  --wui-brand-webex: #008d97;
  --wui-brand-citrix: #4527a0;
  --wui-brand-docker: #1d63ed;
  --wui-brand-dropbox: #0061ff;
  --wui-brand-purple: #8764b8;
  --wui-brand-figma: #a4262c;
  --wui-brand-filezilla: #b91c1c;
  --wui-brand-forticlient: #da3b01;
  --wui-brand-git: #f1502f;
  --wui-brand-github: #24292f;
  --wui-brand-globalprotect: #00796b;
  --wui-brand-chrome: #107c10;
  --wui-brand-jira: #0052cc;
  --wui-brand-keepass: #498205;
  --wui-brand-edge: #008272;
  --wui-brand-loop: #6b69d6;
  --wui-brand-planner: #31752f;
  --wui-brand-project: #107c41;
  --wui-brand-teams: #6264a7;
  --wui-brand-todo: #2563eb;
  --wui-brand-visio: #3955a3;
  --wui-brand-miro: #ffb900;
  --wui-brand-firefox: #d83b01;
  --wui-brand-northwind: #004e8c;
  --wui-brand-notepad: #0b6a0b;
  --wui-brand-java: #c74634;
  --wui-brand-postman: #ff6c37;
  --wui-brand-powerbi: #f2c811;
  --wui-brand-putty: #5c2d91;
  --wui-brand-ringcentral: #066fac;
  --wui-brand-sap: #0a6ed1;
  --wui-brand-servicenow: #154734;
  --wui-brand-skype: #00aff0;
  --wui-brand-slack: #611f69;
  --wui-brand-tableau: #1f77b4;
  --wui-brand-tailspin: #8a6100;
  --wui-brand-vscode: #007acc;
  --wui-brand-vlc: #f7630c;
  --wui-brand-winscp: #006cbe;
  --wui-brand-zoom: #2d8cff;
}

:root[data-accent="red"] { --wui-accent-light: #c42b3b; --wui-accent-dark: #ff8d9b; --wui-companion-light: #007678; --wui-companion-dark: #78d5d1; }
:root[data-accent="orange"] { --wui-accent-light: #a84b00; --wui-accent-dark: #ffb566; --wui-companion-light: #2368a2; --wui-companion-dark: #91c8f5; }
:root[data-accent="green"] { --wui-accent-light: #087650; --wui-accent-dark: #65dab0; --wui-companion-light: #7944a9; --wui-companion-dark: #d0acf0; }
:root[data-accent="teal"] { --wui-accent-light: #007681; --wui-accent-dark: #60dae8; --wui-companion-light: #a0446a; --wui-companion-dark: #f0a6c4; }
:root[data-accent="purple"] { --wui-accent-light: #7d3cc8; --wui-accent-dark: #c6a0ff; --wui-companion-light: #35711c; --wui-companion-dark: #abd88c; }

.workflow-canvas .react-flow {
  --xy-background-color: var(--wui-bg-layer-alt);
  --xy-background-pattern-color: var(--wui-stroke-control);
  --xy-edge-stroke: var(--wui-accent);
  --xy-edge-stroke-selected: var(--wui-accent);
  --xy-connectionline-stroke: var(--wui-accent);
  --xy-edge-label-background-color: var(--wui-bg-layer-alt);
  --xy-edge-label-color: var(--wui-text-secondary);
  --xy-handle-background-color: var(--wui-accent);
  --xy-handle-border-color: var(--wui-bg-layer-alt);
  --xy-node-background-color: var(--wui-bg-card);
  --xy-node-color: var(--wui-text);
  --xy-node-border: 1px solid var(--wui-stroke-control);
  --xy-selection-background-color: var(--wui-control-selected);
  --xy-selection-border: 1px solid var(--wui-accent);
  --xy-minimap-background-color: var(--wui-bg-layer-alt);
  --xy-minimap-mask-background-color: color-mix(in srgb, var(--wui-bg-solid) 75%, transparent);
  --xy-minimap-mask-stroke-color: var(--wui-stroke-control);
  --xy-minimap-node-background-color: var(--wui-control-strong);
  --xy-minimap-node-stroke-color: var(--wui-stroke-control);
  --xy-controls-button-background-color: var(--wui-control);
  --xy-controls-button-background-color-hover: var(--wui-control-hover);
  --xy-controls-button-color: var(--wui-text);
  --xy-controls-button-color-hover: var(--wui-text);
  --xy-controls-button-border-color: var(--wui-stroke-control);
  --xy-controls-box-shadow: var(--wui-shadow-control);
  --xy-attribution-background-color: var(--wui-bg-layer-alt);
}
.workflow-canvas .react-flow__arrowhead polyline { stroke: var(--wui-accent); fill: var(--wui-accent); }

.desktop-controls {
  position: fixed;
  bottom: 8px;
  left: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.desktop-controls[inert] { pointer-events: none; }
.desktop-controls .desktop-launcher { position: static; }
.desktop-accent-picker {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--wui-stroke-control);
  border-radius: 24px;
  background: var(--wui-bg-mica);
  box-shadow: var(--wui-shadow-flyout);
  backdrop-filter: blur(20px);
}

button.desktop-accent-swatch {
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

button.desktop-accent-swatch:hover { background: var(--wui-list-item-hover); }
button.desktop-accent-swatch:active { background: var(--wui-list-item-pressed); }
button.desktop-accent-swatch[aria-checked="true"] { border-color: var(--wui-text); }
button.desktop-accent-swatch > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-swatch);
  color: var(--wui-contrast-dark);
}
.desktop-accent-swatch .fluent { width: 12px; height: 12px; color: inherit; visibility: hidden; }
.desktop-accent-swatch[aria-checked="true"] .fluent { visibility: visible; }
[data-accent-choice="red"] { --accent-swatch: var(--wui-swatch-red); }
[data-accent-choice="orange"] { --accent-swatch: var(--wui-swatch-orange); }
[data-accent-choice="green"] { --accent-swatch: var(--wui-swatch-green); }
[data-accent-choice="teal"] { --accent-swatch: var(--wui-swatch-teal); }
[data-accent-choice="blue"] { --accent-swatch: var(--wui-swatch-blue); }
[data-accent-choice="purple"] { --accent-swatch: var(--wui-swatch-purple); }

/* Desktop controls sit behind the window and become usable only when minimized. */
.desktop { align-items: start; }
body .desktop .app-window {
  position: relative;
  z-index: 100;
  height: calc(100dvh - 40px);
  min-height: 0;
}
body .desktop.is-maximized .app-window.maximized { height: 100dvh; }
body .workflow-dialog-backdrop > dialog { max-height: calc(100dvh - 40px); }
@media (max-width: 1180px) {
  body .desktop .app-window { height: 100dvh; }
}
@media (max-width: 560px) {
  .titlebar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .titlebar .title-actions, .titlebar .workspace { display: none; }
  .titlebar .brand { min-width: 0; overflow: hidden; }
}
@media (forced-colors: active) {
  .account-badge { background: Highlight; color: HighlightText; border-color: Canvas; }
  .desktop-accent-picker { background: Canvas; border-color: ButtonText; }
  button.desktop-accent-swatch[aria-checked="true"] { border-color: Highlight; }
  .desktop-accent-swatch > span { forced-color-adjust: none; }
}