/* Optional Console appearances. Loaded after the established Command Deck;
   every rule is scoped so the original Light and Dark remain unchanged. */

/* The new appearance description needs room below a focused select. */
#theme-description { margin-top: 8px; }

/* Tidepool: sea glass, deep teal ink and softly curved panels. */
:root[data-theme="tidepool"] {
  color-scheme: light;
  --bg: #EDF7F4;
  --surface: #F9FFFC;
  --surface-2: #DFEFE9;
  --fg: #163D38;
  --fg-muted: #41635C;
  --border: #B7D0C8;
  --border-bright: #247D6E;
  --indigo: #126C5F;
  --indigo-bright: #0F5A50;
  --on-accent: #FFFFFF;
  --on-accent-bright: #FFFFFF;
  --signal: #16643D;
  --warn: #855310;
  --danger: #A4323D;
  --topbar-bg: #F3FBF7;
  --scrim: rgb(15 48 42 / 0.42);
  --led-off: #789D92;
  --wire: #9BBFB3;
  --hub-fill: #DFEFE9;
  --hub-screen-fill: #F9FFFC;
  --hub-screen-stroke: #247D6E;
  --node-fill: #F9FFFC;
  --ok-stroke: #458660;
  --ok-glow: rgb(22 100 61 / 0.12);
  --danger-stroke: #BB6570;
  --danger-glow: rgb(164 50 61 / 0.12);
  --warn-border: #C89C50;
  --warn-bg: #F8EED8;
  --danger-border: #BB6570;
  --cd-glass: linear-gradient(135deg, #F9FFFC, #EAF7F0);
  --cd-glass-button: linear-gradient(135deg, #FFFFFF, #DFEFE9);
  --cd-highlight: #FFFFFF;
  --cd-soft: #DFEFE9;
  --cd-green: #16643D;
  --cd-green-bg: #E0F1E4;
  --cd-amber: #855310;
  --cd-amber-bg: #F8EED8;
  --cd-red: #A4323D;
  --cd-red-bg: #F9E4E7;
  --cd-blue: #245C83;
  --cd-blue-bg: #DFECF7;
  --cd-gray: #41635C;
  --cd-gray-bg: #DFEBE6;
  --cd-nav: #173F38;
  --cd-nav-fg: #BBDBD2;
  --cd-nav-active: #31675C;
  --cd-nav-active-fg: #FFFFFF;
  --cd-nav-badge: #F1D59C;
  --cd-nav-badge-fg: #4C360E;
  --theme-shadow: rgb(25 67 55 / 0.09);
  --theme-edge: 88 137 121;
  --theme-edge-ok: 40 125 78;
  --theme-edge-warn: 161 111 30;
  --theme-sheen: linear-gradient(120deg, #FFFFFF70, transparent 46%, #FFFFFF25);
  --theme-counts-bg: #DFEFE980;
}

/* Campfire: warm charcoal, copper details and a quiet ember glow. */
:root[data-theme="campfire"] {
  color-scheme: dark;
  --bg: #211916;
  --surface: #2D231E;
  --surface-2: #3A2C25;
  --fg: #FFF3E6;
  --fg-muted: #D3BBA8;
  --border: #6D5342;
  --border-bright: #D89464;
  --indigo: #F2AA79;
  --indigo-bright: #F8C39A;
  --on-accent: #2D1C12;
  --on-accent-bright: #2D1C12;
  --signal: #A7D79A;
  --warn: #F3C976;
  --danger: #FFADAA;
  --topbar-bg: #271E19;
  --scrim: rgb(18 12 9 / 0.72);
  --led-off: #90705A;
  --wire: #735A47;
  --hub-fill: #3A2C25;
  --hub-screen-fill: #211916;
  --hub-screen-stroke: #D89464;
  --node-fill: #2D231E;
  --ok-stroke: #86AD7C;
  --ok-glow: rgb(167 215 154 / 0.17);
  --danger-stroke: #DB8A88;
  --danger-glow: rgb(255 173 170 / 0.17);
  --warn-border: #B18B46;
  --warn-bg: #47391F;
  --danger-border: #DB8A88;
  --cd-glass: linear-gradient(140deg, #3A2B22, #2D231E 70%);
  --cd-glass-button: linear-gradient(135deg, #4A3628, #3A2C25);
  --cd-highlight: #E1B48930;
  --cd-soft: #3A2C25;
  --cd-green: #B4DBA3;
  --cd-green-bg: #2D3A28;
  --cd-amber: #F3C976;
  --cd-amber-bg: #47391F;
  --cd-red: #FFADAA;
  --cd-red-bg: #46282A;
  --cd-blue: #B4CEE9;
  --cd-blue-bg: #293743;
  --cd-gray: #D3BBA8;
  --cd-gray-bg: #3A2C25;
  --cd-nav: #191310;
  --cd-nav-fg: #D3BBA8;
  --cd-nav-active: #5F3C27;
  --cd-nav-active-fg: #FFF3E6;
  --cd-nav-badge: #F3C976;
  --cd-nav-badge-fg: #35250C;
  --theme-shadow: rgb(9 5 3 / 0.26);
  --theme-edge: 150 112 85;
  --theme-edge-ok: 137 177 117;
  --theme-edge-warn: 205 155 74;
  --theme-sheen: linear-gradient(120deg, #EEAE6B0A, transparent 48%, #EEAE6B04);
  --theme-counts-bg: #21191660;
}

/* Moonbase: graphite instruments, lime accents and a static survey grid. */
:root[data-theme="moonbase"] {
  color-scheme: dark;
  --bg: #171B20;
  --surface: #22292F;
  --surface-2: #2C353C;
  --fg: #EEF4E9;
  --fg-muted: #B6C4CB;
  --border: #53616C;
  --border-bright: #CBE986;
  --indigo: #CCE78F;
  --indigo-bright: #E1F4BA;
  --on-accent: #202918;
  --on-accent-bright: #202918;
  --signal: #A7D8C1;
  --warn: #F2CF8D;
  --danger: #FFB2B2;
  --topbar-bg: #1C2227;
  --scrim: rgb(10 14 18 / 0.74);
  --led-off: #71838E;
  --wire: #647780;
  --hub-fill: #2C353C;
  --hub-screen-fill: #171B20;
  --hub-screen-stroke: #A2BA70;
  --node-fill: #22292F;
  --ok-stroke: #8BBC9F;
  --ok-glow: rgb(167 216 193 / 0.15);
  --danger-stroke: #DA9696;
  --danger-glow: rgb(255 178 178 / 0.15);
  --warn-border: #AF945A;
  --warn-bg: #443A26;
  --danger-border: #DA9696;
  --cd-glass: linear-gradient(135deg, #2C353C, #22292F);
  --cd-glass-button: linear-gradient(135deg, #344149, #29343A);
  --cd-highlight: #D5E4B91C;
  --cd-soft: #2C353C;
  --cd-green: #A7D8C1;
  --cd-green-bg: #263D34;
  --cd-amber: #F2CF8D;
  --cd-amber-bg: #443A26;
  --cd-red: #FFB2B2;
  --cd-red-bg: #462E34;
  --cd-blue: #A9D2F5;
  --cd-blue-bg: #293B4A;
  --cd-gray: #B6C4CB;
  --cd-gray-bg: #2C353C;
  --cd-nav: #101418;
  --cd-nav-fg: #B6C4CB;
  --cd-nav-active: #38482C;
  --cd-nav-active-fg: #EAF6D8;
  --cd-nav-badge: #F2CF8D;
  --cd-nav-badge-fg: #302610;
  --theme-shadow: rgb(3 7 10 / 0.26);
  --theme-edge: 116 134 144;
  --theme-edge-ok: 121 165 145;
  --theme-edge-warn: 186 156 96;
  --theme-sheen: linear-gradient(120deg, #D9E7C906, transparent 50%);
  --theme-counts-bg: #171B2060;
}

/* Command Deck has some deliberate fixed colors in its original appearance.
   Resolve them through the new palettes only when a named theme is selected. */
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) {
  --theme-primary: var(--indigo);
  --theme-primary-hover: var(--indigo-bright);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .command-deck :is(button, summary, input, select, a):focus-visible {
  outline-color: var(--indigo-bright);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-demo-note {
  background: var(--cd-nav);
  color: var(--cd-nav-fg);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .command-deck .app-nav {
  background: var(--cd-nav);
  border-color: var(--border);
  box-shadow: 0 8px 25px var(--theme-shadow);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .command-deck .app-nav .app-nav-btn {
  color: var(--cd-nav-fg);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .command-deck .app-nav .app-nav-btn.is-active {
  background: var(--cd-nav-active);
  color: var(--cd-nav-active-fg);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .command-deck .app-nav .app-nav-btn:focus-visible {
  outline-color: var(--cd-nav-fg);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .command-deck .app-nav-btn b {
  background: var(--cd-nav-badge);
  color: var(--cd-nav-badge-fg);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .command-deck :is(.btn-primary, .cd-filterbar button[aria-pressed="true"], .decision-options .decision-choice:first-child) {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  color: var(--on-accent);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .command-deck :is(.btn-primary, .cd-filterbar button[aria-pressed="true"], .decision-options .decision-choice:first-child):hover {
  background: var(--theme-primary-hover);
  border-color: var(--theme-primary-hover);
  color: var(--on-accent-bright);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .command-deck .card {
  box-shadow: 0 3px 12px var(--theme-shadow);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-agent {
  --edge: var(--theme-edge);
  box-shadow: inset 0 0 0 1px var(--cd-highlight), 0 4px 18px var(--theme-shadow);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-agent.automation-active {
  --edge: var(--theme-edge-ok);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-agent.automation-attention {
  --edge: var(--theme-edge-warn);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-agent::before {
  background: var(--theme-sheen);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-agent-counts {
  background: var(--theme-counts-bg);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-comms-dots i {
  background: var(--cd-gray);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-comms-dots i.signal-ok {
  background: var(--signal);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-comms-dots i.signal-bad {
  background: var(--danger);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) :is(.cd-step-working, .cd-step-waiting, .cd-step-blocked) i {
  box-shadow: 0 0 6px color-mix(in srgb, currentColor 18%, transparent);
}
/* Do not dim ordinary text below its palette's tested contrast. State labels
   and the existing step symbols continue to communicate status. */
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) :is(.cd-step-upcoming, .feed-resolved, .notlinked-card .notlinked-hint) {
  opacity: 1;
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-dialog {
  box-shadow: -15px 0 60px var(--theme-shadow);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .command-deck #cd-work-modal {
  box-shadow: 0 20px 75px var(--theme-shadow);
}
:root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-dialog::backdrop {
  background: var(--scrim);
}

/* Small, static details create a different mood without changing page layout. */
:root[data-theme="tidepool"] body.command-deck {
  background-image: radial-gradient(ellipse at 0 15%, #CCE8DD70, transparent 48%), radial-gradient(ellipse at 100% 70%, #D0E8E870, transparent 45%);
}
:root[data-theme="tidepool"] .command-deck :is(.card, .cd-agent, .cd-status) {
  border-radius: 20px;
}
:root[data-theme="tidepool"] .command-deck .topbar {
  border-bottom: 2px solid #B7D0C8;
}
:root[data-theme="campfire"] body.command-deck {
  background-image: radial-gradient(ellipse at 85% 0, #B2632620, transparent 55%);
}
:root[data-theme="campfire"] .command-deck .card {
  border-top-color: #AA7C55;
}
:root[data-theme="campfire"] .command-deck .topbar {
  border-bottom: 2px solid #A66D42;
}
:root[data-theme="moonbase"] body.command-deck {
  background-image: linear-gradient(#BCD89806 1px, transparent 1px), linear-gradient(90deg, #BCD89806 1px, transparent 1px);
  background-size: 42px 42px;
}
:root[data-theme="moonbase"] .command-deck :is(.card, .cd-agent, .cd-status, .cd-comms-summary) {
  border-radius: 7px;
}
:root[data-theme="moonbase"] .command-deck :is(.btn-primary, .btn-secondary, .cd-filterbar button, .cd-agent-symbol, .cd-agent-info, .cd-row-icon, .cd-status-lamp) {
  border-radius: 6px;
}
:root[data-theme="moonbase"] .command-deck .topbar {
  border-bottom: 2px solid #81964E;
}
:root[data-theme="moonbase"] .command-deck .cd-brand-product {
  color: var(--indigo);
}

@media (forced-colors: active) {
  :root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) body.command-deck {
    background: Canvas;
  }
  :root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-agent {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }
  :root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .cd-agent::before {
    display: none;
  }
  :root:is([data-theme="tidepool"], [data-theme="campfire"], [data-theme="moonbase"]) .command-deck .app-nav .app-nav-btn.is-active {
    outline: 2px solid Highlight;
    outline-offset: -3px;
  }
}