/* Shared BTC + Gold colour themes. The current institutional theme remains the default. */
:root,
html[data-theme="institutional"] {
    color-scheme: dark;
    --theme-page: #101820;
    --theme-surface: #1a2229;
    --theme-raised: #26292b;
    --theme-hover: #2f3336;
    --theme-border: #4c505b;
    --theme-border-subtle: #2a2e39;
    --theme-text: #d4d8e1;
    --theme-text-secondary: #84878e;
    --theme-text-muted: #61656e;
    --theme-accent: #12647e;
    --theme-accent-light: #7ab8cc;
    --theme-accent-dark: #0d4d62;
    --theme-card: rgba(30, 34, 45, 0.60);
    --theme-footer: rgba(30, 33, 40, 0.85);
    --theme-tabbar: rgba(19, 23, 34, 0.92);
    --theme-backdrop: rgba(0, 0, 0, 0.62);
    --theme-shadow: rgba(0, 0, 0, 0.38);
}

html[data-theme="midnight"] {
    color-scheme: dark;
    --theme-page: #08111f;
    --theme-surface: #101b2a;
    --theme-raised: #18263a;
    --theme-hover: #22344d;
    --theme-border: #40516a;
    --theme-border-subtle: #223148;
    --theme-text: #d9e3f0;
    --theme-text-secondary: #91a1b5;
    --theme-text-muted: #63758c;
    --theme-accent: #2679a5;
    --theme-accent-light: #8dc8e3;
    --theme-accent-dark: #17536f;
    --theme-card: rgba(20, 31, 49, 0.78);
    --theme-footer: rgba(13, 24, 39, 0.90);
    --theme-tabbar: rgba(8, 17, 31, 0.94);
    --theme-backdrop: rgba(2, 7, 15, 0.70);
    --theme-shadow: rgba(0, 0, 0, 0.48);
}

html[data-theme="graphite"] {
    color-scheme: dark;
    --theme-page: #151719;
    --theme-surface: #1d2023;
    --theme-raised: #292d31;
    --theme-hover: #33383d;
    --theme-border: #50565d;
    --theme-border-subtle: #30353a;
    --theme-text: #dedede;
    --theme-text-secondary: #999fa5;
    --theme-text-muted: #6d7379;
    --theme-accent: #39798a;
    --theme-accent-light: #8fc3ce;
    --theme-accent-dark: #285865;
    --theme-card: rgba(38, 41, 44, 0.80);
    --theme-footer: rgba(27, 29, 31, 0.90);
    --theme-tabbar: rgba(21, 23, 25, 0.94);
    --theme-backdrop: rgba(0, 0, 0, 0.64);
    --theme-shadow: rgba(0, 0, 0, 0.42);
}

html[data-theme="arctic"] {
    color-scheme: light;
    --theme-page: #f4f6f8;
    --theme-surface: #ffffff;
    --theme-raised: #e9edf1;
    --theme-hover: #e1e7ec;
    --theme-border: #b8c2cb;
    --theme-border-subtle: #d9e0e6;
    --theme-text: #26323d;
    --theme-text-secondary: #536270;
    --theme-text-muted: #7b8894;
    --theme-accent: #12647e;
    --theme-accent-light: #0d5b74;
    --theme-accent-dark: #0b4b60;
    --theme-card: #ffffff;
    --theme-footer: rgba(255, 255, 255, 0.94);
    --theme-tabbar: rgba(255, 255, 255, 0.96);
    --theme-backdrop: rgba(35, 46, 56, 0.34);
    --theme-shadow: rgba(45, 58, 68, 0.16);
}

html[data-theme] {
    --bg-primary: var(--theme-page);
    --bg-secondary: var(--theme-surface);
    --bg-tertiary: var(--theme-raised);
    --bg-hover: var(--theme-hover);
    --border-color: var(--theme-border);
    --border-subtle: var(--theme-border-subtle);
    --text-primary: var(--theme-text);
    --text-secondary: var(--theme-text-secondary);
    --text-muted: var(--theme-text-muted);
    --accent: var(--theme-accent);
    --accent-light: var(--theme-accent-light);
    --accent-dark: var(--theme-accent-dark);
    --gold-accent: var(--theme-accent);
    --gold-light: var(--theme-accent-light);
    --gold-dark: var(--theme-accent-dark);
}

html[data-theme] body,
html[data-theme] .chart-section,
html[data-theme] #chart,
html[data-theme] #goldChart {
    background-color: var(--theme-page);
}

html[data-theme] .header,
html[data-theme] .news-ticker,
html[data-theme] .session-ticker,
html[data-theme] .chart-header,
html[data-theme] .control-panel,
html[data-theme] .panel-header,
html[data-theme] .settings-drawer,
html[data-theme] .settings-header,
html[data-theme] .modal-content,
html[data-theme] .modal-header,
html[data-theme] .modal-body,
html[data-theme] .mobile-levels-drawer,
html[data-theme] .mobile-news-drawer {
    background-color: var(--theme-surface);
}

html[data-theme] .panel-card {
    background: var(--theme-card);
}

html[data-theme] .site-footer {
    background: var(--theme-footer);
}

html[data-theme] .tab-bar {
    background: var(--theme-tabbar);
}

html[data-theme] .settings-backdrop,
html[data-theme] .settings-overlay,
html[data-theme] .modal-overlay,
html[data-theme] .drawer-backdrop {
    background: var(--theme-backdrop);
}

html[data-theme] .settings-drawer,
html[data-theme] .modal-content,
html[data-theme] .mobile-levels-drawer,
html[data-theme] .mobile-news-drawer {
    box-shadow: -16px 0 36px var(--theme-shadow);
}

html[data-theme="arctic"] .brand-wordmark,
html[data-theme="arctic"] .current-price,
html[data-theme="arctic"] .ohlcv-value,
html[data-theme="arctic"] .metric-value,
html[data-theme="arctic"] .level-value,
html[data-theme="arctic"] .settings-title,
html[data-theme="arctic"] .modal-header h3 {
    color: var(--theme-text);
}

html[data-theme="arctic"] .loading-overlay {
    background: #eef2f5;
}

/* Light screen: the deep teal accent reads; the light teal would wash out. */
html[data-theme="arctic"] .brand-mark,
html[data-theme="arctic"] .aperture-loader {
    color: var(--accent, #12647e);
}

html[data-theme="arctic"] .bias-widget,
html[data-theme="arctic"] .mobile-fab-btn,
html[data-theme="arctic"] textarea,
html[data-theme="arctic"] input,
html[data-theme="arctic"] select {
    /* background-color, not the shorthand: the shorthand wiped custom select arrows. */
    background-color: rgba(255, 255, 255, 0.96);
    color: var(--theme-text);
}

html[data-theme="arctic"] .settings-field,
html[data-theme="arctic"] .settings-toggle-row,
html[data-theme="arctic"] .outlook-factors-panel,
html[data-theme="arctic"] .outlook-factors-toggle,
html[data-theme="arctic"] .notes-input,
html[data-theme="arctic"] .atr-history-stat,
html[data-theme="arctic"] .atr-history-context-item,
html[data-theme="arctic"] .atr-history-chart-shell,
html[data-theme="arctic"] .atr-history-table-wrap,
html[data-theme="arctic"] .help-state,
html[data-theme="arctic"] .calendar-event,
html[data-theme="arctic"] .drawer-bias-snapshot,
html[data-theme="arctic"] .drawer-levels-list {
    border-color: var(--theme-border-subtle) !important;
    background: var(--theme-surface) !important;
    color: var(--theme-text);
}

html[data-theme="arctic"] .settings-field,
html[data-theme="arctic"] .settings-toggle-row,
html[data-theme="arctic"] .atr-history-chart-head,
html[data-theme="arctic"] .atr-history-table th,
html[data-theme="arctic"] .atr-history-table tbody tr:nth-child(even) td {
    background: #eef2f5 !important;
}

html[data-theme="arctic"] .atr-history-table td,
html[data-theme="arctic"] .factor-row,
html[data-theme="arctic"] .metric-row,
html[data-theme="arctic"] .level-row,
html[data-theme="arctic"] .calendar-event {
    border-color: var(--theme-border-subtle) !important;
}

html[data-theme="arctic"] .settings-input,
html[data-theme="arctic"] .notes-input {
    border-color: var(--theme-border);
    background: #ffffff !important;
}

html[data-theme="arctic"] .settings-toggle-track,
html[data-theme="arctic"] .toggle-slider {
    border-color: var(--theme-border);
    background: #cbd3da;
}

html[data-theme="arctic"] .chart-btn.active,
html[data-theme="arctic"] .theme-option.active,
html[data-theme="arctic"] .symbol-badge {
    color: var(--theme-accent-dark);
}

html[data-theme="arctic"] .panel-card,
html[data-theme="arctic"] .calendar-next-up,
html[data-theme="arctic"] .level-card {
    box-shadow: 0 1px 3px rgba(45, 58, 68, 0.08);
}

/* Light theme: chart labels drawn with a dark text outline (set inline for the
   dark themes) looked smudged on white; a light halo keeps them readable. */
html[data-theme="arctic"] .gap-purple-label,
html[data-theme="arctic"] .gap-retired-label {
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.95), 0 0 1px rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="arctic"] .gap-purple-label-leader { box-shadow: none; }

/* Light theme: the chart-top chips, tooltips and notes that use dark glass. */
html[data-theme="arctic"] .outlook-chip,
html[data-theme="arctic"] .outlook-factors-panel,
html[data-theme="arctic"] .chart-refreshing-cue,
html[data-theme="arctic"] .landscape-chrome-toggle,
html[data-theme="arctic"] .improvement-toast {
    background: rgba(255, 255, 255, 0.96);
    border-color: var(--theme-border);
    color: var(--theme-text);
    box-shadow: 0 6px 18px var(--theme-shadow);
}

html[data-theme="arctic"] .fvg-origin-tooltip.origin-bullish {
    background: rgba(236, 248, 244, 0.97);
    color: #087f5b;
}

html[data-theme="arctic"] .fvg-origin-tooltip.origin-bearish {
    background: rgba(252, 238, 240, 0.97);
    color: #c92a3d;
}

html[data-theme="arctic"] .fvg-origin-tooltip .origin-label,
html[data-theme="arctic"] .fvg-origin-tooltip .origin-explain { color: var(--theme-text-secondary); }

html[data-theme="arctic"] .fvg-origin-tooltip .origin-age {
    background: rgba(38, 50, 61, 0.08);
    color: var(--theme-text);
}

/* Light theme: the gap chips were pastel text made for a dark chart and
   nearly vanished on white; darker inks keep the same meaning. */
html[data-theme="arctic"] .gap-strength-label .strength-score.high { color: #047857; background: rgba(4, 120, 87, 0.10); border-color: rgba(4, 120, 87, 0.35); }
html[data-theme="arctic"] .gap-strength-label .strength-score.med { color: #b45309; background: rgba(180, 83, 9, 0.10); border-color: rgba(180, 83, 9, 0.35); }
html[data-theme="arctic"] .gap-strength-label .strength-score.low { color: #475569; background: rgba(71, 85, 105, 0.08); border-color: rgba(71, 85, 105, 0.30); }
html[data-theme="arctic"] .gap-strength-label .test-count-badge { color: #6d28d9; background: rgba(109, 40, 217, 0.08); border-color: rgba(109, 40, 217, 0.35); }
html[data-theme="arctic"] .gap-strength-label .chart-chip.high { color: #047857; background: rgba(4, 120, 87, 0.10); border-color: rgba(4, 120, 87, 0.35); }
html[data-theme="arctic"] .gap-strength-label .chart-chip.med { color: #b45309; background: rgba(180, 83, 9, 0.10); border-color: rgba(180, 83, 9, 0.35); }
html[data-theme="arctic"] .gap-strength-label .chart-chip.low { color: #475569; background: rgba(71, 85, 105, 0.08); border-color: rgba(71, 85, 105, 0.30); }
html[data-theme="arctic"] .gap-strength-label .gap-age-badge.age-fresh { color: #0369a1; background: rgba(3, 105, 161, 0.10); border-color: rgba(3, 105, 161, 0.35); }
html[data-theme="arctic"] .gap-strength-label .gap-age-badge.age-recent { color: #b45309; background: rgba(180, 83, 9, 0.10); border-color: rgba(180, 83, 9, 0.35); }
html[data-theme="arctic"] .gap-strength-label .gap-age-badge.age-established,
html[data-theme="arctic"] .gap-strength-label .gap-age-badge.age-old { color: #475569; background: rgba(71, 85, 105, 0.08); border-color: rgba(71, 85, 105, 0.30); }

/* Shared theme picker */
.theme-settings {
    padding-bottom: 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.theme-settings-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.theme-settings-title {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.theme-settings-current {
    color: var(--text-muted);
    font-size: 11px;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.theme-option {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    background: transparent;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
}

.theme-option:hover {
    border-color: var(--text-muted);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.theme-option.active {
    border-color: var(--accent);
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.theme-option-swatch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border: 1px solid rgba(128, 138, 148, 0.45);
}

.theme-option-swatch span:first-child { background: var(--swatch-a); }
.theme-option-swatch span:last-child { background: var(--swatch-b); }
.theme-option-name { display: block; font-size: 11px; font-weight: 600; }
.theme-option-note { display: block; margin-top: 2px; color: var(--text-muted); font-size: 11px; }

@media (max-width: 360px) {
    .theme-options { grid-template-columns: 1fr; }
}

/* App-wide list presentation: simple rows instead of bullet points. */
html body ul { list-style:none; padding-inline-start:0; }
html body ul > li::marker { content:''; }
html body ul > li + li { border-top:1px solid var(--border-color, var(--pg-border, #333)); }
html body .help-list li { padding:7px 0; }
html body .help-list li::before { content:none; }
html body .list .arrow { display:none; }
html body .lean-components, html body .reason-list { padding-left:0; list-style:none; }
html body .lean-components li, html body .reason-list li { padding:7px 0; }