/* Sidebar trial. Remove this stylesheet link to restore the original palette. */
body .panel {
  --ui-bg: var(--theme-surface, rgba(243, 241, 235, .95));
  --ui-border: var(--theme-line, #d8ddd7);
  --border: var(--theme-line, #d8ddd7);
  --ui-muted: var(--theme-muted, #626d6d);
  --muted: var(--theme-muted, #626d6d);
  --ink: var(--theme-ink, #263234);
  --accent: var(--theme-accent, #236c68);
  --ui-accent: var(--theme-accent, #236c68);
  background: var(--ui-bg) !important;
  color: var(--theme-ink, #263234);
  border-color: var(--theme-line, #d8ddd7) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color-scheme: light;
}
body .panel .head { background: none; }
body .panel :is(.head,.flow-nav,.detail,.data-details,.scene-picker,.event-log,#minute-status) {
  border-color: var(--theme-line, #d8ddd7);
}
body .panel .head :is(.eyebrow,h1),
body .panel .detail h2 { color: var(--theme-ink, #263234); }
body .panel .head .sub,
body .panel :is(.head-count,.detail-label,.flow-meta),
body .panel .detail p,
body .panel #data-details :is(summary,p) { color: var(--theme-muted, #626d6d); }
body .panel .detail #step-description { color: var(--theme-ink, #263234); }
body .panel .detail #phase,
body .panel .flow-meta button,
body .panel .flow-meta button::after,
body .panel .data-details summary::after { color: var(--theme-accent, #236c68); }
body .panel .flow-nav .chapter {
  color: var(--theme-muted, #626d6d);
  background: transparent;
  border-bottom-color: var(--theme-line, #d8ddd7);
}
body .panel .flow-nav .chapter.done { color: var(--theme-muted, #626d6d); border-bottom-color: #9bada6; }
body .panel .flow-nav .chapter.active { color: var(--theme-accent, #236c68); border-bottom-color: var(--theme-accent, #236c68); }
body .panel .flow-nav .chapter:hover { color: var(--theme-accent, #236c68); background: var(--theme-selected, #e3ece7); }
body .panel :is(button,summary):focus-visible { outline: 2px solid var(--theme-accent, #236c68); outline-offset: 3px; }
body .panel .flow-meta button:hover,
body .panel #data-details summary:hover { color: var(--theme-accent-hover, #184b48); }
body .panel #minute-status,
body .panel #minute-status .minute-status-kicker { color: var(--theme-ink, #263234); }
body .panel #minute-status :is(.minute-status-place,.minute-status-flow,details) { color: var(--theme-muted, #626d6d); }
body .panel #minute-status :is(.minute-status-count,.minute-status-flow li) {
  background: var(--theme-selected, #e3ece7);
  color: var(--theme-ink, #263234);
  border-color: var(--theme-line, #d8ddd7);
}
body .panel #minute-status .minute-status-count[data-state="anchor"] { color: #875216; }
body .panel #minute-status .minute-status-count[data-state="port"],
body .panel #minute-status .minute-status-flow .active { color: var(--theme-accent, #236c68); }

/* Matching palette for the final globe, including its search and layer controls. */
body #panel {
  --panel: var(--theme-surface, rgba(243, 241, 235, .95));
  --ui-bg: var(--theme-surface, rgba(243, 241, 235, .95));
  --border: var(--theme-line, #d8ddd7);
  --ui-border: var(--theme-line, #d8ddd7);
  --ink: var(--theme-ink, #263234);
  --muted: var(--theme-muted, #626d6d);
  background: var(--panel);
  border-color: var(--theme-line, #d8ddd7);
  color: var(--theme-ink, #263234);
  color-scheme: light;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  backdrop-filter: none;
}
body #panel header :is(.eyebrow,h1),
body #panel :is(.analysis-layer,.port-selection,.source-section b) { color: var(--theme-ink, #263234); }
body #panel :is(h2,.search-label,header p,.quiet,.more-layers,.source-section details,.source-section p,#port-results small,#port-results p,#official-reference-status,#terminal-example-status) { color: var(--theme-muted, #626d6d); }
body #panel :is(header,section,.port-selection) { border-color: var(--theme-line, #d8ddd7); }
body #panel :is(input[type="search"],#port-results) {
  background: var(--theme-input, #f3f1eb);
  border-color: var(--theme-control-line, #c7cfc7);
  color: var(--theme-ink, #263234);
  box-shadow: none;
}
body #panel input[type="search"]::placeholder { color: var(--theme-muted, #626d6d); }
body #panel button { background: var(--theme-selected, #e3ece7); color: var(--theme-ink, #263234); border-color: var(--theme-control-line, #c7cfc7); }
body #panel button:hover,
body #panel #port-results button:hover { background: var(--theme-hover, #d4e3da); color: var(--theme-accent-hover, #184b48); border-color: var(--theme-accent, #236c68); }
body #panel button.on,
body #panel button[aria-pressed="true"] { background: var(--theme-accent, #236c68); color: #fff; border-color: var(--theme-accent, #236c68); }
body #panel #port-results button { color: var(--theme-ink, #263234); border-color: var(--theme-line, #d8ddd7); }
body #panel a { color: var(--theme-accent, #236c68); }
body #panel :is(button,input,summary):focus-visible { outline: 2px solid var(--theme-accent, #236c68); outline-offset: 2px; }

/* Ocean keeps the light theme geometry and contrast hierarchy. */
html[data-ui-theme="ocean"] {
  --theme-surface: rgba(230, 241, 242, .95);
  --theme-input: #e6f1f2;
  --theme-ink: #2b3a42;
  --theme-muted: #526970;
  --theme-accent: #2b6f77;
  --theme-line: #b8d8d8;
  --theme-control-line: #b8d8d8;
  --theme-selected: #d4e7e8;
  --theme-hover: #c6dfe1;
  --theme-accent-hover: #20535a;
}