/* Weekly capacity chip (spec 2026-10-04 §6). Tokens from app-shell; cozy overrides keyed on the
   html attribute ux-mode.js sets (Rule #43) and !important because the cozy theme recolours buttons. */
.cap-chip { margin: 0 0 16px; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent-purple, #9479ff) 10%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--accent-purple, #9479ff) 30%, transparent); }
.cap-q { margin: 0 0 10px; font-weight: 600; font-size: 15px; color: var(--text, #1b1b24); }
.cap-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cap-btn { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--accent-purple, #9479ff);
  background: transparent; color: var(--accent-purple, #9479ff); font-weight: 600; font-size: 14px; cursor: pointer; }
.cap-btn:hover, .cap-btn:focus-visible { background: var(--accent-purple, #9479ff); color: #fff; }
.cap-btn:disabled { opacity: .6; cursor: default; }
/* Dismiss + note take the chip's own text colour at reduced opacity — the page's --text-muted is the
   dark theme's light grey and vanished on the chip's light tint (live 2026-10-04, EN/standard). */
.cap-dismiss { margin-left: auto; min-height: 40px; padding: 0 10px; border: 0; background: transparent;
  color: var(--text, #1b1b24); opacity: .72; font-size: 14px; cursor: pointer; text-decoration: underline; }
.cap-dismiss:hover, .cap-dismiss:focus-visible { opacity: 1; }
.cap-note { margin: 8px 0 0; font-size: 13px; color: var(--text, #1b1b24); opacity: .8; min-height: 1em; }
[data-ux-mode="cozy"] .cap-chip { background: #f7f0e4 !important; border-color: #d9c9a8 !important; }
[data-ux-mode="cozy"] .cap-q { color: #3a2f22 !important; }
[data-ux-mode="cozy"] .cap-btn { border-color: #8a6a2d !important; color: #5a4418 !important; background: #fff !important; }
[data-ux-mode="cozy"] .cap-btn:hover, [data-ux-mode="cozy"] .cap-btn:focus-visible { background: #8a6a2d !important; color: #fff !important; }
[data-ux-mode="cozy"] .cap-dismiss, [data-ux-mode="cozy"] .cap-note { color: #6a5a44 !important; }
[data-ux-mode="cozy"] .cap-dismiss { opacity: 1; }   /* #6a5a44 under .72 was 3.40:1; full = 5.8:1 (review 2026-10-18) */
@media (max-width: 480px) { .cap-dismiss { margin-left: 0; width: 100%; text-align: left; padding: 0; } }