/* Request Settings (/requests/admin/settings): a section list beside one card,
   a row of buttons above it when the content area is narrow. Rows put the label
   and its help on the left and the boxes on the right, and stack when the card
   is narrow. Widths are container queries, so the layout follows the content
   area whether or not the side menu is open. Brand tokens (app.css) carry the
   contrast in both themes; every state also has words, never colour alone. */

.rs-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
}

.rs-head__title {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--mud-palette-text-primary);
}

.rs-head__sub {
    margin: 4px 0 0;
    max-width: 72ch;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.rs-shell {
    container: rs-shell / inline-size;
    /* A quiet fill for tags and "Off" pills: a tint of the text colour, so it shows on
       the surface in both themes (the dark theme's background-gray is darker than it). */
    --rs-neutral: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
}

.rs-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* ---- Section list ---------------------------------------------------------- */
.rs-nav {
    position: sticky;
    top: 80px; /* under the 64px app bar */
}

.rs-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rs-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.rs-nav__item:hover { background: var(--mud-palette-action-default-hover); }

.rs-nav__item:focus-visible,
.rs-nav__link:focus-visible,
.rs-disclosure__head:focus-visible {
    outline: 2px solid var(--focus, var(--mud-palette-primary));
    outline-offset: 2px;
}

.rs-nav__item.is-active { background: var(--primary-soft, var(--mud-palette-action-default-hover)); }

.rs-nav__item.is-active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 3px;
    background: var(--primary, var(--mud-palette-primary));
}

.rs-nav__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
}

.rs-nav__item.is-active .rs-nav__icon {
    border-color: transparent;
    background: var(--primary, var(--mud-palette-primary));
    color: var(--on-primary, #fff);
}

.rs-nav__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.rs-nav__title {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
}

.rs-nav__item.is-active .rs-nav__title { color: var(--primary-ink, var(--mud-palette-primary)); }

.rs-nav__sub {
    font-size: .775rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-nav__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary, var(--mud-palette-primary));
}

.rs-nav__more {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.rs-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
}

.rs-nav__link > span { flex: 1; }

.rs-nav__link:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

/* ---- The card ---------------------------------------------------------------- */
.rs-main {
    container: rs-main / inline-size;
    min-width: 0;
}

.rs-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-md, 14px);
    box-shadow: var(--shadow-card);
}

.rs-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rs-card__heading {
    flex: 1 1 320px;
    min-width: 0;
}

.rs-card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Focus moves here when a section opens; show the ring only for keyboard users. */
.rs-card__title:focus:not(:focus-visible) { outline: none; }

.rs-card__desc {
    margin: 4px 0 0;
    max-width: 72ch;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.rs-card__body { padding: 0 24px 8px; }

/* ---- One setting: words on the left, boxes on the right ------------------------ */
.rs-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 10px 32px;
    align-items: start;
    padding: 18px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* A setting with no help line: the name sits level with its boxes. */
.rs-row--compact {
    align-items: center;
    padding: 12px 0;
}

.rs-card__body > .rs-row:first-child,
.rs-group + .rs-row { border-top: 0; }

.rs-group + .rs-row { padding-top: 8px; }

.rs-row__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .925rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.rs-row__help {
    margin: 4px 0 0;
    max-width: 60ch;
    font-size: .825rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.rs-row__fields { min-width: 0; }

.rs-row__fields--pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.rs-row__fields--stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rs-switches {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.rs-tag {
    padding: 1px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--rs-neutral);
    color: var(--mud-palette-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .4px;
}

/* A heading between groups of settings inside one card */
.rs-group {
    margin: 16px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.rs-card__body > .rs-group:first-child {
    margin-top: 0;
    border-top: 0;
}

/* ---- Reminders: one row per kind of request, opened to edit --------------------- */
.rs-list {
    list-style: none;
    margin: 18px 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rs-disclosure {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

.rs-disclosure.is-open { border-color: var(--primary, var(--mud-palette-primary)); }

.rs-disclosure__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rs-disclosure__head:hover { background: var(--mud-palette-action-default-hover); }

.rs-disclosure__chev {
    color: var(--mud-palette-text-secondary);
    transition: transform .15s ease;
}

.rs-disclosure.is-open .rs-disclosure__chev { transform: rotate(90deg); }

.rs-disclosure__title {
    flex: 1;
    min-width: 140px;
    font-weight: 600;
}

.rs-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rs-pill {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--rs-neutral);
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rs-pill.is-on {
    background: var(--success-soft, var(--mud-palette-background-gray));
    color: var(--success-ink, var(--mud-palette-text-primary));
}

.rs-disclosure__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    padding: 6px 14px 14px 44px;
}

/* ---- Save bar: stays at the bottom of the window while the card scrolls past ----- */
.rs-savebar {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: 16px;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: var(--shadow-card);
}

.rs-savebar.is-dirty {
    border-color: var(--primary, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--primary, var(--mud-palette-primary)) 7%, var(--mud-palette-surface));
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

.rs-savebar__status {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.rs-savebar.is-dirty .rs-savebar__status {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.rs-savebar__actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ---- Narrow content area: the section list becomes a row of buttons above the card */
@container rs-shell (max-width: 820px) {
    .rs-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .rs-nav { position: static; }

    .rs-nav__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .rs-nav__item {
        width: auto;
        padding: 5px 14px 5px 5px;
        border-color: var(--mud-palette-lines-default);
        border-radius: 999px;
    }

    .rs-nav__item.is-active { border-color: var(--primary, var(--mud-palette-primary)); }
    .rs-nav__item.is-active::before { display: none; }

    .rs-nav__icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

    .rs-nav__sub { display: none; }

    .rs-nav__more {
        margin-top: 8px;
        padding-top: 0;
        border-top: 0;
    }

    .rs-nav__link { display: inline-flex; }
}

/* ---- Narrow card: each setting's boxes go under its words ------------------------ */
@container rs-main (max-width: 640px) {
    .rs-row { grid-template-columns: minmax(0, 1fr); }
    .rs-card__head { padding: 16px 16px 12px; }
    .rs-card__body { padding: 0 16px 8px; }

    .rs-disclosure__body {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 14px;
    }
}

@container rs-main (max-width: 380px) {
    .rs-row__fields--pair { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .rs-nav__item,
    .rs-disclosure__chev { transition: none; }
}