/*
    Plan tab — design spec §19. The visual system reuses the warm-stone palette
    declared in timeline.css (:root tokens) so the page feels like a sibling of
    Today/Someday rather than its own skin. Amber is reserved for overload and
    "time passing" cues — every other accent is on the stone ramp.
*/

.plan-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 2.5rem;
    color: var(--ink-primary);
    font-family: 'DM Sans', system-ui, sans-serif;
}

.plan-loading {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

/* ——— Topbar ————————————————————————————————————————— */

.plan-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.plan-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink-primary);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.plan-topbar-title {
    flex: 1 1 auto;
    min-width: 0;
}

.plan-week-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0.75rem;
    background: #F5F1E8;
    border: 1px solid var(--stone-200);
    border-radius: 999px;
}

.plan-arrow-btn {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1px solid var(--stone-200);
    background: transparent;
    color: var(--ink-primary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.plan-arrow-btn:hover:not(:disabled) {
    background: var(--stone-100);
}

.plan-arrow-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.plan-week-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-primary);
    min-width: 10rem;
    text-align: center;
}

.plan-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plan-add-task-btn {
    text-transform: none !important;
    font-weight: 600 !important;
}

.plan-compressed-notice {
    margin: 0;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    background: var(--surface-muted);
    color: var(--ink-muted);
    font-size: 0.85rem;
}

.plan-compressed-notice-inline {
    margin-top: 0.75rem;
}

/* ——— Legend + week grid ——————————————————————————————— */

.plan-legend {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.plan-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.plan-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    display: inline-block;
}

.plan-dot-fixed { background: var(--stone-700); }
.plan-dot-float { background: var(--stone-300); }
.plan-dot-overload { background: var(--amber-400); }

.plan-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
}

.plan-day-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.4rem 0.85rem;
    background: #F5F1E8;
    border: 1px solid var(--stone-200);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 120ms, background 120ms, transform 80ms;
    color: var(--ink-primary);
    text-align: center;
    min-height: 6rem;
}

.plan-day-cell:hover:not(:disabled) {
    border-color: var(--stone-400);
    background: #EDE6D6;
}

.plan-day-cell:disabled {
    cursor: not-allowed;
}

.plan-day-cell.is-past {
    background: #F5F1E8;
    opacity: 0.45;
}

.plan-day-cell.is-today {
    border-color: var(--stone-500);
    background: #EDE6D6;
}

.plan-day-cell.is-today-selected {
    border-color: var(--stone-700);
    background: #EDE6D6;
    box-shadow: 0 0 0 2px var(--stone-300);
}

.plan-day-cell.is-overloaded {
    border-color: var(--amber-400);
    background: #FEF3E1;
}

.plan-day-today-badge {
    position: absolute;
    top: -0.55rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--stone-500);
    color: var(--surface-base);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    text-transform: uppercase;
}

.plan-day-name {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

.plan-day-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink-primary);
}

.plan-day-cell.is-overloaded .plan-day-number {
    color: var(--amber-600);
}

.plan-day-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem;
    min-height: 0.7rem;
}

.plan-day-count {
    font-size: 0.75rem;
    color: var(--ink-muted);
}

.plan-capacity-bar {
    position: relative;
    width: 100%;
    height: 4px;
    background: var(--stone-200);
    border-radius: 999px;
    overflow: hidden;
    display: block;
}

.plan-capacity-fill {
    display: block;
    height: 100%;
    background: var(--stone-400);
    border-radius: 999px;
    transition: width 180ms;
}

.plan-day-cell.is-overloaded .plan-capacity-fill {
    background: var(--amber-400);
}

.plan-week-grid.is-compressed .plan-day-cell {
    min-height: 5rem;
    gap: 0.25rem;
}

/* ——— Weekly summary ————————————————————————————————— */

.plan-week-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0.5rem 0 0.25rem;
}

.plan-week-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-week-summary-empty {
    color: var(--ink-muted);
    font-size: 0.9rem;
}

.plan-week-summary-item,
.plan-task-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #EDE6D6;
    border: 1px solid var(--stone-200);
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}

.plan-week-summary-item:hover,
.plan-task-row:hover {
    border-color: var(--stone-400);
}

.plan-week-summary-item.is-fixed,
.plan-task-row.is-fixed {
    background: #EDE6D6;
    border-color: var(--stone-300);
}

.plan-week-summary-item.is-float,
.plan-task-row.is-float {
    background: #EDE6D6;
    border-color: var(--stone-200);
}

.plan-week-summary-main,
.plan-task-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* Titles wrap rather than truncate, with a 3-line clamp as the backstop for a pasted
   paragraph. `overflow-wrap: anywhere` breaks a single unbreakable token (a pasted
   URL), which the clamp alone never would. Same treatment as the timeline cards. */
.plan-week-summary-title,
.plan-task-title {
    font-weight: 600;
    color: var(--ink-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.plan-week-summary-sub,
.plan-task-sub {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.plan-task-time-chip {
    background: var(--stone-200);
    color: var(--ink-primary);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    min-width: 3.25rem;
    text-align: center;
    flex: 0 0 auto;
}

.plan-size-pill {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--stone-100);
    color: var(--stone-600);
    letter-spacing: 0.03em;
}

.plan-size-pill.size-quick  { background: #EFE8D5; color: var(--stone-600); }
.plan-size-pill.size-short  { background: #EADFC9; color: var(--stone-700); }
.plan-size-pill.size-solid  { background: var(--stone-300); color: #2C2416; }
.plan-size-pill.size-deep   { background: var(--stone-400); color: #1F180E; }

/* ——— Far-future list ————————————————————————————————— */

.plan-far-future {
    border: 1px dashed var(--stone-300);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    background: var(--surface-elev);
}

.plan-far-future-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.plan-far-future-title {
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.plan-far-future-toggle {
    background: transparent;
    border: none;
    color: var(--stone-600);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
}

.plan-far-future-list {
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.plan-far-future-item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--stone-200);
    font-size: 0.9rem;
}

.plan-far-future-item:first-child {
    border-top: none;
}

.plan-far-future-item-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.plan-far-future-item-date {
    flex: 0 0 auto;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

/* ——— Day detail ———————————————————————————————— */

/* `minmax(0, 1fr)`, not `1fr`: a bare `1fr` track can't shrink below its content's
   min-content width, so one long task title widened the column past the screen and
   the whole page scrolled sideways on phones. */
.plan-daydetail-body {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.plan-daydetail-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plan-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--stone-600);
    cursor: pointer;
    flex-shrink: 0;
}

.plan-back-btn:hover {
    color: var(--ink-primary);
}

.plan-back-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.plan-daydetail-title {
    font-size: 1.35rem;
    font-weight: 700;
}

@media (min-width: 960px) {
    .plan-daydetail-body {
        grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr);
        align-items: start;
    }
}

.plan-daydetail-main {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.plan-daydetail-aside {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: sticky;
    top: 1rem;
}

/* ——— Capacity strip ————————————————————————————— */

.plan-capacity-strip {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: var(--surface-muted);
    border: 1px solid var(--stone-200);
}

.plan-capacity-strip.is-overloaded {
    background: #FAEFD7;
    border-color: var(--amber-400);
}

.plan-capacity-label {
    font-size: 0.8rem;
    color: var(--ink-muted);
    font-weight: 600;
}

.plan-capacity-value {
    font-size: 0.85rem;
    color: var(--ink-primary);
    font-weight: 600;
    text-align: right;
    justify-self: end;
}

.plan-capacity-bar-inline {
    grid-column: 1 / -1;
    width: 100%;
    height: 6px;
}

.plan-capacity-strip.is-overloaded .plan-capacity-fill {
    background: var(--amber-400);
}

/* ——— Overload banner ————————————————————————————— */

.plan-overload-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: #FAEFD7;
    border: 1px solid #E9D8A8;
}

.plan-overload-copy {
    font-size: 0.9rem;
    color: #6B5422;
}

.plan-overload-btn {
    flex: 0 0 auto;
    background: var(--surface-elev);
    border: 1px solid #D7BB7A;
    border-radius: 10px;
    padding: 0.45rem 0.85rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #6B5422;
    cursor: pointer;
}

.plan-overload-btn:hover {
    background: #F5E6C3;
}

/* ——— Empty day ———————————————————————————— */

.plan-empty-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--ink-muted);
}

.plan-empty-add {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 2px dashed var(--stone-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--stone-500);
    margin-bottom: 0.35rem;
}

.plan-empty-title {
    font-weight: 700;
    color: var(--ink-primary);
    margin: 0;
}

.plan-empty-hint {
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
}

/* ——— Task list ————————————————————————————— */

.plan-task-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-task-menu {
    flex: 0 0 auto;
}

/* Calendar-synced tasks: read-only badge in place of the actions menu. */
.plan-task-calendar-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--stone-100);
    color: var(--ink-muted);
    border: 1px solid var(--stone-200);
}

.plan-task-calendar-badge .mud-icon-root {
    width: 0.85rem;
    height: 0.85rem;
}

/* ——— Someday suggestions panel ————————————————————— */

.plan-someday-panel,
.plan-suggest-moves-panel,
.plan-daytimeline-panel {
    background: var(--surface-base);
    border: 1px solid var(--stone-200);
    border-radius: 12px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.plan-aside-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0;
}

.plan-someday-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-someday-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.6rem;
    border: 1px dashed var(--stone-300);
    border-radius: 10px;
}

.plan-someday-card-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.plan-someday-title {
    font-weight: 600;
    color: var(--ink-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.plan-someday-sub {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.plan-someday-add {
    background: transparent;
    border: 1px solid transparent;
    color: var(--stone-600);
    font-weight: 600;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
}

.plan-someday-add:hover {
    border-color: var(--stone-300);
    background: var(--stone-50);
}

.plan-someday-empty,
.plan-suggest-empty {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.85rem;
}

/* ——— Suggest moves panel ——————————————————————— */

.plan-suggest-moves-panel {
    background: #FAEFD7;
    border-color: #E9D8A8;
}

.plan-suggest-hint {
    margin: 0;
    font-size: 0.85rem;
    color: #6B5422;
}

.plan-suggest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-suggest-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: var(--surface-elev);
    border: 1px solid #E9D8A8;
    border-radius: 10px;
}

.plan-suggest-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.plan-suggest-title {
    font-weight: 600;
    color: var(--ink-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.plan-suggest-sub {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.plan-suggest-move-btn {
    flex: 0 0 auto;
    background: var(--stone-500);
    color: var(--surface-base);
    border: none;
    border-radius: 8px;
    padding: 0.35rem 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.plan-suggest-move-btn:hover {
    background: var(--stone-600);
}

/* ——— Day timeline preview ———————————————————— */

.plan-daytimeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.plan-daytimeline-block {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: #EDE6D6;
    border: 1px solid var(--stone-200);
    border-left: 4px solid var(--stone-300);
}

.plan-daytimeline-block.is-fixed {
    border-left-color: var(--stone-600);
    border-color: var(--stone-300);
}

.plan-daytimeline-block.is-float {
    border-left-color: var(--stone-300);
    background: #EDE6D6;
}

.plan-daytimeline-time {
    font-weight: 700;
    color: var(--ink-primary);
    min-width: 3.25rem;
    font-size: 0.85rem;
}

.plan-daytimeline-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.plan-daytimeline-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.plan-daytimeline-sub {
    font-size: 0.75rem;
    color: var(--ink-muted);
}

/* ——— Today callout ————————————————————————— */

.plan-today-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    background: #FAEFD7;
    border: 1px solid #E9D8A8;
}

.plan-today-callout-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plan-today-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--amber-400);
    flex: 0 0 auto;
}

.plan-today-copy {
    font-size: 0.9rem;
    color: #6B5422;
}

.plan-today-go-btn {
    background: var(--surface-elev);
    border: 1px solid #D7BB7A;
    border-radius: 10px;
    padding: 0.45rem 0.85rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #6B5422;
    cursor: pointer;
}

.plan-today-go-btn:hover {
    background: #F5E6C3;
}

.plan-today-glance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.plan-today-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.65rem;
    background: var(--surface-elev);
    border: 1px solid var(--stone-200);
    border-radius: 12px;
}

.plan-today-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink-primary);
    line-height: 1;
}

.plan-today-stat-value-amber {
    color: var(--amber-600);
}

.plan-today-stat-label {
    font-size: 0.75rem;
    color: var(--ink-muted);
    margin-top: 0.25rem;
    text-align: center;
}

/* ——— Reschedule picker ——————————————————————— */

.plan-reschedule-intro {
    margin: 0 0 0.85rem;
    color: var(--ink-muted);
}

.plan-reschedule-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 24rem;
    overflow-y: auto;
}

.plan-reschedule-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    background: var(--surface-elev);
    border: 1px solid var(--stone-200);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
}

.plan-reschedule-row:hover {
    border-color: var(--stone-400);
    background: var(--stone-50);
}

.plan-reschedule-row.is-overloaded {
    opacity: 0.7;
    background: #FAEFD7;
    border-color: #E9D8A8;
}

.plan-reschedule-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3rem;
    padding: 0.3rem 0.4rem;
    background: var(--stone-100);
    border-radius: 8px;
}

.plan-reschedule-day-name {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--ink-muted);
    text-transform: uppercase;
}

.plan-reschedule-day-number {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink-primary);
}

.plan-reschedule-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.plan-reschedule-date {
    font-weight: 600;
    color: var(--ink-primary);
}

.plan-reschedule-load {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.plan-reschedule-arrow {
    font-size: 1.1rem;
    color: var(--stone-400);
}

/* ——— Shared nav system (stone palette, used by web drawer + mobile tabs) ———
   These styles apply inside a MudDrawer, so we don't force a width, height,
   or sticky positioning — the drawer owns that. The rules here just skin the
   nav content with the stone palette. */

.hf-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 0.75rem;
    background: #EAE6DB;
    color: #7D6D5D;
    height: 100%;
    min-height: 100%;
    font-family: 'DM Sans', system-ui, sans-serif;
}

.hf-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hf-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    color: #7D6D5D;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.hf-sidebar-link .mud-icon-root {
    color: #7D6D5D;
}

.hf-sidebar-link-btn {
    font-size: 0.95rem;
}

.hf-sidebar-link:hover {
    background: rgba(220, 216, 205, 0.45);
}

/* Quick Add when the account cannot create anything — no subscription, or a lapsed payment past
   its grace period. `:disabled` only matches form controls, so the NavLink anchors beside it are
   untouched.

   The hover override is not redundant: CSS :hover still fires on a disabled button, so without it
   the row would light up under the cursor and read as clickable. */
.hf-sidebar-link:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.hf-sidebar-link:disabled:hover {
    background: transparent;
}

.hf-sidebar-link.active {
    background: #DCD8CD;
    color: #352B21;
    font-weight: 700;
}

.hf-sidebar-link.active .mud-icon-root {
    color: #352B21;
}

.hf-sidebar-section {
    margin-top: 1.5rem;
    padding: 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(125, 109, 93, 0.85);
}

/* MudDrawer overrides — match the cream page so the drawer feels part of the
   overall warm-stone surface instead of the default white panel. */
.mud-drawer.hf-drawer-nav,
.mud-drawer .hf-drawer-nav {
    background: #EAE6DB;
}

/* Account menu popover (Mud renders this in a portal, so style it globally).
   We target the popover root itself and any inner paper, override the Mud
   CSS variables so theme defaults can't re-color it, and match BOTH the
   semantic class on each item AND Mud's `.mud-list-item` baseline. */
.hf-account-menu-popover.mud-popover,
.hf-account-menu-popover.mud-paper,
.hf-account-menu-popover .mud-paper,
.hf-account-menu-popover {
    --mud-palette-surface: #F5F2E8;
    --mud-palette-background: #F5F2E8;
    --mud-palette-text-primary: #352B21;
    --mud-palette-text-secondary: #7D6D5D;
    --mud-palette-action-default: #7D6D5D;
    --mud-palette-action-default-hover: rgba(220, 216, 205, 0.45);

    background-color: #F5F2E8 !important;
    color: #352B21 !important;
    /* 200px, not the 176px this used to be. At 176 the content box is 128px wide
       (176 - 2 border - 24 padding - 14 icon - 8 icon gap) and "Account & security"
       measures 125.3px at 14px DM Sans — under three pixels of slack, which the real
       render ate: the label wrapped to two lines and, because the row is a fixed
       height, spilled out of it and over the divider below. 200px leaves ~27px. */
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    border: 1px solid rgba(125, 109, 93, 0.22) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 22px rgba(53, 43, 33, 0.12) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.hf-account-menu-popover .mud-list,
.hf-account-menu-popover .mud-menu-list {
    padding: 0 !important;
    background: transparent !important;
    color: #352B21 !important;
}

.hf-account-menu-popover .hf-account-menu-identity {
    padding: 9px 12px 8px;
    border-bottom: 1px solid rgba(125, 109, 93, 0.14);
    background: rgba(234, 230, 219, 0.4);
}

.hf-account-menu-popover .hf-account-menu-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #352B21;
}

.hf-account-menu-popover .hf-account-menu-tier {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: #7D6D5D;
}

.hf-account-menu-popover .hf-account-menu-item,
.hf-account-menu-popover .mud-list-item.hf-account-menu-item,
.hf-account-menu-popover .mud-menu-item {
    /* min-height, not a pinned height. A row that is exactly as tall as one line
       has nowhere to put a second one: it renders outside its own box, on top of
       whatever comes next. Letting the row grow makes a too-long label ugly
       instead of broken — and the popover's `overflow: hidden` means a pinned
       height would simply clip it. */
    min-height: 34px !important;
    height: auto !important;
    border-radius: 0 !important;
    padding: 7px 12px !important;
    color: #352B21 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    background: transparent !important;
}

.hf-account-menu-popover .hf-account-menu-item .mud-list-item-icon,
.hf-account-menu-popover .mud-list-item-icon {
    min-width: auto !important;
    margin-right: 8px !important;
    color: #7D6D5D !important;
}

.hf-account-menu-popover .hf-account-menu-item .mud-icon-root,
.hf-account-menu-popover .mud-list-item-icon .mud-icon-root,
.hf-account-menu-popover .mud-list-item .mud-icon-root {
    color: #7D6D5D !important;
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

.hf-account-menu-popover .mud-list-item-text,
.hf-account-menu-popover .mud-list-item-text *,
.hf-account-menu-popover .mud-typography,
.hf-account-menu-popover .mud-typography-body1,
.hf-account-menu-popover .mud-typography-body2 {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #352B21 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Belt to the width's braces: a label that outgrows the popover truncates on one
   line rather than wrapping. `min-width: 0` is the part that actually does the
   work — the text is a flex child, and without it a flex item refuses to shrink
   below its content and pushes the row wide instead of ellipsizing. */
.hf-account-menu-popover .mud-list-item-text {
    min-width: 0 !important;
    overflow: hidden !important;
}

.hf-account-menu-popover .mud-list-item-text,
.hf-account-menu-popover .mud-list-item-text * {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.hf-account-menu-popover .hf-account-menu-item:hover,
.hf-account-menu-popover .mud-list-item:hover,
.hf-account-menu-popover .mud-list-item.mud-selected-item {
    background: rgba(220, 216, 205, 0.55) !important;
}

.hf-account-menu-popover .hf-account-menu-divider,
.hf-account-menu-popover .mud-divider {
    margin: 0 !important;
    border-color: rgba(125, 109, 93, 0.18) !important;
}

.hf-account-menu-popover .hf-account-menu-footer {
    padding: 0 !important;
}

.hf-account-menu-popover .hf-account-logout-btn.mud-button {
    min-height: 46px !important;
    height: auto !important;
    border-radius: 0 !important;
    padding: 12px 12px !important;
    color: #C0492A !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    justify-content: flex-start !important;
    background: transparent !important;
}

.hf-account-menu-popover .hf-account-logout-btn.mud-button .mud-button-label {
    color: #C0492A !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    justify-content: flex-start !important;
}

.hf-account-menu-popover .hf-account-logout-btn.mud-button .mud-icon-root {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    color: #C0492A !important;
    margin-right: 8px !important;
}

.hf-account-menu-popover .hf-account-logout-btn.mud-button:hover {
    background: rgba(220, 216, 205, 0.55) !important;
}

/* ——— Mobile bottom tab bar ————————————————————— */

.hf-bottom-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--surface-base);
    border-top: 1px solid var(--stone-200);
    padding: 0.35rem env(safe-area-inset-right, 0) calc(0.35rem + env(safe-area-inset-bottom, 0)) env(safe-area-inset-left, 0);
    font-family: 'DM Sans', system-ui, sans-serif;
    box-shadow: 0 -4px 14px rgba(74, 62, 46, 0.08);
}

.hf-bottom-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.25rem 0.3rem;
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    min-height: 3.25rem;
}

.hf-bottom-tab svg,
.hf-bottom-tab .mud-icon-root {
    width: 1.4rem;
    height: 1.4rem;
}

.hf-bottom-tab.active {
    color: var(--ink-primary);
    font-weight: 700;
}

.hf-bottom-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 1.75rem;
    height: 2px;
    background: var(--stone-600);
    border-radius: 2px;
    margin-top: 0.2rem;
}

.hf-bottom-tab {
    position: relative;
}

/* Leave space at the bottom of the app body so the tab bar doesn't cover content. */
.hf-has-bottom-tabs main {
    padding-bottom: 5rem;
}