/* Porcelain is opt-in. Existing dark surfaces and authored sheet formatting stay intact. */
html.theme-changing *, html.theme-changing *::before, html.theme-changing *::after { transition: none !important; }
.brand-mark--light { display: none; }
html[data-theme="light"] .brand-mark:not(.brand-mark--light) { display: none; }
html[data-theme="light"] .brand-mark--light { display: block; }
.theme-switch[hidden] { display: none; }
.theme-switch {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  width: fit-content; max-width: 100%; min-height: 32px; margin: 9px 0 0;
  padding: 4px 7px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--muted); font: inherit; font-size: 11px;
  cursor: pointer; touch-action: manipulation;
}
.theme-switch:hover { background: var(--surface-soft); border-color: var(--line); }
.theme-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-switch-icon { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-switch-moon { color: var(--accent); }
.theme-switch-track { display: block; width: 32px; height: 18px; padding: 2px; border-radius: 20px; background: var(--toggle-track); flex-shrink: 0; }
.theme-switch-track > span { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--toggle-knob); transition: transform .15s ease; }
.theme-switch-label { min-width: 45px; text-align: left; }
.theme-switch[aria-checked="true"] .theme-switch-track { background: var(--accent); }
.theme-switch[aria-checked="true"] .theme-switch-track > span { transform: translateX(14px); }
.theme-switch[aria-checked="true"] .theme-switch-moon { color: var(--muted); }
.theme-switch[aria-checked="true"] .theme-switch-sun { color: var(--accent); }
.theme-switch:not([hidden]) + .nav-list { margin-top: 17px; }
@media (prefers-reduced-motion: reduce) { .theme-switch-track > span { transition: none; } }

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f0f3f8;
  --sidebar-bg: #e6ebf3;
  --surface: #ffffff;
  --surface-soft: #f6f8fb;
  --surface-hover: #edf2fa;
  --ink: #182637;
  --label: #42576e;
  --muted: #53667b;
  --line: #cbd1d7;
  --control-line: #7d8c9d;
  --accent: #2256b3;
  --accent-dark: #19458f;
  --on-accent: #ffffff;
  --teal: #147981;
  --accent-soft: #dce5f5;
  --chart-blue: #147d85;
  --chart-previous: #7b58a6;
  --success: #146a43;
  --success-bg: #eaf4ed;
  --success-hover: #deeee4;
  --success-line: #81a990;
  --danger: #b0304f;
  --danger-bg: #fbedf0;
  --danger-line: #c38998;
  --on-danger: #ffffff;
  --warning: #865500;
  --warning-bg: #fff4df;
  --warning-ink: #865500;
  --warning-line: #b98b38;
  --info-bg: #edf3fc;
  --info-hover: #e0ebfa;
  --info-ink: #2256a0;
  --info-line: #839fc6;
  --violet-bg: #f0eaf7;
  --violet-ink: #755099;
  --rip-bg: #fff0e2;
  --rip-ink: #a3440a;
  --toggle-track: #7d8c9d;
  --toggle-knob: #ffffff;
  --tooltip-bg: #e6edf7;
  --tooltip-ink: #182637;
  --login-glow: #dbe6f6;
  --shadow: 0 8px 26px rgba(41, 61, 93, .06);
}
html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] ::selection { color: var(--ink); background: #cbdcf5; }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { color-scheme: light; }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { opacity: 1; }
html[data-theme="light"] .sidebar { scrollbar-color: var(--control-line) transparent; }
html[data-theme="light"] .sidebar-toggle { box-shadow: 0 4px 14px #293d5d26; }
html[data-theme="light"] :is(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-theme="light"] .nav-section-title { color: var(--muted); }
html[data-theme="light"] .nav-list a.active:hover,
html[data-theme="light"] .nav-group summary.active:hover,
html[data-theme="light"] .button.secondary:hover { background: #d3dff2; }
html[data-theme="light"] .button.primary { box-shadow: none; }
html[data-theme="light"] .button.secondary { border-color: var(--info-line); }
html[data-theme="light"] .button.danger:hover { background: #942641; }
html[data-theme="light"] :is(input, select, textarea):focus { box-shadow: 0 0 0 3px #2256b31c; }
html[data-theme="light"] .account-options { box-shadow: 0 15px 38px #293d5d26; }
html[data-theme="light"] .real-banner { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); }
html[data-theme="light"] :is(.review-tooltip, .formula-help-text, .amount-composition-popover) { box-shadow: 0 10px 30px #293d5d26; }
html[data-theme="light"] :is(.crm-source-form.editing, .kc-debt-entry-panel.editing, .expense-input-panel.editing) { border-color: var(--accent); box-shadow: 0 0 0 2px #2256b31c; }
html[data-theme="light"] .cash-account-card.is-selected { border-color: var(--accent); background: linear-gradient(125deg, #e8effb, var(--surface)); box-shadow: 0 0 0 2px #2256b314; }
html[data-theme="light"] .analysis-summary-card:nth-child(3) { border-color: var(--info-line); background: linear-gradient(125deg, #e8effb, var(--surface)); }
html[data-theme="light"] .analysis-cause-notes { background: var(--surface-soft); }
html[data-theme="light"] .analysis-week-dot.neutral { background: var(--muted); }
html[data-theme="light"] .analysis-week-dot.missing { border-color: var(--control-line); }
html[data-theme="light"] .analysis-insight-filters button.active span { color: var(--on-accent); }
html[data-theme="light"] .pulse-city-warnings { border-color: var(--warning-line); background: var(--warning-bg); }
html[data-theme="light"] .pulse-city-warnings > summary { color: var(--warning-ink); }
html[data-theme="light"] .login-card { box-shadow: 0 20px 65px #293d5d1f; }
html[data-theme="light"] .daily-metric { --daily-color: var(--accent); }
html[data-theme="light"] .daily-metric-green { --daily-color: var(--success); }
html[data-theme="light"] .daily-metric-gold { --daily-color: var(--warning); }
html[data-theme="light"] .daily-metric-blue { --daily-color: var(--chart-blue); }
html[data-theme="light"] .daily-bar-group:hover .daily-bar,
html[data-theme="light"] .daily-bar-group:focus .daily-bar { filter: brightness(.9); }

/* Amount breakdowns, including their standalone fallback pages. */
html[data-theme="light"] .amount-detail-link { border-bottom-color: var(--control-line); }
html[data-theme="light"] .amount-detail-link:hover,
html[data-theme="light"] .amount-detail-link:focus-visible { color: var(--accent); border-color: currentColor; }
html[data-theme="light"] .amount-details-dialog { border-color: var(--control-line); background: var(--surface); color: var(--ink); }
html[data-theme="light"] :is(.amount-details-dialog, .sites-dialog, .cash-receipt-week-dialog) { box-shadow: 0 24px 100px #293d5d40; }
html[data-theme="light"] :is(.amount-details-dialog, .sites-dialog, .cash-receipt-week-dialog)::backdrop { background: #23354c73; }
html[data-theme="light"] .amount-details-toolbar { border-color: var(--line); background: var(--surface-soft); }
html[data-theme="light"] .amount-details-toolbar button { color: var(--ink); border-color: var(--control-line); }
html[data-theme="light"] .amount-details-total { border-color: var(--line); }
html[data-theme="light"] .amount-details-total strong { color: var(--accent); }
html[data-theme="light"] .amount-details-warning { color: var(--warning-ink); background: var(--warning-bg); border-color: var(--warning-line); }
html[data-theme="light"] .amount-details-table :is(th, td) { border-color: var(--line); }
html[data-theme="light"] .amount-details-table th { color: var(--muted); background: var(--surface-soft); }
html[data-theme="light"] .amount-details-table td.amount-details-number.negative { color: var(--danger); }
html[data-theme="light"] .amount-details-table a { color: var(--accent); }

/* Sites styles load within page content; these scoped rules also win there. */
html[data-theme="light"] .sites-page { --sites-mint: var(--accent); --sites-purple: var(--chart-previous); }
html[data-theme="light"] .sites-notice { background: var(--info-bg); border-color: var(--info-line); }
html[data-theme="light"] .sites-kpis > div { border-top-color: var(--accent); }
html[data-theme="light"] .sites-kpis > div:nth-child(3) { border-top-color: var(--chart-previous); }
html[data-theme="light"] .sites-tabs a.selected { box-shadow: inset 0 0 0 1px var(--info-line); }
html[data-theme="light"] .sites-amount { border-bottom-color: var(--control-line); }
html[data-theme="light"] .sites-expanded > td { background: var(--surface-soft); }
html[data-theme="light"] .sites-chart { --bar-color: var(--accent); }
html[data-theme="light"] .sites-chart.blue { --bar-color: var(--chart-blue); }
html[data-theme="light"] .sites-chart.gold { --bar-color: var(--warning); }
html[data-theme="light"] .sites-bar-slot { background: repeating-linear-gradient(to top, transparent 0, transparent 27px, var(--line) 28px, transparent 29px); }
html[data-theme="light"] .sites-bar-slot i { background: linear-gradient(to bottom, var(--bar-color), color-mix(in srgb, var(--bar-color) 72%, var(--surface))); }
html[data-theme="light"] .sites-source.purple { color: var(--violet-ink); background: var(--violet-bg); }
html[data-theme="light"] .sites-campaign-option:has(input:checked) { background: var(--info-bg); }