/* settings.css — page layer (owner: S5).
   Loaded after studio.css by base.html.  Tokens only: no colour or length
   literals outside design-tokens.css. */

/* ── The page's sections: five cards under one header ────────────────── */

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.settings-section .card-header {
  align-items: flex-start;
  gap: var(--space-xs);
}

.settings-section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.settings-section-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.settings-section-lede {
  margin: 0;
  max-width: 68ch;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

.settings-section-lede code,
.settings-hint code,
.settings-facts code {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

.settings-subtitle {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.settings-hint {
  margin: 0;
  max-width: 68ch;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

/* ── LLM rails ───────────────────────────────────────────────────────── */

.settings-rail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.settings-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* The rail the next chat turn goes out on is marked by its border as well as
   its badge: the badge is the word, the border is what a glance finds. */
.settings-rail[data-rail-active="true"] {
  border-color: var(--color-accent);
}

.settings-rail-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.settings-rail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.settings-rail-label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.settings-rail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  min-width: 0;
}

.settings-rail-model {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  overflow-wrap: anywhere;
}

.settings-rail-url {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  /* the full URL is the title attribute; this is the glanceable half */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-rail-note {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

.settings-rail-warn {
  display: block;
  margin-top: var(--space-2xs);
  color: var(--color-warning);
}

.settings-rail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.settings-rail-actions .ui-btn {
  min-height: var(--tap-min);
}

/* The probe's answer, in the row it belongs to.  Empty until a button is
   pressed — and the row above says "not checked yet" until then, so an empty
   line here is never mistaken for "green". */
.settings-rail-result {
  margin: 0;
  min-height: var(--font-size-sm);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.settings-rail-result[data-tone="ok"] {
  color: var(--color-success);
}

.settings-rail-result[data-tone="bad"] {
  color: var(--color-danger);
}

/* ── The state chip ──────────────────────────────────────────────────── */

.settings-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-input);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-secondary);
}

.settings-state-dot {
  width: var(--space-xs);
  height: var(--space-xs);
  border-radius: var(--radius-full);
  /* an unchecked rail is hollow on purpose: a filled dot is a measurement */
  border: 1px solid var(--color-text-muted);
  background-color: transparent;
}

.settings-state[data-state="ok"] {
  color: var(--color-success);
}

.settings-state[data-state="ok"] .settings-state-dot {
  border-color: var(--color-success);
  background-color: var(--color-success);
}

.settings-state[data-state="auth"] {
  color: var(--color-warning);
}

.settings-state[data-state="auth"] .settings-state-dot {
  border-color: var(--color-warning);
  background-color: var(--color-warning);
}

.settings-state[data-state="unreachable"],
.settings-state[data-state="error"] {
  color: var(--color-danger);
}

.settings-state[data-state="unreachable"] .settings-state-dot,
.settings-state[data-state="error"] .settings-state-dot {
  border-color: var(--color-danger);
  background-color: var(--color-danger);
}

.settings-state[data-state="pending"] .settings-state-dot {
  border-color: var(--color-accent);
}

.settings-state[data-state="pending"] {
  color: var(--color-accent);
}

/* ── The provider/model picker ───────────────────────────────────────── */

.settings-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.settings-picker-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  align-items: end;
}

.settings-picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.settings-picker-actions .ui-btn {
  min-height: var(--tap-min);
}

.settings-active {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

.settings-active code {
  font-family: var(--font-mono);
  color: var(--color-text);
}

/* ── Spotify connection ──────────────────────────────────────────────── */

.settings-spotify {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.settings-spotify-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.settings-spotify-claim {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.settings-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
}

.settings-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-2xs) 0;
  border-top: 1px solid var(--border-subtle);
}

.settings-fact dt {
  flex: 0 0 auto;
  min-width: 11ch;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.settings-fact dd {
  margin: 0;
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.settings-fact--block {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
  padding: var(--space-sm) 0;
}

.settings-fact--block dt {
  min-width: 0;
}

.settings-fact-value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.settings-fact .settings-fact-note {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

.settings-missing-scopes {
  margin: 0;
  padding-left: var(--space-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.settings-missing-scopes code {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* ── Theme segment ───────────────────────────────────────────────────── */

.settings-choice-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
}

.settings-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-height: var(--tap-comfortable);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}

.settings-choice:hover {
  background-color: var(--color-surface-card-hover);
  border-color: var(--border-strong);
}

.settings-choice:focus-visible {
  outline: var(--focus-ring) solid var(--color-accent);
  outline-offset: var(--space-3xs);
}

.settings-choice.is-current {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.settings-choice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.settings-choice-badge {
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-full);
  background-color: var(--color-accent-dim);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.settings-choice-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.settings-choice.is-current .settings-choice-label {
  color: var(--color-accent);
}

.settings-choice-detail {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

/* ── Wider than a phone ──────────────────────────────────────────────── */

@media (min-width: 768px) {
  .settings-rail {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  .settings-rail-main {
    flex: 1 1 auto;
  }

  .settings-rail-actions {
    flex: 0 0 auto;
    margin-left: var(--space-md);
    justify-content: flex-end;
  }

  .settings-rail-result {
    flex-basis: 100%;
  }

  .settings-picker-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .settings-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-choice-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ── The in-page sub-nav ─────────────────────────────────────────────── */

.settings-subnav {
  position: sticky;
  z-index: var(--z-sticky);
  top: calc(var(--header-height) + var(--space-2xs));
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  overflow-x: auto;
  padding: var(--space-2xs);
  background-color: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  scrollbar-width: none;
}

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

.settings-subnav-link {
  flex: 1 0 auto;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.settings-subnav-link:hover {
  color: var(--color-text);
  background-color: var(--color-surface-card-hover);
}

.settings-subnav-link:focus-visible {
  outline: var(--focus-ring) solid var(--color-accent);
  outline-offset: var(--space-3xs);
}

.settings-subnav-link.is-current {
  background-color: var(--color-accent-dim);
  color: var(--color-accent);
}

/* Sections are cards from here on; the gap between them is one rhythm step. */
.settings-section {
  margin-top: var(--space-md);
}

.settings-section-head {
  flex: 1 1 auto;
}

/* Full-width block — outside every grid, so a totals line cannot look like
   it belongs to the half-column it sits under. */
.settings-totals {
  padding-bottom: var(--space-xs);
}

/* Summary strip: the one number a section is *about*, above its detail. */
.settings-summary {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

.settings-summary strong {
  color: var(--color-text);
}

/* ── The key badge ──────────────────────────────────────────────────── */

.settings-key {
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-input);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-secondary);
}

.settings-key[data-key-present="false"] {
  color: var(--color-warning);
}

/* ── In-flight buttons: the spinner is drawn by the attribute the JS set ── */

.ui-btn[aria-busy="true"] {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.ui-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--font-size-md);
  height: var(--font-size-md);
  border: 2px solid var(--border-strong);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-full);
  animation: settings-spin var(--transition-slow) linear infinite;
}

@keyframes settings-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-btn[aria-busy="true"]::after {
    animation-duration: 2s;
  }
}

/* ── Debug & verbose: the switch, the filter, the honest error line ───── */

/* A real switch, not a checkbox dressed up: role="switch" + aria-checked is
   what a screen reader announces, and the thumb's position is the visual half
   of the same fact.  The store, not this file, owns which state is true. */
.settings-switch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.settings-switch-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
  max-width: 60ch;
}

.settings-switch-label {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.settings-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-block-size: var(--tap-min);
  padding: var(--space-2xs) var(--space-sm);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.settings-switch:hover:not(:disabled) {
  color: var(--color-text);
  background-color: var(--color-surface-card-hover);
}

.settings-switch:focus-visible {
  outline: var(--focus-ring) solid var(--color-accent);
  outline-offset: var(--focus-ring);
}

.settings-switch:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.settings-switch-track {
  position: relative;
  display: inline-block;
  inline-size: var(--space-2xl);
  block-size: var(--space-lg);
  background-color: var(--color-surface-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.settings-switch-thumb {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-3xs);
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
  margin-block-start: calc(var(--space-sm) / -2);
  background-color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  transition: transform var(--transition), background-color var(--transition-fast);
}

.settings-switch[aria-checked="true"] {
  color: var(--color-text);
  border-color: var(--color-accent);
}

.settings-switch[aria-checked="true"] .settings-switch-track {
  background-color: var(--color-accent-dim);
  border-color: var(--color-accent);
}

.settings-switch[aria-checked="true"] .settings-switch-thumb {
  background-color: var(--color-accent);
  /* track width − thumb width − the thumb's two insets: the thumb lands on
     the far edge of the track, which is the whole visual claim of a switch. */
  transform: translateX(calc(var(--space-2xl) - var(--space-sm) - var(--space-3xs) * 2));
}

.settings-switch-text {
  font-variant-numeric: tabular-nums;
}

.settings-debug-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-xs) var(--space-lg);
}

.settings-debug-filter .ui-field {
  min-inline-size: 16rem;
}

.settings-debug-error:empty {
  display: none;
}

.settings-debug-error {
  color: var(--color-warning);
}

/* ── the scope table: the token's measured grants ─────────────────────── */

.settings-scope {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--border-subtle);
}

.settings-scope-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.settings-scope-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.settings-scope-actions .settings-hint {
  margin: 0;
  max-width: 68ch;
}

.settings-hint a {
  display: inline-flex;
  align-items: center;
  min-inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
}

.settings-scopes-table,
.settings-keys {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.settings-scopes-table th,
.settings-scopes-table td,
.settings-keys th,
.settings-keys td {
  padding: var(--space-2xs) var(--space-sm);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--border-subtle);
}

.settings-scopes-table thead th,
.settings-keys thead th {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.settings-scopes-table tbody td:first-child {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.settings-scopes-table tbody tr[data-state="missing"] td:first-child {
  color: var(--color-warning);
}

.settings-keys-caption {
  padding-block-end: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: start;
}

/* ── where you left off ───────────────────────────────────────────────── */

.settings-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.settings-resume-label {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.settings-resume-body {
  min-width: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.settings-resume-body a {
  color: var(--color-accent);
}

/* A key is a key: the <kbd> chips get a border and a mono face so "s" in the
   shortcut table is not read as the letter in a sentence. */
.settings-section kbd {
  display: inline-block;
  min-inline-size: var(--space-lg);
  padding: 0 var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  text-align: center;
  color: var(--color-text);
  background-color: var(--color-surface-input);
  border: 1px solid var(--border-strong);
  border-block-end-width: 2px;
  border-radius: var(--radius-sm);
}