/* Load after the component styles. The appearance controller owns every
   palette value; this file maps those values to specific visual roles.
   Accent text is used only on solid accent fills. Accent-strong is the
   contrast-adjusted foreground for links and controls on pale surfaces. */

/* Solid identity and selection surfaces share the contrast-safe pair. */
.brand-mark,
.loading-mark,
.avatar.admin,
.nav-item.active,
.nav-item.active:hover,
.rd-tooltip,
.toast:not(.error){
 background:var(--accent);
 color:var(--accent-text);
}
.nav-item.active .icon,
.nav-item.active .nav-count{color:inherit}
.btn.primary,
.btn.btn-primary{
 background:var(--accent);
 border-color:var(--accent);
 color:var(--accent-text);
}
.progress>span,
.legend-dot,
.legend-line:not(.faint){background:var(--accent)}
.switch[aria-checked="true"],
.route-row .switch.on,
.node-config-modal .nc-toggle.on i{
 background:var(--accent);
 border-color:var(--accent);
}
.switch[aria-checked="true"]:after,
.route-row .switch.on:after,
.node-config-modal .nc-toggle.on b{background:var(--accent-text)}

/* Normal page tabs retain their neutral surface in the black-and-white mode. */
.tabs .tab.active,
.settings-nav button.active,
.appearance-option.selected{
 color:var(--accent-strong,var(--text));
}
.appearance-option.selected{border-color:var(--accent-strong,var(--text))}
.appearance-option:not(.selected) .appearance-mode-check{visibility:hidden}
.swatch.selected{box-shadow:0 0 0 1px var(--accent-strong,var(--text))}
.rd-color-preset[aria-pressed="true"]:after{border-color:var(--accent-strong,var(--text))}

/* Keep SVG labels independent from the line color, including the live
   analytics SVGs whose original attributes use currentColor. */
.chart-line,
.card>.chart svg polyline{stroke:var(--accent)}
.card>.chart svg circle,
.card>.chart svg path{fill:var(--accent)}
.chart-grid,
.card>.chart svg line{stroke:var(--grid);stroke-opacity:1}
.chart-axis,
.card>.chart svg text{fill:var(--muted);fill-opacity:1}

/* Calendar and custom select states must also follow the chosen hue. */
.rd-select-option.is-selected{
 background:var(--accent-soft,var(--surface-2));
 color:var(--accent-strong,var(--text));
}
.rd-select-option.is-active,
.rd-select-option.is-selected.is-active{
 background:var(--accent);
 color:var(--accent-text);
}
.rd-select.is-open .rd-select-trigger:not([aria-invalid="true"]){
 border-color:var(--accent);
}
.rd-picker-trigger[aria-expanded="true"]:not([aria-invalid="true"]){
 border-color:var(--accent);
}
.rd-picker-panel .rd-calendar-day.rd-day-selected,
.rd-picker-panel .rd-calendar-day.rd-day-selected:hover,
.rd-picker-panel .rd-calendar-option[aria-pressed="true"]{
 background:var(--accent);
 border-color:var(--accent);
 color:var(--accent-text);
}
.rd-picker-panel .rd-picker-apply{
 background:var(--accent);
 border-color:var(--accent);
 color:var(--accent-text)!important;
}
.rd-calendar-day.rd-day-today:not(.rd-day-selected):after{
 background:var(--accent-strong,var(--text));
}

/* Colored themes add a quiet second layer. Text paragraphs and semantic
   status/error classes deliberately keep their existing text colors. */
:root[data-accent="custom"] .workspace-icon,
:root[data-accent="custom"] .stat-icon,
:root[data-accent="custom"] .node-symbol,
:root[data-accent="custom"] .node-card-symbol,
:root[data-accent="custom"] .subscription-icon,
:root[data-accent="custom"] .rank-node,
:root[data-accent="custom"] .empty-icon{
 background:var(--accent-soft,var(--surface-2));
 border-color:var(--accent-border,var(--border));
 color:var(--accent-strong,var(--text));
}
:root[data-accent="custom"] .tabs .tab.active,
:root[data-accent="custom"] .settings-nav button.active{
 background:var(--accent-soft,var(--surface-2));
 color:var(--accent-strong,var(--text));
 box-shadow:inset 0 0 0 1px var(--accent-border,var(--border));
}
:root[data-accent="custom"] .settings-nav button.active{
 border-color:var(--accent-border,var(--border));
 box-shadow:none;
}
:root[data-accent="custom"] .format-chips>.pill.selected{
 background:var(--accent-soft,var(--surface-2));
 border-color:var(--accent-border,var(--border));
 color:var(--accent-strong,var(--text));
}
:root[data-accent="custom"] .card-link,
:root[data-accent="custom"] .link-btn,
:root[data-accent="custom"] .text-button,
:root[data-accent="custom"] .footer-links button,
:root[data-accent="custom"] .generate{
 color:var(--accent-strong,var(--text));
}
:root[data-accent="custom"] .card-link:hover,
:root[data-accent="custom"] .link-btn:hover,
:root[data-accent="custom"] .text-button:hover,
:root[data-accent="custom"] .footer-links button:hover{
 text-decoration:underline;
 text-underline-offset:3px;
}
:root[data-accent="custom"] .btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger):hover:not(:disabled),
:root[data-accent="custom"] .btn-icon:hover:not(:disabled),
:root[data-accent="custom"] .icon-btn:hover:not(:disabled){
 background:var(--accent-soft,var(--surface-2));
 border-color:var(--accent-border,var(--border));
 color:var(--accent-strong,var(--text));
}

/* The overview path is an illustration, not a node health indicator. */
:root[data-accent="custom"] .chain-stop{
 background:var(--accent-soft,var(--surface-2));
 border-color:var(--accent-border,var(--border));
}
:root[data-accent="custom"] .chain-stop>.icon,
:root[data-accent="custom"] .chain-mini>.icon,
:root[data-accent="custom"] .chain-arrow,
:root[data-accent="custom"] .connector{
 color:var(--accent-strong,var(--text));
}
:root[data-accent="custom"] .connector:before{background:var(--accent-border,var(--border))}
:root[data-accent="custom"] .chain-node.entry{border-color:var(--accent-strong,var(--text))}
:root[data-accent="custom"] .legend-line.faint{
 background:var(--accent-border,var(--border));
 opacity:1;
}

/* Node configuration has more-specific desktop and mobile component rules. */
:root[data-accent="custom"] .node-config-modal .config-tabs .tab.active{
 background:var(--accent-soft,var(--surface-2));
 border-color:var(--accent-border,var(--border));
 color:var(--accent-strong,var(--text));
 box-shadow:none;
}
:root[data-accent="custom"] .node-config-modal .config-tabs .tab.active .nc-tab-count{
 color:var(--accent-strong,var(--text));
}
:root[data-accent="custom"] .node-config-modal .nc-node-symbol,
:root[data-accent="custom"] .node-config-modal .nc-item-symbol,
:root[data-accent="custom"] .node-config-modal .nc-default-symbol,
:root[data-accent="custom"] .node-config-modal .nc-settings-heading>span,
:root[data-accent="custom"] .node-config-modal .nc-rule-number{
 background:var(--accent-soft,var(--surface-2));
 border-color:var(--accent-border,var(--border));
 color:var(--accent-strong,var(--text));
}
:root[data-accent="custom"] .node-config-modal .nc-protocol,
:root[data-accent="custom"] .node-config-modal .nc-match-label .nc-chip{
 background:var(--accent-soft,var(--surface-2));
 border-color:var(--accent-border,var(--border));
 color:var(--accent-strong,var(--text));
}
:root[data-accent="custom"] .node-config-modal .nc-rule-exit{
 background:var(--accent-soft,var(--surface-2));
}
:root[data-accent="custom"] .node-config-modal .nc-rule-exit>.icon{
 color:var(--accent-strong,var(--text));
}
:root[data-accent="custom"] .node-config-modal .nc-default-exit{
 border-color:var(--accent-border,var(--border));
}

/* Feedback and expanded controls use a pale fill, never accent-colored prose. */
:root[data-accent="custom"] .rd-select-trigger:hover:not(:disabled):not([aria-invalid="true"]),
:root[data-accent="custom"] .rd-picker-trigger:hover:not(:disabled):not([aria-invalid="true"]){
 background:var(--accent-soft,var(--surface-2));
 border-color:var(--accent-border,var(--border));
}
:root[data-accent="custom"] .rd-select.is-open .rd-select-arrow,
:root[data-accent="custom"] .rd-calendar-glyph{
 color:var(--accent-strong,var(--text));
}
:root[data-accent="custom"] .rd-picker-panel .rd-picker-text-button{
 color:var(--accent-strong,var(--text))!important;
}
:root[data-accent="custom"] .rd-picker-icon-button:hover:not(:disabled),
:root[data-accent="custom"] .rd-calendar-title:hover:not(:disabled),
:root[data-accent="custom"] .rd-calendar-day:hover:not(:disabled):not(.rd-day-selected),
:root[data-accent="custom"] .rd-calendar-option:hover:not(:disabled):not([aria-pressed="true"]),
:root[data-accent="custom"] .rd-picker-text-button:hover:not(:disabled),
:root[data-accent="custom"] .rd-number-actions button:hover:not(:disabled),
:root[data-accent="custom"] .rd-search-clear:hover:not(:disabled){
 background:var(--accent-soft,var(--surface-2));
 color:var(--accent-strong,var(--text));
}
:root[data-accent="custom"] .rd-file-button:before{
 background:var(--accent-soft,var(--surface-2));
 border-color:var(--accent-border,var(--border));
 color:var(--accent-strong,var(--text));
}
:root[data-accent="custom"] .search-field:focus-within,
:root[data-accent="custom"] .search-input:focus-within{
 border-color:var(--accent-strong,var(--text));
}
:root[data-accent="custom"] .field input:focus:not([aria-invalid="true"]),
:root[data-accent="custom"] .field textarea:focus:not([aria-invalid="true"]){
 border-color:var(--accent-strong,var(--text));
}

/* Miniatures keep their light/dark canvas representation. Only the selected
   frame and the active miniature item carry the custom accent. */
:root[data-accent="custom"] .appearance-option.selected{
 border-color:var(--accent-strong,var(--text));
 box-shadow:0 0 0 1px var(--accent-border,var(--border));
}
:root[data-accent="custom"] .appearance-option.selected .appearance-thumbnail{
 border-color:var(--accent-border,var(--border));
}
:root[data-accent="custom"] .appearance-thumbnail .mini-active{
 background:var(--accent);
}
:root[data-accent="custom"] .swatch.selected:after{
 background:var(--accent-text);
}

/* Do not interpolate palette changes: switching theme must paint the final
   colors at once. Geometric transitions, such as switch thumbs and arrows,
   are left on their own elements. No page-wide transition is introduced. */
.nav-item,
.rd-select-trigger,
input[type="checkbox"],
input[type="radio"],
.node-config-modal .nc-toggle i{transition:none}

@media(max-width:760px){
 :root[data-accent="custom"] .node-config-modal .config-tabs .tab.active{
  background:transparent;
  border-color:var(--accent-strong,var(--text));
  box-shadow:none;
 }
}