/* Written ivory/cobalt direction, built on the existing component tokens. */
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f7f5f0; --surface-1: #fff; --surface-2: #f2f3f4; --surface-3: #e9ecf0;
  --text: #18242b; --text-secondary: #58636a; --text-tertiary: #616d75;
  --accent: #3459ed; --accent-hover: #2746cf; --accent-soft: #edf0ff;
  --border: #18242b0d; --border-strong: #18242b24; --track: #e9edf3;
  --metric-calories: #3459ed; --metric-protein: #3459ed; --metric-water: #3459ed;
  --success: #24714f; --water-surface: #eaf1ff; --water-track: #d8e5fd;
  --past-surface: #f9e6d5; --past-text: #7c4823;
  --shadow-card: 0 2px 5px #18242b03, 0 8px 24px #18242b03;
}
:root[data-theme='dark'] { color-scheme: dark; --water-surface: #162337; --water-track: #243956; --past-surface: #382b22; --past-text: #f6cba8; --text-tertiary: #929ba9; }
body { background: var(--bg); }
.app { --content-max: 1120px; --rail-width: 208px; }
.app a { text-decoration: none; }
.app .rail { background: transparent; padding-top: 36px; }
.app .rail__brand { font-size: 26px; }
.app .rail__link { min-height: 48px; margin-bottom: 4px; }
.app .container { padding-inline: clamp(18px, 3vw, 40px); }
.app-topbar { display: flex; justify-content: space-between; align-items: center; padding-block: 28px 8px; gap: 16px; }
.app-wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-size: 27px; font-weight: 750; letter-spacing: -1.2px; }
.app-topbar__right { display: flex; gap: 12px; align-items: center; }
.account-control { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-1); border: 1px solid var(--border-strong); color: var(--text); }
.account-control:hover { background: var(--surface-2); }
.app-save-status { font-size: 12px; color: var(--text-secondary); }
body[data-save-state='error'] .app-save-status { color: var(--danger); }
.today-hero, .food-page-header { padding: 32px 0 24px; margin: 0; }
.today-hero .page-header__title, .food-page-header .page-header__title { font-size: clamp(32px, 4vw, 48px); letter-spacing: -.045em; line-height: 1.15; margin-top: 8px; }
.today-hero__date { font-size: 14px; color: var(--text-secondary); margin-top: 10px; }
.date-navigation { margin-bottom: 26px; }
.calendar-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.calendar-trigger { display: inline-flex; gap: 12px; align-items: center; position: relative; min-height: 44px; font-weight: 650; font-size: 18px; cursor: pointer; }
.calendar-trigger input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.calendar-trigger input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; cursor: pointer; }
.calendar-trigger:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.week-arrows { display: flex; gap: 8px; }
.week-arrows button { width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: 50%; font-size: 25px; display: grid; place-items: center; }
.week-arrows button:hover:not(:disabled) { background: var(--surface-1); }
button:disabled { cursor: default; }
.week-arrows button:disabled { opacity: .35; }
.week-strip { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; }
.week-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 86px; border-radius: 16px; }
.week-day span { font-size: 12px; color: var(--text-secondary); }
.week-day strong { font-size: 22px; font-weight: 650; }
.week-day i { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.week-day i.is-today { background: currentColor; }
.week-day.is-selected { background: var(--accent); color: #fff; box-shadow: 0 4px 12px #3459ed20; }
.week-day.is-selected span { color: #fff; }
.week-day:disabled { opacity: .42; }
.week-day:hover:not(:disabled):not(.is-selected) { background: var(--surface-1); }
.date-shortcuts { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.date-shortcuts .btn { padding-inline: 10px; font-size: 12px; }
.date-shortcuts a { margin-left: auto; font-size: 12px; padding: 12px 0 12px 8px; color: var(--text-secondary); }
.past-day-notice { padding: 12px 16px; border-radius: 12px; background: var(--past-surface); color: var(--past-text); font-size: 13px; font-weight: 550; margin-top: 8px; }
.app .card { border: 1px solid var(--border); background: var(--surface-1); box-shadow: var(--shadow-card); border-radius: 22px; padding: 26px; }
.app .card::before { display: none; }
.app .card__title { font-size: 18px; text-transform: none; letter-spacing: -.025em; color: var(--text); font-weight: 650; }
.app .card__header { align-items: center; margin-bottom: 22px; }
.app .card__header .btn { padding-inline: 8px; font-size: 13px; }
.app .card--feature { background: var(--surface-1); }
.nutrition-top { display: block; }
.nutrition-hero__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.nutrition-hero__value .metric__value { font-size: clamp(46px, 5vw, 60px); font-weight: 650; letter-spacing: -.05em; }
.nutrition-hero__left { margin: 12px 0 16px; font-size: 12px; }
.bar--thick { height: 9px; }
.nutrition-macros { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 26px; }
.nutrition-macro { display: flex; flex-direction: column; gap: 4px; }
.nutrition-macro > span { color: var(--text-secondary); font-size: 12px; }
.nutrition-macro strong { font-size: 24px; font-weight: 650; letter-spacing: -.035em; }
.nutrition-macro strong small { font-size: 12px; font-weight: 400; margin-left: 2px; }
.nutrition-macro > small { color: var(--text-secondary); font-size: 11px; }
.card--feature .meal-list { margin-top: 22px; }
.card--feature .card__hint { margin-top: 16px; }
.add-food-primary { width: 100%; padding: 0 28px; gap: 12px; min-height: 54px; border-radius: 16px; font-size: 16px; }
.add-food-primary > span { font-size: 24px; font-weight: 400; }
.today-stack, .today-col, .today-cols { gap: 20px; }
.app .water-card { background: var(--water-surface); border-color: transparent; }
.water-hero .metric__value { font-size: 38px; letter-spacing: -.04em; }
.water-liquid { height: 58px; border-radius: 14px; background: var(--water-track); margin: 20px 0; overflow: hidden; position: relative; isolation: isolate; }
.water-liquid__fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: inherit; }
.water-liquid__fill::after { content: ''; position: absolute; right: -5px; top: -8px; width: 14px; height: 74px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 65%, transparent); }
.water-liquid > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text); }
.water-liquid > span .icon { background: var(--water-surface); border-radius: 50%; padding: 3px; width: 30px; height: 30px; }
.water-actions .btn--secondary { background: var(--surface-1); border: 0; min-width: 90px; }
.app .habits-hero .metric__value { font-size: 27px; }
.app .habit-list { margin-top: 20px; }
.app .habit-row { min-height: 54px; }
.app .empty { padding-block: 10px; }
.app .stat-tile { background: transparent; box-shadow: none; border: none; padding: 12px 0; }
.app .stat-tile__value { font-size: 22px; }
.app .insight { background: transparent; margin: 0; }
.app .tabbar { background: var(--surface-1); backdrop-filter: none; box-shadow: 0 -4px 20px #18242b04; }
.tabbar__link { padding-block: 12px; min-height: 68px; }
.tabbar__link[aria-current='page'] svg { stroke-width: 2.4; }
.food-page-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 24px; align-items: start; }
.food-diary .card__header > span { font-size: 12px; color: var(--text-secondary); }
.meal-group + .meal-group { margin-top: 24px; }
.meal-group h3 { font-size: 12px; color: var(--text-secondary); font-weight: 550; margin-bottom: 4px; }
.diary-row { display: flex; width: 100%; gap: 14px; align-items: center; text-align: left; padding: 20px 0; border-bottom: 1px solid var(--border-strong); }
.diary-row:hover { background: var(--surface-2); }
.diary-row__symbol { width: 42px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 650; flex-shrink: 0; }
.diary-row__text { flex: 1; min-width: 0; }
.diary-row__text strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; display: block; }
.diary-row small { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.diary-row__calories { text-align: right; font-size: 18px; font-weight: 650; }
.food-diary > .btn { margin-top: 24px; }
.food-calories { font-size: 42px; font-weight: 650; letter-spacing: -.045em; margin-block: 20px; }
.food-calories span { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--text-secondary); }
.food-summary-macros > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 10px; font-size: 14px; }
.food-summary-macros span { color: var(--text-secondary); }
.food-day-summary .card__hint { margin-top: 18px; }
.sheet { bottom: auto; max-height: none; }
.sheet__panel { background: var(--surface-1); border-radius: 28px; padding: 28px; max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.sheet__title { font-size: 25px; letter-spacing: -.035em; }
.sheet__close { min-width: 44px; min-height: 44px; }
.sheet__date { margin-bottom: 20px; }
.food-start-search { display: flex; gap: 4px; align-items: center; border-radius: 14px; background: var(--surface-2); padding: 4px; margin-bottom: 20px; }
.food-start-search .input { min-width: 0; border: 0; background: transparent; margin: 0; }
.food-start-search .food-method { border: 0; padding: 0 12px; min-height: 44px; background: transparent; width: auto; }
.food-methods { margin-bottom: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.food-methods .food-method { min-height: 122px; padding: 20px; background: var(--accent-soft); border: 0; border-radius: 16px; gap: 8px; }
.food-methods .food-method svg { color: var(--accent); }
.food-methods .food-method strong { font-size: 15px; }
.food-methods .food-method span { color: var(--text-secondary); font-size: 12px; }
.food-manual { min-height: 48px; padding: 8px; display: flex; flex-direction: row; background: transparent; border: 0; margin-top: 12px; color: var(--accent); }
.food-result { border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0; background: transparent; padding: 18px 4px; }
.food-result:hover { background: var(--surface-2); }
.food-result strong { font-weight: 600; }
.left-habit { min-height: 44px; }
.app .rail__link[aria-current='page'] { background: var(--accent-soft); color: var(--accent); }
.app .stat-tile::after, .app .insight::after { display: none; }
.app .compact-actions { margin-bottom: 16px; }
@media (min-width: 1024px) {
  .app-topbar .app-wordmark { visibility: hidden; }
  .day-intro { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; margin-bottom: 16px; }
  .day-intro .date-navigation { margin-bottom: 0; }
  .today-hero:not(.today-hero--past) .page-header__title { max-width: 9ch; }
  .today-hero--past .page-header__title { font-size: 38px; }
}
@media (max-width: 767px) {
  .food-page-grid { grid-template-columns: 1fr; }
  .app .card { padding: 22px; border-radius: 20px; }
  .nutrition-macros { gap: 8px; }
  .nutrition-macro strong { font-size: 22px; }
  .nutrition-macro strong small { font-size: 10px; }
  .today-hero, .food-page-header { padding-block: 24px 20px; }
  .app .card__header { margin-bottom: 16px; }
  .app-topbar { padding-top: 20px; }
  .add-food-primary { width: 100%; }
  .week-strip { gap: 3px; }
  .week-day { border-radius: 13px; min-height: 78px; }
  .week-day strong { font-size: 20px; }
  .week-day span { font-size: 11px; }
  .sheet { padding: 0; }
  .sheet__panel { border-radius: 28px 28px 0 0; padding: 18px 22px max(24px, env(safe-area-inset-bottom)); }
  .sheet__handle { margin-bottom: 16px; }
  .sheet__panel input, .sheet__panel select, .sheet__panel textarea { font-size: 16px; }
}
@media (max-width: 639px) {
  .card--feature { order: -2; }
  .add-food-primary { order: -1; }
  .today-order-2 { order: 1; }
  .today-order-1 { order: 2; }
  .today-order-5 { order: 5; }
  .water-actions { flex-wrap: nowrap; }
  .water-actions .btn { flex: 1 1 0; min-width: 0; }
  .water-actions .btn--quiet { flex: 0 0 44px; }
}
@media (prefers-reduced-motion: reduce) { .water-liquid__fill, .week-day { transition: none; } }

.left-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
.food-manual > span { margin: 0; }
/* Reference-image alignment: compact mobile daily rhythm, September 2026. */
.app-wordmark { font-size: 30px; font-weight: 800; letter-spacing: -1.5px; }
.app-wordmark img { display: none; }
.today-hero .page-header__eyebrow,.food-page-header .page-header__eyebrow { display: none; }
.today-hero__date { display: none; }
.today-hero, .food-page-header { padding: 18px 0 20px; }
.today-hero .page-header__title,.food-page-header .page-header__title { font-weight: 750; letter-spacing: -.045em; }
.app .card { border-radius: 16px; padding: 20px; }
.app .card__header { margin-bottom: 10px; }
.app .card__title { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.app .card__title > .icon { color: var(--accent); flex-shrink: 0; }
.calendar-heading { margin-bottom: 4px; }
.week-day { min-height: 68px; gap: 3px; border-radius: 12px; }
.week-day i { display: none; }
.week-arrows button { border: 0; border-radius: 10px; }
.date-navigation { margin-bottom: 16px; }
.date-shortcuts { margin-top: 3px; }
.nutrition-hero__value { gap: 10px; }
.nutrition-hero__value .metric__value { font-size: 54px; }
.nutrition-hero__value .metric__unit { font-size: 15px; color: var(--text); }
.nutrition-progress { display: flex; align-items: center; gap: 12px; margin-block: 12px 16px; }
.nutrition-progress .bar { flex: 1; height: 14px; }
.nutrition-progress > span { font-size: 12px; color: var(--text-secondary); }
.nutrition-macros { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 0; padding-top: 12px; border-top: 1px solid var(--border-strong); gap: 14px; }
.nutrition-macro + .nutrition-macro { border-left: 1px solid var(--border-strong); padding-left: 14px; }
.nutrition-macro > span { color: var(--text); }
.macro-numbers { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.macro-numbers strong { font-size: 21px; color: var(--accent); }
.macro-numbers > small { font-size: 12px; white-space: nowrap; }
.nutrition-fiber { display: flex; gap: 6px; align-items: baseline; border-top: 1px solid var(--border-strong); padding-top: 12px; margin-top: 14px; font-size: 14px; }
.nutrition-fiber > span:first-child { margin-right: 10px; }
.nutrition-fiber strong { color: var(--accent); font-size: 21px; }
.card--feature .meal-list { max-height: 96px; overflow-y: auto; margin-top: 12px; }
.card--feature .meal-list__item { padding-block: 0; }
.card--feature .meal-edit { min-height: 44px; padding: 6px 0; }
.water-card { position: relative; }
.water-card .card__header .btn { min-width: 86px; min-height: 40px; border-radius: 10px; }
.water-hero .metric__value { font-size: 38px; }
.water-liquid { height: 18px; margin: 10px 0 0; border-radius: 10px; }
.water-liquid > span { display: none; }
.water-liquid__fill { border-radius: 45% 35% 0 0 / 4px 5px 0 0; }
.water-liquid__fill::after { display: none; }
.water-actions { margin-top: 6px; justify-content: flex-end; gap: 2px; }
.water-actions .btn { min-height: 36px; }
.water-actions .btn--secondary { background: transparent; color: var(--accent); min-width: 64px; }
.app .habit-list { margin-top: 0; }
.app .habit-row { min-height: 50px; gap: 12px; padding-block: 6px; border-bottom: 1px solid var(--border-strong); }
.app .habit-row:last-child { border-bottom: none; }
.app .habit-row:has(.habit-check:not([data-part])) .habit-row__controls { order: -1; }
.app .habit-row__name { flex: 1; font-size: 14px; }
.habit-check { box-shadow: none!important; }
.add-food-primary { min-height: 52px; border-radius: 14px; box-shadow: none; }
.food-page-header { padding-bottom: 10px; }
#view-food .week-strip { display: none; }
#view-food .date-navigation { margin-bottom: 14px; }
#view-food .food-diary { background: transparent; border: 0; box-shadow: none; padding: 0; }
.diary-row { padding: 16px 0; min-height: 92px; }
.diary-row__symbol { width: 60px; height: 64px; border-radius: 13px; }
.diary-row__text strong { font-size: 17px; }
.sheet__title { font-weight: 750; font-size: 27px; }
.food-methods .food-method { background: var(--surface-2); text-align: center; min-height: 102px; padding: 16px 10px; }
.food-methods .food-method svg { width: 32px; height: 32px; margin-bottom: 6px; }
.food-methods .food-method strong { font-weight: 500; }
.food-methods .food-method span { display: none; }
.food-manual { text-decoration: underline; margin-top: 6px; }
.food-manual > span { display: none; }
.food-section-title { border-top: 1px solid var(--border-strong); padding-top: 18px; }
.food-result { position: relative; padding-right: 54px; }
.food-result__add { position: absolute; right: 0; top: 22px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 27px; font-weight: 400; font-style: normal; }
@media (max-width: 639px) {
 .app .container { padding-inline: 18px; }
 .app .card { padding: 16px; }
 .today-hero .page-header__title { font-size: clamp(28px,7.8vw,38px); }
 .date-shortcuts .btn,.date-shortcuts a { min-height: 36px; padding-block: 8px; }
 .nutrition-hero__value .metric__value { font-size: 48px; }
 .nutrition-hero__value .metric__unit { font-size: 13px; }
 .nutrition-macros { gap: 8px; }
 .nutrition-macro + .nutrition-macro { padding-left: 8px; }
 .nutrition-macro strong { font-size: 18px; }
 .macro-numbers > small { font-size: 11px; }
 .today-stack,.today-cols,.today-col { gap: 14px; }
 .add-food-primary { order: 3; }
 .today-order-3 { order: 4; }
 .today-order-4 { order: 5; }
 .today-order-5 { order: 6; }
 .water-actions .btn { flex: 0 0 auto; }
}

#view-food:not(.hidden) { display: flex; flex-direction: column; }
#view-food .date-navigation { order: -2; margin-top: 18px; }
#view-food .food-page-header { order: -1; }

.nutrition-log { margin-top: 10px; border-top: 1px solid var(--border); }
.nutrition-log summary { padding-block: 10px; min-height: 44px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }

.app .bar { background: var(--track); }
.app .bar__fill { box-shadow: none; }
.water-actions .btn,.water-card .card__header .btn { min-height: 44px; }

/* Water is a native, keyboard-accessible exact-total slider. */
.wave-meter { height: 80px; margin-top: 18px; background: var(--water-track); border-radius: 18px; overflow: hidden; contain: paint; box-shadow: inset 0 1px 2px rgb(30 70 140 / .04); }
.wave-meter__fill { position: relative; height: 100%; transition: transform .16s ease-out, opacity .16s ease; }
.wave-meter__fill::after { content: ''; position: absolute; inset: 15px 0 -20px; background: var(--accent); }
.wave-meter svg { position: absolute; inset: -9px auto auto 0; height: 26px; width: 200%; fill: var(--accent); will-change: transform; animation: water-wave 7s linear infinite; }
.wave-meter .wave-meter__back { opacity: .3; animation-duration: 11s; animation-direction: reverse; top: -13px; }
@keyframes water-wave { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.water-slider { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 44px; margin: 2px 0 0; background: transparent; cursor: ew-resize; }
.water-slider::-webkit-slider-runnable-track { height: 4px; background: var(--water-track); border-radius: 4px; }
.water-slider::-moz-range-track { height: 4px; background: var(--water-track); border-radius: 4px; }
.water-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 7px rgb(25 55 100 / .16); }
.water-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 7px rgb(25 55 100 / .16); }
.water-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.water-card .card__hint:has(#water-target-state:empty) { display: none; }
.water-slider-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-secondary); }
.activity-habits { list-style: none; padding: 0; margin: 0 0 12px; }
.activity-habits .act-item { width: 100%; text-align: left; min-height: 64px; }
.activity-habits small { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 5px; }
#view-progress .consistency-grid { gap: 16px; }
@media(prefers-reduced-motion:reduce) { .wave-meter svg { animation: none; will-change: auto; } .wave-meter__fill { transition: none; } }

#view-progress .stat-row--tight { gap: 18px; grid-template-columns: repeat(3,minmax(0,1fr)); }
#view-progress .stat-row--tight .stat-tile { min-height: 0; padding: 0; }
#view-progress .card__hint { margin-top: 16px; }
@media(max-width:639px) { #view-progress .stat-row--tight { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Habit management: compact editable rows, secondary actions on demand. */
.habit-manage-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.habit-manage-toolbar p { margin: 0; }
.habit-manage-toolbar .btn { flex-shrink: 0; }
.habit-manage-row { position: relative; border-bottom: 1px solid var(--border); }
.habit-manage-edit { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 76px; padding: 14px 52px 14px 0; text-align: left; color: var(--text); background: none; border: 0; cursor: pointer; }
.habit-manage-edit > span:last-child { min-width: 0; }
.habit-manage-edit strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.habit-manage-edit small { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.habit-manage-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--water-track); color: var(--accent); }
.habit-manage-icon svg { width: 17px; height: 17px; }
.habit-manage-options > summary { position: absolute; right: 0; top: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; list-style: none; cursor: pointer; font-size: 24px; line-height: 1; color: var(--text-secondary); }
.habit-manage-options > summary::-webkit-details-marker { display: none; }
.habit-manage-options > summary:hover,.habit-manage-options[open] > summary { background: var(--water-track); color: var(--accent); }
.habit-manage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px 0 14px 46px; }
.habit-manage-actions .btn { text-align: left; justify-content: flex-start; min-height: 44px; }
.habit-manage-actions .habit-manage-delete { color: var(--danger, #b42318); grid-column: 1 / -1; }
.habit-manage-archive { margin-top: 20px; }
.habit-manage-archive > summary { cursor: pointer; min-height: 44px; padding-block: 12px; font-size: 13px; color: var(--text-secondary); }
.habit-manage-footnote { margin-top: 20px; }