/* ============================================================
   calm.css — calm theme rules, split out of overrides.css.
   Loaded after overrides.css (these are :root[data-theme="calm"]
   rules, higher specificity, so file order is immaterial).
   ============================================================ */
:root[data-theme="calm"] #mainSystem > .header,
:root[data-theme="calm"] #mainSystem > .stats-grid,
:root[data-theme="calm"] #mainSystem > .content-area { max-width: 1000px; margin-left: auto; margin-right: auto; }:root[data-theme="calm"] .tabs { border-bottom: 1px solid var(--border); gap: var(--s-3); justify-content: center; flex-wrap: wrap; }:root[data-theme="calm"] .tab-group { gap: var(--s-3); }:root[data-theme="calm"] .tab { border-bottom: 2px solid transparent; border-radius: var(--r-md); color: var(--text-muted); font-weight: 500; }:root[data-theme="calm"] .tab:hover:not(.active) { background: var(--surface-tint-green); color: var(--text); }:root[data-theme="calm"] .tab.active,
:root[data-theme="calm"] .tab[aria-selected="true"] { background: transparent; color: var(--primary); border-bottom-color: var(--primary); }:root[data-theme="calm"] .stat-card .value,
:root[data-theme="calm"] #triptychMineValue,
:root[data-theme="calm"] #triptychOursValue,
:root[data-theme="calm"] #triptychYoursValue { font-weight: 500; letter-spacing: -0.015em; }:root[data-theme="calm"] .stat-card { border-radius: var(--r-lg); padding: 22px; box-shadow: none; }:root[data-theme="calm"] .stat-card:hover { transform: none; border-color: var(--border-strong); box-shadow: 0 6px 20px rgba(28, 29, 26, 0.04); }:root[data-theme="calm"] .stat-card .label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--text-muted); margin-bottom: 10px; }:root[data-theme="calm"] .stat-card .value { font-size: 30px; }:root[data-theme="calm"] .stat-card .change,
:root[data-theme="calm"] .stat-card .sublabel { font-size: 12.5px; color: var(--text-subtle); }:root[data-theme="calm"] .stats-grid > .stat-card:not(:first-child) .icon { display: none; }:root[data-theme="calm"] .stats-grid > .stat-card:first-child {
  background: transparent; border-color: transparent; color: var(--text);
  text-align: center; box-shadow: none; padding: 8px 22px 24px;
}:root[data-theme="calm"] .stats-grid > .stat-card:first-child::after { content: none; }:root[data-theme="calm"] .stats-grid > .stat-card:first-child .icon { display: none; }:root[data-theme="calm"] .stats-grid > .stat-card:first-child .label { color: var(--text-muted); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; }:root[data-theme="calm"] .stats-grid > .stat-card:first-child .value {
  color: var(--text); font-weight: 400; font-size: 52px; letter-spacing: -0.02em; line-height: 1;
}:root[data-theme="calm"] .stats-grid > .stat-card:first-child .change {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 6px 14px;
  border-radius: var(--r-full); background: var(--surface-tint-green); color: var(--primary); font-weight: 600; font-size: 14px;
}:root[data-color-scheme="dark"][data-theme="calm"] .stats-grid > .stat-card:first-child .change { background: var(--primary-50); color: var(--primary); }:root[data-theme="calm"] #triptychMineValue,
:root[data-theme="calm"] #triptychYoursValue { font-size: 26px; }:root[data-theme="calm"] #triptychOursValue { font-size: 36px; }:root[data-theme="calm"] .chart-header { border-bottom: 1px solid var(--border); }:root[data-theme="calm"] .chart-title { font-size: 20px; }:root[data-theme="calm"] .badge { border-radius: var(--r-full); }:root[data-theme="calm"] { --ledger-pad-v: 11px; --ledger-pad-h: 15px; --ledger-font: 13.5px; }:root[data-theme="calm"] .section-title { font-size: 20px; }:root[data-theme="calm"] .stats-grid > .stat-card:first-child .value { font-size: clamp(44px, 8vw, 60px); }:root[data-color-scheme="light"][data-theme="calm"] .btn-primary,
:root[data-color-scheme="light"][data-theme="calm"] button.btn-primary,
:root[data-color-scheme="light"][data-theme="calm"] .btn--primary,
:root[data-color-scheme="light"][data-theme="calm"] button.btn--primary {
  background: var(--text); color: var(--surface); border-radius: var(--r-md);
}
