/* Who's-doing-the-work stats (spec 2026-08-12). Palette dataviz-validated:
   all 6 checks pass on #0f172a (standard) and #FFFBF2 (cozy). "Remaining"
   is a neutral TRACK, not an identity hue — counts are always visible text. */
:root {
  --chart-ai: #8B5CF6;
  --chart-you: #d97706;
  --chart-left: rgba(148, 163, 184, 0.28);
  /* Habits roll-up (2026-08-25). "Missed" is a de-emphasis NEUTRAL, not a
     fourth identity hue: red would be streak-shame (§4.9) and reusing the
     amber --chart-you would mean "done by you" one card up and "missed" one
     card down, which breaks colour-follows-the-entity. This is the same
     token the missed DOT outlines with, so the ring and the dot track under
     it are literally the same paint. Validated: done#8B5CF6 vs missed
     separates at deutan/normal dE 17.1/19.2 (std) and 23.0/23.9 (cozy);
     alpha lifted 0.60 -> 0.68 in cozy so it clears 3:1 on its own (2.99 ->
     3.59) rather than leaning on the legend text for relief. The "open"
     segment stays --chart-left: a TRACK, below 3:1 by design, with the
     count always printed beside it. */
  --chart-missed: rgba(148, 163, 184, 0.75);
}
html[data-ux-mode="cozy"] {
  --chart-left: rgba(90, 74, 58, 0.22);
  --chart-missed: rgba(90, 74, 58, 0.68);
}
.attr-card { display: flex; flex-direction: column; gap: 8px; }
.attr-card__body { display: flex; align-items: center; gap: 14px; }
.attr-donut { width: 92px; height: 92px; flex: 0 0 auto; }
.attr-seg-ai   { stroke: var(--chart-ai); }
.attr-seg-you  { stroke: var(--chart-you); }
.attr-seg-left { stroke: var(--chart-left); }
.attr-donut__label { font-size: 20px; font-weight: 650; fill: currentColor;
                     letter-spacing: -0.02em; }
.attr-legend { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; min-width: 0; }
.attr-legend__row { display: flex; align-items: center; gap: 6px; }
.attr-chip { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.attr-chip--ai   { background: var(--chart-ai); }
.attr-chip--you  { background: var(--chart-you); }
.attr-chip--left { background: var(--chart-left); border: 1px solid rgba(148, 163, 184, 0.45); }
.attr-card__savings { font-size: 0.8rem; color: var(--fg-muted, #94a3b8); margin: 0; }

/* Condensed XP/level line (2026-08-13) — replaces the XP tile + level card.
   Styled to sit UNDER the savings line as sibling meta, not to compete with
   the chart. `grid-column: 1 / -1` only bites while the node is still a direct
   child of #designStatGrid — i.e. before attribution-stats.js moves it in, or
   permanently for a user with no goal data, where it must span the row rather
   than sit in a lonely 220px column. Inside the card the property is inert. */
.stat-xp-line {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: var(--fg-muted, #94a3b8);
    margin: 0;
}
.stat-xp-line[hidden] { display: none; }
.attr-goals { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; border-top: 1px solid rgba(148, 163, 184, 0.18); padding-top: 8px; }
.attr-goal-bar { display: flex; flex-direction: column; gap: 3px; }
.attr-goal-bar__title { font-size: 0.78rem; color: var(--fg, #e6edf3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attr-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.attr-bar__seg { min-width: 3px; }
.attr-bar__seg--ai   { background: var(--chart-ai); }
.attr-bar__seg--you  { background: var(--chart-you); }
.attr-bar__seg--left { background: var(--chart-left); }
.attr-goal-bar__text { font-size: 0.75rem; color: var(--fg-muted, #94a3b8); }

/* Habits — the manager's report (spec 2026-08-24; dots per owner 2026-08-24:
   the graph tracks done AND miss per period). done = filled accent · missed =
   hollow ring (visible, neutral — §4.9: no alarm red) · pending = dashed ring
   (the current period isn't over, so it is never drawn as a miss) · off =
   faint (not expected: weekends of a weekdays habit / cadence-less days). */
.habit-list { margin-top: 2px; }
.habit-dots { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; row-gap: 4px; padding: 2px 0; }
.habit-dots--period { gap: 6px; }
.habit-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; }
.habit-dots--period .habit-dot { width: 12px; height: 12px; }
.habit-dot--done { background: var(--chart-ai); }
.habit-dot--missed { background: transparent; border: 1.5px solid var(--chart-missed); }
.habit-dot--pending { background: transparent; border: 1.5px dashed rgba(148, 163, 184, 0.55); }
.habit-dot--off { background: var(--chart-left); opacity: 0.35; }
.habit-dot-gap { width: 5px; flex: 0 0 auto; }

/* Habits roll-up ring (2026-08-25) — total planned vs done vs missed. Same
   three paints as the dot track below it, so the two never disagree. */
.habit-seg-done   { stroke: var(--chart-ai); }
.habit-seg-missed { stroke: var(--chart-missed); }
.habit-seg-open   { stroke: var(--chart-left); }
.habit-chip--done   { background: var(--chart-ai); }
.habit-chip--missed { background: var(--chart-missed); }
.habit-chip--open   { background: var(--chart-left); border: 1px solid var(--chart-missed); }
.habit-rollup { margin-bottom: 2px; }
.habit-rollup__caption { font-size: 0.78rem; color: var(--fg-muted, #94a3b8);
                         margin-top: 2px; }
html[data-ux-mode="cozy"] .habit-dot--pending { border-color: rgba(90, 74, 58, 0.45); }

/* Narrow screens: the dot tracks need the full row — inside a 2-up grid
   column every habit title truncates at ~174px (measured 390px viewport,
   2026-08-24 browser pass). */
@media (max-width: 640px) {
  .habit-card { grid-column: 1 / -1; }
}
.habit-more-link { text-decoration: none; }
.habit-more-link:hover { text-decoration: underline; }