/* Settings visual polish, responsive layout, and Users presentation.
 * Split from settings.css to keep each component source bounded. */
/* T388 (doc 57): settings drawer visual system — scoped paint only.
   The shipped drawer layout, pane headers (h2 sizing is !important by
   design), kicker color, and tab sizing own structure; this layer adds
   type paint on #settings-drawer-scoped selectors. The earlier draft of
   this block targeted a nonexistent settings page/tab markup — replaced. */
#settings-drawer .settings-pane > h2 { font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.015em; color: var(--ui-text); }
#settings-drawer .settings-intro { font-family: var(--font-ui); color: var(--ui-text-soft); }
#settings-drawer .settings-kicker { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
#settings-drawer .settings-tab { font-family: var(--font-ui); font-weight: 600; border-radius: 0.5rem; transition: background var(--speed, 140ms) ease, color var(--speed, 140ms) ease; }
#settings-drawer .settings-tab[aria-selected="true"] { color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 13%, transparent); }
#settings-drawer .settings-pane label { font-family: var(--font-ui); font-weight: 600; color: var(--ui-text); }
#settings-drawer .settings-pane small, #settings-drawer .settings-pane .dim { font-family: var(--font-ui); color: var(--ui-muted); }
#settings-drawer .settings-pane input, #settings-drawer .settings-pane select { font-family: var(--font-ui); border-radius: 0.55rem; transition: border-color var(--speed, 140ms) ease; }
#settings-drawer .settings-pane input:focus, #settings-drawer .settings-pane select:focus { outline: none; border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent); }
#settings-drawer .settings-pane .button { font-family: var(--font-ui); font-weight: 600; }
#settings-drawer .capacity-card { border-radius: 0.85rem; }

/* T401: settings drawer nav — mono group labels, accent-selected tab. */
#settings-drawer .settings-nav-group-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-muted);
}
#settings-drawer .settings-tab {
  color: var(--ui-text-soft);
  border-left: 2px solid transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
#settings-drawer .settings-tab:hover {
  color: var(--ui-text);
  background: var(--ui-panel-hover, var(--ui-hover));
}
#settings-drawer .settings-tab[aria-selected="true"] {
  border-left-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 9%, transparent);
}

/* Credits truth: the lane line says which wallet pays; the as-of stamp makes
   every figure carry its age; an unconfigured Add-credit is visibly inert. */
#settings-credits-pane .credits-lane {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--ui-text-soft, var(--ui-fg-muted, inherit));
}
#settings-credits-pane .credits-asof {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--ui-text-soft, var(--ui-fg-muted, inherit));
}
#settings-credits-pane a[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.6);
}
#settings-credits-pane .credits-topup-config {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
#settings-credits-pane .credits-topup-config label {
  font-size: 0.8rem;
  color: var(--ui-text-soft, inherit);
}
#settings-credits-pane .credits-topup-config input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--ui-line, #8884);
  border-radius: 0.45rem;
  background: var(--ui-panel, transparent);
  color: inherit;
  font: inherit;
}
#settings-credits-pane .credits-topup-config .button {
  justify-self: start;
}
#settings-credits-pane .credits-operation-status {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--ui-text-soft, var(--ui-fg-muted, inherit));
}

.settings-phone-brand,.settings-phone-menu { display:none; }
.engine-model-options-toggle { display:none; }

/* Phone model management: give the list remaining space, not a fixed 66vh
   body squeezed between a tall toolbar and two competing close footers. */
@media (max-width:820px) {
  #manage-modal-overlay:has(.engine-model-picker) > .modal-panel {
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  #manage-modal-overlay:has(.engine-model-picker) .cc-sheet-thumb-close { display:none; }
  #manage-modal-overlay:has(.engine-model-picker) .panel-header { padding:8px 12px; min-height:56px; }
  #manage-modal-overlay:has(.engine-model-picker) .manage-modal-badges { display:none; }
  #manage-modal-overlay:has(.engine-model-picker) .modal-body {
    flex:1 1 auto;
    height:auto;
    min-height:0;
    padding:8px 12px;
  }
  #manage-modal-overlay:has(.engine-model-picker) #manage-modal-footer {
    flex:0 0 auto;
    padding:6px 12px;
    gap:6px;
  }
  #manage-modal-overlay .engine-model-picker-message:empty { display:none; }
  #manage-modal-overlay .engine-model-picker-message:not(:empty) { flex-basis:100%; order:2; }
  #manage-modal-overlay:has(.engine-model-picker) #manage-modal-footer .button { min-height:44px; }
  .engine-model-picker { gap:4px; }
  .engine-model-picker .engine-model-options-toggle { display:flex; flex:0 0 auto; min-height:44px; justify-content:flex-start; }
  .engine-model-picker .engine-model-options-toggle::after { content:'▾'; margin-left:auto; }
  .engine-model-picker.show-options .engine-model-options-toggle::after { content:'▴'; }
  .engine-model-picker:not(.show-options) :is(.engine-model-facets,.engine-model-capability,.engine-model-provenance,.engine-model-actions) { display:none; }
  .engine-model-picker.show-options { overflow-y:auto; }
  .engine-model-picker.show-options .model-manage-list { flex:1 0 132px; }
  .engine-model-picker .model-manage-toolbar {
    flex:0 0 auto;
    grid-template-columns:auto minmax(0,1fr);
    gap:4px;
  }
  .engine-model-picker .model-manage-search { grid-column:1 / -1; min-height:44px; font-size:16px; }
  .engine-model-picker .engine-model-modes { grid-column:1; grid-row:2; }
  .engine-model-picker .engine-model-capability { grid-column:2; grid-row:2; justify-content:flex-end; gap:4px; font-size:10px; }
  .engine-model-picker .engine-model-capability select { width:100%; min-width:0; max-width:110px; min-height:44px; }
  .engine-model-picker .engine-model-facets { grid-column:1 / -1; grid-row:3; flex-wrap:nowrap; gap:4px; }
  .engine-model-picker :is(.engine-model-facet,.engine-model-mode) { padding:5px 8px; min-height:44px; font-size:11px; }
  .engine-model-picker .engine-model-provenance { font-size:10px; line-height:1.3; }
  .engine-model-picker .engine-model-actions { flex:0 0 auto; gap:4px; }
  .engine-model-picker .engine-picker-text-action { min-height:44px; font-size:11px; }
  .engine-model-picker .engine-model-actions > label { flex:1 0 100%; display:flex; align-items:center; gap:6px; }
  .engine-model-picker #engine-model-picker-default { flex:1; min-width:0; width:0; min-height:44px; }
  .engine-model-picker .engine-model-list-heading { flex:0 0 auto; }
  .engine-model-picker :is(.engine-model-picker-row,.engine-model-family) {
    height:44px;
    min-height:44px;
    box-sizing:border-box;
  }
  .engine-model-picker .engine-model-picker-row { position:relative; gap:6px; padding:4px; }
  .engine-model-picker-row .model-manage-name { min-width:0; font-size:12px; }
  .engine-model-picker-row .model-manage-cost { display:none; }
  .engine-model-picker-row :is(.engine-model-tier,.engine-model-recommended,.engine-model-reason) { font-size:9px; }
  .engine-model-picker .engine-model-family { padding:0 4px; }
  .engine-model-picker .engine-model-family .button { min-height:44px; }
}

/* Phone feedback: keep Settings content, not a tall nav directory, above the fold. */
@media (max-width:820px) {
  #settings-drawer,#settings-drawer.open { transition:none; }
  #settings-drawer .settings-workspace {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    min-width:0;
  }
  #settings-drawer > .panel-header { gap:4px; padding:6px 12px; min-height:64px; background:var(--ui-bg); }
  #settings-drawer #settings-title { display:flex; align-items:center; gap:8px; margin-right:auto; font-size:16px; }
  #settings-drawer #settings-title::before {
    content:none;
  }
  #settings-drawer .settings-desktop-title { display:none; }
  #settings-drawer .settings-phone-brand { display:flex; align-items:center; gap:8px; min-height:44px; padding:0; border:0; background:transparent; color:var(--ui-text); font:650 15px/1.2 var(--font-ui); cursor:pointer; }
  #settings-drawer .settings-phone-brand .brand-mark { width:1.65rem; height:1.65rem; }
  #settings-drawer .settings-phone-menu { display:grid; place-items:center; width:44px; min-width:44px; height:44px; padding:0; border:0; background:transparent; box-shadow:none; }
  #settings-drawer .settings-phone-menu .ui-icon { width:18px; height:18px; }
  #settings-drawer #board-health { display:inline-flex; flex:0 0 24px; width:24px; min-width:24px; height:24px; padding:0; justify-content:center; align-self:center; border:0; border-radius:50%; }
  #settings-drawer #board-health .health-dot { flex:0 0 8px; width:8px; height:8px; min-height:8px; max-height:8px; }
  #settings-drawer #settings-close,
  #settings-drawer > .cc-sheet-thumb-close { display:none; }
  #settings-drawer[data-sheet-thumb-close="true"] { padding-bottom:env(safe-area-inset-bottom,0px); }
  #settings-drawer .settings-tabs {
    display:flex !important;
    flex-direction:row;
    align-items:center;
    gap:4px !important;
    min-width:0;
    max-height:none;
    padding:4px 12px !important;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    border-right:0;
    border-bottom:1px solid var(--ui-line) !important;
  }
  #settings-drawer .settings-tabs::-webkit-scrollbar { display:none; }
  #settings-drawer .settings-nav-group { display:contents; }
  #settings-drawer .settings-nav-group-label { display:none; }
  #settings-drawer .settings-tab { flex:0 0 auto; min-height:44px; padding:8px 10px; white-space:nowrap; border:1px solid var(--ui-line); }
  #settings-drawer .settings-tab[aria-selected="true"] { border-color:var(--ui-accent); }
  #settings-drawer .settings-body { min-width:0; padding:14px 12px 20px !important; }
  #settings-drawer .settings-pane > h2 { font-size:21px !important; }
  #settings-drawer .settings-intro { margin:6px 0 12px; font-size:12px; }
  #settings-drawer .capacity-card,
  #settings-drawer #settings-ai-engines-pane .engine-registry-card,
  #settings-drawer #settings-credits-pane .credits-card { padding:12px; gap:9px; }
  #settings-drawer #settings-credits-pane .credits-summary { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px; margin:10px 0; }
  #settings-drawer #settings-credits-pane .credits-stat { padding:10px; gap:4px; }
  #settings-drawer #settings-credits-pane .credits-stat:last-child { grid-column:1 / -1; }
  #settings-drawer #settings-credits-pane .credits-stat strong { font-size:19px; }
  #settings-drawer #settings-credits-pane .credits-zero-state { margin:10px 0; padding:10px; }
  #settings-drawer #settings-credits-pane .pricing-head { flex-wrap:wrap; gap:8px; }
  #settings-drawer #settings-credits-pane .credits-usage { table-layout:fixed; }
  #settings-drawer #settings-credits-pane .credits-usage td { overflow-wrap:anywhere; }
}

/* 81-B Settings → Users. Same rhythm as the capacity cards beside it. */
.users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.users-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: var(--surface-1, rgba(255, 255, 255, 0.02));
}

.users-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.users-who strong,
.users-who small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-who small,
.users-seen {
  color: var(--muted, rgba(255, 255, 255, 0.55));
}

.users-row-pending {
  border-style: dashed;
  grid-template-columns: minmax(0, 1fr) auto;
}

.settings-admin-notice {
  margin: auto;
  max-width: 34rem;
  padding: 2rem;
  text-align: center;
}

.settings-admin-notice .button { margin-top: 0.75rem; }

.users-revoke { min-height: 44px; }

.users-invite {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}

.users-invite-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.users-invite-row input {
  flex: 1 1 240px;
  min-width: 0;
}

.users-invite-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
}

.users-invite-note {
  margin: 0;
  color: var(--muted, rgba(255, 255, 255, 0.55));
}

.users-invite-message {
  width: 100%;
  resize: vertical;
  font-family: inherit;
}

.users-status:empty { display: none; }

.users-error { color: var(--danger, #ff6b6b); }

@media (max-width: 720px) {
  .users-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    row-gap: 6px;
  }
  .users-who { grid-column: 1 / -1; }
  .users-row-pending { grid-template-columns: minmax(0, 1fr) auto; }
  .users-row-pending .users-who { grid-column: auto; }
  .users-seen { grid-column: 1 / -1; }
}