/* /Components/Account/AuthLayout.razor.rz.scp.css */
/* AuthLayout.razor.css — CSS prefix: auth-
   ONLY structural shell styles live here (elements that AuthLayout itself renders).
   Form-level .auth-* rules (auth-input, auth-btn etc.) live in app.css because
   Login/Register/Manage pages are child components — scoped CSS from here
   does NOT reach their elements. */

.auth-shell[b-283y3647cb] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--wbd-gray-surface);
    padding: var(--wbd-space-6) var(--wbd-space-4) var(--wbd-space-5);
}

.auth-shell-header[b-283y3647cb] {
    width: 100%;
    max-width: 400px;
    padding-bottom: var(--wbd-space-5);
}

.auth-brand[b-283y3647cb] {
    display: inline-flex;
    align-items: center;
    gap: var(--wbd-space-2);
    text-decoration: none;
    transition: opacity var(--wbd-transition);
}

    .auth-brand:hover[b-283y3647cb] {
        opacity: 0.8;
        text-decoration: none;
    }

.auth-brand-logo[b-283y3647cb] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--wbd-radius);
}

.auth-brand-name[b-283y3647cb] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--wbd-gray-ink);
    letter-spacing: -0.01em;
}

.auth-shell-main[b-283y3647cb] {
    width: 100%;
    max-width: 400px;
}

.auth-card[b-283y3647cb] {
    background: var(--wbd-white);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius-lg);
    padding: var(--wbd-space-6);
}

.auth-shell-footer[b-283y3647cb] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-3);
    padding-top: var(--wbd-space-5);
    font-size: 0.8rem;
    color: var(--wbd-gray-muted);
}

.auth-shell-link[b-283y3647cb] {
    color: var(--wbd-gray-muted);
    text-decoration: none;
}

    .auth-shell-link:hover[b-283y3647cb] {
        color: var(--wbd-gray-secondary);
    }
/* /Components/Account/Shared/StatusMessage.razor.rz.scp.css */
/* StatusMessage.razor.css — prefix: status-msg- */

.status-msg[b-sqprw6zrv5] {
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-3) var(--wbd-space-4);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: var(--wbd-space-4);
}

.status-msg--success[b-sqprw6zrv5] {
    background: var(--wbd-teal-light);
    border: 1px solid var(--wbd-teal-border);
    color: var(--wbd-teal-mid);
}

.status-msg--error[b-sqprw6zrv5] {
    background: #fff5f5;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
/* /Components/Features/Arc/ArcDetail.razor.rz.scp.css */
/* ArcDetail.razor.css — CSS prefix: arc-detail- / arc- */

.arc-detail[b-n2b8wnd9fl] {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-4);
}

/* ── Header ───────────────────────────────────────────────────────────── */

.arc-detail-header[b-n2b8wnd9fl] {
}

.arc-detail-title-row[b-n2b8wnd9fl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wbd-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--wbd-space-2);
}

.arc-detail-title[b-n2b8wnd9fl] {
    font-size: 1.375rem;
    font-weight: var(--wbd-font-weight-strong);
    color: var(--wbd-gray-ink);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

.arc-detail-status[b-n2b8wnd9fl] {
    font-size: 0.6875rem;
    font-weight: var(--wbd-font-weight-medium);
    padding: 3px 9px;
    border-radius: var(--wbd-radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 4px;
}

.arc-detail-status--active[b-n2b8wnd9fl] {
    background: var(--wbd-purple-light);
    color: var(--wbd-purple-deep);
}

.arc-detail-status--completed[b-n2b8wnd9fl] {
    background: rgba(5,150,105,0.08);
    color: var(--wbd-success);
}

.arc-detail-status--abandoned[b-n2b8wnd9fl] {
    background: var(--wbd-gray-light);
    color: var(--wbd-gray-muted);
}

.arc-detail-description[b-n2b8wnd9fl] {
    font-size: 0.9375rem;
    color: var(--wbd-gray-secondary);
    margin: 0;
    line-height: 1.6;
}

/* ── Progress — the emotional centre of the arc ───────────────────────── */

.arc-detail-progress[b-n2b8wnd9fl] {
    background: var(--wbd-gray-surface);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-4);
}

/* Shared progress bar (also used by list view; each file scopes its own) */
.arc-progress-bar[b-n2b8wnd9fl] {
    background: var(--wbd-gray-light);
    border-radius: var(--wbd-radius-pill);
    overflow: hidden;
}

.arc-progress-fill[b-n2b8wnd9fl] {
    height: 100%;
    background: linear-gradient(to right, var(--wbd-accent-400), var(--wbd-accent));
    border-radius: inherit;
    transition: width 0.4s ease;
}

/* Large variant used in detail */
.arc-progress-bar--large[b-n2b8wnd9fl] {
    height: 10px;
    margin-bottom: var(--wbd-space-3);
}

/* Stats row */
.arc-progress-stats[b-n2b8wnd9fl] {
    display: flex;
    align-items: baseline;
    gap: var(--wbd-space-3);
    flex-wrap: wrap;
}

/* The big percentage — should feel meaningful */
.arc-progress-pct[b-n2b8wnd9fl] {
    font-size: 2rem;
    font-weight: var(--wbd-font-weight-strong);
    color: var(--wbd-purple-mid);
    letter-spacing: -0.03em;
    line-height: 1;
}

.arc-progress-counts[b-n2b8wnd9fl] {
    font-size: 0.9375rem;
    color: var(--wbd-gray-secondary);
}

.arc-progress-end[b-n2b8wnd9fl] {
    font-size: 0.875rem;
    color: var(--wbd-gray-muted);
}

/* ── Linked commitments list ──────────────────────────────────────────── */

.arc-detail-commitments[b-n2b8wnd9fl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.arc-detail-empty[b-n2b8wnd9fl] {
    font-size: 0.9rem;
    color: var(--wbd-gray-muted);
    font-style: italic;
    padding: var(--wbd-space-3);
    background: var(--wbd-gray-surface);
    border-radius: var(--wbd-radius);
    border: var(--wbd-border);
}

/* Commitment row — timeline-like */
.arc-commitment[b-n2b8wnd9fl] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-3);
    padding: var(--wbd-space-2) var(--wbd-space-3);
    border-radius: var(--wbd-radius);
    border: var(--wbd-border);
    background: var(--wbd-gray-surface);
}

.arc-commitment--completed[b-n2b8wnd9fl] {
    background: rgba(5, 150, 105, 0.04);
}

.arc-commitment--notcompleted[b-n2b8wnd9fl] {
    opacity: 0.8;
}

.arc-commitment-date[b-n2b8wnd9fl] {
    font-size: 0.75rem;
    color: var(--wbd-gray-muted);
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 44px;
}

.arc-commitment-title[b-n2b8wnd9fl] {
    font-size: 0.9rem;
    color: var(--wbd-gray-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arc-commitment--completed .arc-commitment-title[b-n2b8wnd9fl] {
    color: var(--wbd-gray-ink);
}

.arc-commitment-outcome[b-n2b8wnd9fl] {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.arc-commitment--completed .arc-commitment-outcome[b-n2b8wnd9fl] {
    color: var(--wbd-success);
}

.arc-commitment--notcompleted .arc-commitment-outcome[b-n2b8wnd9fl] {
    color: var(--wbd-gray-muted);
}

.arc-commitment-unlink[b-n2b8wnd9fl] {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--wbd-gray-muted);
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    font-family: var(--wbd-font);
    transition: color var(--wbd-transition);
    flex-shrink: 0;
}

    .arc-commitment-unlink:hover[b-n2b8wnd9fl] {
        color: #dc2626;
    }

/* ── State messages ───────────────────────────────────────────────────── */

.arc-detail-loading[b-n2b8wnd9fl] {
    color: var(--wbd-gray-muted);
    padding: var(--wbd-space-5);
    text-align: center;
    font-style: italic;
}

.arc-detail-error-msg[b-n2b8wnd9fl] {
    font-size: 0.875rem;
    color: #dc2626;
    margin: 0;
}

/* ── Arc actions ──────────────────────────────────────────────────────── */

.arc-detail-actions[b-n2b8wnd9fl] {
    display: flex;
    gap: var(--wbd-space-2);
    padding-top: var(--wbd-space-4);
    border-top: var(--wbd-border);
    flex-wrap: wrap;
}

.arc-action-btn[b-n2b8wnd9fl] {
    padding: var(--wbd-space-2) var(--wbd-space-4);
    border-radius: var(--wbd-radius);
    border: 1px solid rgba(17, 24, 39, 0.1);
    background: var(--wbd-white);
    font-size: 0.875rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: background var(--wbd-transition), color var(--wbd-transition), border-color var(--wbd-transition);
}

.arc-action-btn--complete[b-n2b8wnd9fl] {
    color: var(--wbd-success);
    border-color: rgba(5, 150, 105, 0.2);
}

    .arc-action-btn--complete:hover[b-n2b8wnd9fl] {
        background: rgba(5, 150, 105, 0.06);
    }

/* Abandon is destructive — only reveal red on hover, never shout it */
.arc-action-btn--abandon[b-n2b8wnd9fl] {
    color: var(--wbd-gray-muted);
}

    .arc-action-btn--abandon:hover[b-n2b8wnd9fl] {
        color: #dc2626;
        border-color: rgba(220,38,38,0.18);
    }

/* Inline confirm row */
.arc-confirm[b-n2b8wnd9fl] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--wbd-gray-secondary);
}

.arc-confirm-yes[b-n2b8wnd9fl] {
    padding: 5px var(--wbd-space-3);
    background: var(--wbd-success);
    color: var(--wbd-white);
    border: none;
    border-radius: var(--wbd-radius);
    font-size: 0.875rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: opacity var(--wbd-transition);
}

    .arc-confirm-yes:hover[b-n2b8wnd9fl] {
        opacity: 0.88;
    }

.arc-confirm-yes--danger[b-n2b8wnd9fl] {
    background: #dc2626;
}

.arc-confirm-no[b-n2b8wnd9fl] {
    padding: 5px var(--wbd-space-3);
    background: transparent;
    color: var(--wbd-gray-muted);
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--wbd-radius);
    font-size: 0.875rem;
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: color var(--wbd-transition);
}

    .arc-confirm-no:hover[b-n2b8wnd9fl] {
        color: var(--wbd-gray-secondary);
    }

/* End date inline editor */
.arc-enddate-edit-row[b-n2b8wnd9fl] {
    display: inline-flex;
    align-items: center;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
}

.arc-enddate-input[b-n2b8wnd9fl] {
    font-size: 0.8125rem;
    font-family: var(--wbd-font);
    padding: 2px var(--wbd-space-2);
    border: 1px solid var(--wbd-gray-border);
    border-radius: var(--wbd-radius);
    background: var(--wbd-white);
    color: var(--wbd-gray-ink);
}

.arc-enddate-btn[b-n2b8wnd9fl] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--wbd-font);
    font-size: 0.8125rem;
    border-radius: var(--wbd-radius);
    padding: 2px 6px;
    transition: background var(--wbd-transition), color var(--wbd-transition);
}

.arc-enddate-btn--edit[b-n2b8wnd9fl] {
    color: var(--wbd-gray-muted);
}

    .arc-enddate-btn--edit:hover[b-n2b8wnd9fl] {
        color: var(--wbd-purple-mid);
        background: var(--wbd-purple-light);
    }

.arc-enddate-btn--add[b-n2b8wnd9fl] {
    color: var(--wbd-gray-muted);
    font-size: 0.8125rem;
}

    .arc-enddate-btn--add:hover[b-n2b8wnd9fl] {
        color: var(--wbd-purple-mid);
    }

.arc-enddate-btn--save[b-n2b8wnd9fl] {
    color: var(--wbd-success);
    font-weight: var(--wbd-font-weight-medium);
}

    .arc-enddate-btn--save:hover[b-n2b8wnd9fl] {
        background: rgba(5, 150, 105, 0.08);
    }

.arc-enddate-btn--cancel[b-n2b8wnd9fl] {
    color: var(--wbd-gray-muted);
}

    .arc-enddate-btn--cancel:hover[b-n2b8wnd9fl] {
        color: var(--wbd-gray-ink);
        background: var(--wbd-gray-100);
    }

.arc-enddate-btn--clear[b-n2b8wnd9fl] {
    color: var(--wbd-gray-muted);
    text-decoration: underline;
    font-size: 0.75rem;
}

    .arc-enddate-btn--clear:hover[b-n2b8wnd9fl] {
        color: var(--wbd-gray-ink);
    }
/* /Components/Features/Arc/ArcList.razor.rz.scp.css */
/* ArcList.razor.css — CSS prefix: arc- */

/* State messages */
.arc-list-loading[b-scqniww6wr],
.arc-list-empty[b-scqniww6wr] {
    font-size: 0.9375rem;
    color: var(--wbd-gray-muted);
    padding: var(--wbd-space-5);
    text-align: center;
    font-style: italic;
}

.arc-list-error[b-scqniww6wr] {
    font-size: 0.9375rem;
    color: #dc2626;
    padding: var(--wbd-space-3);
}

/* ── New arc button ───────────────────────────────────────────────────── */

.arc-new-btn[b-scqniww6wr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wbd-space-2);
    width: 100%;
    padding: var(--wbd-space-3) var(--wbd-space-4);
    background: var(--wbd-purple-deep);
    color: var(--wbd-white);
    border: none;
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    cursor: pointer;
    margin-bottom: var(--wbd-space-4);
    transition: background var(--wbd-transition), box-shadow var(--wbd-transition);
}

    .arc-new-btn:hover[b-scqniww6wr] {
        background: var(--wbd-purple-mid);
        box-shadow: var(--wbd-shadow-sm);
    }

/* ── Arc list ─────────────────────────────────────────────────────────── */

.arc-list[b-scqniww6wr] {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-2);
}

/* Arc row — clickable card */
.arc-list-item[b-scqniww6wr] {
    background: var(--wbd-card);
    border: var(--wbd-border);
    border-left: 3px solid var(--wbd-gray-border);
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-3) var(--wbd-space-4);
    cursor: pointer;
    transition: border-left-color var(--wbd-transition), box-shadow var(--wbd-transition);
}

    .arc-list-item:hover[b-scqniww6wr] {
        border-left-color: var(--wbd-purple-mid);
        box-shadow: var(--wbd-shadow-sm);
    }

.arc-list-item--active[b-scqniww6wr] {
    border-left-color: var(--wbd-purple-border);
}

.arc-list-item--completed[b-scqniww6wr] {
    border-left-color: rgba(5, 150, 105, 0.25);
    opacity: 0.85;
}

.arc-list-item--abandoned[b-scqniww6wr] {
    border-left-color: var(--wbd-gray-border);
    opacity: 0.6;
}

/* Item header: title left, status pill right */
.arc-list-item-header[b-scqniww6wr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wbd-space-2);
}

.arc-list-item-title[b-scqniww6wr] {
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-ink);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status pill */
.arc-list-item-status[b-scqniww6wr] {
    font-size: 0.6875rem;
    font-weight: var(--wbd-font-weight-medium);
    padding: 2px 7px;
    border-radius: var(--wbd-radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.arc-list-item-status--active[b-scqniww6wr] {
    background: var(--wbd-purple-light);
    color: var(--wbd-purple-deep);
}

.arc-list-item-status--completed[b-scqniww6wr] {
    background: rgba(5,150,105,0.08);
    color: var(--wbd-success);
}

.arc-list-item-status--abandoned[b-scqniww6wr] {
    background: var(--wbd-gray-light);
    color: var(--wbd-gray-muted);
}

/* Description — one truncated line */
.arc-list-item-desc[b-scqniww6wr] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
    margin: var(--wbd-space-1) 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Progress row */
.arc-list-item-progress[b-scqniww6wr] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
    margin-top: var(--wbd-space-2);
}

.arc-progress-bar[b-scqniww6wr] {
    flex: 1;
    height: 4px;
    background: var(--wbd-gray-light);
    border-radius: var(--wbd-radius-pill);
    overflow: hidden;
}

.arc-progress-fill[b-scqniww6wr] {
    height: 100%;
    background: linear-gradient(to right, var(--wbd-accent-400), var(--wbd-accent));
    border-radius: inherit;
    transition: width 0.3s ease;
}

.arc-progress-label[b-scqniww6wr] {
    font-size: 0.75rem;
    color: var(--wbd-gray-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Create arc form ──────────────────────────────────────────────────── */

.arc-create-form[b-scqniww6wr] {
    background: var(--wbd-gray-surface);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-4);
    margin-bottom: var(--wbd-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-3);
}

.arc-create-title[b-scqniww6wr],
.arc-create-desc[b-scqniww6wr] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--wbd-space-2) var(--wbd-space-3);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-family: var(--wbd-font);
    color: var(--wbd-gray-ink);
    background: var(--wbd-white);
    outline: none;
    transition: border-color var(--wbd-transition), box-shadow var(--wbd-transition);
}

    .arc-create-title:focus[b-scqniww6wr],
    .arc-create-desc:focus[b-scqniww6wr] {
        border-color: var(--wbd-purple-mid);
        box-shadow: var(--wbd-focus-ring);
    }

    .arc-create-title[b-scqniww6wr]::placeholder,
    .arc-create-desc[b-scqniww6wr]::placeholder {
        color: var(--wbd-gray-subtle);
    }

.arc-create-desc[b-scqniww6wr] {
    resize: vertical;
}

/* Template note — shown when a template was chosen */
.arc-create-template-note[b-scqniww6wr] {
    font-size: 0.8125rem;
    color: var(--wbd-purple-deep);
    background: var(--wbd-purple-light);
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-2) var(--wbd-space-3);
    margin: 0;
}

.arc-create-actions[b-scqniww6wr] {
    display: flex;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
}

.arc-create-submit[b-scqniww6wr] {
    padding: var(--wbd-space-2) var(--wbd-space-4);
    background: var(--wbd-purple-deep);
    color: var(--wbd-white);
    border: none;
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: background var(--wbd-transition);
}

    .arc-create-submit:hover:not(:disabled)[b-scqniww6wr] {
        background: var(--wbd-purple-mid);
    }

    .arc-create-submit:disabled[b-scqniww6wr] {
        opacity: 0.38;
        cursor: not-allowed;
    }

.arc-create-cancel[b-scqniww6wr] {
    padding: var(--wbd-space-2) var(--wbd-space-3);
    background: transparent;
    color: var(--wbd-gray-muted);
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: color var(--wbd-transition);
}

    .arc-create-cancel:hover[b-scqniww6wr] {
        color: var(--wbd-gray-secondary);
    }
/* ── End date row in creation form ───────────────────────────────────── */

.arc-create-enddate-row[b-scqniww6wr] {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-1);
    margin-top: var(--wbd-space-2);
}

.arc-create-enddate-label[b-scqniww6wr] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
    font-weight: var(--wbd-font-weight-medium);
}

.arc-create-enddate-optional[b-scqniww6wr] {
    font-weight: var(--wbd-font-weight-regular);
    color: var(--wbd-gray-subtle);
}

.arc-create-enddate-controls[b-scqniww6wr] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
}

.arc-create-enddate-input[b-scqniww6wr] {
    font-size: 0.875rem;
    font-family: var(--wbd-font);
    padding: 6px var(--wbd-space-2);
    border: 1px solid var(--wbd-gray-border);
    border-radius: var(--wbd-radius);
    background: var(--wbd-white);
    color: var(--wbd-gray-ink);
    flex: 1;
    max-width: 180px;
}

.arc-create-enddate-clear[b-scqniww6wr] {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--wbd-gray-muted);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    border-radius: var(--wbd-radius);
    font-family: var(--wbd-font);
    transition: color var(--wbd-transition);
}

    .arc-create-enddate-clear:hover[b-scqniww6wr] {
        color: var(--wbd-gray-ink);
    }
/* /Components/Features/Arc/ArcProgressBar.razor.rz.scp.css */
/* -----------------------------------------------------------------------
   ArcProgressBar.razor.css  —  arc-today- prefix
   Carousel strip for active arcs in the Today header.
   ----------------------------------------------------------------------- */

/* Carousel wrapper — arrow | scrollable area | arrow */
.arc-today-carousel[b-t7k5hxk203] {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

/* Prev / next arrow buttons */
.arc-today-arrow[b-t7k5hxk203] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--wbd-gray-muted);
    padding: 0;
    border-radius: var(--wbd-radius);
    transition: color var(--wbd-transition), background var(--wbd-transition);
}

    .arc-today-arrow:hover[b-t7k5hxk203] {
        color: var(--wbd-purple-mid);
        background: var(--wbd-purple-light);
    }

    .arc-today-arrow svg[b-t7k5hxk203] {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }

/* Scrollable row of cards */
.arc-today-section[b-t7k5hxk203] {
    display: flex;
    flex-direction: row;
    gap: var(--wbd-space-2);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1 1 0;
    min-width: 0;
}

    .arc-today-section[b-t7k5hxk203]::-webkit-scrollbar {
        display: none;
    }

/* Individual arc card */
.arc-today-item[b-t7k5hxk203] {
    flex: 0 0 160px;
    scroll-snap-align: start;
    background: var(--wbd-card);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-2) var(--wbd-space-3);
    cursor: pointer;
    transition: box-shadow var(--wbd-transition), border-color var(--wbd-transition);
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-1);
}

    .arc-today-item:hover[b-t7k5hxk203] {
        box-shadow: var(--wbd-shadow-sm);
        border-color: var(--wbd-purple-border);
    }

/* Header row — title + percentage */
.arc-today-header[b-t7k5hxk203] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wbd-space-1);
}

.arc-today-title[b-t7k5hxk203] {
    font-size: 0.75rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 0;
    min-width: 0;
}

.arc-today-pct[b-t7k5hxk203] {
    font-size: 0.75rem;
    font-weight: var(--wbd-font-weight-strong);
    color: var(--wbd-purple-mid);
    flex-shrink: 0;
}

/* Thin progress bar */
.arc-progress-bar[b-t7k5hxk203] {
    height: 3px;
    background: var(--wbd-gray-100);
    border-radius: var(--wbd-radius-pill);
    overflow: hidden;
}

.arc-progress-fill[b-t7k5hxk203] {
    height: 100%;
    background: var(--wbd-purple-mid);
    border-radius: var(--wbd-radius-pill);
    transition: width 0.3s ease;
    min-width: 2px;
}

/* Meta row — counts + days left */
.arc-today-meta[b-t7k5hxk203] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wbd-space-1);
}

.arc-today-counts[b-t7k5hxk203],
.arc-today-days-left[b-t7k5hxk203] {
    font-size: 0.6875rem;
    color: var(--wbd-gray-muted);
    line-height: 1.2;
}

.arc-today-days-left[b-t7k5hxk203] {
    flex-shrink: 0;
}
/* /Components/Features/Arc/ArcTemplateSelector.razor.rz.scp.css */
/* ArcTemplateSelector.razor.css — CSS prefix: arc-selector- */

.arc-selector[b-wraatai2se] {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-5);
}

.arc-selector-loading[b-wraatai2se] {
    text-align: center;
    color: var(--wbd-gray-muted);
    padding: var(--wbd-space-5);
    font-style: italic;
}

/* "Start from scratch" — distinct, at the top, inviting */
.arc-selector-scratch[b-wraatai2se] {
    margin-bottom: var(--wbd-space-1);
}

/* All template cards share this base */
.arc-selector-card[b-wraatai2se] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--wbd-space-3) var(--wbd-space-4);
    background: var(--wbd-card);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: var(--wbd-font);
    transition: border-color var(--wbd-transition), box-shadow var(--wbd-transition);
}

    .arc-selector-card:hover[b-wraatai2se] {
        border-color: var(--wbd-purple-border);
        box-shadow: var(--wbd-shadow-sm);
    }

/* "Start from scratch" variant — dashed purple border, inviting */
.arc-selector-card--scratch[b-wraatai2se] {
    border-style: dashed;
    border-color: var(--wbd-purple-border);
    background: var(--wbd-purple-light);
}

    .arc-selector-card--scratch:hover[b-wraatai2se] {
        border-color: var(--wbd-purple-mid);
    }

.arc-selector-card-title[b-wraatai2se] {
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-ink);
    display: block;
}

.arc-selector-card--scratch .arc-selector-card-title[b-wraatai2se] {
    color: var(--wbd-purple-deep);
}

.arc-selector-card-desc[b-wraatai2se] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
    display: block;
}

.arc-selector-card-weeks[b-wraatai2se] {
    font-size: 0.75rem;
    color: var(--wbd-gray-subtle);
    display: block;
    margin-top: 2px;
}

/* Category group */
.arc-selector-group[b-wraatai2se] {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-2);
}

.arc-selector-group-label[b-wraatai2se] {
    font-size: 0.6875rem;
    font-weight: var(--wbd-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wbd-gray-muted);
    margin: 0 0 var(--wbd-space-1);
}

/* Template card grid — 2 columns within the sidebar */
.arc-selector-cards[b-wraatai2se] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wbd-space-2);
}

@media (max-width: 500px) {
    .arc-selector-cards[b-wraatai2se] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Features/Commitment/CommitmentCard.razor.rz.scp.css */
/* CommitmentCard.razor.css — CSS prefix: commitment-card- */

.commitment-card[b-ndor29d9qh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wbd-space-3);
    padding: var(--wbd-space-3) var(--wbd-space-4);
    border-radius: var(--wbd-radius);
    background: var(--wbd-white);
    border: var(--wbd-border);
    border-left: 3px solid transparent;
    transition: box-shadow var(--wbd-transition);
    flex-wrap: wrap;
}

    .commitment-card:hover[b-ndor29d9qh] {
        box-shadow: var(--wbd-shadow-sm);
    }

/* State — left border is the primary state signal */
.commitment-card--planned[b-ndor29d9qh] {
    border-left-color: var(--wbd-gray-border);
}

.commitment-card--committed[b-ndor29d9qh] {
    border-left-color: var(--wbd-purple-mid);
    background: linear-gradient( to right, rgba(124, 58, 237, 0.025), var(--wbd-white) );
}

.commitment-card--resolved[b-ndor29d9qh] {
    border-left-color: var(--wbd-success);
    opacity: 0.88;
}

/* Body */
.commitment-card-body[b-ndor29d9qh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.commitment-card-title[b-ndor29d9qh] {
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-ink);
    margin: 0;
    line-height: 1.4;
}

/* Resolved title: muted but readable — the record is still there */
.commitment-card--resolved .commitment-card-title[b-ndor29d9qh] {
    color: var(--wbd-gray-muted);
    font-weight: var(--wbd-font-weight-regular);
}

/* Same-day badge */
.commitment-card-badge[b-ndor29d9qh] {
    display: inline-block;
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: var(--wbd-radius-pill);
    background: rgba(17, 24, 39, 0.04);
    color: var(--wbd-gray-muted);
    letter-spacing: 0.01em;
    align-self: flex-start;
}

.commitment-card-badge--sameday[b-ndor29d9qh] {
    background: rgba(5, 150, 105, 0.08);
    color: var(--wbd-success);
}

/* Outcome */
.commitment-card-outcome[b-ndor29d9qh] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.commitment-card-outcome--completed[b-ndor29d9qh] {
    color: var(--wbd-success);
}

/* NotCompleted = gray, never red — the system is firm, not punitive */
.commitment-card-outcome--notcompleted[b-ndor29d9qh] {
    color: var(--wbd-gray-muted);
}

.commitment-card-note[b-ndor29d9qh] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
    margin: 4px 0 0;
    font-style: italic;
}

/* Actions */
.commitment-card-actions[b-ndor29d9qh] {
    display: flex;
    gap: var(--wbd-space-2);
    align-items: center;
    flex-shrink: 0;
    align-self: center;
}

.commitment-card-btn[b-ndor29d9qh] {
    padding: 6px 14px;
    border-radius: var(--wbd-radius);
    border: none;
    font-size: 0.875rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: background var(--wbd-transition), box-shadow var(--wbd-transition);
    white-space: nowrap;
}

    .commitment-card-btn[disabled][b-ndor29d9qh] {
        opacity: 0.4;
        cursor: default;
    }

/* Commit = primary purple — this is the key action */
.commitment-card-btn--commit[b-ndor29d9qh] {
    background: var(--wbd-purple-deep);
    color: var(--wbd-white);
}

    .commitment-card-btn--commit:hover:not([disabled])[b-ndor29d9qh] {
        background: var(--wbd-purple-mid);
        box-shadow: var(--wbd-shadow-sm);
    }

/* Resolve = green — completion is the goal */
.commitment-card-btn--resolve[b-ndor29d9qh] {
    background: var(--wbd-success);
    color: var(--wbd-white);
}

    .commitment-card-btn--resolve:hover:not([disabled])[b-ndor29d9qh] {
        background: #047857;
        box-shadow: var(--wbd-shadow-sm);
    }

/* Inline error */
.commitment-card-error[b-ndor29d9qh] {
    font-size: 0.8125rem;
    color: #dc2626;
    margin: var(--wbd-space-2) 0 0;
}
/* ---- Edit / delete additions ---- */

/* Inline title edit input */
.commitment-card-input[b-ndor29d9qh] {
    width: 100%;
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    color: var(--wbd-gray-ink);
    border: 1.5px solid var(--wbd-purple-mid);
    border-radius: var(--wbd-radius);
    padding: 4px 8px;
    background: var(--wbd-white);
    outline: none;
    line-height: 1.4;
}

    .commitment-card-input:focus[b-ndor29d9qh] {
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
    }

/* Icon-only action buttons (pencil / trash) */
.commitment-card-icon-btn[b-ndor29d9qh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--wbd-radius);
    border: none;
    background: transparent;
    color: var(--wbd-gray-muted);
    cursor: pointer;
    transition: color var(--wbd-transition), background var(--wbd-transition);
    flex-shrink: 0;
}

    .commitment-card-icon-btn svg[b-ndor29d9qh] {
        width: 15px;
        height: 15px;
    }

    .commitment-card-icon-btn:hover:not([disabled])[b-ndor29d9qh] {
        color: var(--wbd-gray-ink);
        background: rgba(17, 24, 39, 0.06);
    }

    .commitment-card-icon-btn[disabled][b-ndor29d9qh] {
        opacity: 0.35;
        cursor: default;
    }

/* Danger (trash) variant */
.commitment-card-icon-btn--danger:hover:not([disabled])[b-ndor29d9qh] {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.07);
}

/* Inline delete confirmation text */
.commitment-card-confirm-text[b-ndor29d9qh] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-secondary);
    white-space: nowrap;
}

/* Save / cancel / danger text buttons */
.commitment-card-btn--save[b-ndor29d9qh] {
    background: var(--wbd-purple-deep);
    color: var(--wbd-white);
}

    .commitment-card-btn--save:hover:not([disabled])[b-ndor29d9qh] {
        background: var(--wbd-purple-mid);
    }

.commitment-card-btn--cancel[b-ndor29d9qh] {
    background: transparent;
    color: var(--wbd-gray-muted);
    border: 1px solid var(--wbd-gray-border);
}

    .commitment-card-btn--cancel:hover:not([disabled])[b-ndor29d9qh] {
        color: var(--wbd-gray-ink);
        background: rgba(17, 24, 39, 0.04);
    }

.commitment-card-btn--danger[b-ndor29d9qh] {
    background: transparent;
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

    .commitment-card-btn--danger:hover:not([disabled])[b-ndor29d9qh] {
        background: rgba(220, 38, 38, 0.07);
    }
/* ---- Arc picker additions ---- */

/* Arc toggle button — highlighted when picker is open */
.commitment-card-arc-toggle--active[b-ndor29d9qh] {
    color: var(--wbd-purple-deep);
    background: var(--wbd-purple-wash);
}

/* Arc picker panel — full-width row below card body (flex-wrap) */
.commitment-card-arc-picker[b-ndor29d9qh] {
    width: 100%;
    flex-basis: 100%;
    border-top: var(--wbd-border);
    padding: var(--wbd-space-3) var(--wbd-space-4);
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
    background: var(--wbd-gray-surface);
    border-radius: 0 0 var(--wbd-radius) var(--wbd-radius);
}

.arc-picker-loading[b-ndor29d9qh],
.arc-picker-empty[b-ndor29d9qh] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
    flex: 1;
}

    .arc-picker-empty a[b-ndor29d9qh] {
        color: var(--wbd-purple-mid);
        text-decoration: none;
    }

        .arc-picker-empty a:hover[b-ndor29d9qh] {
            text-decoration: underline;
        }

.arc-picker-list[b-ndor29d9qh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wbd-space-2);
    flex: 1;
}

.arc-picker-item[b-ndor29d9qh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--wbd-purple-border);
    border-radius: var(--wbd-radius-pill);
    background: var(--wbd-white);
    color: var(--wbd-purple-deep);
    font-size: 0.8125rem;
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: background var(--wbd-transition), color var(--wbd-transition);
}

    .arc-picker-item:hover:not([disabled])[b-ndor29d9qh] {
        background: var(--wbd-purple-deep);
        color: var(--wbd-white);
        border-color: var(--wbd-purple-deep);
    }

    .arc-picker-item[disabled][b-ndor29d9qh] {
        opacity: 0.4;
        cursor: default;
    }

.arc-picker-close[b-ndor29d9qh] {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--wbd-gray-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--wbd-radius);
    line-height: 1;
    transition: color var(--wbd-transition);
    flex-shrink: 0;
    margin-left: auto;
}

    .arc-picker-close:hover[b-ndor29d9qh] {
        color: var(--wbd-gray-ink);
    }

/* Arc link success indicator */
.commitment-card-arc-success[b-ndor29d9qh] {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--wbd-success);
    font-weight: var(--wbd-font-weight-medium);
    margin-top: 2px;
}
/* ---- Category dot ---- */
.commitment-card-title-row[b-ndor29d9qh] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.commitment-card-cat[b-ndor29d9qh] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.commitment-card-cat--health[b-ndor29d9qh] {
    background: var(--wbd-cat-health);
}

.commitment-card-cat--focus[b-ndor29d9qh] {
    background: var(--wbd-cat-focus);
}

.commitment-card-cat--growth[b-ndor29d9qh] {
    background: var(--wbd-cat-growth);
}

.commitment-card-cat--creative[b-ndor29d9qh] {
    background: var(--wbd-cat-creative);
}

.commitment-card-cat--social[b-ndor29d9qh] {
    background: var(--wbd-cat-social);
}

.commitment-card-cat--finance[b-ndor29d9qh] {
    background: var(--wbd-cat-finance);
}

/* Fade dot on resolved cards — still visible, just quieter */
.commitment-card--resolved .commitment-card-cat[b-ndor29d9qh] {
    opacity: 0.4;
}
/* ---- Category dot button (clickable in open days) ---- */

/* The button wraps the dot — larger touch target than the 9px span */
.commitment-card-cat-btn[b-ndor29d9qh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: border-color var(--wbd-transition), background var(--wbd-transition);
    position: relative;
}

    /* The actual coloured dot — via ::after pseudo-element */
    .commitment-card-cat-btn[b-ndor29d9qh]::after {
        content: '';
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--wbd-gray-subtle);
    }

    .commitment-card-cat-btn:hover[b-ndor29d9qh] {
        border-color: rgba(17, 24, 39, 0.15);
        background: rgba(17, 24, 39, 0.04);
    }

.commitment-card-cat-btn--none[b-ndor29d9qh]::after {
    background: var(--wbd-gray-subtle);
}

.commitment-card-cat-btn--health[b-ndor29d9qh]::after {
    background: var(--wbd-cat-health);
}

.commitment-card-cat-btn--focus[b-ndor29d9qh]::after {
    background: var(--wbd-cat-focus);
}

.commitment-card-cat-btn--growth[b-ndor29d9qh]::after {
    background: var(--wbd-cat-growth);
}

.commitment-card-cat-btn--creative[b-ndor29d9qh]::after {
    background: var(--wbd-cat-creative);
}

.commitment-card-cat-btn--social[b-ndor29d9qh]::after {
    background: var(--wbd-cat-social);
}

.commitment-card-cat-btn--finance[b-ndor29d9qh]::after {
    background: var(--wbd-cat-finance);
}

/* Resolved: keep the static span, drop the button */
.commitment-card--resolved .commitment-card-cat[b-ndor29d9qh] {
    opacity: 0.4;
}

/* ---- Category picker panel ---- */
.commitment-card-cat-picker[b-ndor29d9qh] {
    width: 100%;
    flex-basis: 100%;
    border-top: var(--wbd-border);
    padding: var(--wbd-space-2) var(--wbd-space-4);
    display: flex;
    align-items: center;
    gap: var(--wbd-space-3);
    background: var(--wbd-gray-surface);
    border-radius: 0 0 var(--wbd-radius) var(--wbd-radius);
}

.commitment-card-cat-picker-label[b-ndor29d9qh] {
    font-size: 0.75rem;
    color: var(--wbd-gray-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.commitment-card-cat-picker-dots[b-ndor29d9qh] {
    display: flex;
    gap: var(--wbd-space-2);
    align-items: center;
    flex: 1;
}

/* The dot buttons inside the picker */
.commitment-card-cat-dot-btn[b-ndor29d9qh] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform var(--wbd-transition), border-color var(--wbd-transition);
    flex-shrink: 0;
}

    .commitment-card-cat-dot-btn:hover:not([disabled])[b-ndor29d9qh] {
        transform: scale(1.15);
    }

    .commitment-card-cat-dot-btn.is-selected[b-ndor29d9qh] {
        border-color: var(--wbd-gray-ink);
        transform: scale(1.1);
    }

    .commitment-card-cat-dot-btn[disabled][b-ndor29d9qh] {
        opacity: 0.4;
        cursor: default;
    }

.commitment-card-cat-dot-btn--none[b-ndor29d9qh] {
    background: var(--wbd-gray-subtle);
}

.commitment-card-cat-dot-btn--health[b-ndor29d9qh] {
    background: var(--wbd-cat-health);
}

.commitment-card-cat-dot-btn--focus[b-ndor29d9qh] {
    background: var(--wbd-cat-focus);
}

.commitment-card-cat-dot-btn--growth[b-ndor29d9qh] {
    background: var(--wbd-cat-growth);
}

.commitment-card-cat-dot-btn--creative[b-ndor29d9qh] {
    background: var(--wbd-cat-creative);
}

.commitment-card-cat-dot-btn--social[b-ndor29d9qh] {
    background: var(--wbd-cat-social);
}

.commitment-card-cat-dot-btn--finance[b-ndor29d9qh] {
    background: var(--wbd-cat-finance);
}

.commitment-card-cat-picker-close[b-ndor29d9qh] {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--wbd-gray-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--wbd-radius);
    line-height: 1;
    transition: color var(--wbd-transition);
    flex-shrink: 0;
    margin-left: auto;
}

    .commitment-card-cat-picker-close:hover[b-ndor29d9qh] {
        color: var(--wbd-gray-ink);
    }
/* Correction button — muted secondary; appears on resolved cards during open day */
.commitment-card-btn--correction[b-ndor29d9qh] {
    background: transparent;
    color: var(--wbd-gray-muted);
    border: 1px solid rgba(17, 24, 39, 0.1);
    font-size: 0.8125rem;
    padding: 4px 10px;
}

    .commitment-card-btn--correction:hover:not([disabled])[b-ndor29d9qh] {
        color: var(--wbd-purple-mid);
        border-color: var(--wbd-purple-border);
        background: var(--wbd-purple-light);
    }
/* /Components/Features/Commitment/CommitmentForm.razor.rz.scp.css */
/* CommitmentForm.razor.css — CSS prefix: commitment-form- / commitment-copy- */

.commitment-form[b-uzse1046ob] {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-3);
    padding-top: var(--wbd-space-4);
    border-top: var(--wbd-border);
}

/* The most consequential input in the app — give it room to breathe */
.commitment-form-input[b-uzse1046ob] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--wbd-space-3) var(--wbd-space-4);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: var(--wbd-radius);
    font-size: 1rem;
    font-family: var(--wbd-font);
    color: var(--wbd-gray-ink);
    background: var(--wbd-white);
    outline: none;
    transition: border-color var(--wbd-transition), box-shadow var(--wbd-transition);
}

    .commitment-form-input:focus[b-uzse1046ob] {
        border-color: var(--wbd-purple-mid);
        box-shadow: var(--wbd-focus-ring);
    }

    .commitment-form-input[b-uzse1046ob]::placeholder {
        color: var(--wbd-gray-subtle);
    }

/* Action row */
.commitment-form-actions[b-uzse1046ob] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
}

/* Primary submit — filled, deep purple */
.commitment-form-submit[b-uzse1046ob] {
    padding: var(--wbd-space-2) var(--wbd-space-5);
    background: var(--wbd-purple-deep);
    color: var(--wbd-white);
    border: none;
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: background var(--wbd-transition), box-shadow var(--wbd-transition);
}

    .commitment-form-submit:hover:not(:disabled)[b-uzse1046ob] {
        background: var(--wbd-purple-mid);
        box-shadow: var(--wbd-shadow-sm);
    }

    .commitment-form-submit:disabled[b-uzse1046ob] {
        opacity: 0.38;
        cursor: not-allowed;
    }

/* Icon toggle buttons (recurrence ↻, copy ⎘) */
.commitment-form-icon-btn[b-uzse1046ob] {
    width: 34px;
    height: 34px;
    border-radius: var(--wbd-radius);
    border: 1px solid rgba(17, 24, 39, 0.08);
    background: var(--wbd-white);
    color: var(--wbd-gray-muted);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    transition: border-color var(--wbd-transition), background var(--wbd-transition), color var(--wbd-transition);
}

    .commitment-form-icon-btn:hover[b-uzse1046ob] {
        border-color: var(--wbd-purple-border);
        color: var(--wbd-purple-mid);
    }

    .commitment-form-icon-btn.is-active[b-uzse1046ob] {
        background: var(--wbd-purple-light);
        border-color: var(--wbd-purple-border);
        color: var(--wbd-purple-mid);
    }

/* Copy row */
.commitment-copy-row[b-uzse1046ob] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
    padding: var(--wbd-space-3);
    background: var(--wbd-gray-surface);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius);
}

.commitment-copy-label[b-uzse1046ob] {
    font-size: 0.875rem;
    color: var(--wbd-gray-secondary);
    white-space: nowrap;
}

.commitment-copy-date[b-uzse1046ob] {
    padding: var(--wbd-space-1) var(--wbd-space-2);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-family: var(--wbd-font);
    color: var(--wbd-gray-ink);
    background: var(--wbd-white);
}

.commitment-copy-confirm[b-uzse1046ob] {
    padding: var(--wbd-space-2) var(--wbd-space-4);
    background: var(--wbd-purple-deep);
    color: var(--wbd-white);
    border: none;
    border-radius: var(--wbd-radius);
    font-size: 0.875rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: background var(--wbd-transition);
}

    .commitment-copy-confirm:hover:not(:disabled)[b-uzse1046ob] {
        background: var(--wbd-purple-mid);
    }

    .commitment-copy-confirm:disabled[b-uzse1046ob] {
        opacity: 0.38;
        cursor: not-allowed;
    }

/* Error */
.commitment-form-error[b-uzse1046ob] {
    font-size: 0.8125rem;
    color: #dc2626;
    margin: 0;
}
/* ---- Category picker ---- */
.commitment-form-cat-picker[b-uzse1046ob] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto; /* pushes picker to right of action row */
}

.commitment-form-cat-dot[b-uzse1046ob] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.12s ease, border-color 0.12s ease;
    background-clip: padding-box;
}

    .commitment-form-cat-dot:hover[b-uzse1046ob] {
        transform: scale(1.3);
    }

    .commitment-form-cat-dot.is-selected[b-uzse1046ob] {
        border-color: var(--wbd-gray-ink);
        transform: scale(1.15);
    }

    .commitment-form-cat-dot[disabled][b-uzse1046ob] {
        opacity: 0.4;
        cursor: default;
    }

.commitment-form-cat-dot--health[b-uzse1046ob] {
    background: var(--wbd-cat-health);
}

.commitment-form-cat-dot--focus[b-uzse1046ob] {
    background: var(--wbd-cat-focus);
}

.commitment-form-cat-dot--growth[b-uzse1046ob] {
    background: var(--wbd-cat-growth);
}

.commitment-form-cat-dot--creative[b-uzse1046ob] {
    background: var(--wbd-cat-creative);
}

.commitment-form-cat-dot--social[b-uzse1046ob] {
    background: var(--wbd-cat-social);
}

.commitment-form-cat-dot--finance[b-uzse1046ob] {
    background: var(--wbd-cat-finance);
}
/* ---- Arc picker ---- */

.commitment-form-arc-picker[b-uzse1046ob] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
    padding: var(--wbd-space-2) var(--wbd-space-3);
    background: var(--wbd-gray-surface);
    border-radius: var(--wbd-radius);
    border: var(--wbd-border);
}

.commitment-form-arc-label[b-uzse1046ob] {
    font-size: 0.8125rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-secondary);
    white-space: nowrap;
}

.commitment-form-arc-loading[b-uzse1046ob],
.commitment-form-arc-empty[b-uzse1046ob] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
}

.commitment-form-arc-opts[b-uzse1046ob] {
    display: flex;
    gap: var(--wbd-space-1);
    flex-wrap: wrap;
}

.commitment-form-arc-opt[b-uzse1046ob] {
    padding: 3px var(--wbd-space-3);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius-pill);
    background: var(--wbd-white);
    font-size: 0.8125rem;
    font-family: var(--wbd-font);
    color: var(--wbd-gray-secondary);
    cursor: pointer;
    transition: background var(--wbd-transition), border-color var(--wbd-transition);
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .commitment-form-arc-opt:hover[b-uzse1046ob] {
        border-color: var(--wbd-purple-border);
        background: var(--wbd-purple-light);
    }

    .commitment-form-arc-opt.is-selected[b-uzse1046ob] {
        background: var(--wbd-purple-light);
        border-color: var(--wbd-purple-mid);
        color: var(--wbd-purple-mid);
        font-weight: var(--wbd-font-weight-medium);
    }

/* Selected arc badge shown below actions */
.commitment-form-arc-selected[b-uzse1046ob] {
    display: inline-flex;
    align-items: center;
    gap: var(--wbd-space-1);
    padding: 2px var(--wbd-space-2);
    background: var(--wbd-purple-light);
    border: 1px solid var(--wbd-purple-border);
    border-radius: var(--wbd-radius-pill);
    font-size: 0.8125rem;
    color: var(--wbd-purple-mid);
}

.commitment-form-arc-clear[b-uzse1046ob] {
    background: none;
    border: none;
    padding: 0 2px;
    font-size: 0.875rem;
    color: var(--wbd-gray-muted);
    cursor: pointer;
    line-height: 1;
    font-family: var(--wbd-font);
}

    .commitment-form-arc-clear:hover[b-uzse1046ob] {
        color: var(--wbd-gray-ink);
    }
/* /Components/Features/Commitment/CommitmentList.razor.rz.scp.css */
/* CommitmentList.razor.css — CSS prefix: commitment- */

.commitment-list[b-2otoa4fvvj] {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-2);
}

/* ── Empty state — welcoming, not alarming ────────────────────────────── */

.commitment-list-empty[b-2otoa4fvvj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--wbd-space-6) var(--wbd-space-4) var(--wbd-space-5);
    text-align: center;
}

.commitment-list-empty-icon[b-2otoa4fvvj] {
    color: var(--wbd-gray-border);
    margin-bottom: var(--wbd-space-3);
    flex-shrink: 0;
}

.commitment-list-empty-heading[b-2otoa4fvvj] {
    font-size: 1rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-muted);
    margin: 0 0 var(--wbd-space-1);
}

.commitment-list-empty-sub[b-2otoa4fvvj] {
    font-size: 0.875rem;
    color: var(--wbd-gray-subtle);
    margin: 0;
}
/* /Components/Features/Commitment/ResolveCommitment.razor.rz.scp.css */
/* ResolveCommitment.razor.css — CSS prefix: commitment-resolve-
   This is the most important interaction moment in the app.
   The design should feel deliberate — not a dropdown, a ceremony. */

.commitment-resolve[b-nlnwxft6nj] {
    margin-top: var(--wbd-space-3);
    padding: var(--wbd-space-4);
    background: var(--wbd-gray-surface);
    border-radius: var(--wbd-radius);
    border: var(--wbd-border);
    /* Faint purple top edge signals this is a purposeful step */
    border-top: 2px solid var(--wbd-purple-border);
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-3);
}

.commitment-resolve-prompt[b-nlnwxft6nj] {
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-ink);
    margin: 0;
}

/* Two-choice resolution — clear, unambiguous, no small print */
.commitment-resolve-outcomes[b-nlnwxft6nj] {
    display: flex;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
}

.commitment-resolve-btn[b-nlnwxft6nj] {
    flex: 1 1 0;
    min-width: 120px;
    padding: var(--wbd-space-3) var(--wbd-space-4);
    border-radius: var(--wbd-radius);
    border: 1px solid rgba(17, 24, 39, 0.1);
    background: var(--wbd-white);
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: background var(--wbd-transition), border-color var(--wbd-transition), color var(--wbd-transition);
    color: var(--wbd-gray-secondary);
    text-align: center;
}

/* Done — green on hover and selection */
.commitment-resolve-btn--complete:hover[b-nlnwxft6nj] {
    border-color: var(--wbd-success);
    color: var(--wbd-success);
    background: rgba(5, 150, 105, 0.04);
}

.commitment-resolve-btn--complete.is-selected[b-nlnwxft6nj] {
    background: var(--wbd-success);
    border-color: var(--wbd-success);
    color: var(--wbd-white);
}

/* Not Done — gray, never red. The system is firm, not punitive. */
.commitment-resolve-btn--notcomplete:hover[b-nlnwxft6nj] {
    border-color: rgba(17, 24, 39, 0.18);
    color: var(--wbd-gray-ink);
}

.commitment-resolve-btn--notcomplete.is-selected[b-nlnwxft6nj] {
    background: var(--wbd-gray-light);
    border-color: rgba(17, 24, 39, 0.15);
    color: var(--wbd-gray-ink);
}

/* Category dropdown — only shown for NotCompleted */
.commitment-resolve-category[b-nlnwxft6nj] {
    width: 100%;
    padding: var(--wbd-space-2) var(--wbd-space-3);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-family: var(--wbd-font);
    color: var(--wbd-gray-secondary);
    background: var(--wbd-white);
}

/* Optional note textarea */
.commitment-resolve-note[b-nlnwxft6nj] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--wbd-space-2) var(--wbd-space-3);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-family: var(--wbd-font);
    color: var(--wbd-gray-secondary);
    background: var(--wbd-white);
    resize: vertical;
    min-height: 64px;
    outline: none;
    transition: border-color var(--wbd-transition), box-shadow var(--wbd-transition);
}

    .commitment-resolve-note:focus[b-nlnwxft6nj] {
        border-color: var(--wbd-purple-mid);
        box-shadow: var(--wbd-focus-ring);
    }

    .commitment-resolve-note[b-nlnwxft6nj]::placeholder {
        color: var(--wbd-gray-subtle);
    }

/* Confirm / cancel */
.commitment-resolve-actions[b-nlnwxft6nj] {
    display: flex;
    gap: var(--wbd-space-2);
    align-items: center;
    flex-wrap: wrap;
}

.commitment-resolve-confirm[b-nlnwxft6nj] {
    padding: var(--wbd-space-2) var(--wbd-space-5);
    background: var(--wbd-purple-deep);
    color: var(--wbd-white);
    border: none;
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: background var(--wbd-transition), box-shadow var(--wbd-transition);
}

    .commitment-resolve-confirm:hover:not(:disabled)[b-nlnwxft6nj] {
        background: var(--wbd-purple-mid);
        box-shadow: var(--wbd-shadow-sm);
    }

    .commitment-resolve-confirm:disabled[b-nlnwxft6nj] {
        opacity: 0.38;
        cursor: not-allowed;
    }

.commitment-resolve-cancel[b-nlnwxft6nj] {
    padding: var(--wbd-space-2) var(--wbd-space-3);
    background: transparent;
    color: var(--wbd-gray-muted);
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: color var(--wbd-transition), border-color var(--wbd-transition);
}

    .commitment-resolve-cancel:hover[b-nlnwxft6nj] {
        color: var(--wbd-gray-secondary);
        border-color: rgba(17, 24, 39, 0.14);
    }

/* Inline error */
.commitment-resolve-error[b-nlnwxft6nj] {
    font-size: 0.8125rem;
    color: #dc2626;
    margin: 0;
}
/* /Components/Features/Day/DayHeader.razor.rz.scp.css */
/* DayHeader.razor.css — CSS prefix: day- */

.day-header[b-mpzp5m6bvx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wbd-space-3);
    width: 100%;
    flex-wrap: wrap;
}

.day-header-date[b-mpzp5m6bvx] {
    display: flex;
    gap: var(--wbd-space-3);
    align-items: baseline;
    min-width: 0;
    flex: 1 1 auto;
}

/* The date is the anchor of each day — it should feel authoritative */
.day-header-label[b-mpzp5m6bvx] {
    font-size: 1.1875rem;
    font-weight: var(--wbd-font-weight-strong);
    color: var(--wbd-gray-ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Status pill */
.day-header-status[b-mpzp5m6bvx] {
    font-size: 0.72rem;
    font-weight: var(--wbd-font-weight-medium);
    padding: 3px 10px;
    border-radius: var(--wbd-radius-pill);
    display: inline-block;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.day-header-status--open[b-mpzp5m6bvx] {
    background: var(--wbd-purple-light);
    color: var(--wbd-purple-deep);
}

.day-header-status--closed[b-mpzp5m6bvx] {
    background: var(--wbd-gray-light);
    color: var(--wbd-gray-muted);
}

/* Exception trigger — deliberately understated */
.day-header-exception-btn[b-mpzp5m6bvx] {
    background: transparent;
    border: 1px solid rgba(17, 24, 39, 0.08);
    padding: 5px var(--wbd-space-3);
    border-radius: var(--wbd-radius);
    cursor: pointer;
    color: var(--wbd-gray-muted);
    font-size: 0.8125rem;
    font-family: var(--wbd-font);
    transition: color var(--wbd-transition), border-color var(--wbd-transition);
    flex-shrink: 0;
}

    .day-header-exception-btn:hover[b-mpzp5m6bvx] {
        color: var(--wbd-amber-mid);
        border-color: var(--wbd-amber-border);
    }

/* Exception form — amber framing signals "accounting for reality", not failure */
.day-exception-form[b-mpzp5m6bvx] {
    margin-top: var(--wbd-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-2);
    width: 100%;
    padding: var(--wbd-space-4);
    background: var(--wbd-amber-light);
    border: 1px solid var(--wbd-amber-border);
    border-radius: var(--wbd-radius);
}

.day-exception-select[b-mpzp5m6bvx],
.day-exception-note[b-mpzp5m6bvx] {
    padding: var(--wbd-space-2) var(--wbd-space-3);
    border-radius: var(--wbd-radius);
    border: 1px solid rgba(17, 24, 39, 0.1);
    font-size: 0.9375rem;
    font-family: var(--wbd-font);
    color: var(--wbd-gray-secondary);
    background: var(--wbd-white);
    box-sizing: border-box;
    width: 100%;
}

.day-exception-actions[b-mpzp5m6bvx] {
    display: flex;
    gap: var(--wbd-space-2);
    align-items: center;
}

.day-exception-confirm[b-mpzp5m6bvx] {
    padding: var(--wbd-space-2) var(--wbd-space-4);
    background: var(--wbd-amber-mid);
    color: var(--wbd-white);
    border: none;
    border-radius: var(--wbd-radius);
    font-size: 0.875rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: opacity var(--wbd-transition);
}

    .day-exception-confirm:hover[b-mpzp5m6bvx] {
        opacity: 0.88;
    }

.day-exception-cancel[b-mpzp5m6bvx] {
    padding: var(--wbd-space-2) var(--wbd-space-3);
    background: transparent;
    color: var(--wbd-gray-muted);
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--wbd-radius);
    font-size: 0.875rem;
    font-family: var(--wbd-font);
    cursor: pointer;
    transition: color var(--wbd-transition);
}

    .day-exception-cancel:hover[b-mpzp5m6bvx] {
        color: var(--wbd-gray-secondary);
    }

.day-exception-error[b-mpzp5m6bvx] {
    font-size: 0.8125rem;
    color: #dc2626;
    margin: 0;
}
/* /Components/Features/History/CommitmentHistoryItem.razor.rz.scp.css */
/* -----------------------------------------------------------------------
   CommitmentHistoryItem.razor.css
   CSS prefix: history-item-
   MUST live here — Blazor CSS isolation scopes each file to the component
   that owns it. Styles in HistoryDay.razor.css do not reach these elements.
   ----------------------------------------------------------------------- */

/* ── Item card ────────────────────────────────────────────────────────── */

.history-item[b-2mayuciwek] {
    display: flex;
    align-items: flex-start;
    gap: var(--wbd-space-2);
    padding: var(--wbd-space-2) var(--wbd-space-3);
    background: var(--wbd-gray-surface);
    border-top: var(--wbd-border);
    border-right: var(--wbd-border);
    border-bottom: var(--wbd-border);
    border-left: 3px solid var(--wbd-gray-border);
    border-radius: var(--wbd-radius);
}

.history-item--completed[b-2mayuciwek] {
    border-left-color: var(--wbd-success);
}

.history-item--notcompleted[b-2mayuciwek] {
    border-left-color: var(--wbd-gray-subtle);
}

.history-item--auto[b-2mayuciwek] {
    border-left-color: var(--wbd-gray-border);
}

/* ── Outcome icon ─────────────────────────────────────────────────────── */

.history-item-outcome[b-2mayuciwek] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
}

/* ✓ Checkmark — green, stroke only */
.history-item-outcome--completed[b-2mayuciwek] {
    color: var(--wbd-success);
}

/* — Dash — muted gray, not red (firm, not punitive) */
.history-item-outcome--notcompleted[b-2mayuciwek] {
    color: var(--wbd-gray-subtle);
}

/* · Dot — very faint, system action not user decision */
.history-item-outcome--auto[b-2mayuciwek] {
    color: var(--wbd-gray-border);
}

/* ── Item body ────────────────────────────────────────────────────────── */

.history-item-body[b-2mayuciwek] {
    flex: 1;
    min-width: 0;
}

.history-item-row[b-2mayuciwek] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
}

/* ── WillBeDone name — bold headline ─────────────────────────────────── */

.history-item-title[b-2mayuciwek] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wbd-gray-ink);
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.history-item--notcompleted .history-item-title[b-2mayuciwek] {
    font-weight: 400;
    color: var(--wbd-gray-muted);
}

.history-item--auto .history-item-title[b-2mayuciwek] {
    font-weight: 400;
    color: var(--wbd-gray-subtle);
    font-style: italic;
}

/* ── Badges ───────────────────────────────────────────────────────────── */

.history-item-badges[b-2mayuciwek] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-1);
    flex-shrink: 0;
}

.history-item-auto-badge[b-2mayuciwek] {
    font-size: 0.625rem;
    padding: 1px 6px;
    border-radius: var(--wbd-radius-pill);
    background: var(--wbd-gray-100);
    color: var(--wbd-gray-muted);
    letter-spacing: 0.03em;
}

.history-item-chip[b-2mayuciwek] {
    font-size: 0.6875rem;
    padding: 2px 7px;
    border-radius: var(--wbd-radius-pill);
    font-weight: var(--wbd-font-weight-medium);
    background: var(--wbd-gray-100);
    color: var(--wbd-gray-muted);
}

/* ── Correction button — 28×28 ghost icon ────────────────────────────── */

.history-item-correct-btn[b-2mayuciwek] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--wbd-gray-subtle);
    cursor: pointer;
    border-radius: var(--wbd-radius);
    flex-shrink: 0;
    transition: color var(--wbd-transition), background var(--wbd-transition), border-color var(--wbd-transition);
}

    .history-item-correct-btn:hover[b-2mayuciwek] {
        color: var(--wbd-purple-mid);
        background: var(--wbd-purple-light);
        border-color: var(--wbd-purple-border);
    }

/* ── Resolution note ─────────────────────────────────────────────────── */

.history-item-note[b-2mayuciwek] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
    font-style: italic;
    margin: var(--wbd-space-1) 0 0;
    padding-left: var(--wbd-space-2);
    border-left: 2px solid var(--wbd-gray-100);
    line-height: 1.5;
}

/* ── Inline correction panel ──────────────────────────────────────────── */

.history-item-correction-panel[b-2mayuciwek] {
    margin-top: var(--wbd-space-2);
    padding: var(--wbd-space-3);
    background: var(--wbd-purple-light);
    border: 1px solid var(--wbd-purple-border);
    border-radius: var(--wbd-radius);
}
/* /Components/Features/History/HistoryDay.razor.rz.scp.css */
/* -----------------------------------------------------------------------
   HistoryDay.razor.css
   CSS prefix: history-day-
   Contains ONLY styles for elements rendered directly by HistoryDay.razor.
   CommitmentHistoryItem element styles live in CommitmentHistoryItem.razor.css.
   ----------------------------------------------------------------------- */

/* ── Day card ─────────────────────────────────────────────────────────── */

.history-day[b-wenwbe3hrf] {
    background: var(--wbd-card);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius-lg);
    padding: var(--wbd-space-4);
    margin-bottom: var(--wbd-space-3);
    border-left: 3px solid transparent;
}

.history-day--committed[b-wenwbe3hrf] {
    border-left-color: var(--wbd-purple-border);
}

.history-day--exception[b-wenwbe3hrf] {
    border-left-color: var(--wbd-amber-border);
    background: var(--wbd-amber-light);
}

.history-day--sameday-only[b-wenwbe3hrf] {
    border-left-color: var(--wbd-gray-border);
}

.history-day--no-record[b-wenwbe3hrf] {
    background: var(--wbd-gray-surface);
    border-left-color: transparent;
}

/* ── Day header ───────────────────────────────────────────────────────── */

.history-day-header[b-wenwbe3hrf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wbd-space-3);
    margin-bottom: var(--wbd-space-3);
    flex-wrap: wrap;
}

.history-day-header-left[b-wenwbe3hrf] {
    display: flex;
    align-items: baseline;
    gap: var(--wbd-space-2);
    min-width: 0;
}

.history-day-weekday[b-wenwbe3hrf] {
    font-size: 0.6875rem;
    font-weight: var(--wbd-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--wbd-purple-mid);
    flex-shrink: 0;
}

.history-day-date[b-wenwbe3hrf] {
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-ink);
    letter-spacing: -0.01em;
}

.history-day-header-right[b-wenwbe3hrf] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
    flex-shrink: 0;
}

/* Score badge — e.g. "3 / 4" */
.history-day-score[b-wenwbe3hrf] {
    font-size: 0.8125rem;
    font-weight: var(--wbd-font-weight-medium);
    padding: 2px 10px;
    border-radius: var(--wbd-radius-pill);
    font-variant-numeric: tabular-nums;
}

.history-day-score--perfect[b-wenwbe3hrf] {
    background: rgba(5, 150, 105, 0.10);
    color: var(--wbd-success);
}

.history-day-score--partial[b-wenwbe3hrf] {
    background: var(--wbd-purple-light);
    color: var(--wbd-purple-mid);
}

/* Exception badge */
.history-day-exception-badge[b-wenwbe3hrf] {
    font-size: 0.6875rem;
    font-weight: var(--wbd-font-weight-medium);
    padding: 3px 9px;
    border-radius: var(--wbd-radius-pill);
    background: var(--wbd-amber-light);
    color: var(--wbd-amber-mid);
    border: 1px solid var(--wbd-amber-border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.history-day-exception-note[b-wenwbe3hrf] {
    font-size: 0.875rem;
    color: var(--wbd-amber-mid);
    font-style: italic;
    margin: 0 0 var(--wbd-space-3);
}

/* ── State placeholder messages ───────────────────────────────────────── */

.history-day-no-record[b-wenwbe3hrf],
.history-day-sameday-only[b-wenwbe3hrf] {
    font-size: 0.875rem;
    color: var(--wbd-gray-muted);
    font-style: italic;
    margin: 0;
}

/* ── Section labels ───────────────────────────────────────────────────── */

.history-day-section[b-wenwbe3hrf] {
    margin-top: var(--wbd-space-2);
}

.history-day-section-label[b-wenwbe3hrf] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--wbd-space-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .history-day-section-label[b-wenwbe3hrf]::before {
        content: '';
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

.history-day-section-label--committed[b-wenwbe3hrf] {
    color: var(--wbd-purple-mid);
}

    .history-day-section-label--committed[b-wenwbe3hrf]::before {
        background: var(--wbd-purple-mid);
    }

.history-day-section-label--sameday[b-wenwbe3hrf] {
    color: var(--wbd-teal-mid);
}

    .history-day-section-label--sameday[b-wenwbe3hrf]::before {
        background: var(--wbd-teal-mid);
    }

/* Same-day section — distinct tinted panel */
.history-day-section--sameday[b-wenwbe3hrf] {
    margin-top: var(--wbd-space-4);
    padding: var(--wbd-space-3);
    background: var(--wbd-teal-light);
    border: 1px solid rgba(13, 148, 136, 0.15);
    border-radius: var(--wbd-radius);
}

/* ── Commitment list ──────────────────────────────────────────────────── */
/*
   The <ul> is rendered here in HistoryDay, so gap between items is set here.
   The <li> items are rendered by CommitmentHistoryItem — see its .razor.css.
*/

.history-day-list[b-wenwbe3hrf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-2);
}
/* /Components/Features/Recurrence/RecurrenceForm.razor.rz.scp.css */
/* -----------------------------------------------------------------------
   RecurrenceForm.razor.css
   CSS prefix: recurrence-
   ----------------------------------------------------------------------- */

.recurrence-form[b-atr5mkvct5] {
    background: var(--wbd-gray-surface);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius-lg);
    padding: var(--wbd-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-3);
    margin-top: var(--wbd-space-2);
}

.recurrence-row[b-atr5mkvct5] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
}

.recurrence-label[b-atr5mkvct5] {
    font-size: 0.875rem;
    color: var(--wbd-gray-secondary);
    white-space: nowrap;
}

.recurrence-interval[b-atr5mkvct5] {
    width: 64px;
    padding: var(--wbd-space-1) var(--wbd-space-2);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-family: var(--wbd-font);
    background: var(--wbd-white);
    text-align: center;
}

.recurrence-frequency[b-atr5mkvct5],
.recurrence-end-select[b-atr5mkvct5],
.recurrence-monthly-select[b-atr5mkvct5] {
    padding: var(--wbd-space-1) var(--wbd-space-2);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-family: var(--wbd-font);
    background: var(--wbd-white);
}

/* Day-of-week picker */
.recurrence-days[b-atr5mkvct5] {
    display: flex;
    gap: var(--wbd-space-1);
    flex-wrap: wrap;
}

.recurrence-day-btn[b-atr5mkvct5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--wbd-gray-border);
    background: var(--wbd-white);
    font-size: 0.75rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-secondary);
    cursor: pointer;
    transition: all var(--wbd-transition);
}

.recurrence-day-btn.is-selected[b-atr5mkvct5] {
    background: var(--wbd-purple-deep);
    border-color: var(--wbd-purple-deep);
    color: var(--wbd-white);
}

.recurrence-day-btn:hover:not(.is-selected)[b-atr5mkvct5] {
    border-color: var(--wbd-purple-border);
    color: var(--wbd-purple-mid);
}

/* Monthly */
.recurrence-monthly[b-atr5mkvct5] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
}

/* End condition */
.recurrence-end[b-atr5mkvct5] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
}

.recurrence-date-input[b-atr5mkvct5] {
    padding: var(--wbd-space-1) var(--wbd-space-2);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius);
    font-size: 0.9375rem;
    font-family: var(--wbd-font);
    background: var(--wbd-white);
}
/* /Components/Features/Stats/DayStatsBar.razor.rz.scp.css */
/* DayStatsBar.razor.css — CSS prefix: stats- */

.stats-bar[b-727hgdcgah] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-4);
    padding: var(--wbd-space-3) 0;
    flex-wrap: wrap;
}

/* Streak — the emotional anchor of the app */
.stats-streak[b-727hgdcgah] {
    display: flex;
    align-items: baseline;
    gap: var(--wbd-space-1);
}

/* Large count: seeing your streak should feel significant */
.stats-streak-count[b-727hgdcgah] {
    font-size: 2.25rem;
    font-weight: var(--wbd-font-weight-strong);
    color: var(--wbd-purple-mid);
    line-height: 1;
    letter-spacing: -0.03em;
}

.stats-streak-label[b-727hgdcgah] {
    font-size: 0.875rem;
    color: var(--wbd-gray-muted);
}

.stats-streak-none[b-727hgdcgah] {
    font-size: 0.875rem;
    color: var(--wbd-gray-muted);
    font-style: italic;
}

/* Today progress */
.stats-today[b-727hgdcgah] {
    flex: 1;
    min-width: 0;
}

.stats-today-done[b-727hgdcgah] {
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-success);
}

.stats-today-progress[b-727hgdcgah] {
    font-size: 0.9375rem;
    color: var(--wbd-gray-secondary);
}

.stats-today-none[b-727hgdcgah] {
    font-size: 0.875rem;
    color: var(--wbd-gray-muted);
    font-style: italic;
}

/* Same-day bonus pill */
.stats-bonus[b-727hgdcgah] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-1);
    padding: 3px var(--wbd-space-2);
    background: var(--wbd-purple-light);
    border-radius: var(--wbd-radius-pill);
}

.stats-bonus-label[b-727hgdcgah] {
    font-size: 0.8125rem;
    color: var(--wbd-purple-deep);
}

.stats-bonus-count[b-727hgdcgah] {
    font-size: 0.8125rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-purple-deep);
}
/* /Components/Pages/Arcs.razor.rz.scp.css */
/* -----------------------------------------------------------------------
   Arcs.razor.css
   Two-column layout: sticky sidebar (list) + scrolling detail panel.
   ----------------------------------------------------------------------- */

.arcs-layout[b-mkdrxsoltk] {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: var(--wbd-space-5);
    align-items: start;
    max-width: var(--wbd-max-width);
    margin: 0 auto;
}

/* Sidebar sticks below the nav while the detail panel scrolls */
.arcs-sidebar[b-mkdrxsoltk] {
    position: sticky;
    top: calc(56px + var(--wbd-space-4));
    max-height: calc(100vh - 56px - var(--wbd-space-5) * 2);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wbd-gray-border) transparent;
}

/* Detail panel — same card signature as Today */
.arcs-detail-panel[b-mkdrxsoltk] {
    background: var(--wbd-card);
    border: var(--wbd-border);
    border-top: 2px solid var(--wbd-purple-border);
    border-radius: var(--wbd-radius-lg);
    padding: var(--wbd-space-5);
    box-shadow: var(--wbd-shadow);
}

/* Back button — unobtrusive */
.arcs-back-btn[b-mkdrxsoltk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    color: var(--wbd-gray-muted);
    cursor: pointer;
    margin-bottom: var(--wbd-space-4);
    font-family: var(--wbd-font);
    transition: color var(--wbd-transition);
}

    .arcs-back-btn:hover[b-mkdrxsoltk] {
        color: var(--wbd-gray-secondary);
    }

/* Page heading */
.arcs-page-header[b-mkdrxsoltk] {
    max-width: var(--wbd-max-width);
    margin: 0 auto;
    padding-bottom: var(--wbd-space-3);
}

.arcs-page-title[b-mkdrxsoltk] {
    font-size: 1.375rem;
    font-weight: var(--wbd-font-weight-strong);
    color: var(--wbd-gray-ink);
    letter-spacing: -0.02em;
}

/* Responsive: stack vertically on narrow viewports */
@media (max-width: 700px) {
    .arcs-layout[b-mkdrxsoltk] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/History.razor.rz.scp.css */
/* History.razor.css — CSS prefix: history-page- / history- */

/* Page shell */
.history-page[b-7bfzj4kibf] {
    /* inherits .page-content */
}

.history-page-inner[b-7bfzj4kibf] {
    max-width: var(--wbd-card-max-width); /* 720px — consistent with Today */
    margin: 0 auto;
}

/* Header */
.history-page-header[b-7bfzj4kibf] {
    margin-bottom: var(--wbd-space-5);
}

.history-page-title[b-7bfzj4kibf] {
    font-size: 1.375rem;
    font-weight: var(--wbd-font-weight-strong);
    color: var(--wbd-gray-ink);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.15;
}

/* State messages */
.history-loading[b-7bfzj4kibf],
.history-empty[b-7bfzj4kibf] {
    text-align: center;
    padding: var(--wbd-space-7);
    color: var(--wbd-gray-muted);
    font-size: 0.9375rem;
    font-style: italic;
}

.history-error[b-7bfzj4kibf] {
    text-align: center;
    padding: var(--wbd-space-5);
    color: #dc2626;
    font-size: 0.9375rem;
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* Landing.razor.css — CSS prefix: landing- */

.landing[b-hm9u91rc0d] {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-8);
    padding-top: var(--wbd-space-6);
    max-width: 720px;
    margin: 0 auto;
}

/* -----------------------------------------------------------------------
   Hero — contained card, no negative-margin bleed
   ----------------------------------------------------------------------- */
.landing-hero[b-hm9u91rc0d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--wbd-space-4);
    padding: var(--wbd-space-8) var(--wbd-space-6);
    background: #5b21b6 linear-gradient(145deg, var(--wbd-purple-deep) 0%, var(--wbd-purple-mid) 100%);
    border-radius: var(--wbd-radius-lg);
}

.landing-tagline[b-hm9u91rc0d] {
    display: block; /* block avoids inline-level UA border quirks */
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #ffffff;
    border: none; /* suppress any UA heading border */
    outline: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

/* --wbd-purple-light is a background-tint token (7% opacity) — unusable
   as text. Use a literal semi-transparent white for text on dark purple. */
.landing-subline[b-hm9u91rc0d] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.72);
    font-style: italic;
    opacity: 0.9;
}

.landing-cta[b-hm9u91rc0d] {
    display: inline-block;
    background: var(--wbd-white);
    color: var(--wbd-purple-deep);
    font-size: 1rem;
    font-weight: 600;
    padding: var(--wbd-space-3) var(--wbd-space-6);
    border-radius: var(--wbd-radius);
    text-decoration: none;
    margin-top: var(--wbd-space-2);
    transition: opacity var(--wbd-transition);
}

    .landing-cta:hover[b-hm9u91rc0d] {
        opacity: 0.88;
        text-decoration: none;
    }

.landing-signin[b-hm9u91rc0d] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.landing-signin-link[b-hm9u91rc0d] {
    color: #ffffff;
    text-decoration: underline;
}

    .landing-signin-link:hover[b-hm9u91rc0d] {
        opacity: 0.8;
        text-decoration: none;
    }

/* -----------------------------------------------------------------------
   Features
   ----------------------------------------------------------------------- */
.landing-features[b-hm9u91rc0d] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wbd-space-4);
}

@media (max-width: 540px) {
    .landing-features[b-hm9u91rc0d] {
        grid-template-columns: 1fr;
    }
}

.landing-feature[b-hm9u91rc0d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--wbd-space-3);
    padding: var(--wbd-space-5) var(--wbd-space-4);
    background: var(--wbd-white);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius-lg);
}

.landing-feature-icon[b-hm9u91rc0d] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.landing-feature-icon--commit[b-hm9u91rc0d] {
    background: var(--wbd-purple-light);
    border: 2px solid var(--wbd-purple-border);
    color: var(--wbd-purple-mid);
}

.landing-feature-icon--resolve[b-hm9u91rc0d] {
    background: var(--wbd-teal-light);
    border: 2px solid var(--wbd-teal-border);
    color: var(--wbd-teal-mid);
}

.landing-feature-icon--arc[b-hm9u91rc0d] {
    background: var(--wbd-amber-light);
    border: 2px solid var(--wbd-amber-border);
    color: var(--wbd-amber-mid);
}

.landing-feature-text[b-hm9u91rc0d] {
    font-size: 0.95rem;
    color: var(--wbd-gray-secondary);
    line-height: 1.5;
}
/* Landing.razor.css — CSS prefix: landing- */

.landing[b-hm9u91rc0d] {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-8);
    padding-top: var(--wbd-space-6);
    max-width: 720px;
    margin: 0 auto;
}

/* -----------------------------------------------------------------------
   Hero — contained card, no negative-margin bleed
   ----------------------------------------------------------------------- */
.landing-hero[b-hm9u91rc0d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--wbd-space-4);
    padding: var(--wbd-space-8) var(--wbd-space-6);
    background: #5b21b6 linear-gradient(145deg, var(--wbd-purple-deep) 0%, var(--wbd-purple-mid) 100%);
    border-radius: var(--wbd-radius-lg);
}

.landing-tagline[b-hm9u91rc0d] {
    display: block; /* block avoids inline-level UA border quirks */
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #ffffff;
    border: none; /* suppress any UA heading border */
    outline: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

/* --wbd-purple-light is a background-tint token (7% opacity) — unusable
   as text. Use a literal semi-transparent white for text on dark purple. */
.landing-subline[b-hm9u91rc0d] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.72);
    font-style: italic;
    opacity: 0.9;
}

.landing-cta[b-hm9u91rc0d] {
    display: inline-block;
    background: var(--wbd-white);
    color: var(--wbd-purple-deep);
    font-size: 1rem;
    font-weight: 600;
    padding: var(--wbd-space-3) var(--wbd-space-6);
    border-radius: var(--wbd-radius);
    text-decoration: none;
    margin-top: var(--wbd-space-2);
    transition: opacity var(--wbd-transition);
}

    .landing-cta:hover[b-hm9u91rc0d] {
        opacity: 0.88;
        text-decoration: none;
    }

.landing-signin[b-hm9u91rc0d] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.landing-signin-link[b-hm9u91rc0d] {
    color: #ffffff;
    text-decoration: underline;
}

    .landing-signin-link:hover[b-hm9u91rc0d] {
        opacity: 0.8;
        text-decoration: none;
    }

/* -----------------------------------------------------------------------
   Features
   ----------------------------------------------------------------------- */
.landing-features[b-hm9u91rc0d] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wbd-space-4);
}

@media (max-width: 540px) {
    .landing-features[b-hm9u91rc0d] {
        grid-template-columns: 1fr;
    }
}

.landing-feature[b-hm9u91rc0d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--wbd-space-3);
    padding: var(--wbd-space-5) var(--wbd-space-4);
    background: var(--wbd-white);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius-lg);
}

.landing-feature-icon[b-hm9u91rc0d] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.landing-feature-icon--commit[b-hm9u91rc0d] {
    background: var(--wbd-purple-light);
    border: 2px solid var(--wbd-purple-border);
    color: var(--wbd-purple-mid);
}

.landing-feature-icon--resolve[b-hm9u91rc0d] {
    background: var(--wbd-teal-light);
    border: 2px solid var(--wbd-teal-border);
    color: var(--wbd-teal-mid);
}

.landing-feature-icon--arc[b-hm9u91rc0d] {
    background: var(--wbd-amber-light);
    border: 2px solid var(--wbd-amber-border);
    color: var(--wbd-amber-mid);
}

.landing-feature-text[b-hm9u91rc0d] {
    font-size: 0.95rem;
    color: var(--wbd-gray-secondary);
    line-height: 1.5;
}
/* /Components/Pages/Planning.razor.rz.scp.css */
/* Planning.razor.css — CSS prefix: planning- */

.planning[b-wthhgdsoal] {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-6);
    max-width: var(--wbd-card-max-width); /* 720px — matches Today */
    margin: 0 auto;
}

.planning-header[b-wthhgdsoal] {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-1);
}

.planning-title[b-wthhgdsoal] {
    font-size: 1.35rem;
    font-weight: var(--wbd-font-weight-strong);
    color: var(--wbd-gray-ink);
    margin: 0;
    letter-spacing: -0.01em;
}

.planning-subtitle[b-wthhgdsoal] {
    font-size: 0.9375rem;
    color: var(--wbd-gray-muted);
    margin: 0;
}

/* ---- Create card ---- */
.planning-create-card[b-wthhgdsoal] {
    background: var(--wbd-white);
    border: var(--wbd-border);
    border-top: 3px solid var(--wbd-purple-mid);
    border-radius: var(--wbd-radius-lg);
    padding: var(--wbd-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-4);
}

.planning-create-date-row[b-wthhgdsoal] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-3);
    flex-wrap: wrap;
}

.planning-create-label[b-wthhgdsoal] {
    font-size: 0.875rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-secondary);
    white-space: nowrap;
}

.planning-date-input[b-wthhgdsoal] {
    border: var(--wbd-border);
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-2) var(--wbd-space-3);
    font-size: 0.9rem;
    font-family: var(--wbd-font);
    color: var(--wbd-gray-ink);
    background: var(--wbd-white);
    cursor: pointer;
    transition: border-color var(--wbd-transition);
}

    .planning-date-input:focus[b-wthhgdsoal] {
        border-color: var(--wbd-purple-mid);
        outline: none;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
    }

.planning-date-display[b-wthhgdsoal] {
    font-size: 0.875rem;
    color: var(--wbd-purple-deep);
    font-weight: var(--wbd-font-weight-medium);
}

.planning-create-input-row[b-wthhgdsoal] {
    display: flex;
    gap: var(--wbd-space-3);
}

.planning-input[b-wthhgdsoal] {
    flex: 1;
    border: var(--wbd-border);
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-3) var(--wbd-space-4);
    font-size: 0.9375rem;
    font-family: var(--wbd-font);
    color: var(--wbd-gray-ink);
    background: var(--wbd-white);
    transition: border-color var(--wbd-transition), box-shadow var(--wbd-transition);
}

    .planning-input[b-wthhgdsoal]::placeholder {
        color: var(--wbd-gray-muted);
    }

    .planning-input:focus[b-wthhgdsoal] {
        border-color: var(--wbd-purple-mid);
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
        outline: none;
    }

.planning-add-btn[b-wthhgdsoal] {
    background: var(--wbd-purple-deep);
    color: var(--wbd-white);
    border: none;
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-3) var(--wbd-space-5);
    font-size: 0.9rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--wbd-transition);
}

    .planning-add-btn:hover:not([disabled])[b-wthhgdsoal] {
        background: var(--wbd-purple-mid);
    }

    .planning-add-btn[disabled][b-wthhgdsoal] {
        opacity: 0.4;
        cursor: default;
    }

.planning-error[b-wthhgdsoal] {
    font-size: 0.8125rem;
    color: #dc2626;
    margin: 0;
}

.planning-error--item[b-wthhgdsoal] {
    padding: var(--wbd-space-2) var(--wbd-space-4);
    background: #fff5f5;
}

/* ---- Future days ---- */
.planning-loading[b-wthhgdsoal],
.planning-empty[b-wthhgdsoal] {
    font-size: 0.9375rem;
    color: var(--wbd-gray-muted);
    text-align: center;
    padding: var(--wbd-space-8) 0;
}

.planning-day[b-wthhgdsoal] {
    background: var(--wbd-white);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius-lg);
    overflow: hidden;
}

.planning-day-header[b-wthhgdsoal] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wbd-space-3) var(--wbd-space-4);
    background: var(--wbd-gray-surface);
    border-bottom: var(--wbd-border);
}

.planning-day-date[b-wthhgdsoal] {
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-ink);
    margin: 0;
}

.planning-day-count[b-wthhgdsoal] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
}

.planning-day-commitments[b-wthhgdsoal] {
    display: flex;
    flex-direction: column;
}

/* ---- Commitment wrapper — groups row + picker panels ---- */
.planning-commitment-wrapper[b-wthhgdsoal] {
    display: flex;
    flex-direction: column;
    border-bottom: var(--wbd-border);
}

    .planning-commitment-wrapper:last-child[b-wthhgdsoal] {
        border-bottom: none;
    }

/* ---- Commitment row ---- */
.planning-commitment[b-wthhgdsoal] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-3);
    padding: var(--wbd-space-3) var(--wbd-space-4);
    transition: background var(--wbd-transition);
    /* Border handled by wrapper */
    border-bottom: none;
}

    .planning-commitment:hover[b-wthhgdsoal] {
        background: var(--wbd-gray-surface);
    }

/* Keep the old standalone .planning-commitment-dot for any legacy use */
.planning-commitment-dot[b-wthhgdsoal] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wbd-purple-mid);
    flex-shrink: 0;
}

.planning-commitment-title[b-wthhgdsoal] {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--wbd-gray-ink);
    line-height: 1.4;
}

/* ---- Category button (item row) ---- */
.planning-commitment-cat-btn[b-wthhgdsoal] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid rgba(0, 0, 0, 0.1);
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    background-clip: padding-box;
}

    .planning-commitment-cat-btn:hover[b-wthhgdsoal] {
        transform: scale(1.2);
        box-shadow: var(--wbd-shadow-sm);
    }

.planning-commitment-cat-btn--none[b-wthhgdsoal] {
    background: var(--wbd-gray-light);
    border-style: dashed;
    border-color: var(--wbd-gray-subtle);
}

.planning-commitment-cat-btn--health[b-wthhgdsoal] {
    background: var(--wbd-cat-health);
    border-color: transparent;
}

.planning-commitment-cat-btn--focus[b-wthhgdsoal] {
    background: var(--wbd-cat-focus);
    border-color: transparent;
}

.planning-commitment-cat-btn--growth[b-wthhgdsoal] {
    background: var(--wbd-cat-growth);
    border-color: transparent;
}

.planning-commitment-cat-btn--creative[b-wthhgdsoal] {
    background: var(--wbd-cat-creative);
    border-color: transparent;
}

.planning-commitment-cat-btn--social[b-wthhgdsoal] {
    background: var(--wbd-cat-social);
    border-color: transparent;
}

.planning-commitment-cat-btn--finance[b-wthhgdsoal] {
    background: var(--wbd-cat-finance);
    border-color: transparent;
}

/* ---- Arc icon button (item row) ---- */
.planning-commitment-icon-btn[b-wthhgdsoal] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--wbd-gray-muted);
    border-radius: var(--wbd-radius);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--wbd-transition), color var(--wbd-transition), background var(--wbd-transition);
}

    .planning-commitment-icon-btn svg[b-wthhgdsoal] {
        width: 14px;
        height: 14px;
    }

    .planning-commitment-icon-btn:hover[b-wthhgdsoal] {
        color: var(--wbd-purple-deep);
        background: var(--wbd-purple-light);
        opacity: 1;
    }

    .planning-commitment-icon-btn.is-active[b-wthhgdsoal] {
        opacity: 1;
        color: var(--wbd-purple-mid);
        background: var(--wbd-purple-light);
    }

    .planning-commitment-icon-btn.planning-commitment-arc-linked[b-wthhgdsoal] {
        opacity: 1;
        color: var(--wbd-success);
    }

/* Show arc + delete on row hover */
.planning-commitment:hover .planning-commitment-icon-btn[b-wthhgdsoal],
.planning-commitment:hover .planning-commitment-delete[b-wthhgdsoal] {
    opacity: 1;
}

/* ---- Delete button ---- */
.planning-commitment-delete[b-wthhgdsoal] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--wbd-gray-muted);
    border-radius: var(--wbd-radius);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--wbd-transition), color var(--wbd-transition), background var(--wbd-transition);
}

    .planning-commitment-delete svg[b-wthhgdsoal] {
        width: 14px;
        height: 14px;
    }

    .planning-commitment-delete:hover[b-wthhgdsoal] {
        color: #dc2626;
        background: rgba(220, 38, 38, 0.08);
    }

    .planning-commitment-delete[disabled][b-wthhgdsoal] {
        opacity: 0.3;
        cursor: default;
    }

/* ---- Category picker (create card) ---- */
.planning-create-cat-row[b-wthhgdsoal] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-3);
}

.planning-cat-picker[b-wthhgdsoal] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.planning-cat-dot[b-wthhgdsoal] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.12s ease, border-color 0.12s ease;
    background-clip: padding-box;
}

    .planning-cat-dot:hover[b-wthhgdsoal] {
        transform: scale(1.3);
    }

    .planning-cat-dot.is-selected[b-wthhgdsoal] {
        border-color: var(--wbd-gray-ink);
        transform: scale(1.15);
    }

.planning-cat-dot--none[b-wthhgdsoal] {
    background: var(--wbd-gray-light);
    border: 2.5px dashed var(--wbd-gray-subtle);
}

.planning-cat-dot--health[b-wthhgdsoal] {
    background: var(--wbd-cat-health);
}

.planning-cat-dot--focus[b-wthhgdsoal] {
    background: var(--wbd-cat-focus);
}

.planning-cat-dot--growth[b-wthhgdsoal] {
    background: var(--wbd-cat-growth);
}

.planning-cat-dot--creative[b-wthhgdsoal] {
    background: var(--wbd-cat-creative);
}

.planning-cat-dot--social[b-wthhgdsoal] {
    background: var(--wbd-cat-social);
}

.planning-cat-dot--finance[b-wthhgdsoal] {
    background: var(--wbd-cat-finance);
}

/* ---- Item-level category picker panel ---- */
.planning-cat-panel[b-wthhgdsoal] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-3);
    padding: var(--wbd-space-2) var(--wbd-space-4);
    background: var(--wbd-gray-surface);
    border-top: var(--wbd-border);
    flex-wrap: wrap;
}

.planning-cat-panel-label[b-wthhgdsoal] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
    white-space: nowrap;
}

.planning-cat-panel-dots[b-wthhgdsoal] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
}

.planning-cat-panel-close[b-wthhgdsoal] {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--wbd-gray-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--wbd-radius);
    margin-left: auto;
    font-family: var(--wbd-font);
}

    .planning-cat-panel-close:hover[b-wthhgdsoal] {
        background: var(--wbd-gray-100);
        color: var(--wbd-gray-ink);
    }

/* ---- Item-level arc picker panel ---- */
.planning-arc-panel[b-wthhgdsoal] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-3);
    padding: var(--wbd-space-2) var(--wbd-space-4);
    background: var(--wbd-gray-surface);
    border-top: var(--wbd-border);
    flex-wrap: wrap;
}

.planning-arc-panel-loading[b-wthhgdsoal],
.planning-arc-panel-empty[b-wthhgdsoal] {
    font-size: 0.875rem;
    color: var(--wbd-gray-muted);
    font-style: italic;
}

    .planning-arc-panel-empty a[b-wthhgdsoal] {
        color: var(--wbd-purple-mid);
        text-decoration: none;
    }

        .planning-arc-panel-empty a:hover[b-wthhgdsoal] {
            text-decoration: underline;
        }

.planning-arc-panel-list[b-wthhgdsoal] {
    display: flex;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
    flex: 1;
}

.planning-arc-panel-item[b-wthhgdsoal] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.8125rem;
    font-family: var(--wbd-font);
    background: var(--wbd-purple-light);
    color: var(--wbd-purple-deep);
    border: 1px solid var(--wbd-purple-border);
    border-radius: var(--wbd-radius-pill);
    cursor: pointer;
    transition: background var(--wbd-transition), color var(--wbd-transition), border-color var(--wbd-transition);
}

    .planning-arc-panel-item:hover:not([disabled])[b-wthhgdsoal] {
        background: var(--wbd-purple-mid);
        color: var(--wbd-white);
        border-color: var(--wbd-purple-mid);
    }

    .planning-arc-panel-item[disabled][b-wthhgdsoal] {
        opacity: 0.4;
        cursor: default;
    }

.planning-arc-panel-close[b-wthhgdsoal] {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--wbd-gray-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--wbd-radius);
    margin-left: auto;
    font-family: var(--wbd-font);
}

    .planning-arc-panel-close:hover[b-wthhgdsoal] {
        background: var(--wbd-gray-100);
        color: var(--wbd-gray-ink);
    }
/* ---- Arc picker in create form ---- */
.planning-create-arc-row[b-wthhgdsoal] {
    display: flex;
    align-items: flex-start;
    gap: var(--wbd-space-3);
    flex-wrap: wrap;
}

.planning-create-arc-picker[b-wthhgdsoal] {
    display: flex;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
    flex: 1;
}

.planning-create-arc-opt[b-wthhgdsoal] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.8125rem;
    font-family: var(--wbd-font);
    background: var(--wbd-gray-100);
    color: var(--wbd-gray-secondary);
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--wbd-radius-pill);
    cursor: pointer;
    transition: background var(--wbd-transition), color var(--wbd-transition), border-color var(--wbd-transition);
}

    .planning-create-arc-opt:hover[b-wthhgdsoal] {
        background: var(--wbd-purple-light);
        color: var(--wbd-purple-deep);
        border-color: var(--wbd-purple-border);
    }

    .planning-create-arc-opt.is-selected[b-wthhgdsoal] {
        background: var(--wbd-purple-mid);
        color: var(--wbd-white);
        border-color: var(--wbd-purple-mid);
    }
/* /Components/Pages/Settings.razor.rz.scp.css */
/* -----------------------------------------------------------------------
   Settings.razor.css
   CSS prefix: settings-
   ----------------------------------------------------------------------- */

.settings[b-tbjayewvny] {
    padding: var(--wbd-space-4);
}

.settings-inner[b-tbjayewvny] {
    max-width: var(--wbd-card-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-3);
}

/* ── Page header ──────────────────────────────────────────────────────── */

.settings-header[b-tbjayewvny] {
    margin-bottom: var(--wbd-space-2);
}

.settings-title[b-tbjayewvny] {
    font-size: 1.25rem;
    font-weight: var(--wbd-font-weight-strong);
    color: var(--wbd-gray-ink);
    letter-spacing: -0.02em;
}

/* ── Section cards ────────────────────────────────────────────────────── */

.settings-card[b-tbjayewvny] {
    background: var(--wbd-card);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius-lg);
    padding: var(--wbd-space-4);
}

.settings-card-header[b-tbjayewvny] {
    margin-bottom: var(--wbd-space-3);
}

.settings-card-title[b-tbjayewvny] {
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-ink);
    margin: 0 0 var(--wbd-space-1);
}

.settings-card-hint[b-tbjayewvny] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
    margin: 0;
    line-height: 1.5;
}

.settings-card-body[b-tbjayewvny] {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-2);
}

/* ── Controls ─────────────────────────────────────────────────────────── */

.settings-row[b-tbjayewvny] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
    flex-wrap: wrap;
}

.settings-row--tz[b-tbjayewvny] {
    align-items: center;
    gap: var(--wbd-space-3);
}

.settings-select[b-tbjayewvny] {
    appearance: none;
    background: var(--wbd-gray-surface);
    border: var(--wbd-border);
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-2) var(--wbd-space-3);
    font-size: 0.9375rem;
    color: var(--wbd-gray-ink);
    font-family: var(--wbd-font);
    cursor: pointer;
    min-width: 180px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--wbd-space-2) center;
    padding-right: var(--wbd-space-5);
    transition: border-color var(--wbd-transition);
}

    .settings-select:focus[b-tbjayewvny] {
        outline: none;
        border-color: var(--wbd-purple-border);
        box-shadow: var(--wbd-focus-ring);
    }

.settings-save-btn[b-tbjayewvny] {
    display: inline-flex;
    align-items: center;
    padding: var(--wbd-space-2) var(--wbd-space-3);
    background: var(--wbd-purple-deep);
    color: #fff;
    border: none;
    border-radius: var(--wbd-radius);
    font-size: 0.875rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--wbd-transition);
}

    .settings-save-btn:hover:not(:disabled)[b-tbjayewvny] {
        opacity: 0.88;
    }

    .settings-save-btn:disabled[b-tbjayewvny] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ── Timezone display ─────────────────────────────────────────────────── */

.settings-tz-current[b-tbjayewvny] {
    font-size: 0.9375rem;
    color: var(--wbd-gray-secondary);
    margin: 0;
}

.settings-tz-detected[b-tbjayewvny] {
    font-size: 0.875rem;
    color: var(--wbd-gray-muted);
}

.settings-tz-match[b-tbjayewvny] {
    font-size: 0.875rem;
    color: var(--wbd-success);
    margin: 0;
}

/* ── Feedback ─────────────────────────────────────────────────────────── */

.settings-saved[b-tbjayewvny] {
    font-size: 0.8125rem;
    color: var(--wbd-success);
    font-weight: var(--wbd-font-weight-medium);
}

.settings-error[b-tbjayewvny] {
    font-size: 0.875rem;
    color: #b45309;
    background: var(--wbd-amber-light);
    border: 1px solid var(--wbd-amber-border);
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-3);
    margin: 0;
}

.settings-loading[b-tbjayewvny] {
    color: var(--wbd-gray-muted);
    font-style: italic;
    font-size: 0.9375rem;
}

/* ── Account link ─────────────────────────────────────────────────────── */

.settings-account-link[b-tbjayewvny] {
    display: inline-flex;
    align-items: center;
    gap: var(--wbd-space-1);
    font-size: 0.9375rem;
    color: var(--wbd-purple-mid);
    font-weight: var(--wbd-font-weight-medium);
    text-decoration: none;
}

    .settings-account-link:hover[b-tbjayewvny] {
        text-decoration: underline;
    }
/* /Components/Pages/Today.razor.rz.scp.css */
/* Centred column — same max-width as the card so title and card align */
.today-page-inner[b-rpkswkqccz] {
    max-width: var(--wbd-card-max-width);
    margin: 0 auto;
}

/* Page heading — above the card, matches History / Planning style */
.today-page-header[b-rpkswkqccz] {
    margin-bottom: var(--wbd-space-4);
}

.today-page-title[b-rpkswkqccz] {
    font-size: 1.375rem;
    font-weight: var(--wbd-font-weight-strong);
    color: var(--wbd-gray-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Visual break between DayHeader and the WillBeDones list */
.today-commitments-section[b-rpkswkqccz] {
    border-top: var(--wbd-border);
    padding-top: var(--wbd-space-3);
}

@media (max-width: 640px) {
    .today-page-title[b-rpkswkqccz] {
        font-size: 1.125rem;
    }
}
/* /Components/Shared/AppFooter.razor.rz.scp.css */
/* -----------------------------------------------------------------------
   AppFooter.razor.css — CSS prefix: footer-
   ----------------------------------------------------------------------- */

.footer[b-xxcprkirfi] {
    margin-top: auto;
    border-top: var(--wbd-border);
    padding: var(--wbd-space-3) var(--wbd-space-5);
    background: var(--wbd-white);
}

.footer-inner[b-xxcprkirfi] {
    max-width: var(--wbd-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--wbd-space-5);
}

.footer-copyright[b-xxcprkirfi] {
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.footer-links[b-xxcprkirfi] {
    display: flex;
    align-items: center;
    gap: var(--wbd-space-4);
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-link[b-xxcprkirfi] {
    font-size: 0.875rem;
    color: var(--wbd-gray-muted);
    text-decoration: none;
    transition: color var(--wbd-transition);
    white-space: nowrap;
}

    .footer-link:hover[b-xxcprkirfi] {
        color: var(--wbd-gray-secondary);
    }

.footer-link--brand[b-xxcprkirfi] {
    color: var(--wbd-purple-mid);
    font-weight: var(--wbd-font-weight-medium);
}

    .footer-link--brand:hover[b-xxcprkirfi] {
        color: var(--wbd-purple-deep);
    }

/* Mobile: stack vertically */
@media (max-width: 600px) {
    .footer-inner[b-xxcprkirfi] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--wbd-space-3);
    }

    .footer-links[b-xxcprkirfi] {
        justify-content: flex-start;
    }
}
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
/* ── Language switcher — flag + select (prefix: lang-) ──────────────── */
.lang-switcher[b-x26kw2rn77] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lang-flag-img[b-x26kw2rn77] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
    border: 1.5px solid rgba(17, 24, 39, 0.08);
}

.lang-select[b-x26kw2rn77] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--wbd-white);
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: var(--wbd-radius);
    padding: 5px 28px 5px 10px;
    font-family: var(--wbd-font);
    font-size: 0.875rem;
    color: var(--wbd-gray-secondary);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color var(--wbd-transition), box-shadow var(--wbd-transition);
}

    .lang-select:hover[b-x26kw2rn77] {
        border-color: var(--wbd-purple-mid);
    }

    .lang-select:focus[b-x26kw2rn77] {
        outline: none;
        border-color: var(--wbd-purple-mid);
        box-shadow: var(--wbd-focus-ring);
    }
/* /Components/Shared/MainLayout.razor.rz.scp.css */
/* MainLayout.razor.css */
/* /Components/Shared/NavMenu.razor.rz.scp.css */
/* NavMenu.razor.css — CSS prefix: nav-
   .nav-link and variants live in app.css — NavLink's <a> tag is outside
   NavMenu's scoped CSS boundary so scoped rules don't reach it. */

.nav[b-upxplizli5] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: var(--wbd-border);
}

.nav-inner[b-upxplizli5] {
    max-width: var(--wbd-max-width);
    margin: 0 auto;
    padding: 0 var(--wbd-space-5);
    height: 56px;
    display: flex;
    align-items: stretch;
    gap: var(--wbd-space-3);
}

/* Wordmark */
.nav-brand[b-upxplizli5] {
    font-weight: var(--wbd-font-weight-strong);
    font-size: 1rem;
    color: var(--wbd-purple-deep);
    text-decoration: none;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color var(--wbd-transition);
}

    .nav-brand:hover[b-upxplizli5] {
        color: var(--wbd-purple-mid);
    }

/* Tab row */
.nav-links[b-upxplizli5] {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 1;
}

/* Right-side actions: profile icon + sign-out */
.nav-actions[b-upxplizli5] {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--wbd-space-2);
}

/* Profile icon link — circular hit area */
.nav-profile-link[b-upxplizli5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--wbd-gray-muted);
    text-decoration: none;
    transition: color var(--wbd-transition), background var(--wbd-transition);
}

    .nav-profile-link svg[b-upxplizli5] {
        width: 18px;
        height: 18px;
    }

    .nav-profile-link:hover[b-upxplizli5] {
        color: var(--wbd-purple-deep);
        background: var(--wbd-purple-wash);
    }

/* Sign-out */
.nav-signout[b-upxplizli5] {
    background: none;
    border: none;
    font-size: 0.8125rem;
    color: var(--wbd-gray-muted);
    cursor: pointer;
    padding: 4px var(--wbd-space-2);
    border-radius: var(--wbd-radius);
    font-family: var(--wbd-font);
    transition: color var(--wbd-transition);
}

    .nav-signout:hover[b-upxplizli5] {
        color: var(--wbd-gray-ink);
    }

@media (max-width: 480px) {
    .nav-inner[b-upxplizli5] {
        padding: 0 var(--wbd-space-3);
        gap: var(--wbd-space-2);
    }
}

/* On narrow phones: hide the wordmark and sign-out to give the 4 tabs room.
   Profile icon remains for account access. Sign-out is reachable via profile → manage. */
@media (max-width: 520px) {
    .nav-brand[b-upxplizli5] {
        display: none;
    }

    .nav-signout[b-upxplizli5] {
        display: none;
    }
}
/* /Components/Shared/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-gkfb3eh05k],
.components-reconnect-repeated-attempt-visible[b-gkfb3eh05k],
.components-reconnect-failed-visible[b-gkfb3eh05k],
.components-pause-visible[b-gkfb3eh05k],
.components-resume-failed-visible[b-gkfb3eh05k],
.components-rejoining-animation[b-gkfb3eh05k] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-gkfb3eh05k],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-gkfb3eh05k],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-gkfb3eh05k],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-gkfb3eh05k],
#components-reconnect-modal.components-reconnect-retrying[b-gkfb3eh05k],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-gkfb3eh05k],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-gkfb3eh05k],
#components-reconnect-modal.components-reconnect-failed[b-gkfb3eh05k],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-gkfb3eh05k] {
    display: block;
}


#components-reconnect-modal[b-gkfb3eh05k] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-gkfb3eh05k 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-gkfb3eh05k 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-gkfb3eh05k 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-gkfb3eh05k]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-gkfb3eh05k 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-gkfb3eh05k {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-gkfb3eh05k {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-gkfb3eh05k {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-gkfb3eh05k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-gkfb3eh05k] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-gkfb3eh05k] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-gkfb3eh05k] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-gkfb3eh05k] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-gkfb3eh05k] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-gkfb3eh05k] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-gkfb3eh05k 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-gkfb3eh05k] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-gkfb3eh05k {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}