/* Habitinator modal system -- product-specific, board-aligned
   Single source for Habit / Daily / To Do editors and related shells.
   Modals appear instantly with no entrance motion. */

/* -- Shell -- unified outer card that MudDialog renders transparent around */
.hab-modal,
.edit-daily-shell,
.daily-yesterday-shell {
    width: 100%;
    max-width: min(var(--hab-modal-max-w), 100%);
    max-height: min(85dvh, calc(100dvh - 1.5rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 55%, transparent);
    border-radius: var(--hab-modal-radius);
    box-shadow:
        0 1px 0 rgba(15,23,42,0.04),
        0 12px 24px rgba(15,23,42,0.08),
        0 32px 64px rgba(15,23,42,0.14);
    position: relative;
    overscroll-behavior: contain;
}
.hab-modal--wide,
.daily-yesterday-shell { max-width: min(var(--hab-modal-wide-max-w), 100%); }

.hab-modal--habit,
.edit-daily-shell--habit { --hab-modal-accent: var(--hab-type-habit); }
.hab-modal--daily,
.edit-daily-shell--daily { --hab-modal-accent: var(--hab-type-daily); }
.hab-modal--todo,
.edit-daily-shell--todo  { --hab-modal-accent: var(--hab-type-todo); }
.hab-modal--neutral { --hab-modal-accent: var(--mud-palette-divider); }

/* Legacy content wrappers - allow inner scroll */
.edit-daily-dialog .edit-daily-dialog__content { padding: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; max-height: inherit !important; }

/* -- Header -- minimal, close overlays, no blank top */
.hab-modal__header,
.edit-daily-header {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex-shrink: 0;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 60%, transparent);
    padding: 0.85rem 1rem 0.85rem;
    padding-right: 2.8rem;
    overflow: visible;
}
.hab-modal__topbar,
.edit-daily-header__toolbar {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    z-index: 3;
}
.hab-modal__topbar--minimal { position: absolute; top: 0.55rem; right: 0.55rem; }

.edit-daily-header__toolbar { margin-bottom: 0.85rem; }
.edit-daily-header__title { display: none; }

.hab-modal__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.hab-modal__save {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--hab-font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
.hab-modal__save--saved { color: var(--hab-accent-success); }
.hab-modal__save--error { color: var(--mud-palette-error); }
.hab-modal__save--saving { color: var(--mud-palette-warning); }

.hab-modal__close,
.edit-daily-header__close {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 60%, transparent);
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    color: var(--mud-palette-text-secondary) !important;
    border-radius: var(--radius-md);
    cursor: pointer;
    outline: none;
}
.hab-modal__close:focus-visible,
.edit-daily-header__close:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 2px !important;
    border-color: var(--mud-palette-primary) !important;
}
.hab-modal__close--danger:hover,
.edit-daily-header__close:hover { /* keep neutral, footer carries danger */ }

/* Hero title field -- large, editorial, like card title expanded */
.hab-modal__title-field,
.hab-modal__notes,
.edit-daily-field-header {
    position: relative;
}

.hab-modal .mud-input-outlined-border,
.edit-daily-shell .mud-input-outlined-border {
    display: none !important;
}

.hab-modal__title-input .mud-input.mud-input-outlined,
.hab-modal__notes-field .mud-input.mud-input-outlined,
.hab-modal__field .mud-input.mud-input-outlined,
.edit-daily-field-header .mud-input.mud-input-outlined,
.edit-daily-field-body .mud-input.mud-input-outlined,
.hab-modal__title-input .mud-input-root-outlined,
.hab-modal__title-field .mud-input-root-outlined,
.edit-daily-field-header .mud-input-root-outlined {
    background: var(--mud-palette-surface) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 70%, transparent) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}

.hab-modal__title-input .mud-input.mud-input-outlined:focus-within,
.hab-modal__notes-field .mud-input.mud-input-outlined:focus-within,
.hab-modal__field .mud-input.mud-input-outlined:focus-within,
.edit-daily-field-header .mud-input.mud-input-outlined:focus-within,
.edit-daily-field-body .mud-input.mud-input-outlined:focus-within,
.hab-modal__title-input .mud-input-root-outlined:focus-within,
.edit-daily-field-header .mud-input-root-outlined:focus-within,
.hab-modal__notes-field .mud-input-root-outlined:focus-within {
    background: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent) !important;
}

.hab-modal__title-input .mud-input-slot,
.edit-daily-field-header .mud-input-slot {
    font-family: var(--hab-font-sans) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary) !important;
    padding: 0.55rem 0.75rem !important;
}

.hab-modal__notes-field textarea.mud-input-slot {
    font-family: var(--hab-font-sans) !important;
    font-size: 0.875rem !important;
    font-weight: 450 !important;
    letter-spacing: 0;
    line-height: 1.5 !important;
    padding: 0.6rem 0.75rem !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    field-sizing: content;
    min-height: 3.5lh;
    max-height: 10lh;
}

.edit-daily-label-header,
.edit-daily-label-body {
    font-family: var(--hab-font-sans) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase !important;
    color: var(--mud-palette-text-secondary) !important;
    margin-bottom: 0.35rem !important;
    margin-left: 0.1rem;
}

/* -- Body -- must scroll when content exceeds shell, footer sticks to bottom */
.hab-modal__body,
.edit-daily-body {
    background: var(--mud-palette-surface);
    padding: 1rem 1.1rem 0.6rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-padding-top: 0;
    scroll-padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-divider) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.hab-modal__section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 0.9rem;
    background: color-mix(in srgb, var(--mud-palette-background-gray) 32%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 45%, transparent);
    border-radius: var(--radius-xl);
    scroll-margin-top: 1.5rem;
    scroll-margin-bottom: 1.5rem;
}
.hab-modal__section--plain {
    background: transparent;
    border: none;
    padding: 0;
}
.hab-modal__section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.hab-modal__section-label svg { width: 14px; height: 14px; opacity: 0.9; }

/* Fields inside sections -- tighter radius to match section */
.hab-modal__field .mud-input-root-outlined,
.edit-daily-field-body .mud-input-root-outlined {
    background: var(--mud-palette-surface) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    box-shadow: none !important;
}
.hab-modal__field .mud-input-root-outlined:focus-within,
.edit-daily-field-body .mud-input-root-outlined:focus-within,
.hab-modal__field:focus-within .mud-input-root-outlined {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent) !important;
}
.edit-daily-field-body .mud-input-slot { font-size: 0.9rem; line-height: 1.45; color: var(--mud-palette-text-primary); }
.edit-daily-field-body input, .edit-daily-field-header input, .edit-daily-field-header textarea { color: var(--mud-palette-text-primary) !important; }

/* -- Checklist -- inline list, not expansion panel */
.hab-checklist {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 45%, transparent);
    border-radius: var(--radius-xl);
    overflow: visible;
    background: var(--mud-palette-surface);
    scroll-margin-top: 1.5rem;
    scroll-margin-bottom: 1.5rem;
}
.hab-checklist__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background: color-mix(in srgb, var(--mud-palette-background-gray) 30%, var(--mud-palette-surface));
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 50%, transparent);
}
.hab-checklist__head-title {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; font-weight: 700; letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}
.hab-checklist__count {
    font-family: var(--hab-font-mono);
    font-size: 0.7rem; font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-pill);
}
.hab-checklist__list { display: flex; flex-direction: column; }
.edit-daily-checklist { display: contents; }
.edit-daily-checklist__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0.35rem 0.65rem 0.35rem 0.4rem;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 45%, transparent);
    background: var(--mud-palette-surface);
}
.edit-daily-checklist__row:last-of-type { border-bottom: none; }
.edit-daily-checklist__row:has(.mud-checkbox-checked) { background: color-mix(in srgb, var(--hab-accent-success) 4%, var(--mud-palette-surface)); }
.edit-daily-checklist__row:focus-within {
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
}
.edit-daily-checklist__input .mud-input-outlined-border { border: none !important; }
.edit-daily-checklist__input .mud-input-root { color: var(--mud-palette-text-primary); }
.edit-daily-checklist__input .mud-input-root:focus-within {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 1px !important;
    border-radius: var(--radius-sm);
}
.edit-daily-checklist__row:has(.mud-checkbox-checked) .edit-daily-checklist__input input {
    text-decoration: line-through;
    color: var(--mud-palette-text-disabled) !important;
    opacity: 0.7;
}
.edit-daily-checklist__remove {
    color: var(--mud-palette-text-disabled) !important;
    flex-shrink: 0;
    outline: none;
}
.edit-daily-checklist__remove:focus-visible {
    outline: 2px solid var(--mud-palette-error) !important;
    outline-offset: 2px !important;
    color: var(--mud-palette-error) !important;
}
.edit-daily-checklist__add {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0.6rem 0.65rem 0.7rem;
    padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--hab-modal-accent) 7%, var(--mud-palette-surface));
    border: 1px dashed color-mix(in srgb, var(--hab-modal-accent) 28%, var(--mud-palette-divider));
    border-radius: var(--radius-lg);
    color: var(--hab-modal-accent);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
    outline: none;
}
.edit-daily-checklist__add:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 2px !important;
    border-style: solid !important;
}
.edit-daily-checklist__add-icon { flex-shrink: 0; }

/* When checklist is rendered via hab-checklist wrapper */
.hab-modal .edit-daily-checklist__row { border-left: none; border-right: none; }

/* -- Tag picker -- board badge language */
.habit-tag-picker { position: relative; width: 100%; }
.habit-tag-picker--open { z-index: 10; }
.habit-tag-picker__control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: 2.5rem;
    padding: 0.45rem 0.6rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    color: var(--mud-palette-text-primary);
    outline: none;
}
.habit-tag-picker__control:focus-visible {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent) !important;
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 1px !important;
}
.habit-tag-picker--open .habit-tag-picker__control {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
.habit-tag-picker__chips {
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-divider) transparent;
}
.habit-tag-picker__chips::-webkit-scrollbar { height: 4px; }
.habit-tag-picker__placeholder {
    font-size: 0.85rem;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
}
.habit-tag-picker__chevron { flex-shrink: 0; font-size: 0.7rem; color: var(--mud-palette-text-disabled); }

.habit-tag-chip {
    display: inline-flex;
    align-items: center;
    max-width: 11rem;
    padding: 0.2rem 0.2rem 0.2rem 0.55rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-divider));
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--mud-palette-primary);
    font-weight: 600;
}
.hab-modal--habit .habit-tag-chip {
    background: color-mix(in srgb, var(--hab-type-habit) 10%, transparent);
    border-color: color-mix(in srgb, var(--hab-type-habit) 22%, transparent);
    color: var(--hab-type-habit);
}
.hab-modal--todo .habit-tag-chip {
    background: color-mix(in srgb, var(--hab-type-todo) 12%, transparent);
    border-color: color-mix(in srgb, var(--hab-type-todo) 22%, transparent);
    color: var(--hab-type-todo-ink);
}
.habit-tag-chip__text { margin-right: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8.5rem; }
.habit-tag-chip__remove {
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    border: none !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, currentColor 12%, transparent) !important;
    color: inherit !important;
    cursor: pointer !important;
    padding: 0 !important;
    outline: none;
}
.habit-tag-chip__remove:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 1px !important;
}
.habit-tag-picker__dropdown {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(100% + 0.45rem);
    top: auto;
    z-index: 20;
    padding: 0.6rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-xl);
    box-shadow:
        0 -12px 28px rgba(15,23,42,0.12),
        0 -4px 10px rgba(15,23,42,0.08);
    display: none;
}
.habit-tag-picker__dropdown--open {
    display: block;
}
.habit-tag-picker__search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-md);
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    outline: none;
}
.habit-tag-picker__search:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
.habit-tag-picker__search::placeholder { color: var(--mud-palette-text-disabled); }
.habit-tag-picker__list {
    max-height: 11rem;
    margin: 0; padding: 0.1rem 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.habit-tag-picker__empty { padding: 0.5rem; font-size: 0.8rem; color: var(--mud-palette-text-secondary); }
.habit-tag-picker__option {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    padding: 0.5rem 0.6rem;
    margin: 0 0 0.15rem 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    outline: none;
}
.habit-tag-picker__option:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: -2px !important;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)) !important;
}
.habit-tag-picker__option--add {
    color: var(--hab-modal-accent);
    font-weight: 700;
    border-top: 1px solid var(--mud-palette-divider);
    margin-top: 0.35rem;
    padding-top: 0.6rem;
    border-radius: 0;
}

/* -- Type controls -- pill segmented like board filter */
.hab-segment {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.2rem;
    background: var(--mud-palette-background-gray);
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 60%, transparent);
    border-radius: var(--radius-pill);
    width: 100%;
}
.hab-segment__btn {
    flex: 1 1 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    outline: none;
}
.hab-segment__btn:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 2px !important;
}
.hab-segment__btn--active {
    background: color-mix(in srgb, var(--hab-modal-accent) 14%, transparent);
    color: var(--hab-modal-accent);
    border-color: color-mix(in srgb, var(--hab-modal-accent) 28%, transparent);
}
.hab-segment__btn svg { width: 14px; height: 14px; stroke-width: 2.6; }

/* Habit track variant -- legacy .habit-track mapped to segmented */
.habit-track {
    display: flex;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    width: 100%;
}
.habit-track__option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-lg);
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-weight: 650;
    outline: none;
}
.habit-track__option:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 2px !important;
    border-color: var(--mud-palette-primary) !important;
}
.habit-track__circle {
    width: 1.9rem; height: 1.9rem;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #fff;
}
.habit-track__circle--good { background: var(--hab-type-habit); }
.habit-track__circle--bad { background: var(--hab-type-habit-bad); }
.habit-track__circle svg { width: 1rem; height: 1rem; stroke-width: 3.2; }
.habit-track__label { font-size: 0.85rem; font-weight: 650; }
.habit-track__option--on-good {
    background: color-mix(in srgb, var(--hab-type-habit) 8%, var(--mud-palette-surface)) !important;
    border-color: var(--hab-type-habit) !important;
    color: var(--mud-palette-text-primary) !important;
}
.habit-track__option--on-bad {
    background: color-mix(in srgb, var(--hab-type-habit-bad) 7%, var(--mud-palette-surface)) !important;
    border-color: var(--hab-type-habit-bad) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* -- Numeric steppers -- mono, board-badge aligned */
.hab-stepper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
    align-items: center;
}
.hab-stepper__value {
    font-family: var(--hab-font-mono);
    font-variant-numeric: tabular-nums;
}
.counter-adjust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.counter-adjust__btn {
    width: 2.25rem; height: 2.25rem;
    border: none;
    border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; color: #fff;
    outline: none;
}
.counter-adjust__btn:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 2px !important;
}
.counter-adjust__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.counter-adjust__btn--good { background: var(--hab-type-habit); }
.counter-adjust__btn--bad  { background: var(--hab-type-habit-bad); }
.counter-adjust__btn svg { width: 1.05rem; height: 1.05rem; stroke-width: 3.2; }
.counter-adjust__field { width: 4.8rem; flex-shrink: 0; }
.counter-adjust__field .mud-input-root { font-family: var(--hab-font-mono) !important; }

.edit-daily-streak-input {
    display: flex; align-items: stretch;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--mud-palette-surface);
}
.edit-daily-streak-input:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}
.edit-daily-streak-input__icon {
    display: flex; align-items: center; justify-content: center;
    width: 2.4rem; flex-shrink: 0;
    background: color-mix(in srgb, var(--mud-palette-background-gray) 45%, var(--mud-palette-surface));
    border-right: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
}
.edit-daily-streak-input__field { flex: 1; min-width: 0; }
.edit-daily-streak-input__field .mud-input-outlined-border { border: none !important; }
.edit-daily-streak-input__field .mud-input-slot { font-family: var(--hab-font-mono) !important; font-size: 0.9rem; }

.edit-daily-repeat-every { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.edit-daily-repeat-every__n { width: 4.6rem; flex-shrink: 0; }
.edit-daily-repeat-every__n .mud-input-slot { font-family: var(--hab-font-mono) !important; }
.edit-daily-repeat-every__n .mud-input-root-outlined:focus-within,
.edit-todo-repeat-field .mud-input-root-outlined:focus-within {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent) !important;
}
.edit-daily-repeat-every__unit { color: var(--mud-palette-text-secondary); font-size: 0.85rem; min-width: 2.5rem; }

/* To-do repeat */
.edit-todo-repeat-field { flex: 0 0 6.2rem; max-width: 6.2rem; }
.edit-todo-repeat-field .mud-input-slot { font-family: var(--hab-font-mono) !important; }
.edit-todo-repeat-hint { flex: 1 1 auto; min-width: 0; line-height: 1.4; }

/* -- Heatmap button -- secondary, board-consistent */
.edit-daily-heatmap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-lg);
    color: var(--mud-palette-text-primary);
    font-size: 0.85rem;
    font-weight: 650;
    cursor: pointer;
    scroll-margin-top: 1.5rem;
    scroll-margin-bottom: 1.5rem;
    outline: none;
}
.edit-daily-heatmap-btn:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 2px !important;
    border-color: var(--mud-palette-primary) !important;
}
.edit-daily-heatmap-btn__icon { flex-shrink: 0; color: var(--mud-palette-primary); }

/* -- Modal footer -- sticky at bottom, clean breathing room and divider */
.hab-modal__footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-top: 0;
    padding: 0.85rem 1.1rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-divider) 65%, transparent);
    background: var(--mud-palette-surface);
    z-index: 1;
}
.hab-modal__footer .mud-button-root {
    text-transform: none !important;
    font-weight: 650 !important;
    font-size: 0.82rem !important;
    border-radius: var(--radius-md) !important;
}
.hab-modal__footer .mud-button-root:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 2px !important;
}
.hab-modal__danger {
    display: flex; gap: 0.5rem; align-items: center;
}
.hab-modal__danger .mud-button--archive {
    color: var(--mud-palette-text-secondary) !important;
}
.hab-modal__danger .mud-button--archive:hover {
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent) !important;
    color: var(--mud-palette-warning) !important;
}

/* Quiet danger row at the bottom of edit dialogs. Plain buttons in normal
   flow, no sticky pinning, no floating treatment. */
.hab-modal__footer--danger {
    position: static;
    justify-content: space-between;
    margin-top: 0.25rem;
    padding: 0.85rem 0 0.15rem;
    scroll-margin-top: 1.5rem;
    scroll-margin-bottom: 1.5rem;
}
.hab-danger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 2.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    background: transparent;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.hab-danger-btn:focus-visible {
    outline: 2px solid var(--mud-palette-error) !important;
    outline-offset: 2px !important;
}
.hab-danger-btn--archive {
    border: 1px solid transparent;
    color: var(--mud-palette-text-secondary);
}
.hab-danger-btn--archive:hover {
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    color: var(--mud-palette-warning);
}
.hab-danger-btn--archive:focus-visible {
    outline-color: var(--mud-palette-warning) !important;
}
.hab-danger-btn--delete {
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 18%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 7%, transparent);
    color: var(--mud-palette-error);
    font-weight: 700;
}

/* -- Advanced collapsible -- subtle, no Mud panel chrome */
.hab-advanced {
    border: 1px dashed color-mix(in srgb, var(--mud-palette-divider) 70%, transparent);
    border-radius: var(--radius-xl);
    background: transparent;
    overflow: hidden;
    scroll-margin-top: 1.5rem;
    scroll-margin-bottom: 1.5rem;
}
.hab-advanced__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    outline: none;
}
.hab-advanced__trigger:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: -2px !important;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) !important;
}
.hab-advanced__chevron { display: inline-flex; }
.hab-advanced--open .hab-advanced__chevron { transform: rotate(180deg); }
.hab-advanced__body {
    padding: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-divider) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-background-gray) 18%, var(--mud-palette-surface));
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Stats segment for period selection - used in stats page and daily heatmap dialog */
.stats-segment {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.2rem;
    background: var(--mud-palette-background-gray);
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 60%, transparent);
    border-radius: var(--radius-pill);
}
.stats-segment__btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-weight: 650;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    outline: none;
}
.stats-segment__btn:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 2px !important;
}
.stats-segment__btn--active {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}
.stats-habit-ratio {
    flex-shrink: 0;
    font-family: var(--hab-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--hab-type-habit) 12%, transparent);
    color: var(--hab-type-habit);
    border: 1px solid color-mix(in srgb, var(--hab-type-habit) 24%, transparent);
    white-space: nowrap;
}
.stats-heatmap-legend-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--mud-palette-divider);
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: var(--mud-palette-background-gray);
    font-family: var(--hab-font-mono);
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}


/* Selects -- align with board */
.edit-habit-select,
.edit-daily-repeat-select,
.edit-daily-field-body .mud-select { width: 100%; }
.edit-daily-field-body .mud-select .mud-input-slot { font-size: 0.9rem; }

/* Board-aligned dense select color */
.mud-select .mud-input-root-outlined { background: var(--mud-palette-surface) !important; }

/* Responsive */
@media (max-width: 599.98px) {
    .hab-modal,
    .edit-daily-shell { max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
    .hab-modal__header, .edit-daily-header { padding: 0.9rem 0.9rem 0.75rem; }
    .hab-modal__body, .edit-daily-body { padding: 0.85rem 0.9rem 0.9rem; gap: 0.85rem; }
    .hab-segment__btn { min-height: 44px; font-size: 0.8rem; }
    .hab-modal__close,
    .edit-daily-header__close { width: 44px; height: 44px; }
    .counter-adjust__btn { width: 44px; height: 44px; }
    .edit-daily-checklist__row { min-height: 44px; }
    .edit-daily-checklist__remove.mud-icon-button {
        width: 44px !important;
        height: 44px !important;
    }
    .hab-modal__body .mud-button-root:not(.mud-icon-button) { min-height: 44px; }
    .hab-modal__footer .mud-button-root {
        min-height: 44px !important;
        padding-top: 0.65rem !important;
        padding-bottom: 0.65rem !important;
    }
    .hab-modal__footer--danger .hab-danger-btn {
        flex: 1 1 0;
        min-height: 48px;
    }
    .hab-advanced__trigger { min-height: 44px; }
    .edit-daily-checklist__add,
    .edit-daily-heatmap-btn { min-height: 44px; }
    .edit-daily-checklist__row .mud-checkbox { padding: 10px !important; }
    .habit-tag-picker__control { min-height: 44px; }
    .habit-tag-picker__option { min-height: 44px; }
    .habit-tag-picker__chips { overscroll-behavior-x: contain; }
    .habit-tag-chip__remove {
        width: 2rem !important;
        height: 2rem !important;
    }
    .habit-tag-chip__remove svg { width: 12px !important; height: 12px !important; }
    .day-stepper__btn.mud-icon-button {
        width: 44px !important;
        height: 44px !important;
    }
}

/* Bottom-sheet grabber. Phones only, signals swipe-down to close. */
.hab-modal__grabber {
    display: none;
}

@media (max-width: 599.98px) {
    .hab-modal__grabber {
        display: block;
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: var(--radius-pill);
        background: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
        z-index: 4;
        pointer-events: none;
    }
}
.day-stepper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-2);
    margin-top: var(--space-2);
    min-height: 2.5rem;
}
.day-stepper__btn.mud-icon-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    justify-self: center;
}
.day-stepper__date {
    min-width: 0;
    text-align: center;
    font-family: var(--hab-font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.25rem;
    line-height: 2.25rem;
}

/* Wide dialogs keep a stable height so tab and day switches do not jump. */
.hab-modal--wide .hab-modal__body {
    min-height: 22rem;
}
.hab-modal--wide .archived-list,
.hab-modal--wide .stats-day-timeline,
.hab-modal--wide .stats-day-empty,
.hab-modal--wide .dialog-inline-fallback {
    min-height: 14rem;
}

/* Shared primary action: single solid button for Save, Get started, Copy. */
.hab-modal__footer .hab-primary-btn.mud-button-root {
    min-height: 2.75rem !important;
    padding: 0.7rem 1.1rem !important;
    border-radius: var(--radius-lg) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    text-transform: none !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent) !important;
    width: 100%;
    transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, filter var(--dur-fast) ease, transform var(--dur-fast) ease !important;
}
.hab-modal__footer .hab-primary-btn.mud-button-root:hover {
    filter: brightness(1.04);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mud-palette-primary) 32%, transparent) !important;
}
.hab-modal__footer .hab-primary-btn.mud-button-root:active {
    filter: brightness(0.96);
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent) !important;
}

@media (pointer: coarse) {
    .hab-modal__title-input .mud-input-slot,
    .edit-daily-field-header .mud-input-slot,
    .edit-daily-field-body .mud-input-slot,
    .edit-daily-checklist__input input,
    .habit-tag-picker__search {
        font-size: 16px !important;
    }
}

@media (max-width: 399.98px) {
    .habit-track { flex-direction: column; }
    .habit-track__option { width: 100%; }
}

/* Inputs at 16px or iOS zooms on focus and breaks the sheet.
   Viewport-based so it also covers tablets with a mouse attached. */
@media (max-width: 959.98px) {
    .hab-modal input.mud-input-slot,
    .hab-modal textarea.mud-input-slot,
    .habit-tag-picker__search,
    .search-container input {
        font-size: 16px !important;
    }
}

/* Phones: editors rise from the bottom as sheets, inside thumb reach,
   with the footer clear of the home indicator. */
@media (max-width: 599.98px) {
    .mud-dialog-container {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .mud-dialog.edit-habit-dialog,
    .mud-dialog:has(.edit-habit-shell),
    .mud-dialog.edit-daily-dialog,
    .mud-dialog:has(.edit-daily-shell),
    .mud-dialog.hab-modal-dialog,
    .mud-dialog:has(.hab-modal),
    .mud-dialog.daily-yesterday-dialog,
    .mud-dialog:has(.daily-yesterday-shell) {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .hab-modal,
    .edit-daily-shell,
    .daily-yesterday-shell {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(92dvh - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: var(--hab-modal-radius) var(--hab-modal-radius) 0 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    .hab-modal__footer {
        padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px)) !important;
    }

    .hab-modal__footer--danger {
        padding: 0.85rem 0 0.15rem !important;
    }

    .hab-modal__footer > .mud-button-filled-primary {
        flex: 1 1 auto;
    }

    .habit-tag-picker__dropdown {
        top: calc(100% + 0.45rem);
        bottom: auto;
        max-height: min(30dvh, 16rem);
        overflow-y: auto;
    }

    .export-textarea textarea {
        max-height: 40dvh;
    }
}