/* ATHOME café palette (warm concrete, oak, terracotta). Chart color validated with the dataviz checker in both modes. */
:root {
  color-scheme: light;
  --ink: #302925; --muted: #62584f; --canvas: #ede7df; --paper: #faf7f0; --panel: #e2d7c8; --line: #cfc2b1;
  --accent: #824a3f; --on-accent: #fffaf3; --chart: #b0533a; --chart-soft: #e9cfc4; --error: #b42318; --good: #0a7d0a;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #f0e9e1; --muted: #bfb3a6; --canvas: #171311; --paper: #211c19; --panel: #2c2521; --line: #3d342e;
    --accent: #c86e55; --on-accent: #1a1311; --chart: #c86e55; --chart-soft: #4a302a; --error: #ff7b72; --good: #4cc44c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f0e9e1; --muted: #bfb3a6; --canvas: #171311; --paper: #211c19; --panel: #2c2521; --line: #3d342e;
  --accent: #c86e55; --on-accent: #1a1311; --chart: #c86e55; --chart-soft: #4a302a; --error: #ff7b72; --good: #4cc44c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
.shell { max-width: 1180px; margin: auto; padding: 1.25rem 16px 3rem; }
h1 { font-family: Georgia, Cambria, serif; font-weight: 500; font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0; letter-spacing: -.02em; }
h2, h3 { margin: 0 0 .6rem; }
h3 { font-size: 1rem; }
.eyebrow { color: var(--accent); font-weight: 750; text-transform: uppercase; letter-spacing: .09em; font-size: .75rem; margin: 0; }
.muted { color: var(--muted); margin: .2rem 0; }
.small { font-size: .85rem; }
.error { color: var(--error); font-weight: 650; }
.top { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1rem; }
button { font: inherit; min-height: 2.75rem; padding: .5rem .9rem; border-radius: .5rem; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent); font-weight: 700; cursor: pointer; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--chart); outline-offset: 2px; }

/* Tabs: one section at a time; the period picker sits beside them on the tabs it affects. */
.nav { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .5rem 0; margin-bottom: .75rem; background: var(--canvas); }
.tabs { display: flex; gap: .4rem; overflow-x: auto; }
.tabs button { flex: none; color: var(--accent); background: var(--paper); border-color: var(--line); border-radius: 999px; padding: .45rem 1rem; }
.tabs button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (max-width: 480px) { .tabs button { padding: .4rem .6rem; font-size: .9rem; } } /* All four fit on a phone. */
section { margin-bottom: 2rem; animation: fade .35s ease-out both; }
.section-title { font-family: Georgia, Cambria, serif; font-weight: 500; font-size: 1.5rem; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
@keyframes appear { from { opacity: 0; } }
.period-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.period-bar input { font: inherit; min-height: 2.75rem; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--paper); color: var(--ink); }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; }
.segmented button { background: var(--paper); color: var(--ink); border: 0; border-radius: 0; font-weight: 650; }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-bottom: 1rem; }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.hero-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: .9rem; padding: 1rem; min-width: 0; }
section > .card { margin-bottom: 1rem; }
.hero { display: flex; gap: 1.2rem; align-items: center; }
.label { margin: 0; color: var(--muted); font-weight: 650; }
.big { font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 800; margin: 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ring { width: 120px; height: 120px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; }
.ring-track { stroke: var(--chart-soft); }
.ring-fill { stroke: var(--chart); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; animation: ring 1.2s ease-out both; }
@keyframes ring { from { stroke-dashoffset: 326.7; } } /* Fills from empty each time the Today tab opens. */
.hit { color: var(--good); font-weight: 800; }
.hit-pop { animation: pop .6s ease-out 1.2s both; }
/* Target calendar: filled ✓ = hit, outline = missed, dashed = closed, ring = today. */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 22rem; text-align: center; font-size: .85rem; }
.month .head { color: var(--muted); font-size: .75rem; }
.day { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; font-weight: 650; font-variant-numeric: tabular-nums; animation: pop .45s ease-out both; }
.day.hit { background: var(--chart); color: var(--on-accent); }
.day.miss { border-color: var(--line); }
.day.closed { border: 2px dashed var(--line); color: var(--muted); }
.day.today { border-color: var(--chart); color: var(--chart); }
.day.future, .day.unknown { color: var(--muted); opacity: .55; }
.month-score { font-weight: 750; margin: 0 0 .5rem; }
.month-key { display: flex; align-items: center; gap: .35rem; margin-top: .6rem; font-size: .8rem; color: var(--muted); }
.month-key .day { width: 1.3rem; font-size: .7rem; animation: none; }
.month-key .day:not(:first-child) { margin-left: .5rem; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; background: var(--chart); animation: fall 2.4s ease-in forwards; }
.confetti i:nth-child(3n) { background: var(--good); }
.confetti i:nth-child(3n+1) { background: #e0a526; border-radius: 50%; }
@keyframes fall { to { transform: translate(var(--x), 105vh) rotate(var(--r)); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }

.tiles { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin-bottom: 1rem; }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: .9rem; padding: .8rem 1rem; min-width: 0; }
.tile .value { font-size: 1.5rem; font-weight: 800; margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile .sub { font-size: .85rem; color: var(--muted); margin: 0; }
.up, .tile .up { color: var(--good); font-weight: 700; } .down, .tile .down { color: var(--error); font-weight: 700; }

.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.badge { background: var(--panel); border-radius: 999px; padding: .35rem .8rem; font-weight: 700; font-size: .9rem; animation: pop .5s ease-out both; }
.badge:nth-child(2) { animation-delay: .1s; } .badge:nth-child(3) { animation-delay: .2s; }

/* Vertical bar charts (SVG) */
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .bar { fill: var(--chart); transform-box: fill-box; transform-origin: bottom; animation: grow .7s ease-out both; }
.chart g:hover .bar, .chart g:focus-visible .bar { fill: var(--accent); }
.chart g:focus { outline: none; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .target { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; animation: appear .6s ease-out .5s both; }
.chart .target-label { fill: var(--ink); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; animation: appear .6s ease-out .5s both; }
@keyframes grow { from { transform: scaleY(0); } }

/* Busy-hours heatmap: one hue, light (quiet) to dark (busy). */
.heat { display: grid; grid-template-columns: 2.6rem repeat(var(--cols), minmax(0, 1fr)); gap: 2px; font-size: .75rem; }
.heat .cell { aspect-ratio: 1.4; border-radius: 3px; background: color-mix(in oklab, var(--chart) var(--level), var(--paper)); min-height: 1rem;
  animation: cell .45s ease-out both; }
@keyframes cell { from { opacity: 0; transform: scale(.3); } }
.heat .head { color: var(--muted); text-align: center; align-self: end; }
.heat .row-label { color: var(--muted); align-self: center; }
.heat-scale { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .8rem; color: var(--muted); }
.heat-scale span.swatch { width: 2.5rem; height: .6rem; border-radius: 3px; background: linear-gradient(to right, color-mix(in oklab, var(--chart) 6%, var(--paper)), var(--chart)); }

/* Horizontal bars (HTML) */
.hbars { display: grid; gap: .5rem; }
.hbar { display: grid; grid-template-columns: minmax(0, 9rem) 1fr auto; gap: .6rem; align-items: center; font-size: .92rem; }
.hbar .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { height: .8rem; background: var(--chart-soft); border-radius: 4px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--chart); border-radius: 4px; transform-origin: left; animation: grow-x .7s ease-out both; }
.hbar .amount { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
@keyframes grow-x { from { transform: scaleX(0); } }

details { margin-top: .6rem; font-size: .9rem; }
summary { cursor: pointer; color: var(--muted); }
table { width: 100%; border-collapse: collapse; margin-top: .4rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--line); }
td:last-child, th:last-child { text-align: right; }
.table-scroll { max-height: 18rem; overflow: auto; }
.empty { color: var(--muted); font-style: italic; }
.footnote { max-width: 60ch; }
.tip { position: fixed; z-index: 10; pointer-events: none; background: var(--ink); color: var(--paper); padding: .45rem .6rem;
  border-radius: .5rem; font-size: .85rem; white-space: pre-line; max-width: 16rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}