/* Shared coffee-and-history palette, applied after page styles. */
:root {
  color-scheme: dark;
  --bg: #211a16;
  --surface: #2d231d;
  --surface2: #3a2d24;
  --border: #705641;
  --text: #f5ead9;
  --muted: #c6b49e;
  --lime: #e8bb70;
  --violet: #c4b0ed;
  --coral: #efa68f;
  --blue: #91c8d0;
  --sage: #b5cf98;
  --radius: 14px;
  --chart-grid: #514033;
  --note-accent: var(--blue);
}

body {
  background: radial-gradient(ellipse at 85% 0%, #38291d 0%, transparent 45rem), var(--bg);
  color: var(--text);
}
a:hover { color: var(--lime); }
h1, h2, h3, .brand, .page-heading h1, .section-heading h2,
.life-heading h1, .life-section h2, .life-week-summary h2, .life-week-close h2 {
  font-family: Georgia, "Times New Roman", serif;
}
.sidebar {
  background: linear-gradient(180deg, #38271e, #2b201a);
  border-right-color: var(--border);
  box-shadow: 8px 0 24px #160f0b33;
}
.brand { color: var(--text); font-weight: 600; letter-spacing: -.9px; gap: 10px; }
.brand-mark {
  width: 38px; height: 38px; display: inline-flex; overflow: hidden; flex-shrink: 0;
  border: 2px solid var(--lime); border-radius: 10px; background: var(--bg); font-size: 0;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-name { display: inline-block; }
.nav-label { color: var(--muted); }
.sidebar nav a { color: var(--text); border-radius: 9px; }
.sidebar nav a:hover { background: var(--surface2); color: var(--lime); }
.sidebar nav a.active { background: #58402b; color: #ffdc9d; box-shadow: inset 3px 0 0 var(--lime); }
.sidebar nav i, .local-status span, .status-dot { background: var(--lime); }
.local-status { color: var(--muted); }
.workspace { background: transparent; }
.topbar { background: #2d231de6; border-bottom-color: var(--border); }
.breadcrumb, .breadcrumb span, .quiet-link, .eyebrow { color: var(--muted); }
main, .page-heading h1 { color: var(--text); }
p { color: var(--muted); }
.accent, .text-link, .text-link:hover { color: var(--lime); }
.panel, .metric-card, .rhythm-panel, .life-section, .life-week-days > a,
.chart-panel, .story-panel, .chart-card {
  background: var(--surface); border-color: var(--border);
  box-shadow: 0 8px 24px #160f0b26;
}
.chart-card { border: 1px solid var(--border); }
.metric-card:hover { border-color: var(--metric, var(--lime)); }
.metric-label, .metric-comparison, .practice-note { color: var(--text); }
.practice { background: linear-gradient(120deg, #3c2e21, var(--surface) 65%); border-color: var(--border); }
.practice .section-heading h2 { color: var(--text); }
.pill { border-color: var(--border); color: var(--lime); background: var(--surface2); }
.habit-row, .practice-note { border-color: var(--border); }
.habit-check { border-color: var(--muted); color: var(--lime); }
.habit-check.checked { background: var(--lime); border-color: var(--lime); color: var(--bg); }
.energy-options span { background: var(--surface2); border-color: var(--border); color: var(--muted); }
.energy-options input:checked + span { background: #58402b; border-color: var(--lime); color: var(--lime); }
input, textarea, select { background: var(--bg); border-color: var(--border); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, textarea:focus, select:focus { border-color: var(--lime); }
input[type=checkbox], input[type=radio] { accent-color: var(--lime); }
.button, button:not(.habit-check):not(.date-control button) {
  background: var(--surface2); border-color: var(--border); color: var(--text);
}
.button.primary, button.primary {
  background: var(--lime) !important; border-color: var(--lime) !important; color: var(--bg) !important;
}
.button:hover, button:not(.habit-check):hover { filter: brightness(1.1); }
.date-control { border-color: var(--border); background: var(--surface); }
.date-control input { background: transparent; }
.flash, .notice, .life-notice { background: #3d3020; border-color: #947348; color: var(--text); }
.rhythm-panel { background: var(--surface); }
.rhythm-day { color: var(--muted); border-color: var(--border); }
.rhythm-day.done { background: #58402b; color: var(--lime); border-color: var(--lime); }
.rhythm-day.current { outline-color: var(--lime); }
.chapter-banner, .story-panel { background: linear-gradient(110deg, #443221, var(--surface) 75%); border-color: var(--border); }
.chapter-icon, .chapter-arrow, .story-number, .story-dot.lit { color: var(--lime); }
.quick-links a { border-color: var(--border); color: var(--text); }
.quick-links strong { color: var(--lime); }
.insight-card { background: linear-gradient(120deg, #443221, var(--surface) 75%); }
.chapter-progress { background: var(--surface2); }
.chapter-progress span { background-color: var(--lime); }
.comparison-block, .life-week-close { background: var(--surface2); }
.mode-switch { border-color: var(--border); }
.mode-switch button.selected { background: #58402b !important; color: var(--lime) !important; }
.tiny-action button { color: var(--muted) !important; }
.activity-icon { background: var(--surface2); color: var(--lime); }
.chart-empty > span { color: var(--muted); }
.story-dot { border-color: var(--border); color: var(--muted); }
.story-dot.lit { background: #58402b; border-color: var(--lime); }
/* Notes and weekly views use the same surfaces as health and money. */
.life-app { --note-accent: var(--blue); }
.life-tabs { background: var(--surface); border-color: var(--border); }
.life-tabs a.selected { background: #58402b; color: var(--lime); }
.life-source-strip { border-color: var(--border); }
.life-metric > strong { color: var(--metric, var(--lime)); }
.life-chart-total { color: var(--lime); }
.life-timeline time, .life-context a, .life-source-strip a { color: var(--lime); }
.life-timeline > div > span { border-color: var(--border); }
.note-markdown p, .note-markdown ul, .note-markdown ol { color: var(--text); }
.note-markdown pre { background: var(--bg); }
.note-markdown blockquote { border-color: var(--lime); color: var(--muted); }
.life-original pre, .life-hash { color: var(--muted); }
.life-habit-list > div, .life-week-note, .life-section > .section-heading { border-color: var(--border); }
.habit-state { border-color: var(--border); color: var(--muted); }
.habit-state.done { background: #3c4229; border-color: var(--sage); color: var(--sage); }
.habit-state.not_done { color: var(--coral); border-color: var(--coral); }
.life-week-days > a:hover { border-color: var(--lime); }
.life-week-days .day-incomplete { opacity: 1; }
.life-day-mark, .life-bar.bar-missing { color: var(--muted); }
.life-bar { background: var(--sage); }
.life-bar-track, .life-bar.bar-missing, .life-review-context { border-color: var(--border); }
.life-week-close { border-color: var(--border); }
.skip:focus { background: var(--lime); color: var(--bg); }
footer { border-color: var(--border); color: var(--muted); }

/* Sign-in shares the app's typography, brand, controls and palette. */
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(460px, 100%); margin: 0; padding: clamp(24px, 5vw, 44px); }
.login-card .brand { font-size: 34px; margin-bottom: 42px; }
.login-card h1 { font-size: clamp(30px, 5vw, 38px); line-height: 1.2; letter-spacing: -1px; margin: 10px 0 14px; }
.login-card .login-intro { line-height: 1.7; margin-bottom: 28px; }
.login-card label { color: var(--text); }
.login-card input { padding: 13px 15px; }
.login-card .login-remember { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; cursor: pointer; }
.login-card .login-remember input { width: 18px; height: 18px; padding: 0; margin: 0; flex-shrink: 0; }
.login-card .login-hint { font-size: 12px; line-height: 1.6; margin: 0; }
.login-card button { width: 100%; margin-top: 20px; padding: 13px 15px; }
.login-error { color: var(--coral); margin-top: 20px; }
.login-back { display: inline-block; margin-top: 28px; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .sidebar { box-shadow: 0 4px 16px #160f0b26; } }
/* Secondary tools and reflections also use the shared coffee surfaces. */
.story-legend { color: var(--muted); }
.reflection-card { background: var(--surface2); }
.reflection-quote { color: var(--text); border-color: var(--lime); }
.command { background: var(--bg); color: var(--text); }
.chart-heading { padding: 20px 22px 0; }
.chart-heading h2 { font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.sleep-chart-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.sleep-chart-grid > div { min-width: 0; }
.sleep-chart-grid .chart-heading h2 { font: 14px/1.5 Inter, system-ui, sans-serif; color: var(--muted); }
@media (max-width: 640px) { .sleep-chart-grid { grid-template-columns: 1fr; } }