/* Routines page = the habits home. Spec 2026-09-03-routines-habits-home-design.md.
   Dot-track / donut segment / legend-chip colours come from
   features/progress/attribution-stats.css (loaded by the page) so the
   Routines page and the Progress card paint the same fact the same way. */

.routines-page { max-width: 980px; margin: 0 auto; padding: 0 16px 48px; }
#routinesHome { display: flex; flex-direction: column; gap: 22px; }
#routinesHome[hidden] { display: none !important; }
.hh-loading, .hh-error, .hh-note { opacity: .8; font-size: .95rem; margin: 0; }
.hh-error { color: var(--danger, #f87171); }
.hh-note { padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--text, #e2e8f0) 25%, transparent); border-radius: 12px; }
.hh-banner { padding: 10px 14px; border-radius: 12px; font-size: .9rem;
  background: color-mix(in srgb, var(--accent-purple, #8b5cf6) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-purple, #8b5cf6) 35%, transparent); }

/* roll-up */
.hh-rollup { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent-purple, #8b5cf6) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-purple, #8b5cf6) 22%, transparent); }
.hh-donut { width: 96px; height: 96px; flex: 0 0 96px; }
.hh-donut__track { stroke: color-mix(in srgb, var(--text, #e2e8f0) 12%, transparent); }
.hh-donut__label { font-size: 8px; font-weight: 700; fill: currentColor; }
.hh-rollup__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hh-rollup__line { font-size: .92rem; opacity: .85; }
.hh-rollup__line--strong { font-size: 1.05rem; font-weight: 600; opacity: 1; }
.hh-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; opacity: .85; }
.hh-legend__row { display: inline-flex; align-items: center; gap: 6px; }
.hh-legend__chip { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* sections */
.hh-section { display: flex; flex-direction: column; gap: 8px; }
.hh-section__head { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.hh-section__count { font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .8; }
.hh-section__note { margin: 0; font-size: .9rem; opacity: .8; }
.hh-section__fold > summary { cursor: pointer; list-style: none; }
.hh-section__fold > summary::-webkit-details-marker { display: none; }
.hh-section__fold > summary::before { content: "▸"; margin-right: 6px; }
.hh-section__fold[open] > summary::before { content: "▾"; }
.hh-list { display: flex; flex-direction: column; gap: 6px; }

/* rows */
.hh-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--text, #e2e8f0) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent); }
.hh-row[hidden] { display: none !important; }
.hh-row--target { outline: 2px solid var(--accent-purple, #8b5cf6); outline-offset: 2px; }
.hh-row__glyph { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; box-sizing: border-box;
  border: 2px solid var(--chart-ai, #8b5cf6); }
.hh-row__glyph--done { background: var(--chart-ai, #8b5cf6); }
.hh-row__glyph--off, .hh-row__glyph--paused { border-color: var(--chart-missed); opacity: .6; }
.hh-row__glyph--open { border-style: dashed; }
.hh-row__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#routinesHome button.hh-row__name { all: unset; cursor: pointer; font-weight: 600; font-size: 1rem; line-height: 1.3;
  color: inherit; text-align: left; overflow-wrap: anywhere; }
#routinesHome button.hh-row__name:focus-visible { outline: 2px solid var(--accent-purple, #8b5cf6); outline-offset: 2px; border-radius: 4px; }
.hh-row__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hh-chip { font-size: .72rem; padding: 2px 8px; border-radius: 999px; line-height: 1.5;
  background: color-mix(in srgb, var(--accent-purple, #8b5cf6) 14%, transparent); color: inherit; }
.hh-chip--quiet { background: transparent; border: 1px solid var(--chart-missed); opacity: .8; }
.hh-chip--cat { background: color-mix(in srgb, var(--text, #e2e8f0) 8%, transparent); opacity: .85; }
.hh-track { margin-top: 2px; }
.hh-row__meta { font-size: .85rem; opacity: .8; }
.hh-reaction { margin: 2px 0 0; font-size: .9rem; font-style: italic; opacity: .95;
  color: var(--accent-purple, #a78bfa); }
.hh-details { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; font-size: .88rem;
  background: color-mix(in srgb, var(--text, #e2e8f0) 5%, transparent);
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.hh-details__desc { grid-column: 1 / -1; margin: 0 0 4px; opacity: .9; }
.hh-details dt { opacity: .7; }
.hh-details dd { margin: 0; overflow-wrap: anywhere; }

/* actions */
.hh-row__actions { display: flex; align-items: center; gap: 6px; }
.hh-row__primary { display: flex; align-items: center; gap: 8px; }
#routinesHome button.hh-btn, #routinesHome a.hh-btn { all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .88rem; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; line-height: 1.2; white-space: nowrap; color: inherit;
  border: 1px solid color-mix(in srgb, var(--accent-purple, #8b5cf6) 45%, transparent);
  background: color-mix(in srgb, var(--accent-purple, #8b5cf6) 14%, transparent); }
#routinesHome button.hh-btn::before, #routinesHome a.hh-btn::before { content: none !important; }
#routinesHome button.hh-btn:hover, #routinesHome a.hh-btn:hover { background: color-mix(in srgb, var(--accent-purple, #8b5cf6) 24%, transparent); }
#routinesHome button.hh-btn:focus-visible, #routinesHome a.hh-btn:focus-visible { outline: 2px solid var(--accent-purple, #8b5cf6); outline-offset: 2px; }
#routinesHome button.hh-btn:disabled { opacity: .55; cursor: default; }
#routinesHome button.hh-check { background: var(--accent-purple, #8b5cf6); color: #0b1220; border-color: transparent; }
#routinesHome button.hh-check:hover { background: color-mix(in srgb, var(--accent-purple, #8b5cf6) 85%, #000); }
#routinesHome button.hh-btn--link { background: transparent; border-color: transparent; padding: 4px 6px; text-decoration: underline; }
.hh-done { font-size: .88rem; font-weight: 600; color: var(--chart-ai, #8b5cf6); white-space: nowrap; }
.hh-btn .icon svg, .hh-menu__btn .icon svg { width: 14px; height: 14px; }

/* overflow menu */
.hh-menu { position: relative; }
.hh-menu > summary { list-style: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; opacity: .75; }
.hh-menu > summary::-webkit-details-marker { display: none; }
.hh-menu > summary:hover, .hh-menu[open] > summary { opacity: 1; background: color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent); }
.hh-menu__list { position: absolute; right: 0; top: 36px; z-index: 20; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: 12px; background: var(--surface-2, #111a2e);
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 14%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
#routinesHome button.hh-menu__item { background: transparent; border-color: transparent; border-radius: 8px; justify-content: flex-start; width: 100%; }
#routinesHome button.hh-menu__item:hover { background: color-mix(in srgb, var(--text, #e2e8f0) 8%, transparent); }
#routinesHome button.hh-menu__item[data-action="delete"] { color: var(--danger, #f87171); }

/* empty */
.hh-empty { padding: 28px 22px; border-radius: 16px; text-align: center;
  border: 1px dashed color-mix(in srgb, var(--text, #e2e8f0) 25%, transparent); }
.hh-empty__title { margin: 0 0 6px; font-size: 1.15rem; }
.hh-empty__body { margin: 0 0 16px; opacity: .85; }
.hh-empty__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* modal */
.hh-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.55); }
.hh-modal[hidden] { display: none !important; }
.hh-modal__card { width: min(560px, 100%); max-height: 90vh; overflow: auto; border-radius: 16px; padding: 18px 20px 20px;
  background: var(--surface-2, #111a2e); color: inherit; border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 14%, transparent); }
.hh-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hh-modal__title { margin: 0; font-size: 1.15rem; }
/* id-anchored so the cozy blanket <button> rule (cozy-theme.css) cannot resize it */
#hhModal button.hh-modal__close { all: unset; box-sizing: border-box; cursor: pointer; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: inherit; }
#hhModal button.hh-modal__close::before { content: none !important; }
#hhModal button.hh-modal__close:hover { background: color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent); }
#hhModal button.hh-modal__close:focus-visible { outline: 2px solid var(--accent-purple, #8b5cf6); }
.hh-form { display: flex; flex-direction: column; gap: 12px; }
.hh-field { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; }
.hh-field > span { opacity: .8; }
.hh-field input, .hh-field select, .hh-field textarea { font: inherit; padding: 8px 10px; border-radius: 10px; color: inherit;
  background: color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 18%, transparent); }
.hh-field input::placeholder, .hh-field textarea::placeholder { color: color-mix(in srgb, currentColor 62%, transparent); }
.hh-field input:focus, .hh-field select:focus, .hh-field textarea:focus { outline: 2px solid var(--accent-purple, #8b5cf6); outline-offset: 1px; }
.hh-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hh-form__error { margin: 0; font-size: .85rem; color: var(--danger, #f87171); }
.hh-form__error[hidden] { display: none !important; }
.hh-form__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* phone */
@media (max-width: 640px) {
  .hh-row { grid-template-columns: 12px minmax(0, 1fr); }
  .hh-row__actions { grid-column: 2; justify-content: flex-start; }
  .hh-rollup { flex-direction: column; align-items: flex-start; }
  .hh-field-row { grid-template-columns: 1fr; }
}

/* cozy — solid paper, warm earth, never dark glass */
html[data-ux-mode="cozy"] .hh-rollup, html[data-ux-mode="cozy"] .hh-row, html[data-ux-mode="cozy"] .hh-empty,
html[data-ux-mode="cozy"] .hh-note { background: #fffaf3; border-color: rgba(90, 74, 58, .18); }
html[data-ux-mode="cozy"] .hh-details { background: rgba(90, 74, 58, .06); }
html[data-ux-mode="cozy"] .hh-menu__list, html[data-ux-mode="cozy"] .hh-modal__card { background: #fffaf3; border-color: rgba(90, 74, 58, .22);
  box-shadow: 0 10px 30px rgba(90, 74, 58, .18); }
html[data-ux-mode="cozy"] .hh-banner { background: rgba(196, 149, 58, .14); border-color: rgba(196, 149, 58, .4); }
html[data-ux-mode="cozy"] #routinesHome button.hh-check { background: var(--accent-purple, #b7791f); color: #1f1a14; }
html[data-ux-mode="cozy"] .hh-done, html[data-ux-mode="cozy"] .hh-reaction { color: #7a5a12; }
html[data-ux-mode="cozy"] .hh-field input, html[data-ux-mode="cozy"] .hh-field select, html[data-ux-mode="cozy"] .hh-field textarea { background: #fff; border-color: rgba(90, 74, 58, .3); }
html[data-ux-mode="cozy"] .hh-donut__track { stroke: rgba(90, 74, 58, .14); }
html[data-ux-mode="cozy"] #routinesHome button.hh-menu__item[data-action="delete"] { color: #b91c1c; }
html[data-ux-mode="cozy"] .hh-field input::placeholder, html[data-ux-mode="cozy"] .hh-field textarea::placeholder { color: #6b6b6b; }
html[data-ux-mode="cozy"] #hhModal button.hh-modal__close:hover { background: rgba(90, 74, 58, .12); }

/* Scheduled wizard runs (the Progress panel in routines-only mode) sits under the habits — owner 2026-09-07 */
.hh-routines-panel { margin-top: 28px; }
.hh-routines-panel .chart-card { margin: 0; }