/* Settings (ticket 493), the AI provider pane's cards: one column of radio cards, a Save row, and an "In
   effect now" card; the sidebar and pane layout (ticket 985) follow. Reuses the shared
   .card/.glass/.btn/.login-label/.login-input/.login-error/.scenario-alert vocabulary from console.css; only
   the page and card layout below is new. The global :focus-visible ring in console.css already covers every
   control. */

/* The Settings layout (ticket 985): a left sidebar of panes beside one main column, like System Settings.
   js/settings_sidebar.js draws it for Account, General, AI provider, Notifications, Domains, Users and
   Audit. The selected row uses the accent fill and bar only. At 760px and narrower the sidebar is one
   horizontally scrolling row of links under the top bar and the group labels are hidden. */
.settings-layout {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin: 1rem auto 1.5rem;
  max-width: 76rem;
  min-width: 0;
}

.settings-layout:not(:has(.settings-sidebar)) {
  grid-template-columns: minmax(0, 1fr);
}

.settings-sidebar {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.settings-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.settings-sidebar__label {
  margin: 0 0 0.2rem;
  padding: 0 0.7rem;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.settings-sidebar__link {
  display: block;
  padding: 0.5rem 0.7rem;
  border-left: 2px solid transparent;
  border-radius: 6px;
  color: var(--ink-body);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.settings-sidebar__link:hover {
  color: var(--ink);
}

.settings-sidebar__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.settings-sidebar__link.is-current {
  color: var(--ink);
  background: var(--gold-soft);
  border-left-color: var(--gold);
}

.settings-main {
  min-width: 0;
  max-width: 58rem;
}

.settings-main > .workspace-head {
  margin-bottom: var(--space-3);
}

.settings-pane {
  min-width: 0;
}

/* One pane's cards (js/views/settings.js draws every pane and shows the open one). */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

.settings-section[hidden] {
  display: none;
}

/* An unavailable pane or group says one line and draws no form (ticket 985). */
.settings-card__note.settings-unavailable {
  color: var(--ink-body);
  font-size: var(--fs-sm);
}

@media (max-width: 760px) {
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
  }

  .settings-sidebar {
    position: static;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
  }

  .settings-sidebar::-webkit-scrollbar {
    display: none;
  }

  .settings-sidebar__group {
    flex: none;
    flex-direction: row;
    gap: 0;
  }

  .settings-sidebar__label {
    display: none;
  }

  .settings-sidebar__link {
    flex: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
  }

  .settings-sidebar__link.is-current {
    background: transparent;
    border-bottom-color: var(--gold);
  }
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.settings-cards {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.3rem;
}

.settings-card.is-selected {
  border-color: var(--border-gold);
  background: var(--gold-soft);
}

.settings-card__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
}

.settings-card__radio {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--gold);
}

.settings-card__title {
  font-size: var(--fs-md);
  color: var(--ink);
}

/* "Recommended" is a plain note in the muted ink (ticket 985): the selected card is the only gold thing, so
   the tag cannot read as the current choice. */
.settings-card__tag {
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

.settings-card__summary {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.settings-card__note {
  margin: 0;
  color: var(--st-4xx);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.settings-card__fields {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.2rem;
}

.settings-card__keyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}

.settings-card__keyrow .login-input {
  flex: 1 1 14rem;
  min-width: 0;
}

.settings-card__remove {
  flex: 0 0 auto;
}

.settings-card__remove[hidden] {
  display: none;
}

.settings-card__fields .login-input,
.settings-card__fields select {
  width: 100%;
  box-sizing: border-box;
}

.settings-card__keyrow .login-input {
  width: auto;
}

.settings-card__model {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-body);
}

.settings-card__model--ok {
  color: var(--health-ok);
}

.settings-card__model--warn {
  color: var(--st-4xx);
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.settings-alert__line {
  margin: 0;
}

.settings-alert__line + .settings-alert__line {
  margin-top: 0.3rem;
}

.settings-effective {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.settings-effective__title {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink);
}

.settings-effective__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.settings-effective__row {
  color: var(--ink-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.settings-effective__row--warn {
  color: var(--st-4xx);
}

.settings-effective__label {
  color: var(--ink);
}

.settings-effective__reason {
  display: block;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

/* Sanctioned sources card (ticket 580): one address or range per line, so the list reads in
   monospace and only grows downward. The rest reuses the card, field and alert classes above. */
.settings-sources__list {
  min-height: 8rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  resize: vertical;
}

.settings-sources[hidden] {
  display: none;
}

/* Tripwire ports card (ticket 637): one row per kind, a switch and a port field on one line, the
   status and any refusal sentence under them. The rest reuses the card, field and alert classes
   above. The card's display beats the UA [hidden] rule, as for the sanctioned sources. */
.settings-tripwires[hidden] {
  display: none;
}

.settings-tripwire {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.settings-tripwire__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.settings-tripwire__name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 5rem;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.settings-tripwire__switch {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--gold);
}

.settings-card__fields .settings-tripwire__port {
  width: 8rem;
}

.settings-tripwire__status {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.settings-tripwire__error {
  margin: 0;
}

/* Configure tab (tickets 860-863, 909). The form controls fill the width of their form instead of
   sitting at the browser's default width on the left. Scoped to .configure-field because the login
   page shares .login-input and must keep its own width. A number box (a port, a token count) stays
   narrow. */
.configure-field {
  margin-bottom: 0.9rem;
}

.configure-field input.login-input,
.configure-field textarea {
  width: 100%;
  box-sizing: border-box;
}

.configure-field textarea {
  resize: vertical;
}

/* A select is as wide as its longest option, so the ssh Interaction-level box ran past its card
   (ticket 941). Fill the card and clip long option text inside the box. console.css's base
   `select` rule paints the chevron and padding; only the width is set here. */
.configure-field select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.configure-field input.login-input[type="number"] {
  width: 10rem;
  max-width: 100%;
}

/* A yes/no setting on a Status Service card (ticket 910): the two-button group reuses console.css's
   .toggle-group and its .is-active fill; these rules add the touch size, the focus ring and the
   disabled look. The header pill reuses .pill with .status-2xx (Enabled) or .status-unknown
   (Disabled). A card whose saved state is disabled dims every row but the on/off switch; the
   rows stay editable, so a port can be set before the service is switched on. */
.configure-segment button {
  min-height: 2rem;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  padding: 0.3rem 0.9rem;
}

.configure-segment button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.configure-segment button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.configure-segment__state {
  margin-left: 0.6rem;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

.configure-service__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.configure-service__title .service-card__name {
  margin: 0 0 0.3rem;
}

.configure-service--off .configure-field:not([data-field$=".enabled"]) {
  opacity: 0.55;
}

/* The info button (ticket 909): a small round icon beside a label or heading that opens its help
   panel. It is a sibling of the label, never inside it. */
.info-tip__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.info-tip__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
}

.info-tip__button[hidden] {
  display: none;
}

.info-tip__button:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
}

.info-tip__button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.info-tip__button[aria-expanded="true"] {
  color: var(--gold);
  border-color: var(--border-gold);
  background: var(--gold-soft);
}

.info-tip__panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.35rem 0 0.6rem;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--border-gold);
  border-radius: 0.4rem;
  background: var(--panel-deep);
  color: var(--ink-body);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.info-tip__panel[hidden] {
  display: none;
}

.info-tip__text {
  margin: 0;
}

.info-tip__panel ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* Notifications card (ticket 921): one bordered block per channel, a form column inside it. The text
   inputs fill the card, scoped here because the Sign in page shares .login-input and keeps its own
   width. The card's display beats the UA [hidden] rule, as for the sanctioned sources. */
.settings-notifications[hidden] {
  display: none;
}

.settings-notifications .login-input {
  width: 100%;
  box-sizing: border-box;
}

.settings-notifications__list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.settings-notifications__channel {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
}

.settings-notifications__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.settings-notifications__type {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-md);
}

.settings-notifications__enabled,
.settings-notifications__event {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.settings-notifications__switch {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--gold);
}

.settings-notifications__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.settings-notifications__events {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}