/* [weekly20] The weekly summary for guardians (public/weekly.js). docs/DESIGN.md: calm rows for
   grown-ups, one card per section, tokens from public/ui/tokens.css. */

.wk-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.wk-range { margin: 0; display: grid; justify-items: center; text-align: center; line-height: 1.25; }
.wk-range b { font-weight: var(--weight-strong); }
.wk-range span { font-size: var(--text-sm); }

.wk-highlights { display: grid; gap: var(--space-2); }
.wk-highlights-title { margin: 0; font: var(--weight-display) var(--text-xl) / 1.2 var(--font-display); }
.wk-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.wk-list li { line-height: var(--leading); }

.wk-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.wk-bar { display: grid; justify-items: center; gap: 2px; font-size: var(--text-xs); color: var(--ink-muted); }
.wk-bar b { font-weight: var(--weight-strong); color: var(--ink); }
.wk-bar-track { position: relative; width: 100%; height: 96px; border-radius: var(--radius-sm); background: var(--surface-sunken); overflow: hidden; }
.wk-bar-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 0; }
.wk-bar-limit { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--brand); z-index: 1; }
.wk-bar.is-future .wk-bar-track { opacity: 0.45; }
.wk-bar-num { min-height: 1.2em; }

.wk-rows { margin: 0 calc(-1 * var(--space-4)); }
.wk-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wk-chip { padding: 4px 12px; border-radius: var(--radius-full); background: var(--surface-sunken); font-size: var(--text-sm); }
.wk-foot { margin-top: var(--space-4); }

@media (min-width: 700px) {
  .wk-bar-track { height: 120px; }
}