/*
    Recurring stream editor: the transaction popup's Recurring tab (Components/Recurring/RecurringStreamEditor.razor,
    AiCategoryNotice.razor, AiCategoryStep.razor), ported from the mobile RecurringStreamEditorView,
    AiCategoryNoticeView and AiCategoryStepView. Builds on transaction-popups.css (the --tx-* tokens and the tx-
    primitives); every color is a token. The few mobile keys transaction-popups.css doesn't carry are the --rse-* tokens
    below (the same values in both themes, as on mobile). Prefix: rse-.

    Mobile key -> token used here:
    TxPopupSurfaceColor --tx-surface, BaseTextColor --tx-text, DashboardMutedTextColor --tx-muted, PrimaryColor
    --tx-primary, TxPopupInputBackgroundColor --tx-input-bg, TxPopupTileBorderColor --tx-tile-border,
    TxPopupHeroTileColor --tx-hero-tile, TxPopupTileBackgroundColor --tx-tile-bg, RecurringCheckupGlassColor --tx-glass,
    NeedsReview*Color --tx-nr-*, NeedsReviewCriticalSoftColor / AccountsCriticalSoftColor --tx-critical-soft,
    AccountsPositiveSoftColor --tx-positive-soft, AccountsCautionColor --tx-caution, AccountsCautionSoftColor
    --tx-caution-soft, DashboardPositiveColor --tx-positive, DashboardNegativeColor --tx-negative, PillBackgroundColor
    --tx-pill-bg, PillTextColor --tx-pill-text, TransactionInflowColor --tx-inflow, TransactionNeutralAmountColor
    --tx-neutral, DashboardHomeIconColor --tx-home-icon, ActionButtonSecondaryColor --tx-action-secondary,
    SegmentedMenu*Color --tx-seg-*, ThumbOn/Off/ThumbColor --tx-thumb-* (tx-switch).
*/

:root {
    /* ActionButtonOnPrimaryColor */
    --rse-action-on-primary: #FFFFFF;
    /* SegmentedMenuBadgeTextColor */
    --rse-seg-badge-text: #FFFFFF;
    /* White ("This one") */
    --rse-white: #FFFFFF;
    /* ImageSourceValidatorConverter's letter avatar: the palette, the white initial, its gradient and gloss */
    --rse-avatar-0: #3B82F6;
    --rse-avatar-1: #6366F1;
    --rse-avatar-2: #06B6D4;
    --rse-avatar-3: #10B981;
    --rse-avatar-4: #F59E0B;
    --rse-avatar-5: #EF4444;
    --rse-avatar-6: #8B5CF6;
    --rse-avatar-7: #EC4899;
    --rse-avatar-8: #0EA5E9;
    --rse-avatar-9: #84CC16;
    --rse-avatar-ink: #FFFFFF;
    --rse-avatar-shade: #000000;
    --rse-avatar-gloss: rgba(255, 255, 255, .25);
    --rse-avatar-ring: rgba(255, 255, 255, .15);
    --rse-avatar-letter-shadow: rgba(0, 0, 0, .22);
}

[data-bs-theme="dark"] {
    --rse-action-on-primary: #FFFFFF;
    --rse-seg-badge-text: #FFFFFF;
    --rse-white: #FFFFFF;
    --rse-avatar-0: #3B82F6;
    --rse-avatar-1: #6366F1;
    --rse-avatar-2: #06B6D4;
    --rse-avatar-3: #10B981;
    --rse-avatar-4: #F59E0B;
    --rse-avatar-5: #EF4444;
    --rse-avatar-6: #8B5CF6;
    --rse-avatar-7: #EC4899;
    --rse-avatar-8: #0EA5E9;
    --rse-avatar-9: #84CC16;
    --rse-avatar-ink: #FFFFFF;
    --rse-avatar-shade: #000000;
    --rse-avatar-gloss: rgba(255, 255, 255, .25);
    --rse-avatar-ring: rgba(255, 255, 255, .15);
    --rse-avatar-letter-shadow: rgba(0, 0, 0, .22);
}

/* ------------------------------------------------------------------ Layout */

.rse {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.rse p,
.rse h3,
.rse h4 {
    margin: 0;
}

.rse-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rse-gap-1 { gap: 1px; }
.rse-gap-2 { gap: 2px; }
.rse-gap-4 { gap: 4px; }
.rse-gap-8 { gap: 8px; }
.rse-gap-10 { gap: 10px; }
.rse-gap-12 { gap: 12px; }
.rse-gap-16 { gap: 16px; }

.rse-center {
    align-self: center;
}

.rse-body {
    font-family: var(--tx-font-text);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--tx-muted);
    overflow-wrap: anywhere;
}

.rse-body.rse-body-strong {
    color: var(--tx-text);
}

.rse-row-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    color: var(--tx-text);
    overflow-wrap: anywhere;
}

.rse-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rse-glyph-primary {
    color: var(--tx-primary);
}

/* ------------------------------------------------------------------ Spinners (ActivityIndicator) */

.rse-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 2.5px solid var(--tx-primary);
    border-right-color: transparent;
    border-radius: 50%;
    animation: rse-spin .8s linear infinite;
}

.rse-spinner.rse-spinner-small {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.rse-spinner.rse-spinner-button {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.rse-spinner.rse-spinner-info {
    border-color: var(--tx-nr-info);
    border-right-color: transparent;
}

.rse-spinner.rse-spinner-on-primary {
    border-color: var(--rse-action-on-primary);
    border-right-color: transparent;
}

@keyframes rse-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .rse-spinner {
        animation-duration: 2s;
    }
}

/* ------------------------------------------------------------------ Loading and error cards */

.rse-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
}

.rse-error {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
}

.rse-error-glyph {
    align-self: start;
    margin-top: 1px;
    font-size: 16px;
    color: var(--tx-nr-warning);
}

.rse-retry {
    grid-column: 2;
    justify-self: start;
    padding: 7px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--tx-nr-tile);
    font-family: var(--tx-font);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--tx-primary);
    cursor: pointer;
}

/* ------------------------------------------------------------------ At a glance */

.rse-glance {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: var(--tx-surface);
    border-radius: 20px;
}

.rse-glance-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
}

.rse-glance-titles {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rse-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    color: var(--tx-text);
}

.rse-item-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tx-font-text);
    font-size: 12px;
    color: var(--tx-muted);
}

.rse-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: transparent;
    font-size: 18px;
    color: var(--tx-nr-header-icon);
    cursor: pointer;
}

.rse-help-btn.rse-help-keep {
    font-size: 16px;
    color: var(--tx-home-icon);
}

.rse-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rse-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 10px;
    background: var(--tx-glass);
    font-family: var(--tx-font-text);
    font-size: 11px;
    line-height: 1.35;
    color: var(--tx-text);
}

.rse-chip .tx-glyph {
    font-size: 10px;
}

.rse-chip.rse-chip-status {
    font-family: var(--tx-font);
    font-weight: 600;
}

.rse-chip-status.rse-tone-positive {
    background: var(--tx-positive-soft);
    color: var(--tx-positive);
}

.rse-chip-status.rse-tone-caution {
    background: var(--tx-caution-soft);
    color: var(--tx-caution);
}

.rse-chip-status.rse-tone-negative {
    background: var(--tx-critical-soft);
    color: var(--tx-negative);
}

.rse-chip-status.rse-tone-neutral {
    background: var(--tx-nr-tile);
    color: var(--tx-muted);
}

.rse-forecast-positive {
    color: var(--tx-positive);
}

.rse-forecast-muted {
    color: var(--tx-muted);
}

.rse-glance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.tx-glance-tile.rse-glance-tile {
    gap: 2px;
}

/* The Charge history tiles share the lit tile (transaction-popups.css .tx-glance-tile, mobile RsGlanceTile): its
   translucent fade suits this section's surface too, so they no longer override the fill. */

.rse-readonly {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--tx-nr-info-soft);
}

.rse-readonly .tx-glyph {
    font-size: 13px;
    color: var(--tx-nr-info);
}

.rse-readonly-text {
    font-family: var(--tx-font-text);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--tx-text);
}

/* ------------------------------------------------------------------ Section menu badge (SegmentedMenuItem.BadgeText) */

.rse-menu-badged .tx-seg-item:first-of-type::after {
    content: var(--rse-insights-badge, "");
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--tx-nr-warning);
    font-family: var(--tx-font);
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--rse-seg-badge-text);
}

/* ------------------------------------------------------------------ What we noticed, nothing to check */

.rse-issue {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
}

.rse-issue-chip,
.rse-icon-chip,
.rse-ai-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 13px;
}

.rse-issue-chip {
    background: var(--rse-tone-soft, var(--tx-nr-tile));
    color: var(--rse-tone, var(--tx-muted));
}

.rse-sev-critical {
    --rse-tone: var(--tx-nr-critical);
    --rse-tone-soft: var(--tx-critical-soft);
}

.rse-sev-warning {
    --rse-tone: var(--tx-nr-warning);
    --rse-tone-soft: var(--tx-nr-warning-soft);
}

.rse-sev-info {
    --rse-tone: var(--tx-nr-info);
    --rse-tone-soft: var(--tx-nr-info-soft);
}

.rse-sev-muted {
    --rse-tone: var(--tx-muted);
    --rse-tone-soft: var(--tx-nr-tile);
}

.rse-sev-positive {
    --rse-tone: var(--tx-positive);
    --rse-tone-soft: var(--tx-positive-soft);
}

.rse-review-label {
    font-family: var(--tx-font-text);
    font-size: 12px;
    color: var(--tx-muted);
}

.rse-icon-chip {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--tx-nr-header-icon-bg);
    color: var(--tx-nr-header-icon);
}

/* ------------------------------------------------------------------ Next steps */

.rse-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
}

.rse-step-glyph {
    margin-top: 2px;
    font-size: 15px;
    color: var(--tx-muted);
}

.rse-step.rse-step-primary .rse-step-glyph {
    color: var(--tx-primary);
}

.rse-step-title {
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--tx-text);
    overflow-wrap: anywhere;
}

.rse-step-detail {
    margin-top: 2px;
    font-family: var(--tx-font-text);
    font-size: 12px;
    line-height: 1.4;
    color: var(--tx-muted);
    overflow-wrap: anywhere;
}

.rse-step-btn {
    align-self: center;
    padding: 7px 12px;
    border: 0;
    border-radius: 11px;
    background: var(--tx-nr-tile);
    font-family: var(--tx-font);
    font-weight: 600;
    font-size: 12px;
    color: var(--tx-muted);
    white-space: nowrap;
    cursor: pointer;
}

.rse-step.rse-step-primary .rse-step-btn {
    color: var(--tx-primary);
}

/* ------------------------------------------------------------------ Status stack (a stacked segmented menu) */

.tx-seg.rse-status .tx-seg-pill {
    transition: transform .38s cubic-bezier(.34, 1.36, .64, 1), width .25s ease, opacity .2s ease;
}

.tx-seg.rse-status .tx-seg-item {
    flex-direction: column;
    gap: 3px;
    height: 52px;
    padding: 8px 4px;
    font-size: 12px;
}

.tx-seg.rse-status .tx-seg-item .tx-glyph {
    font-size: 14px;
}

.tx-seg.rse-status .rse-status-active.tx-seg-selected .tx-glyph {
    color: var(--tx-nr-active);
}

.tx-seg.rse-status .rse-status-paused.tx-seg-selected .tx-glyph {
    color: var(--tx-nr-paused);
}

.tx-seg.rse-status .rse-status-cancelled.tx-seg-selected .tx-glyph {
    color: var(--tx-nr-cancelled);
}

.tx-seg.rse-status .rse-status-archived.tx-seg-selected .tx-glyph {
    color: var(--tx-nr-archived);
}

.tx-seg.rse-status.rse-status-none .tx-seg-pill {
    opacity: 0;
}

.tx-seg.rse-status.rse-status-disabled {
    opacity: .5;
}

.tx-seg.rse-status .tx-seg-item:disabled {
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .tx-seg.rse-status .tx-seg-pill {
        transition: none;
    }
}

/* ------------------------------------------------------------------ Fields */

.rse-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rse-field-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
}

.rse-plaid-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
}

.tx-link.rse-link {
    padding: 4px 0;
}

.rse-name-hint {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 6px;
}

.rse-name-hint .tx-glyph {
    margin-top: 3px;
    font-size: 10.5px;
    color: var(--tx-muted);
}

.rse-input-clear {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: var(--tx-tile-border);
    font-size: 10px;
    color: var(--tx-muted);
    cursor: pointer;
}

.tx-field-box:focus-within .rse-input-clear {
    display: inline-flex;
}

.tx-field-box.rse-picker {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    text-align: left;
    color: var(--tx-text);
    cursor: pointer;
}

.rse-picker-glyph {
    font-size: 13px;
    color: var(--tx-primary);
}

.rse-picker-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 14px;
    color: var(--tx-text);
}

.rse-picker-chevron {
    font-size: 11px;
    color: var(--tx-muted);
}

/* Category / frequency chips: a standalone compact segment (the track, and the pill when selected). */
.rse-options {
    display: flex;
    flex-wrap: wrap;
}

.rse-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    margin: 0 8px 8px 0;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--tx-seg-track);
    font-family: var(--tx-font-text);
    font-size: 12px;
    color: var(--tx-seg-text);
    white-space: nowrap;
    cursor: pointer;
}

.rse-option .tx-glyph {
    font-size: 12px;
}

.rse-option.rse-option-selected {
    border-color: var(--tx-seg-pill-border);
    background: var(--tx-seg-pill);
    box-shadow: 0 2px 8px var(--tx-seg-pill-shadow);
    font-family: var(--tx-font);
    font-weight: 600;
    color: var(--tx-seg-selected-text);
}

.rse-option.rse-option-selected .tx-glyph {
    color: var(--tx-seg-selected-glyph);
}

.rse-option:disabled {
    opacity: .5;
    cursor: default;
}

/* The label keeps the SemiBold width, so a chip doesn't change size when it is selected. */
.rse-option-label {
    display: inline-grid;
}

.rse-option-label::after {
    content: attr(data-label);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-family: var(--tx-font);
    font-weight: 600;
}

/* The next charge date (a PopupDatePicker, the iOS compact date picker's pill) and its round clear button. */
.rse-date-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rse-date-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--tx-tile-border);
    border-radius: 16px;
    background: var(--tx-input-bg);
    font-size: 12px;
    color: var(--tx-muted);
    cursor: pointer;
}

.tx-field-box.rse-amount-box {
    gap: 4px;
    width: 140px;
}

.rse-amount-currency {
    font-weight: 600;
    font-size: 15px;
    color: var(--tx-muted);
}

.tx-field-input.rse-amount-input {
    text-align: right;
}

/* ------------------------------------------------------------------ Keep my changes, about */

.rse-keep {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 12px;
}

.rse-keep-glyph {
    font-size: 15px;
    color: var(--tx-primary);
}

.rse-keep-detail {
    font-family: var(--tx-font-text);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--tx-muted);
}

.rse-reset-warning {
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--tx-nr-warning-soft);
    font-family: var(--tx-font-text);
    font-size: 12px;
    line-height: 1.4;
    color: var(--tx-nr-warning);
}

.tx-about-value.rse-about-small {
    font-size: 12px;
}

/* ------------------------------------------------------------------ Recent charges (the mini chart) */

.rse-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 78px;
}

.rse-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    width: 38px;
}

.rse-bar-amount {
    font-family: var(--tx-font-text);
    font-size: 8.5px;
    line-height: 1.2;
    color: var(--tx-muted);
    text-align: center;
    white-space: nowrap;
}

.rse-bar {
    display: block;
    width: 16px;
    border-radius: 5px;
    background: var(--tx-nr-chart-bar);
}

.rse-bar.rse-bar-flagged {
    background: var(--tx-nr-chart-flagged);
}

.rse-bar.rse-bar-critical {
    background: var(--tx-nr-critical);
}

.rse-bar.rse-bar-warning {
    background: var(--tx-nr-warning);
}

.rse-bar-month {
    font-family: var(--tx-font-text);
    font-size: 9px;
    line-height: 1.2;
    color: var(--tx-muted);
    text-align: center;
}

.rse-caption {
    font-family: var(--tx-font-text);
    font-size: 12px;
    line-height: 1.4;
    color: var(--tx-muted);
}

/* ------------------------------------------------------------------ Charge history */

.rse-history-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
}

.rse-history-head .rse-icon-chip {
    align-self: center;
}

.rse-history-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--tx-text);
}

.rse-history-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.rse-history-row.rse-history-current {
    background: var(--tx-nr-info-soft);
    cursor: default;
}

.rse-history-row:not(.rse-history-current):hover {
    background: var(--tx-nr-tile);
}

.rse-history-text {
    min-width: 0;
}

.rse-history-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.rse-history-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 14px;
    color: var(--tx-text);
}

.rse-pill {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10.5px;
    line-height: 1.4;
    white-space: nowrap;
}

.rse-pill.rse-pill-pending {
    background: var(--tx-pill-bg);
    font-family: var(--tx-font-text);
    color: var(--tx-pill-text);
}

.rse-pill.rse-pill-current {
    background: var(--tx-primary);
    font-family: var(--tx-font);
    font-weight: 600;
    font-size: 10px;
    color: var(--rse-white);
}

.rse-history-amount {
    font-weight: 600;
    font-size: 15px;
    color: var(--tx-text);
    white-space: nowrap;
}

.rse-history-amount.rse-amount-in {
    color: var(--tx-inflow);
}

.rse-history-amount.rse-amount-zero {
    color: var(--tx-neutral);
}

/* The letter avatar (the logo covers it when it loads). */
.rse-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 50%;
    background:
        radial-gradient(circle 18px at 50% 31%, var(--rse-avatar-gloss), transparent),
        linear-gradient(180deg,
            color-mix(in srgb, var(--rse-avatar, var(--rse-avatar-0)) 78%, var(--rse-avatar-ink)) 0%,
            var(--rse-avatar, var(--rse-avatar-0)) 55%,
            color-mix(in srgb, var(--rse-avatar, var(--rse-avatar-0)) 86%, var(--rse-avatar-shade)) 100%);
    box-shadow: inset 0 0 0 1px var(--rse-avatar-ring);
    font-family: var(--tx-font-text);
    font-weight: 700;
    font-size: 17.5px;
    line-height: 1;
    color: var(--rse-avatar-ink);
    text-shadow: 0 .5px 1px var(--rse-avatar-letter-shadow);
}

.rse-avatar-p-0 { --rse-avatar: var(--rse-avatar-0); }
.rse-avatar-p-1 { --rse-avatar: var(--rse-avatar-1); }
.rse-avatar-p-2 { --rse-avatar: var(--rse-avatar-2); }
.rse-avatar-p-3 { --rse-avatar: var(--rse-avatar-3); }
.rse-avatar-p-4 { --rse-avatar: var(--rse-avatar-4); }
.rse-avatar-p-5 { --rse-avatar: var(--rse-avatar-5); }
.rse-avatar-p-6 { --rse-avatar: var(--rse-avatar-6); }
.rse-avatar-p-7 { --rse-avatar: var(--rse-avatar-7); }
.rse-avatar-p-8 { --rse-avatar: var(--rse-avatar-8); }
.rse-avatar-p-9 { --rse-avatar: var(--rse-avatar-9); }

.rse-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ------------------------------------------------------------------ Footer: links and the save bar */

.rse-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 22px;
    row-gap: 4px;
}

.tx-link.rse-footer-link .tx-glyph {
    font-size: 12px;
}

.rse-savebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rse-validation {
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--tx-critical-soft);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--tx-nr-critical);
}

.rse-save-actions {
    display: flex;
    gap: 10px;
}

.tx-btn.rse-save-secondary {
    flex: 0 0 auto;
    min-width: 92px;
    padding: 8px 18px;
}

.tx-btn.rse-save-primary {
    flex: 1 1 auto;
    min-width: 0;
}

.tx-btn.rse-save-primary .tx-glyph {
    font-size: 13px;
}

.tx-btn.rse-dim {
    opacity: .5;
}

/* ------------------------------------------------------------------ AI category check (notice and step) */

.rse-ai-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
}

.rse-ai-chip {
    background: var(--tx-nr-info-soft);
    color: var(--tx-nr-info);
}

.rse-ai-chip.rse-ai-chip-applied {
    background: var(--tx-positive-soft);
    color: var(--tx-positive);
}

.rse-ai-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    color: var(--tx-text);
    overflow-wrap: anywhere;
}

.rse-ai-suggests {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-self: start;
    align-self: flex-start;
    column-gap: 7px;
    max-width: 100%;
    padding: 7px 10px;
    border-radius: 11px;
    background: var(--tx-nr-info-soft);
}

.rse-ai-suggests .tx-glyph {
    align-self: start;
    margin-top: 3px;
    font-size: 11px;
    color: var(--tx-nr-info);
}

.rse-ai-suggests-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--tx-text);
}

.rse-ai-suggests-lead {
    color: var(--tx-nr-info);
}

.rse-ai-confidence {
    font-family: var(--tx-font-text);
    font-size: 11.5px;
    color: var(--tx-muted);
}

.rse-ai-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
}

.rse-ai-step-glyph {
    margin-top: 2px;
    font-size: 15px;
    color: var(--tx-nr-info);
}

.rse-ai-dismiss {
    align-self: flex-start;
    padding: 6px 12px 2px 0;
    border: 0;
    background: transparent;
    font-family: var(--tx-font);
    font-weight: 600;
    font-size: 12px;
    color: var(--tx-muted);
    text-align: left;
    cursor: pointer;
}

.rse-ai-dismiss:disabled {
    opacity: .55;
    cursor: default;
}

.rse-ai-error {
    font-family: var(--tx-font-text);
    font-size: 12px;
    line-height: 1.4;
    color: var(--tx-nr-critical);
}

.tx-btn.rse-ai-yes {
    gap: 6px;
    min-width: 72px;
    padding: 8px 14px;
}

.tx-btn.rse-ai-yes .tx-glyph {
    font-size: 12px;
}

.tx-btn.rse-ai-yes.rse-ai-applying {
    opacity: .6;
    cursor: default;
}

/* ------------------------------------------------------------------ Narrow screens */

@media (max-width: 360px) {
    .rse-glance-grid {
        gap: 6px;
    }

    .tx-glance-tile.rse-glance-tile {
        padding: 8px;
    }

    .tx-seg.rse-status .tx-seg-item {
        font-size: 11px;
    }
}