/**
 * Talk to Launch — light theme demos aligned to Programmads brand chart.
 * Source: https://www.programmads.com/ (Webflow tokens)
 *
 *   --primary:            #017bff
 *   --primary-licensing:  #0740ff
 *   --primary-trading:    #8b81ff
 *   --primary-consulting: #05c8dd
 *   --secondary:          #a7c0f4
 *   --secondary-licensing:#8fceff
 *   --secondary-trading:  #d6d3ff
 *   --secondary-consulting:#b0f7ff
 *   --100 white · --200 #f7f9fd · --300 #eef1f6 · --400 #dadee8
 *   --500 #a2a9bd · --600 #6c758d · --700/#800 #394460
 *   ink: #1a1b1f · hover blue: #0050bd
 *
 * Apply: body.theme-ttl.theme-<slug>
 */

:root {
  --pa-primary: #017bff;
  --pa-primary-hover: #0050bd;
  --pa-licensing: #0740ff;
  --pa-trading: #8b81ff;
  --pa-consulting: #05c8dd;
  --pa-secondary: #a7c0f4;
  --pa-sec-licensing: #8fceff;
  --pa-sec-trading: #d6d3ff;
  --pa-sec-consulting: #b0f7ff;
  --pa-100: #ffffff;
  --pa-200: #f7f9fd;
  --pa-300: #eef1f6;
  --pa-400: #dadee8;
  --pa-500: #a2a9bd;
  --pa-600: #6c758d;
  --pa-700: #394460;
  --pa-ink: #1a1b1f;
  --pa-ink-2: #272f39;
}

/* Shared light chrome */
body[class*="theme-paper-terminal"],
body[class*="theme-ads-console"],
body[class*="theme-glacier-desk"],
body[class*="theme-signal-grid"],
body[class*="theme-soft-graphite"],
body[class*="theme-skyline-blue"],
body[class*="theme-porcelain-teal"],
body[class*="theme-blueprint-light"],
body[class*="theme-day-rain"],
body[class*="theme-noir-invert"] {
  color-scheme: light;
}

body[class*="theme-paper-terminal"] .app-shell::before,
body[class*="theme-ads-console"] .app-shell::before,
body[class*="theme-glacier-desk"] .app-shell::before,
body[class*="theme-signal-grid"] .app-shell::before,
body[class*="theme-soft-graphite"] .app-shell::before,
body[class*="theme-skyline-blue"] .app-shell::before,
body[class*="theme-porcelain-teal"] .app-shell::before,
body[class*="theme-blueprint-light"] .app-shell::before,
body[class*="theme-noir-invert"] .app-shell::before {
  display: none;
}

/* Shared semantic status (Programmads-adjacent) */
body.theme-light-demo,
body.theme-paper-terminal,
body.theme-ads-console,
body.theme-glacier-desk,
body.theme-signal-grid,
body.theme-soft-graphite,
body.theme-skyline-blue,
body.theme-porcelain-teal,
body.theme-blueprint-light,
body.theme-day-rain,
body.theme-noir-invert {
  --success: #34a853;
  --success-bg: rgba(52, 168, 83, .1);
  --warn: #e37400;
  --warn-bg: rgba(227, 116, 0, .1);
  --error: #ea384c;
  --error-bg: rgba(234, 56, 76, .08);
  --brand-primary-ink: #ffffff;
}

/* ── 1. Paper Terminal — neutrals + primary, analyst desk ──── */
body.theme-paper-terminal {
  --deep-squid:   var(--pa-200);
  --squid-ink:    var(--pa-200);
  --sidebar-bg:   var(--pa-300);
  --surface:      var(--pa-100);
  --surface-2:    var(--pa-300);
  --surface-3:    var(--pa-400);
  --border:       var(--pa-400);
  --border-light: var(--pa-500);
  --text:         var(--pa-700);
  --text-bright:  var(--pa-ink);
  --text-muted:   var(--pa-600);
  --text-dim:     var(--pa-500);
  --brand-primary: var(--pa-primary);
  --brand-primary-hover: var(--pa-primary-hover);
  --brand-primary-dim: var(--pa-secondary);
  --brand-glow: rgba(1, 123, 255, .12);
  --brand-glow-2: rgba(1, 123, 255, .2);
  --brand-border: rgba(1, 123, 255, .28);
  --ember-glow: var(--brand-glow);
  --ember-glow-2: var(--brand-glow-2);
  --shadow-card: 0 1px 2px rgba(57, 68, 96, .04), 0 8px 24px rgba(57, 68, 96, .06);
}

body.theme-paper-terminal .msg.bot .msg-bubble,
body.theme-paper-terminal .code-block {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* ── 2. Ads Console → Trading pillar (#8b81ff) ─────────────── */
body.theme-ads-console {
  --deep-squid:   #fbf9fd;
  --squid-ink:    #fbf9fd;
  --sidebar-bg:   var(--pa-sec-trading);
  --surface:      var(--pa-100);
  --surface-2:    #f3f1ff;
  --surface-3:    var(--pa-sec-trading);
  --border:       #e5e5ff;
  --border-light: var(--pa-trading);
  --text:         #514f6e;
  --text-bright:  #170f49;
  --text-muted:   var(--pa-600);
  --text-dim:     var(--pa-500);
  --brand-primary: var(--pa-trading);
  --brand-primary-hover: #6f64e8;
  --brand-primary-dim: #a8a0ff;
  --brand-glow: rgba(139, 129, 255, .16);
  --brand-glow-2: rgba(139, 129, 255, .24);
  --brand-border: rgba(139, 129, 255, .35);
  --ember-glow: var(--brand-glow);
  --ember-glow-2: var(--brand-glow-2);
  --shadow-card: 0 1px 3px rgba(23, 15, 73, .06);
}

body.theme-ads-console .nav-item.active {
  border-left: 3px solid var(--brand-primary);
}

/* ── 3. Glacier Desk — --200 sky + primary ─────────────────── */
body.theme-glacier-desk {
  --deep-squid:   var(--pa-200);
  --squid-ink:    var(--pa-200);
  --sidebar-bg:   #e8f1ff;
  --surface:      var(--pa-100);
  --surface-2:    #e6f2ff;
  --surface-3:    #d6eaff;
  --border:       #c5d4e8;
  --border-light: var(--pa-secondary);
  --text:         var(--pa-700);
  --text-bright:  var(--pa-ink);
  --text-muted:   var(--pa-600);
  --text-dim:     var(--pa-500);
  --brand-primary: var(--pa-primary);
  --brand-primary-hover: var(--pa-primary-hover);
  --brand-primary-dim: #4da3ff;
  --brand-glow: rgba(1, 123, 255, .12);
  --brand-glow-2: rgba(1, 123, 255, .2);
  --brand-border: rgba(1, 123, 255, .3);
  --ember-glow: var(--brand-glow);
  --ember-glow-2: var(--brand-glow-2);
  --shadow-card: 0 4px 20px rgba(57, 68, 96, .05);
}

/* ── 4. Signal Grid — ink + primary status ─────────────────── */
body.theme-signal-grid {
  --deep-squid:   var(--pa-100);
  --squid-ink:    var(--pa-100);
  --sidebar-bg:   var(--pa-200);
  --surface:      var(--pa-100);
  --surface-2:    var(--pa-300);
  --surface-3:    var(--pa-400);
  --border:       var(--pa-400);
  --border-light: var(--pa-500);
  --text:         var(--pa-700);
  --text-bright:  var(--pa-ink);
  --text-muted:   var(--pa-600);
  --text-dim:     var(--pa-500);
  --brand-primary: var(--pa-700);
  --brand-primary-hover: var(--pa-ink);
  --brand-primary-dim: var(--pa-600);
  --brand-glow: rgba(57, 68, 96, .08);
  --brand-glow-2: rgba(57, 68, 96, .14);
  --brand-border: rgba(57, 68, 96, .22);
  --ember-glow: var(--brand-glow);
  --ember-glow-2: var(--brand-glow-2);
  --shadow-card: none;
  --radius: 2px;
  --radius-lg: 4px;
}

body.theme-signal-grid .nav-item.active {
  background: var(--pa-primary);
  color: #fff;
  border-color: var(--pa-primary);
}

body.theme-signal-grid .send-btn,
body.theme-signal-grid .theme-cta {
  background: var(--pa-primary);
  color: #fff;
}

body.theme-signal-grid .send-btn:hover {
  background: var(--pa-primary-hover);
}

/* ── 5. Soft Graphite — --300 / --700 + primary ────────────── */
body.theme-soft-graphite {
  --deep-squid:   var(--pa-300);
  --squid-ink:    var(--pa-300);
  --sidebar-bg:   #e4ebf3;
  --surface:      var(--pa-100);
  --surface-2:    var(--pa-200);
  --surface-3:    var(--pa-400);
  --border:       var(--pa-400);
  --border-light: var(--pa-500);
  --text:         var(--pa-700);
  --text-bright:  var(--pa-ink);
  --text-muted:   var(--pa-600);
  --text-dim:     var(--pa-500);
  --brand-primary: var(--pa-primary);
  --brand-primary-hover: var(--pa-primary-hover);
  --brand-primary-dim: var(--pa-secondary);
  --brand-glow: rgba(1, 123, 255, .12);
  --brand-glow-2: rgba(1, 123, 255, .2);
  --brand-border: rgba(1, 123, 255, .28);
  --ember-glow: var(--brand-glow);
  --ember-glow-2: var(--brand-glow-2);
  --shadow-card: 0 1px 2px rgba(57, 68, 96, .04), 0 6px 16px rgba(57, 68, 96, .06);
}

/* ── 6. Skyline Blue — flagship primary #017bff ────────────── */
body.theme-skyline-blue {
  --deep-squid:   var(--pa-200);
  --squid-ink:    var(--pa-200);
  --sidebar-bg:   #e6f2ff;
  --surface:      var(--pa-100);
  --surface-2:    #e8f1ff;
  --surface-3:    #d6eaff;
  --border:       #c5dbf0;
  --border-light: var(--pa-sec-licensing);
  --text:         var(--pa-700);
  --text-bright:  var(--pa-ink);
  --text-muted:   var(--pa-600);
  --text-dim:     var(--pa-500);
  --brand-primary: var(--pa-primary);
  --brand-primary-hover: var(--pa-primary-hover);
  --brand-primary-dim: #4da3ff;
  --brand-glow: rgba(1, 123, 255, .14);
  --brand-glow-2: rgba(1, 123, 255, .22);
  --brand-border: rgba(1, 123, 255, .32);
  --ember-glow: var(--brand-glow);
  --ember-glow-2: var(--brand-glow-2);
  --shadow-card: 0 8px 28px rgba(57, 68, 96, .06);
}

body.theme-skyline-blue .nav-item.active {
  border-left: 3px solid var(--brand-primary);
  background: var(--brand-glow);
}

/* Conversation list — light surfaces (replaces dark rgba(0,0,0,.12) chrome) */
body.theme-skyline-blue .sidebar-chats .chats-list {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(57, 68, 96, .04);
  padding: 4px;
  gap: 2px;
}

body.theme-skyline-blue .sidebar-chats .chats-group-label {
  background: linear-gradient(180deg, #e8f1ff 0%, rgba(232, 241, 255, .92) 100%);
  color: var(--text-muted);
  border-radius: 4px;
  margin: 0 0 1px;
}

body.theme-skyline-blue .sidebar-chats .chat-row {
  color: var(--text);
  border: 1px solid transparent;
}

body.theme-skyline-blue .sidebar-chats .chat-row:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

body.theme-skyline-blue .sidebar-chats .chat-row.active {
  background: var(--brand-glow);
  border-color: var(--brand-border);
  color: var(--text-bright);
  font-weight: 600;
}

body.theme-skyline-blue .sidebar-chats .new-chat-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-bright);
}

body.theme-skyline-blue .sidebar-chats .new-chat-btn:hover {
  background: var(--brand-glow);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

body.theme-skyline-blue .sidebar-chats .chat-rename-input {
  background: var(--surface);
  color: var(--text-bright);
}

body.theme-skyline-blue .sidebar-chats .chats-list::-webkit-scrollbar {
  width: 6px;
}
body.theme-skyline-blue .sidebar-chats .chats-list::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 99px;
}
body.theme-skyline-blue .sidebar-chats .chats-list::-webkit-scrollbar-track {
  background: transparent;
}

/* Media hub dropdowns — same light treatment as conversation list */
body.theme-skyline-blue .media-context-section .platform-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(57, 68, 96, .04);
}

body.theme-skyline-blue .media-context-section .platform-card:hover {
  border-color: var(--border-light);
}

body.theme-skyline-blue .media-context-section .platform-card.amazon.expanded {
  border-color: var(--amazon-border, rgba(255, 153, 0, .42));
  box-shadow: 0 0 0 1px var(--amazon-glow, rgba(255, 153, 0, .16)), 0 1px 2px rgba(57, 68, 96, .04);
}

body.theme-skyline-blue .media-context-section .platform-header:hover {
  background: var(--surface-2);
}

body.theme-skyline-blue .media-context-section .platform-chevron {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

body.theme-skyline-blue .media-context-section .platform-card.expanded .platform-chevron {
  background: var(--brand-glow);
  color: var(--brand-primary);
  border-color: var(--brand-border);
}
body.theme-skyline-blue .media-context-section .platform-card.amazon.expanded .platform-chevron {
  background: var(--amazon-glow, rgba(255, 153, 0, .16));
  color: var(--amazon-orange, #ff9900);
  border-color: var(--amazon-border, rgba(255, 153, 0, .42));
}

body.theme-skyline-blue .media-context-section .platform-body {
  border-top-color: var(--border);
}

body.theme-skyline-blue .media-context-section .platform-card.expanded .platform-body {
  background: var(--surface);
  gap: 10px;
}

body.theme-skyline-blue .media-context-section .platform-body .inst-trigger {
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: none;
}

body.theme-skyline-blue .media-context-section .platform-body .inst-trigger:hover {
  border-color: var(--border-light);
  background: #eef5fc;
}

body.theme-skyline-blue .media-context-section .platform-body .inst-trigger.open {
  background: var(--surface);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
body.theme-skyline-blue .media-context-section .platform-card.amazon .platform-body .inst-trigger.open {
  border-color: var(--amazon-orange, #ff9900);
  box-shadow: 0 0 0 3px var(--amazon-glow, rgba(255, 153, 0, .16));
}

body.theme-skyline-blue .media-context-section .platform-body .inst-panel {
  background: var(--surface);
  border-color: var(--brand-primary);
  box-shadow: 0 10px 28px rgba(57, 68, 96, .12);
}
body.theme-skyline-blue .media-context-section .platform-card.amazon .platform-body .inst-panel {
  border-color: var(--amazon-orange, #ff9900);
}

body.theme-skyline-blue .media-context-section .platform-body .inst-search {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-bright);
}

body.theme-skyline-blue .media-context-section .platform-body .inst-group-header {
  background: var(--surface-2);
  color: var(--text-muted);
}

body.theme-skyline-blue .media-context-section .platform-body .inst-option:hover {
  background: var(--surface-2);
}

body.theme-skyline-blue .media-context-section .platform-body .inst-option.selected {
  background: var(--brand-glow);
}

body.theme-skyline-blue .media-context-section .platform-body .ctx-hint {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
}

body.theme-skyline-blue .media-context-section .platform-body .instances-toolbar button {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

body.theme-skyline-blue .media-context-section .platform-body .instances-toolbar button:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: var(--brand-glow);
}

/* ── 7. Porcelain → Consulting pillar (#05c8dd) ────────────── */
body.theme-porcelain-teal {
  --deep-squid:   #f5fcfd;
  --squid-ink:    #f5fcfd;
  --sidebar-bg:   var(--pa-sec-consulting);
  --surface:      var(--pa-100);
  --surface-2:    #e8fafc;
  --surface-3:    var(--pa-sec-consulting);
  --border:       #c5eef3;
  --border-light: var(--pa-consulting);
  --text:         var(--pa-700);
  --text-bright:  var(--pa-ink);
  --text-muted:   var(--pa-600);
  --text-dim:     var(--pa-500);
  --brand-primary: var(--pa-consulting);
  --brand-primary-hover: #04a8ba;
  --brand-primary-dim: #3dd6e6;
  --brand-glow: rgba(5, 200, 221, .14);
  --brand-glow-2: rgba(5, 200, 221, .22);
  --brand-border: rgba(5, 200, 221, .32);
  --ember-glow: var(--brand-glow);
  --ember-glow-2: var(--brand-glow-2);
  --shadow-card: 0 10px 40px rgba(57, 68, 96, .05);
  --radius: 10px;
  --radius-lg: 14px;
}

/* ── 8. Blueprint → Licensing pillar (#0740ff) ─────────────── */
body.theme-blueprint-light {
  --deep-squid:   var(--pa-200);
  --squid-ink:    var(--pa-200);
  --sidebar-bg:   #deebff;
  --surface:      var(--pa-100);
  --surface-2:    #e6f2ff;
  --surface-3:    var(--pa-sec-licensing);
  --border:       #c7d2e3;
  --border-light: var(--pa-secondary);
  --text:         var(--pa-700);
  --text-bright:  #14142b;
  --text-muted:   var(--pa-600);
  --text-dim:     var(--pa-500);
  --brand-primary: var(--pa-licensing);
  --brand-primary-hover: #0530c7;
  --brand-primary-dim: #4d72ff;
  --brand-glow: rgba(7, 64, 255, .12);
  --brand-glow-2: rgba(7, 64, 255, .2);
  --brand-border: rgba(7, 64, 255, .3);
  --ember-glow: var(--brand-glow);
  --ember-glow-2: var(--brand-glow-2);
  --shadow-card: 0 0 0 1px rgba(7, 64, 255, .06);
}

body.theme-blueprint-light .code-block,
body.theme-blueprint-light .msg.bot .msg-bubble.codey {
  background: #e6f2ff;
  border: 1px dashed var(--border-light);
}

body.theme-blueprint-light .app-shell {
  background-image:
    linear-gradient(rgba(7, 64, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 64, 255, .04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── 9. Day Rain — primary + soft licensing secondary ─────── */
body.theme-day-rain {
  --deep-squid:   var(--pa-200);
  --squid-ink:    var(--pa-200);
  --sidebar-bg:   #e8f1ff;
  --surface:      var(--pa-100);
  --surface-2:    #f0f6fc;
  --surface-3:    #dde8f5;
  --border:       #c9d9e8;
  --border-light: var(--pa-sec-licensing);
  --text:         var(--pa-700);
  --text-bright:  var(--pa-ink);
  --text-muted:   var(--pa-600);
  --text-dim:     var(--pa-500);
  --brand-primary: var(--pa-primary);
  --brand-primary-hover: var(--pa-primary-hover);
  --brand-primary-dim: var(--pa-sec-licensing);
  --brand-glow: rgba(1, 123, 255, .14);
  --brand-glow-2: rgba(1, 123, 255, .22);
  --brand-border: rgba(1, 123, 255, .32);
  --ember-glow: var(--brand-glow);
  --ember-glow-2: var(--brand-glow-2);
  --shadow-card: 0 8px 28px rgba(57, 68, 96, .05);
}

body.theme-day-rain .app-shell::before {
  display: block;
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(1, 123, 255, .04) 100%),
    repeating-linear-gradient(
      105deg,
      transparent 0,
      transparent 80px,
      rgba(57, 68, 96, .025) 80px,
      rgba(57, 68, 96, .025) 81px
    );
  animation: ttlDayRain 10s linear infinite;
}

@keyframes ttlDayRain {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 200px, 40px 200px; }
}

body.theme-day-rain .sidebar,
body.theme-day-rain .layout { position: relative; z-index: 1; }

body.theme-day-rain .nav-item.active {
  border-left: 3px solid var(--brand-primary);
}

/* ── 10. Noir Invert — ink #1a1b1f + primary ───────────────── */
body.theme-noir-invert {
  --deep-squid:   var(--pa-100);
  --squid-ink:    var(--pa-100);
  --sidebar-bg:   var(--pa-200);
  --surface:      var(--pa-100);
  --surface-2:    var(--pa-300);
  --surface-3:    var(--pa-400);
  --border:       var(--pa-400);
  --border-light: var(--pa-500);
  --text:         var(--pa-ink-2);
  --text-bright:  var(--pa-ink);
  --text-muted:   var(--pa-600);
  --text-dim:     var(--pa-500);
  --brand-primary: var(--pa-primary);
  --brand-primary-hover: var(--pa-primary-hover);
  --brand-primary-dim: #4da3ff;
  --brand-glow: rgba(1, 123, 255, .1);
  --brand-glow-2: rgba(1, 123, 255, .16);
  --brand-border: rgba(1, 123, 255, .35);
  --ember-glow: var(--brand-glow);
  --ember-glow-2: var(--brand-glow-2);
  --shadow-card: 0 1px 0 rgba(26, 27, 31, .04);
}

body.theme-noir-invert .topbar {
  background: var(--pa-100);
  border-bottom: 2px solid var(--pa-ink);
}

body.theme-noir-invert .nav-item.active {
  background: var(--pa-ink);
  color: #fff;
  border-color: var(--pa-ink);
}

body.theme-noir-invert .send-btn,
body.theme-noir-invert .theme-cta {
  background: var(--pa-ink);
  color: #fff;
}

body.theme-noir-invert .send-btn:hover,
body.theme-noir-invert .theme-cta:hover {
  background: var(--pa-primary);
}

/* ── Logo on light themes: transparent panel, light wordmark ── */
body.theme-light-demo .sidebar-brand .ttl-logo-panel--tokyo,
body.theme-paper-terminal .sidebar-brand .ttl-logo-panel--tokyo,
body.theme-ads-console .sidebar-brand .ttl-logo-panel--tokyo,
body.theme-glacier-desk .sidebar-brand .ttl-logo-panel--tokyo,
body.theme-signal-grid .sidebar-brand .ttl-logo-panel--tokyo,
body.theme-soft-graphite .sidebar-brand .ttl-logo-panel--tokyo,
body.theme-skyline-blue .sidebar-brand .ttl-logo-panel--tokyo,
body.theme-porcelain-teal .sidebar-brand .ttl-logo-panel--tokyo,
body.theme-blueprint-light .sidebar-brand .ttl-logo-panel--tokyo,
body.theme-day-rain .sidebar-brand .ttl-logo-panel--tokyo,
body.theme-noir-invert .sidebar-brand .ttl-logo-panel--tokyo {
  margin: 4px 4px 2px;
  padding: 2px 4px;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  justify-content: center;
  position: relative;
}

body.theme-light-demo .sidebar-brand .ttl-logo-panel--tokyo::after,
body.theme-paper-terminal .sidebar-brand .ttl-logo-panel--tokyo::after,
body.theme-ads-console .sidebar-brand .ttl-logo-panel--tokyo::after,
body.theme-glacier-desk .sidebar-brand .ttl-logo-panel--tokyo::after,
body.theme-signal-grid .sidebar-brand .ttl-logo-panel--tokyo::after,
body.theme-soft-graphite .sidebar-brand .ttl-logo-panel--tokyo::after,
body.theme-skyline-blue .sidebar-brand .ttl-logo-panel--tokyo::after,
body.theme-porcelain-teal .sidebar-brand .ttl-logo-panel--tokyo::after,
body.theme-blueprint-light .sidebar-brand .ttl-logo-panel--tokyo::after,
body.theme-day-rain .sidebar-brand .ttl-logo-panel--tokyo::after,
body.theme-noir-invert .sidebar-brand .ttl-logo-panel--tokyo::after {
  display: none;
}

body.theme-light-demo .sidebar-brand .ttl-logo.ttl-logo--tokyo .ttl-logo__full,
body.theme-light-demo .sidebar-brand .ttl-logo.ttl-logo--tokyo img.ttl-logo__full,
body.theme-paper-terminal .sidebar-brand .ttl-logo__full,
body.theme-ads-console .sidebar-brand .ttl-logo__full,
body.theme-glacier-desk .sidebar-brand .ttl-logo__full,
body.theme-signal-grid .sidebar-brand .ttl-logo__full,
body.theme-soft-graphite .sidebar-brand .ttl-logo__full,
body.theme-skyline-blue .sidebar-brand .ttl-logo__full,
body.theme-porcelain-teal .sidebar-brand .ttl-logo__full,
body.theme-blueprint-light .sidebar-brand .ttl-logo__full,
body.theme-day-rain .sidebar-brand .ttl-logo__full,
body.theme-noir-invert .sidebar-brand .ttl-logo__full {
  width: 100%;
  height: auto;
  max-height: 52px;
  object-fit: contain;
}

/* Auth pages: transparent logo panel on Skyline (and light demos) */
body.theme-skyline-blue .auth-brand-zone .ttl-logo-panel--tokyo,
body.theme-light-demo .auth-brand-zone .ttl-logo-panel--tokyo,
body.theme-paper-terminal .auth-brand-zone .ttl-logo-panel--tokyo,
body.theme-ads-console .auth-brand-zone .ttl-logo-panel--tokyo,
body.theme-glacier-desk .auth-brand-zone .ttl-logo-panel--tokyo,
body.theme-signal-grid .auth-brand-zone .ttl-logo-panel--tokyo,
body.theme-soft-graphite .auth-brand-zone .ttl-logo-panel--tokyo,
body.theme-porcelain-teal .auth-brand-zone .ttl-logo-panel--tokyo,
body.theme-blueprint-light .auth-brand-zone .ttl-logo-panel--tokyo,
body.theme-day-rain .auth-brand-zone .ttl-logo-panel--tokyo,
body.theme-noir-invert .auth-brand-zone .ttl-logo-panel--tokyo {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

body.theme-skyline-blue .auth-brand-zone .ttl-logo-panel--tokyo::after,
body.theme-light-demo .auth-brand-zone .ttl-logo-panel--tokyo::after,
body.theme-paper-terminal .auth-brand-zone .ttl-logo-panel--tokyo::after,
body.theme-ads-console .auth-brand-zone .ttl-logo-panel--tokyo::after,
body.theme-glacier-desk .auth-brand-zone .ttl-logo-panel--tokyo::after,
body.theme-signal-grid .auth-brand-zone .ttl-logo-panel--tokyo::after,
body.theme-soft-graphite .auth-brand-zone .ttl-logo-panel--tokyo::after,
body.theme-porcelain-teal .auth-brand-zone .ttl-logo-panel--tokyo::after,
body.theme-blueprint-light .auth-brand-zone .ttl-logo-panel--tokyo::after,
body.theme-day-rain .auth-brand-zone .ttl-logo-panel--tokyo::after,
body.theme-noir-invert .auth-brand-zone .ttl-logo-panel--tokyo::after {
  display: none;
}