/* Roadmap 1.4 — settings AI suite. Presentation only; behavior stays in the
   registry and billing controllers. Every color is a shared semantic token. */
#settings-ai-engines-pane,
#settings-models-pane,
#settings-credits-pane {
  --ai-surface:var(--ui-glass);
  --ai-line:var(--ui-glass-line);
}

#settings-ai-engines-pane .engine-registry-status {
  margin:12px 0 16px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ui-muted);
  font:500 11px/1.4 var(--font-mono);
}
#settings-ai-engines-pane .engine-registry-status.is-ready { color:var(--ui-success); }
#settings-ai-engines-pane .engine-registry-status.is-failed { color:var(--ui-danger); }
#settings-ai-engines-pane .engine-registry-list { display:grid; gap:14px; }
#settings-ai-engines-pane .engine-registry-card {
  position:relative;
  display:grid;
  gap:15px;
  padding:18px;
  overflow:hidden;
  border:1px solid var(--ai-line);
  border-radius:var(--ui-radius);
  background:linear-gradient(145deg,var(--ai-surface),transparent),var(--ui-panel-soft);
  box-shadow:var(--ui-shadow-sm);
}
#settings-ai-engines-pane .engine-registry-card::before {
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--ui-line);
  content:"";
}
#settings-ai-engines-pane .engine-registry-card.is-default-engine {
  outline:none;
  border-color:var(--ui-accent-line);
  background:linear-gradient(145deg,var(--ui-accent-soft),transparent 52%),var(--ui-panel-soft);
}
#settings-ai-engines-pane .engine-registry-card.is-default-engine::before { background:var(--ui-accent); }
#settings-ai-engines-pane .engine-registry-head {
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:start;
}
#settings-ai-engines-pane .engine-registry-identity { align-items:flex-start; }
#settings-ai-engines-pane .engine-registry-identity > span:last-child { display:flex; flex-wrap:wrap; align-items:center; gap:4px 7px; }
#settings-ai-engines-pane .engine-registry-identity strong { font-size:15px; }
#settings-ai-engines-pane .engine-registry-identity small { flex-basis:100%; color:var(--ui-muted); font:500 10.5px/1.4 var(--font-mono); }
#settings-ai-engines-pane .engine-default-chip {
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:3px 7px;
  border:1px solid var(--ui-accent-line);
  border-radius:999px;
  background:var(--ui-accent-soft);
  color:var(--ui-accent);
  font:700 9px/1 var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
#settings-ai-engines-pane .engine-registry-head-controls { gap:8px; }
#settings-ai-engines-pane .engine-default-engine-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:6px 9px;
  border-color:var(--ui-accent-line);
  color:var(--ui-accent);
  font-size:11px;
  white-space:nowrap;
}
#settings-ai-engines-pane .engine-default-engine-btn::after { content:none; }
#settings-ai-engines-pane .engine-human-status {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:9px;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--ui-line-soft);
  border-radius:var(--ui-radius-sm);
  background:var(--ui-muted-surface);
  color:var(--ui-text-soft);
}
#settings-ai-engines-pane .engine-enabled-model-summary { justify-self:end; }
#settings-ai-engines-pane .engine-model-editor { gap:9px; }
#settings-ai-engines-pane .engine-model-control-row { padding-top:1px; }
#settings-ai-engines-pane .engine-model-provenance { color:var(--ui-muted); font:500 10px/1.5 var(--font-mono); }
#settings-ai-engines-pane .engine-details { margin-top:-3px; }
#settings-ai-engines-pane .engine-details summary { color:var(--ui-muted); }

#settings-models-pane .settings-models-actions { align-items:center; margin:18px 0 12px; }
.settings-models-refresh-status {
  min-height:1.4em;
  margin:0;
  color:var(--ui-muted);
  font:500 10px/1.4 var(--font-mono);
}
.settings-models-refresh-status.is-ready { color:var(--ui-success); }
.settings-models-refresh-status.is-failed { color:var(--ui-danger); }
#settings-models-pane .settings-models-rollup { display:grid; gap:14px; margin:0; }
.settings-model-group {
  overflow:hidden;
  border:1px solid var(--ai-line);
  border-radius:var(--ui-radius);
  background:var(--ai-surface);
  box-shadow:var(--ui-shadow-sm);
}
.settings-model-group > header {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:15px 16px;
  border-bottom:1px solid var(--ui-line-soft);
  background:var(--ui-muted-surface);
}
.settings-model-group > header > div { display:flex; align-items:center; gap:8px; }
.settings-model-group > header span { display:grid; gap:2px; }
.settings-model-group > header strong { color:var(--ui-text); font-size:14px; }
.settings-model-group > header small { color:var(--ui-muted); font:500 10px/1.4 var(--font-mono); }
.settings-model-count { color:var(--ui-muted); font:600 10px/1.2 var(--font-mono); white-space:nowrap; }
.settings-model-columns,
.settings-model-row {
  display:grid;
  grid-template-columns:minmax(150px,1.5fr) minmax(72px,.55fr) minmax(100px,.75fr) minmax(84px,.65fr);
  align-items:center;
  gap:12px;
}
.settings-model-columns { padding:9px 16px; color:var(--ui-muted); font:600 9px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.settings-model-list { margin:0; padding:0; list-style:none; }
.settings-model-row { min-height:58px; padding:10px 16px; border-top:1px solid var(--ui-line-soft); }
.settings-model-identity { display:grid; gap:2px; min-width:0; }
.settings-model-identity strong { overflow:hidden; color:var(--ui-text); font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }
.settings-model-identity small { overflow:hidden; color:var(--ui-muted); font:500 9.5px/1.4 var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }
.settings-model-tier { justify-self:start; padding:4px 7px; border:1px solid var(--ui-neutral-line); border-radius:999px; color:var(--ui-text-soft); font:700 9px/1 var(--font-mono); text-transform:capitalize; }
.settings-model-tier.tier-economy { border-color:var(--ui-success-line); color:var(--ui-success); background:var(--ui-success-soft); }
.settings-model-tier.tier-premium { border-color:var(--ui-accent-line); color:var(--ui-accent); background:var(--ui-accent-soft); }
.settings-model-availability { display:flex; align-items:center; gap:6px; color:var(--ui-text-soft); font-size:11px; }
.settings-model-availability i { width:7px; height:7px; border-radius:50%; background:currentColor; }
.settings-model-availability.state-ready { color:var(--ui-success); }
.settings-model-availability.state-attention { color:var(--ui-warning); }
.settings-model-availability.state-unavailable { color:var(--ui-danger); }
.settings-model-default { color:var(--ui-accent); font:600 9.5px/1.3 var(--font-mono); }
.settings-model-empty { margin:0; padding:22px 16px; color:var(--ui-text-soft); text-align:center; }
.settings-model-empty strong { color:var(--ui-text); }
.settings-model-empty p { margin:4px auto 0; max-width:50ch; font-size:12px; }

#settings-credits-pane { padding-bottom:30px; }
#settings-credits-pane .settings-intro small { display:inline; }
#settings-credits-pane .credits-zero-state {
  margin:20px 0 14px;
  padding:13px 15px;
  border:1px solid var(--ui-accent-line);
  border-radius:var(--ui-radius-sm);
  background:var(--ui-accent-soft);
  color:var(--ui-text-soft);
  font-size:12px;
}
#settings-credits-pane .credits-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
#settings-credits-pane .credits-stat {
  display:grid;
  gap:8px;
  min-width:0;
  padding:16px;
  border:1px solid var(--ai-line);
  border-radius:var(--ui-radius-sm);
  background:var(--ai-surface);
}
#settings-credits-pane .credits-stat small { color:var(--ui-muted); font:600 9.5px/1.3 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
#settings-credits-pane .credits-stat strong { color:var(--ui-text); font-size:21px; letter-spacing:-.025em; }
#settings-credits-pane .credits-card {
  display:grid;
  gap:13px;
  margin-top:12px;
  padding:18px;
  overflow:visible;
  border:1px solid var(--ai-line);
  border-radius:var(--ui-radius);
  background:linear-gradient(145deg,var(--ai-surface),transparent),var(--ui-panel-soft);
  box-shadow:var(--ui-shadow-sm);
}
#settings-credits-pane .credits-card > h3 { margin:0; color:var(--ui-text); font-size:14px; }
#settings-credits-pane #credits-plan-card { border-color:var(--ui-accent-line); }
#settings-credits-pane .pricing-head { align-items:flex-start; }
#settings-credits-pane .pricing-head h3 { font-size:18px; }
#settings-credits-pane .pricing-head p { margin-top:3px; color:var(--ui-muted); font-size:11px; }
#settings-credits-pane .pricing-intervals { padding:3px; border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-muted-surface); }
#settings-credits-pane .pricing-intervals .button { border:0; }
#settings-credits-pane .credits-form { gap:12px; }
#settings-credits-pane .credits-usage { width:100%; border-collapse:collapse; }
#settings-credits-pane .credits-usage th { color:var(--ui-muted); font:600 9px/1.2 var(--font-mono); letter-spacing:.06em; text-align:left; text-transform:uppercase; }
#settings-credits-pane .credits-usage th,
#settings-credits-pane .credits-usage td { padding:10px 8px; border-bottom:1px solid var(--ui-line-soft); }

.engine-auth-lanes { display:grid; gap:8px; padding:10px 0; }
.engine-auth-lane { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border:1px solid var(--ui-line-soft); border-radius:var(--ui-radius-sm); background:var(--ui-muted-surface); }
.engine-auth-lane[data-lane-active="true"] { border-color:var(--ui-accent-line); background:var(--ui-accent-soft); }
.engine-auth-lane-info { display:grid; gap:3px; min-width:0; }
.engine-auth-lane-label { color:var(--ui-text); font:600 12px/1.3 var(--font-sans); }
.engine-auth-lane-status { color:var(--ui-text-soft); font-size:11px; }
.engine-auth-lane-actions { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.engine-auth-lane-active-chip { padding:2px 8px; border-radius:999px; border:1px solid var(--ui-accent-line); background:var(--ui-accent); color:var(--ui-accent-contrast, white); font:700 9px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.engine-auth-lane-cta { padding:4px 10px; border:1px solid var(--ui-line); border-radius:var(--ui-radius-sm); background:var(--ui-panel); color:var(--ui-text-soft); cursor:pointer; font-size:11px; }
.engine-auth-lane-cta:hover { border-color:var(--ui-accent-line); color:var(--ui-accent); }

.engine-legacy-section { margin-top:4px; }
.engine-legacy-section > summary { padding:10px 0; color:var(--ui-muted); cursor:pointer; font:500 11px/1.4 var(--font-mono); }
.engine-legacy-section > summary:hover { color:var(--ui-text-soft); }
.engine-legacy-section > .engine-registry-card { margin-top:10px; }

.engine-provenance-details { display:inline; }
.engine-provenance-details summary { display:inline; color:var(--ui-muted); cursor:pointer; font-size:10px; }

.settings-model-lane-card.is-selected-payer {
  border-color:var(--ui-accent-line);
  box-shadow:0 0 0 1px var(--ui-accent-line),var(--ui-shadow-sm);
}
.settings-model-lane-card.is-selected-payer > header {
  background:linear-gradient(145deg,var(--ui-accent-soft),transparent),var(--ui-muted-surface);
}
.settings-model-lane-identity { min-width:0; }
.settings-model-lane-identity > strong {
  overflow:hidden;
  color:var(--ui-text-soft);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.settings-model-lane-state { justify-content:flex-start; flex-wrap:wrap; }
.settings-model-connection {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--ui-muted);
  font:600 10px/1.2 var(--font-mono);
  white-space:nowrap;
}
.settings-model-connection i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
}
.settings-model-connection.state-connected { color:var(--ui-success); }
.settings-model-connection.state-error { color:var(--ui-danger); }
.settings-model-payer-chip {
  padding:3px 7px;
  border:1px solid var(--ui-accent-line);
  border-radius:999px;
  background:var(--ui-accent);
  color:var(--ui-accent-contrast,white);
  font:700 9px/1 var(--font-mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

@media (max-width:760px) {
  #settings-ai-engines-pane .engine-registry-head { grid-template-columns:1fr; gap:13px; }
  #settings-ai-engines-pane .engine-registry-head-controls { justify-content:flex-start; }
  #settings-ai-engines-pane .engine-human-status { grid-template-columns:auto minmax(0,1fr); }
  #settings-ai-engines-pane .engine-enabled-model-summary { grid-column:2; justify-self:start; }
  .settings-model-columns { display:none; }
  .settings-model-row { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding-block:13px; }
  .settings-model-tier { grid-column:2; grid-row:1; }
  .settings-model-availability { grid-column:1; grid-row:2; }
  .settings-model-default { grid-column:2; grid-row:2; text-align:right; }
  #settings-credits-pane .credits-summary { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  #settings-ai-engines-pane *, #settings-models-pane *, #settings-credits-pane * { scroll-behavior:auto; }
}

/* Doc 71 §2: the OpenAI lane method chooser + Who-pays selector. */
.engine-auth-lane-chooser {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.engine-auth-who-pays {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--ui-line-soft, var(--ui-line, #2a2f3a));
}

.engine-auth-who-pays-label {
  font: 600 0.72rem/1.2 var(--font-ui, system-ui), sans-serif;
  color: var(--ui-text-muted, var(--ui-muted, #8b93a7));
}

.engine-auth-who-pays-option {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.7rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--ui-line, #2a2f3a);
  border-radius: 999px;
  background: transparent;
  color: var(--ui-text-soft, #c3c9d6);
  font: 600 0.72rem/1.2 var(--font-ui, system-ui), sans-serif;
  cursor: pointer;
}

.engine-auth-who-pays-option:hover:not([disabled]) {
  background: var(--ui-hover, #1b2130);
  color: var(--ui-text, #e8eaf0);
}

.engine-auth-who-pays-option[disabled] {
  opacity: 0.5;
  cursor: default;
}

.engine-auth-who-pays-option.is-active {
  border-color: var(--ui-accent, #4da3ff);
  color: var(--ui-text, #e8eaf0);
  background: color-mix(in srgb, var(--ui-accent, #4da3ff) 12%, transparent);
}

.engine-auth-who-pays-marker {
  color: var(--ui-accent, #4da3ff);
  font-size: 0.6rem;
}

.engine-auth-who-pays-note {
  flex-basis: 100%;
  color: var(--ui-text-muted, var(--ui-muted, #8b93a7));
  font: 500 0.7rem/1.4 var(--font-ui, system-ui), sans-serif;
}

.engine-auth-empty {
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--ui-line, #2a2f3a);
  border-left: 3px solid var(--ui-warn, #e0a33a);
  border-radius: 0.4rem;
  color: var(--ui-text-soft, #c3c9d6);
  font: 500 0.74rem/1.45 var(--font-ui, system-ui), sans-serif;
}

/* The reason a Who-pays lane cannot be chosen must be readable, not only a
   hover title — keyboard and assistive-technology users never see a title. */
.engine-auth-who-pays-reason {
  margin-left: 0.35rem;
  font-size: 0.72rem;
  opacity: 0.75;
}

/* Doc 75 R1: the subscription connect confirm step — consequences stated
   plainly before the sign-in starts, an explicit Continue required. */
.engine-auth-confirm {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.4rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ui-line, #2a2f3a);
  border-left: 3px solid var(--ui-warn, #e0a33a);
  border-radius: 0.45rem;
  background: var(--ui-panel, #141821);
}

.engine-auth-confirm-title {
  margin: 0;
  font: 650 0.82rem/1.3 var(--font-ui, system-ui), sans-serif;
  color: var(--ui-text, #e8eaf0);
}

.engine-auth-consequences {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.3rem;
  color: var(--ui-text-soft, #c3c9d6);
  font: 500 0.78rem/1.45 var(--font-ui, system-ui), sans-serif;
}

.engine-auth-confirm .button { justify-self: start; }

/* Doc 75 R2/R3: the credential-eviction attention banner on the card. */
.engine-auth-attention {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ui-line, #2a2f3a);
  border-left: 3px solid var(--ui-danger, #e05a4a);
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--ui-danger, #e05a4a) 7%, transparent);
}

.engine-auth-attention-body {
  display: grid;
  gap: 0.15rem;
  color: var(--ui-text-soft, #c3c9d6);
  font: 500 0.76rem/1.45 var(--font-ui, system-ui), sans-serif;
}

.engine-auth-attention-body strong {
  color: var(--ui-text, #e8eaf0);
  font-size: 0.8rem;
}