/* Settings (System → Settings) — collapsible section cards of `.kv`
   rows whose widget sits on the right, plus the notification
   preferences modal body that system.js renders. The bool toggle is
   the shared `.switch` from _form.css. Memory (System → Memory) shares
   the inline-edit pattern and keeps its rules here. */

/* Sticky client-side filter above the section cards. */
.settings__search {
    position: sticky;
    top: var(--sp-2);
    z-index: var(--z-sticky);
    padding: var(--sp-2) 0;
    background: var(--color-bg);
}

/* Section card: a <details> whose <summary> is the card header. */
.settings__summary { cursor: pointer; list-style: none; user-select: none; }
.settings__summary::-webkit-details-marker { display: none; }
.settings__summary:hover { background: var(--color-surface-hi); }
.settings__summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.settings__chevron { margin-left: auto; transition: transform var(--t-fast); }
.settings__section[open] > .settings__summary .settings__chevron { transform: rotate(180deg); }

/* Row: key + description on the left, widget on the right. Wraps to
   stacked on narrow screens so an input never squeezes the key. */
.settings__row { align-items: flex-start; flex-wrap: wrap; }
.settings__key { flex: 1 1 240px; min-width: 0; }
.settings__key code { word-break: break-all; }
.settings__desc { margin-top: var(--sp-1); max-width: 56ch; line-height: 1.4; }
.settings__value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-1);
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}
.settings__display { word-break: break-all; }
.settings__input { min-width: 220px; max-width: 100%; }
.settings__error { text-align: right; }
.settings__row--error .settings__input,
.settings__row--error .switch__track { border-color: var(--color-danger); }
@media (max-width: 640px) {
    .settings__value { align-items: flex-start; flex-basis: 100%; }
    .settings__error { text-align: left; }
    .settings__input { min-width: 0; width: 100%; }
}

/* Memory page — same inline-edit pattern as settings */
.memory__search {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    margin-right: var(--sp-3);
}
.memory__search .form__input {
    flex: 1;
    max-width: 320px;
}
.memory__value {
    max-width: 480px;
}
.memory__display {
    display: inline-block;
    color: var(--color-text);
    word-break: break-word;
}
.memory__actions {
    white-space: nowrap;
}
.memory__actions .btn {
    margin-right: 4px;
}

/* Notification preferences modal body (rendered by system.js):
   one bordered block per channel with a master `.switch` in its head
   and a `.kv` of per-type rows underneath, each with a sound picker,
   a preview button and a compact `.switch`. */
.notif-prefs__body { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.notif-prefs__channel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    background: var(--color-surface-alt);
}
.notif-prefs__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-3);
    flex-wrap: wrap;
}
.notif-prefs__channel-title { font-weight: 600; }
.notif-prefs__types { margin-top: var(--sp-2); }
.notif-prefs__controls {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.notif-prefs__controls .select { width: auto; max-width: 200px; }
.notif-prefs__quiet { margin-top: var(--sp-2); }
.notif-prefs__quiet .field { flex: 0 1 120px; }
.notif-prefs__actions { justify-content: space-between; }