/**
 * Terria Platform — chrome systems for sidebar + header
 * Intentional GIS / digital-twin shell identities (not palette swaps).
 * html[data-chrome="<id>"]
 */


/* ── Base tokens (Lume) ─────────────────────────────────────────── */
html[data-chrome],
html:not([data-chrome]) {
  --ch-font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --ch-font-display: "IBM Plex Sans", system-ui, sans-serif;
  --ch-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ch-panel: #f7f9fc;
  --ch-panel-elevated: #ffffff;
  --ch-header: #eef3f9;
  --ch-header-text: #0c1b2a;
  --ch-ink: #0c1b2a;
  --ch-muted: #5a6b7d;
  --ch-faint: #8b9aab;
  --ch-line: rgba(12, 27, 42, 0.08);
  --ch-line-strong: rgba(12, 27, 42, 0.14);
  --ch-signal: #0b6e99;
  --ch-signal-soft: rgba(11, 110, 153, 0.12);
  --ch-signal-text: #ffffff;
  --ch-shadow: 1px 0 0 var(--ch-line), 12px 0 40px rgba(12, 27, 42, 0.06);
  --ch-radius: 8px;
  --ch-radius-sm: 6px;
  --ch-rail: 3px solid var(--ch-signal);
  --ch-blur: 0px;
  --ch-map-chip: #ffffff;
  --ch-map-chip-ink: #0c1b2a;
  --ch-map-chip-line: rgba(12, 27, 42, 0.1);
  --ch-input-bg: #ffffff;
  --ch-section-label: 0.68rem;
}

/* ── 1 · Lume — survey instrument, cool glass ───────────────────── */
html[data-chrome="lume"],
html:not([data-chrome]) {
  --ch-panel: rgba(247, 249, 252, 0.92);
  --ch-panel-elevated: rgba(255, 255, 255, 0.96);
  --ch-header: linear-gradient(180deg, #fbfcfe 0%, #eef3f9 100%);
  --ch-blur: 20px;
  --ch-shadow: 1px 0 0 rgba(12, 27, 42, 0.06), 16px 0 48px rgba(12, 27, 42, 0.07);
  --ch-signal: #0b6e99;
  --ch-rail: 3px solid #0b6e99;
}

/* ── 2 · Bathymetry — chart room / depth ────────────────────────── */
html[data-chrome="bathymetry"] {
  --ch-font-display: "Syne", "IBM Plex Sans", system-ui, sans-serif;
  --ch-panel: #071422;
  --ch-panel-elevated: #0c1d31;
  --ch-header: linear-gradient(165deg, #05101c 0%, #0a2438 100%);
  --ch-header-text: #d8eef8;
  --ch-ink: #d8eef8;
  --ch-muted: #7aa3b8;
  --ch-faint: #4d7388;
  --ch-line: rgba(120, 200, 230, 0.12);
  --ch-line-strong: rgba(120, 200, 230, 0.22);
  --ch-signal: #3ec6e0;
  --ch-signal-soft: rgba(62, 198, 224, 0.14);
  --ch-signal-text: #041018;
  --ch-shadow: 1px 0 0 rgba(62, 198, 224, 0.15), 18px 0 50px rgba(0, 0, 0, 0.45);
  --ch-radius: 4px;
  --ch-radius-sm: 3px;
  --ch-rail: 3px solid #3ec6e0;
  --ch-map-chip: rgba(7, 20, 34, 0.92);
  --ch-map-chip-ink: #d8eef8;
  --ch-map-chip-line: rgba(62, 198, 224, 0.28);
  --ch-input-bg: #0a1a2a;
}

/* ── 3 · Survey — field instrument / amber reticule ─────────────── */
html[data-chrome="survey"] {
  --ch-font: "IBM Plex Sans", system-ui, sans-serif;
  --ch-font-display: "IBM Plex Mono", ui-monospace, monospace;
  --ch-panel: #16181c;
  --ch-panel-elevated: #1e2127;
  --ch-header: #121418;
  --ch-header-text: #e8e6e1;
  --ch-ink: #e8e6e1;
  --ch-muted: #9a958c;
  --ch-faint: #6b6660;
  --ch-line: rgba(232, 230, 225, 0.08);
  --ch-line-strong: rgba(232, 163, 23, 0.35);
  --ch-signal: #e8a317;
  --ch-signal-soft: rgba(232, 163, 23, 0.12);
  --ch-signal-text: #1a1204;
  --ch-shadow: 1px 0 0 rgba(232, 163, 23, 0.2), 14px 0 40px rgba(0, 0, 0, 0.5);
  --ch-radius: 2px;
  --ch-radius-sm: 2px;
  --ch-rail: 2px solid #e8a317;
  --ch-map-chip: #1e2127;
  --ch-map-chip-ink: #e8e6e1;
  --ch-map-chip-line: rgba(232, 163, 23, 0.3);
  --ch-input-bg: #1a1c20;
}

/* ── 4 · Vellum — drafting desk ─────────────────────────────────── */
html[data-chrome="vellum"] {
  --ch-font: "IBM Plex Sans", system-ui, sans-serif;
  --ch-font-display: "Source Serif 4", "Georgia", serif;
  --ch-panel: #f4f0e8;
  --ch-panel-elevated: #faf7f1;
  --ch-header: #ebe4d6;
  --ch-header-text: #1a1612;
  --ch-ink: #1a1612;
  --ch-muted: #6b5f52;
  --ch-faint: #9a8b7a;
  --ch-line: rgba(26, 22, 18, 0.1);
  --ch-line-strong: rgba(26, 22, 18, 0.18);
  --ch-signal: #2c4a3e;
  --ch-signal-soft: rgba(44, 74, 62, 0.1);
  --ch-signal-text: #f4f0e8;
  --ch-shadow: 1px 0 0 rgba(26, 22, 18, 0.12), 10px 0 28px rgba(26, 22, 18, 0.06);
  --ch-radius: 0;
  --ch-radius-sm: 0;
  --ch-rail: 1px solid #1a1612;
  --ch-map-chip: #faf7f1;
  --ch-map-chip-ink: #1a1612;
  --ch-map-chip-line: rgba(26, 22, 18, 0.16);
  --ch-input-bg: #faf7f1;
}

/* ── 5 · Ion — satellite / aluminum ─────────────────────────────── */
html[data-chrome="ion"] {
  --ch-font: "IBM Plex Sans", system-ui, sans-serif;
  --ch-panel: #e9eef5;
  --ch-panel-elevated: #f4f7fb;
  --ch-header: linear-gradient(180deg, #f8fafc 0%, #e2e8f2 100%);
  --ch-header-text: #1e293b;
  --ch-ink: #1e293b;
  --ch-muted: #64748b;
  --ch-faint: #94a3b8;
  --ch-line: rgba(30, 41, 59, 0.1);
  --ch-line-strong: rgba(67, 56, 202, 0.25);
  --ch-signal: #4338ca;
  --ch-signal-soft: rgba(67, 56, 202, 0.1);
  --ch-signal-text: #f8fafc;
  --ch-shadow: 1px 0 0 rgba(30, 41, 59, 0.08), 14px 0 36px rgba(30, 41, 59, 0.07);
  --ch-radius: 10px;
  --ch-radius-sm: 8px;
  --ch-rail: 3px solid #4338ca;
  --ch-map-chip: #ffffff;
  --ch-map-chip-ink: #1e293b;
  --ch-map-chip-line: rgba(67, 56, 202, 0.15);
  --ch-input-bg: #ffffff;
}

/* ── 6 · Mesa — arid cartography ────────────────────────────────── */
html[data-chrome="mesa"] {
  --ch-font: "IBM Plex Sans", system-ui, sans-serif;
  --ch-font-display: "Source Serif 4", Georgia, serif;
  --ch-panel: #f0e6d8;
  --ch-panel-elevated: #f7f0e6;
  --ch-header: #e5d5c0;
  --ch-header-text: #3d2914;
  --ch-ink: #3d2914;
  --ch-muted: #7a5c40;
  --ch-faint: #a88b6c;
  --ch-line: rgba(61, 41, 20, 0.12);
  --ch-line-strong: rgba(61, 41, 20, 0.2);
  --ch-signal: #0f766e;
  --ch-signal-soft: rgba(15, 118, 110, 0.12);
  --ch-signal-text: #f0e6d8;
  --ch-shadow: 1px 0 0 rgba(61, 41, 20, 0.1), 12px 0 32px rgba(61, 41, 20, 0.08);
  --ch-radius: 6px;
  --ch-radius-sm: 4px;
  --ch-rail: 3px solid #0f766e;
  --ch-map-chip: #f7f0e6;
  --ch-map-chip-ink: #3d2914;
  --ch-map-chip-line: rgba(15, 118, 110, 0.25);
  --ch-input-bg: #f7f0e6;
}

/* ── 7 · Fjord — nordic coastal ─────────────────────────────────── */
html[data-chrome="fjord"] {
  --ch-font: "IBM Plex Sans", system-ui, sans-serif;
  --ch-panel: #e4eceb;
  --ch-panel-elevated: #eef4f3;
  --ch-header: #d5e0de;
  --ch-header-text: #0f1419;
  --ch-ink: #0f1419;
  --ch-muted: #4a5c5a;
  --ch-faint: #7a8f8c;
  --ch-line: rgba(15, 20, 25, 0.1);
  --ch-line-strong: rgba(13, 92, 99, 0.3);
  --ch-signal: #0d5c63;
  --ch-signal-soft: rgba(13, 92, 99, 0.1);
  --ch-signal-text: #e4eceb;
  --ch-shadow: 1px 0 0 rgba(15, 20, 25, 0.08), 12px 0 36px rgba(15, 20, 25, 0.06);
  --ch-radius: 12px;
  --ch-radius-sm: 8px;
  --ch-rail: 3px solid #0d5c63;
  --ch-map-chip: #eef4f3;
  --ch-map-chip-ink: #0f1419;
  --ch-map-chip-line: rgba(13, 92, 99, 0.2);
  --ch-input-bg: #eef4f3;
}

/* ── 8 · Noir — photogrammetry darkroom ─────────────────────────── */
html[data-chrome="noir"] {
  --ch-font: "IBM Plex Sans", system-ui, sans-serif;
  --ch-font-display: "Syne", system-ui, sans-serif;
  --ch-panel: #0a0a0b;
  --ch-panel-elevated: #141416;
  --ch-header: #000000;
  --ch-header-text: #e4e4e7;
  --ch-ink: #e4e4e7;
  --ch-muted: #a1a1aa;
  --ch-faint: #71717a;
  --ch-line: rgba(228, 228, 231, 0.08);
  --ch-line-strong: rgba(212, 165, 116, 0.35);
  --ch-signal: #d4a574;
  --ch-signal-soft: rgba(212, 165, 116, 0.12);
  --ch-signal-text: #0a0a0b;
  --ch-shadow: 1px 0 0 rgba(212, 165, 116, 0.15), 16px 0 48px rgba(0, 0, 0, 0.55);
  --ch-radius: 0;
  --ch-radius-sm: 0;
  --ch-rail: 2px solid #d4a574;
  --ch-map-chip: #141416;
  --ch-map-chip-ink: #e4e4e7;
  --ch-map-chip-line: rgba(212, 165, 116, 0.3);
  --ch-input-bg: #111113;
}

/* ── 9 · Harbor — port authority ────────────────────────────────── */
html[data-chrome="harbor"] {
  --ch-font: "IBM Plex Sans", system-ui, sans-serif;
  --ch-panel: #0b1f3a;
  --ch-panel-elevated: #122a4a;
  --ch-header: #08162b;
  --ch-header-text: #f0f4f8;
  --ch-ink: #f0f4f8;
  --ch-muted: #9db0c7;
  --ch-faint: #6b829e;
  --ch-line: rgba(240, 244, 248, 0.1);
  --ch-line-strong: rgba(193, 18, 31, 0.45);
  --ch-signal: #c1121f;
  --ch-signal-soft: rgba(193, 18, 31, 0.14);
  --ch-signal-text: #ffffff;
  --ch-shadow: 1px 0 0 rgba(240, 244, 248, 0.08), 16px 0 44px rgba(0, 0, 0, 0.4);
  --ch-radius: 4px;
  --ch-radius-sm: 3px;
  --ch-rail: 4px solid #c1121f;
  --ch-map-chip: #122a4a;
  --ch-map-chip-ink: #f0f4f8;
  --ch-map-chip-line: rgba(193, 18, 31, 0.35);
  --ch-input-bg: #0e2340;
}

/* ── 10 · Glasshouse — botanical research ───────────────────────── */
html[data-chrome="glasshouse"] {
  --ch-font: "IBM Plex Sans", system-ui, sans-serif;
  --ch-panel: rgba(243, 250, 246, 0.94);
  --ch-panel-elevated: rgba(255, 255, 255, 0.95);
  --ch-header: linear-gradient(180deg, #f7fcf9 0%, #e6f4ec 100%);
  --ch-header-text: #1b4332;
  --ch-ink: #1b4332;
  --ch-muted: #52796f;
  --ch-faint: #84a98c;
  --ch-line: rgba(27, 67, 50, 0.1);
  --ch-line-strong: rgba(27, 67, 50, 0.18);
  --ch-signal: #2d6a4f;
  --ch-signal-soft: rgba(45, 106, 79, 0.12);
  --ch-signal-text: #f3faf6;
  --ch-shadow: 1px 0 0 rgba(27, 67, 50, 0.08), 14px 0 40px rgba(27, 67, 50, 0.08);
  --ch-radius: 14px;
  --ch-radius-sm: 10px;
  --ch-rail: 3px solid #2d6a4f;
  --ch-blur: 18px;
  --ch-map-chip: rgba(255, 255, 255, 0.94);
  --ch-map-chip-ink: #1b4332;
  --ch-map-chip-line: rgba(45, 106, 79, 0.2);
  --ch-input-bg: #ffffff;
}

/* ==================================================================
   APPLICATION LAYER
   ================================================================== */

html[data-chrome] body,
html:not([data-chrome]) body {
  font-family: var(--ch-font) !important;
  color: var(--ch-ink);
}

/* --- Side panel shell (styled-components: SidePanelContainer-sc-*) --- */
html[data-chrome] #ui [class*="SidePanelContainer"],
html[data-chrome] #ui [class*="SidePanel___"],
html[data-chrome] #ui [class*="sidePanel"],
html:not([data-chrome]) #ui [class*="SidePanelContainer"] {
  background: var(--ch-panel) !important;
  color: var(--ch-ink) !important;
  font-family: var(--ch-font) !important;
  border-right: none !important;
  box-shadow: var(--ch-shadow) !important;
  backdrop-filter: blur(var(--ch-blur)) !important;
  -webkit-backdrop-filter: blur(var(--ch-blur)) !important;
  /* theme.radiusXL leaves rounded island — keep for soft themes, square for ink systems */
  overflow: hidden;
}

/* Signature: left accent rail on the floating workbench */
html[data-chrome] #ui [class*="SidePanelContainer"] {
  position: absolute; /* preserve layout; already absolute from component */
  border-left: var(--ch-rail) !important;
}

/* Inner workbench boxes that paint solid theme dark */
html[data-chrome] #ui [class*="SidePanel__"],
html[data-chrome] #ui [class*="SidePanel___"] {
  background: transparent !important;
  color: var(--ch-ink) !important;
}

/* Branding header (Branding___StyledDiv-sc-*) */
html[data-chrome] #ui [class*="Branding"],
html[data-chrome] #ui [class*="branding"],
html:not([data-chrome]) #ui [class*="Branding"] {
  background: var(--ch-header) !important;
  color: var(--ch-header-text) !important;
  border-bottom: 1px solid var(--ch-line) !important;
  font-family: var(--ch-font-display) !important;
  min-height: 72px !important;
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
}

/* Brand underline accent (hairline signal) */
html[data-chrome] #ui [class*="Branding"]::after,
html:not([data-chrome]) #ui [class*="Branding"]::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--ch-signal) 0%,
    var(--ch-signal) 32%,
    transparent 32%
  );
  opacity: 0.9;
  pointer-events: none;
}

html[data-chrome] #ui [class*="Branding"] img,
html:not([data-chrome]) #ui [class*="Branding"] img {
  filter: none;
  opacity: 0.95;
  max-height: 40px !important;
}

/* Dark themes: invert light logos */
html[data-chrome="bathymetry"] #ui [class*="Branding"] img,
html[data-chrome="survey"] #ui [class*="Branding"] img,
html[data-chrome="noir"] #ui [class*="Branding"] img,
html[data-chrome="harbor"] #ui [class*="Branding"] img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* Workbench column */
html[data-chrome] #ui [class*="workBench"],
html[data-chrome] #ui [class*="Workbench"],
html[data-chrome] #ui [class*="workbench"] {
  background: transparent !important;
  color: var(--ch-ink) !important;
  font-family: var(--ch-font) !important;
}

html[data-chrome] #ui [class*="workBench"] h3,
html[data-chrome] #ui [class*="workBench"] h4,
html[data-chrome] #ui [class*="workBench"] h5,
html[data-chrome] #ui [class*="Workbench"] h3,
html[data-chrome] #ui [class*="Workbench"] h5,
html[data-chrome] #ui [class*="SidePanel"] h3,
html[data-chrome] #ui [class*="SidePanel"] h5 {
  color: var(--ch-ink) !important;
  font-family: var(--ch-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-size: 0.92rem !important;
}

html[data-chrome] #ui [class*="workBench"] p,
html[data-chrome] #ui [class*="Workbench"] p,
html[data-chrome] #ui [class*="SidePanel"] p,
html[data-chrome] #ui [class*="SidePanel"] li,
html[data-chrome] #ui [class*="SidePanel"] span {
  color: var(--ch-muted) !important;
  line-height: 1.5 !important;
}

/*
 * Primary CTAs inside workbench (Explore / Upload).
 * Terria uses styled-components Button__StyledButton — not btn-primary classes.
 */
html[data-chrome] #ui [class*="SidePanelContainer"] button[class*="Button__StyledButton"] {
  background: var(--ch-signal) !important;
  background-color: var(--ch-signal) !important;
  background-image: none !important;
  color: var(--ch-signal-text) !important;
  border: none !important;
  border-radius: var(--ch-radius-sm) !important;
  box-shadow: none !important;
  font-family: var(--ch-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: filter 0.15s ease !important;
}

html[data-chrome] #ui [class*="SidePanelContainer"] button[class*="Button__StyledButton"]:hover {
  filter: brightness(1.07) !important;
}

/* Tour / outline buttons stay quiet */
html[data-chrome] #ui [class*="SidePanelContainer"] button[class*="SidePanel___StyledButton"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ch-ink) !important;
  border: 1px solid var(--ch-line-strong) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Collapse / full-screen chevron on panel edge */
html[data-chrome] #ui [class*="SidePanelContainer"] > button[class*="Button__StyledButton"],
html[data-chrome] #ui [class*="FullScreen"] button,
html[data-chrome] #ui button[class*="FullScreen"] {
  background: var(--ch-panel-elevated) !important;
  background-color: var(--ch-panel-elevated) !important;
  color: var(--ch-ink) !important;
  border: 1px solid var(--ch-line) !important;
  filter: none !important;
}

/* Legacy class hooks */
html[data-chrome] #ui [class*="btn-primary"],
html[data-chrome] #ui [class*="BtnPrimary"] {
  background: var(--ch-signal) !important;
  background-image: none !important;
  color: var(--ch-signal-text) !important;
  border-radius: var(--ch-radius-sm) !important;
  box-shadow: none !important;
}

/* Search inputs */
html[data-chrome] #ui input[type="search"],
html[data-chrome] #ui input[type="text"],
html[data-chrome] #ui [class*="SearchBox"] input,
html[data-chrome] #ui [class*="searchBox"] input,
html[data-chrome] #ui [class*="Search"] input {
  background: var(--ch-input-bg) !important;
  color: var(--ch-ink) !important;
  border: 1px solid var(--ch-line-strong) !important;
  border-radius: var(--ch-radius-sm) !important;
  box-shadow: none !important;
  font-family: var(--ch-font) !important;
  font-size: 0.9rem !important;
}

html[data-chrome] #ui input:focus {
  outline: none !important;
  border-color: var(--ch-signal) !important;
  box-shadow: 0 0 0 3px var(--ch-signal-soft) !important;
}

/* Map menu chips (top bar) */
html[data-chrome] #ui [class*="MenuBar"] a,
html[data-chrome] #ui [class*="menuBar"] a,
html[data-chrome] #ui [class*="MenuBar"] button,
html[data-chrome] #ui [class*="menuBar"] button,
html[data-chrome] #ui a[class*="MenuItem"],
html[data-chrome] #ui [class*="menu-item"] {
  background: var(--ch-map-chip) !important;
  color: var(--ch-map-chip-ink) !important;
  border: 1px solid var(--ch-map-chip-line) !important;
  border-radius: 999px !important;
  font-family: var(--ch-font) !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: blur(10px);
}

html[data-chrome] #ui [class*="MenuBar"] a:hover,
html[data-chrome] #ui [class*="MenuBar"] button:hover {
  border-color: var(--ch-signal) !important;
  color: var(--ch-signal) !important;
}

/* Map nav / settings chips */
html[data-chrome] #ui [class*="MapNavigation"] button,
html[data-chrome] #ui [class*="map-navigation"] button,
html[data-chrome] #ui [class*="btn--map"],
html[data-chrome] #ui [class*="BtnMap"] {
  background: var(--ch-map-chip) !important;
  color: var(--ch-map-chip-ink) !important;
  border: 1px solid var(--ch-map-chip-line) !important;
  border-radius: var(--ch-radius-sm) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  font-family: var(--ch-font) !important;
}

html[data-chrome] #ui [class*="MapNavigation"] button:hover,
html[data-chrome] #ui [class*="btn--map"]:hover {
  border-color: var(--ch-signal) !important;
  color: var(--ch-signal) !important;
}

/* Bottom bar */
html[data-chrome] #ui [class*="BottomBar"],
html[data-chrome] #ui [class*="locationBar"],
html[data-chrome] #ui [class*="distanceLegend"],
html[data-chrome] #ui [class*="LocationBar"],
html[data-chrome] #ui [class*="DistanceLegend"] {
  background: var(--ch-panel-elevated) !important;
  color: var(--ch-muted) !important;
  border-top: 1px solid var(--ch-line) !important;
  font-family: var(--ch-font-mono) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Modals / explorer */
html[data-chrome] #ui [class*="Modal"],
html[data-chrome] #ui [class*="ExplorerWindow"],
html[data-chrome] #ui [class*="explorer"] {
  border-radius: calc(var(--ch-radius) + 4px) !important;
  border: 1px solid var(--ch-line-strong) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18) !important;
  font-family: var(--ch-font) !important;
  overflow: hidden;
}

html[data-chrome="vellum"] #ui [class*="Modal"],
html[data-chrome="noir"] #ui [class*="Modal"],
html[data-chrome="survey"] #ui [class*="Modal"] {
  border-radius: 0 !important;
}

/* Collapse tab on side panel edge */
html[data-chrome] #ui [class*="FullScreen"] button,
html[data-chrome] #ui [class*="full-screen"] button {
  background: var(--ch-panel-elevated) !important;
  color: var(--ch-ink) !important;
  border: 1px solid var(--ch-line) !important;
}

/* Theme-specific signatures --------------------------------------- */

/* Square islands for drafting / instrument systems */
html[data-chrome="vellum"] #ui [class*="SidePanelContainer"],
html[data-chrome="survey"] #ui [class*="SidePanelContainer"],
html[data-chrome="noir"] #ui [class*="SidePanelContainer"] {
  border-radius: 0 !important;
}

html[data-chrome="glasshouse"] #ui [class*="SidePanelContainer"],
html[data-chrome="fjord"] #ui [class*="SidePanelContainer"] {
  border-radius: 16px !important;
}

html[data-chrome="lume"] #ui [class*="SidePanelContainer"],
html[data-chrome="ion"] #ui [class*="SidePanelContainer"],
html:not([data-chrome]) #ui [class*="SidePanelContainer"] {
  border-radius: 12px !important;
}

/* Bathymetry: depth-line texture on header */
html[data-chrome="bathymetry"] #ui [class*="Branding"] {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 7px,
      rgba(62, 198, 224, 0.05) 7px,
      rgba(62, 198, 224, 0.05) 8px
    ),
    linear-gradient(165deg, #05101c 0%, #0a2438 100%) !important;
}

/* Survey: mono brand + corner tick */
html[data-chrome="survey"] #ui [class*="Branding"] {
  font-family: var(--ch-font-mono) !important;
  letter-spacing: 0.06em !important;
}
html[data-chrome="survey"] #ui [class*="SidePanelContainer"]::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 11px;
  height: 11px;
  border-top: 1px solid var(--ch-signal);
  border-right: 1px solid var(--ch-signal);
  pointer-events: none;
  z-index: 6;
  opacity: 0.75;
}

/* Vellum: ruled paper */
html[data-chrome="vellum"] #ui [class*="SidePanelContainer"] {
  background-color: var(--ch-panel) !important;
  background-image: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 27px,
    rgba(26, 22, 18, 0.045) 27px,
    rgba(26, 22, 18, 0.045) 28px
  ) !important;
}
html[data-chrome="vellum"] #ui [class*="btn-primary"] {
  border-bottom: 2px solid #1a1612 !important;
  border-radius: 0 !important;
}

/* Noir: sharp chips */
html[data-chrome="noir"] #ui [class*="MenuBar"] a,
html[data-chrome="noir"] #ui [class*="MapNavigation"] button {
  border-radius: 0 !important;
  background: rgba(20, 20, 22, 0.92) !important;
}

/* Harbor: muted hover on nav (red reserved for primary) */
html[data-chrome="harbor"] #ui [class*="MenuBar"] a:hover {
  color: #f0f4f8 !important;
  border-color: rgba(240, 244, 248, 0.35) !important;
}

/* Glasshouse: pill CTAs */
html[data-chrome="glasshouse"] #ui [class*="btn-primary"] {
  border-radius: 999px !important;
}
html[data-chrome="glasshouse"] #ui [class*="MenuBar"] a {
  border-radius: 999px !important;
}

/* Serif section heads */
html[data-chrome="mesa"] #ui [class*="SidePanel"] h3,
html[data-chrome="mesa"] #ui [class*="SidePanel"] h5,
html[data-chrome="vellum"] #ui [class*="SidePanel"] h3,
html[data-chrome="vellum"] #ui [class*="SidePanel"] h5,
html[data-chrome="mesa"] #ui [class*="SidePanel__"] h5,
html[data-chrome="vellum"] #ui [class*="SidePanel__"] h5 {
  font-family: "Source Serif 4", Georgia, serif !important;
  font-weight: 600 !important;
}

/* Ion focus */
html[data-chrome="ion"] #ui input:focus {
  box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.18) !important;
}

/* Fjord soft chips */
html[data-chrome="fjord"] #ui [class*="MapNavigation"] button {
  border-radius: 12px !important;
}

/* HelpfulHints / empty state boxes should not force old dark fills */
html[data-chrome] #ui [class*="BoxHelpfulHints"],
html[data-chrome] #ui [class*="SidePanel__BoxHelpfulHints"] {
  background: transparent !important;
  color: var(--ch-muted) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html[data-chrome] #ui * {
    transition: none !important;
  }
}