/* ═══════════════════════════════════════════════════════════════
   UNIFIED SETTINGS — Full-viewport popup that consolidates Mira's
   most-used settings into one page (C2.1, maintainer 2026-05-08).

   Triggered by the gear icon next to the profile chip in the
   sidebar bottom (#unifiedSettingsBtn).  Renders 7 section tabs:
   Profile · Models & Keys · Display · Library Pipeline · Privacy ·
   Research · About.  Logic lives in ui/unified-settings.js.

   Per-page settings buttons stay where they are (C2.2 — additive
   only).  Density sliders are kept where they are too; the unified
   slider syncs them via Bus event "display:density-changed".
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar gear button (next to profile chip) ─────────── */
.sidebar-settings-btn{
  background:none;border:none;padding:3px;
  /* maintainer 2026-05-10: white icon (was muted gold-light) so it
   * matches the cream sidebar text contrast. Reduced padding so
   * the gear sits at the same vertical level as the sign-out
   * button next to it. */
  color:var(--cream, #fff);opacity:.65;
  cursor:pointer;border-radius:3px;
  transition:opacity .15s,background .15s;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sidebar-settings-btn:hover{
  opacity:1;
  background:rgba(255,255,255,.08);
}
.sidebar-settings-btn:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(218,165,32,.4);
}
.sidebar.collapsed .sidebar-settings-btn{display:none}

/* ── Modal sizing override — full-viewport "page" feel ──── */
.unified-settings-overlay .unified-settings-modal-content{
  width:92vw;max-width:1280px;
  height:88vh;max-height:88vh;
  padding:0;
  display:flex;flex-direction:column;
  overflow:hidden;
  border-radius:14px;
}

/* ── Header strip (title + close) ────────────────────────── */
.unified-settings-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px 14px;
  border-bottom:1px solid var(--border-light);
  flex-shrink:0;
}
.unified-settings-header h2{
  font-family:var(--serif);
  font-size:1.25rem;font-weight:600;
  color:var(--brown-dark);
  margin:0;
}

/* ── Body: tabs (left rail) + content pane ──────────────── */
.unified-settings-body{
  display:flex;flex:1;min-height:0;
}

.unified-settings-tabs{
  display:flex;flex-direction:column;
  flex-shrink:0;
  width:200px;
  padding:14px 0;
  border-right:1px solid var(--border-light);
  background:rgba(255,251,243,.4);
  overflow-y:auto;
}
.unified-settings-tab{
  background:none;border:none;
  text-align:left;
  padding:10px 22px;
  font-size:.86rem;font-weight:500;
  color:var(--text-muted);
  cursor:pointer;
  border-left:3px solid transparent;
  transition:color .12s,background .12s,border-color .12s;
  font-family:var(--sans);
}
.unified-settings-tab:hover{
  color:var(--brown-dark);
  background:rgba(139,69,19,.05);
}
.unified-settings-tab.active{
  color:var(--brown-dark);
  background:rgba(218,165,32,.08);
  border-left-color:var(--gold);
  font-weight:600;
}
.unified-settings-tab:focus{
  outline:none;
  background:rgba(218,165,32,.12);
}

.unified-settings-content{
  flex:1;min-width:0;
  padding:22px 28px;
  overflow-y:auto;
}

/* ── Pane container (one per section) ───────────────────── */
.us-pane{display:none}
.us-pane.active{display:block}
.us-pane h3{
  font-family:var(--serif);
  font-size:1.05rem;font-weight:600;
  color:var(--brown-dark);
  margin-bottom:6px;
}
.us-pane .us-pane-sub{
  font-size:.78rem;color:var(--text-muted);
  margin-bottom:18px;line-height:1.5;
}
.us-pane .us-section{
  margin-top:18px;padding-top:14px;
  border-top:1px solid var(--border-light);
}
.us-pane .us-section:first-of-type{
  margin-top:0;padding-top:0;border-top:none;
}
.us-pane .us-section-label{
  font-size:.7rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:10px;
}

/* ── Profile pane form fields (mirrors profileModal) ───── */
.us-form-group{margin-bottom:14px}
.us-form-row{display:flex;gap:12px}
.us-form-row .us-form-group{flex:1}
.us-form-label{
  display:block;
  font-size:.78rem;font-weight:600;
  color:var(--brown-dark);
  margin-bottom:5px;
}
.us-form-input{
  width:100%;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:.86rem;
  background:var(--white);
  color:var(--text);
  font-family:var(--sans);
  transition:border-color .15s,box-shadow .15s;
  box-sizing:border-box;
}
.us-form-input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(218,165,32,.18);
}
.us-avatar-preview{
  width:64px;height:64px;border-radius:50%;
  background:var(--gold);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.5rem;font-weight:700;
  margin:0 auto 14px;
}
.us-form-actions{
  display:flex;justify-content:flex-end;gap:10px;
  margin-top:18px;padding-top:14px;
  border-top:1px solid var(--border-light);
}
.us-btn-primary{
  padding:8px 20px;background:var(--accent);color:var(--white);
  border:none;border-radius:6px;font-weight:600;font-size:.84rem;
  cursor:pointer;transition:background .15s;
  font-family:var(--sans);
}
.us-btn-primary:hover{background:var(--accent-light)}
.us-btn-secondary{
  padding:8px 20px;background:var(--white);color:var(--text);
  border:1px solid var(--border);border-radius:6px;
  font-weight:500;font-size:.84rem;cursor:pointer;
  transition:background .15s,border-color .15s;
  font-family:var(--sans);
}
.us-btn-secondary:hover{
  background:rgba(139,69,19,.04);
  border-color:var(--text-muted);
}
.us-signout-link{
  display:block;
  margin-top:14px;
  padding:8px 0;
  background:none;border:none;
  font-size:.78rem;color:var(--text-muted);
  cursor:pointer;text-decoration:underline;
  font-family:var(--sans);
}
.us-signout-link:hover{color:#a8302b}

/* ── Display pane: density slider ──────────────────────── */
.us-density-row{
  display:flex;align-items:center;gap:14px;
  margin-bottom:6px;
}
.us-density-slider{
  flex:1;
  -webkit-appearance:none;appearance:none;
  height:4px;background:var(--border);border-radius:2px;
  outline:none;cursor:pointer;
}
.us-density-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--gold);cursor:pointer;
  border:2px solid var(--white);
  box-shadow:0 1px 3px rgba(62,39,35,.25);
}
.us-density-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:var(--gold);cursor:pointer;
  border:2px solid var(--white);
  box-shadow:0 1px 3px rgba(62,39,35,.25);
}
.us-density-value{
  display:inline-block;min-width:24px;
  text-align:center;
  font-family:var(--sans);font-weight:700;font-size:.86rem;
  color:var(--brown-dark);
}
.us-density-labels{
  display:flex;justify-content:space-between;
  font-size:.7rem;color:var(--text-muted);
  margin-top:2px;
}
.us-density-note{
  font-size:.74rem;color:var(--text-muted);
  margin-top:10px;line-height:1.5;
  font-style:italic;
}

/* ── Models & Keys: per-stage table ─────────────────────── */
.us-stage-table{
  width:100%;border-collapse:collapse;
  font-size:.84rem;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:8px;
  overflow:hidden;
}
.us-stage-table thead th{
  text-align:left;
  font-size:.7rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);
  padding:8px 12px;
  background:rgba(255,251,243,.6);
  border-bottom:1px solid var(--border-light);
}
.us-stage-table tbody tr{
  border-bottom:1px solid var(--border-light);
}
.us-stage-table tbody tr:last-child{border-bottom:none}
.us-stage-table td{
  padding:8px 12px;
  vertical-align:middle;
}
.us-stage-table .us-stage-label{
  font-weight:600;color:var(--brown-dark);
  white-space:nowrap;
  width:38%;
}
.us-stage-table .us-stage-select{
  width:100%;
  padding:6px 10px;
  border:1px solid var(--border);border-radius:6px;
  background:var(--white);color:var(--text);
  font-family:var(--sans);font-size:.84rem;
  cursor:pointer;
}
.us-stage-table .us-stage-select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(218,165,32,.18);
}

/* ── Models & Keys: API-key rows ────────────────────────── */
.us-key-rows{display:flex;flex-direction:column;gap:8px}
.us-key-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:8px;
}
.us-key-row-name{
  flex:0 0 180px;
  font-weight:600;font-size:.82rem;
  color:var(--brown-dark);
}
.us-key-row-input-wrap{
  flex:1;position:relative;display:flex;align-items:center;
  min-width:0;
}
.us-key-input{
  flex:1;
  padding:7px 36px 7px 10px;
  border:1px solid var(--border);border-radius:6px;
  font-size:.82rem;
  background:var(--white);color:var(--text);
  font-family:var(--mono,monospace);
  box-sizing:border-box;
  min-width:0;
}
.us-key-input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(218,165,32,.18);
}
.us-key-eye{
  position:absolute;right:6px;
  background:none;border:none;
  padding:4px;cursor:pointer;
  color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;
  transition:color .12s,background .12s;
}
.us-key-eye:hover{
  color:var(--brown-dark);
  background:rgba(139,69,19,.06);
}
.us-key-eye.us-key-eye-active{
  color:var(--gold);
}
.us-key-save{
  flex:0 0 auto;
  padding:7px 16px;
  background:var(--accent);color:var(--white);
  border:none;border-radius:6px;
  font-weight:600;font-size:.78rem;
  cursor:pointer;
  font-family:var(--sans);
  transition:background .12s;
}
.us-key-save:hover{background:var(--accent-light)}
.us-key-status{
  flex:0 0 auto;
  font-size:.74rem;
  color:var(--text-muted);
  font-family:var(--mono,monospace);
  min-width:130px;
  text-align:right;
}
.us-key-status-ok{color:#2e7d32}
.us-key-status-err{color:#a8302b}
.us-key-status-alpha{
  color:var(--gold);
  font-style:italic;
  font-family:var(--sans);
}

/* Narrow viewport: stack the key row */
@media (max-width:720px){
  .us-key-row{flex-wrap:wrap;gap:6px}
  .us-key-row-name{flex:1 1 100%}
  .us-key-status{flex:1 1 100%;text-align:left}
}

/* ── Placeholder pane (sections deferred to follow-ups) ── */
.us-placeholder{
  padding:24px 18px;
  background:rgba(218,165,32,.06);
  border:1px dashed rgba(218,165,32,.4);
  border-radius:8px;
  font-size:.84rem;color:var(--text);
  line-height:1.55;
}
.us-placeholder strong{
  color:var(--brown-dark);
  font-weight:600;
}
.us-placeholder code{
  background:rgba(0,0,0,.05);
  padding:1px 5px;border-radius:3px;
  font-size:.78rem;
}

/* ── Redirect card (R7-B item 4, 2026-05-09) ───────────────────
 * Library Pipeline / Privacy / Research tabs use a single-button
 * redirect card to send the user to where the controls actually
 * live, per maintainer's "stay where they live" rule. */
.us-redirect-card{
  margin-top:12px;
  padding:18px;
  background:rgba(0,0,0,.03);
  border:1px solid var(--border-light, rgba(0,0,0,.08));
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.us-redirect-card .us-btn-primary{
  margin:0;
}

/* ── About pane ────────────────────────────────────────── */
.us-about-meta{
  font-size:.82rem;color:var(--text);
  line-height:1.7;
}
.us-about-meta dt{
  display:inline-block;width:120px;
  font-weight:600;color:var(--text-muted);
  font-size:.74rem;
}
.us-about-meta dd{
  display:inline-block;
  font-family:var(--mono,monospace);
}
.us-about-meta a{
  color:var(--accent);text-decoration:none;
}
.us-about-meta a:hover{text-decoration:underline}

/* ── R7-B #7 (2026-05-08): citation-style picker ────────── */
.us-cite-current{
  display:flex;align-items:baseline;gap:8px;
  font-size:.82rem;color:var(--text);
  margin:0 0 8px;
}
.us-cite-current-label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-muted);
}
.us-cite-current-name{
  font-weight:600;color:var(--accent);
}
.us-cite-search{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--border-light);
  border-radius:6px;
  font-size:.86rem;
  background:var(--bg);
  color:var(--text);
  margin-bottom:8px;
}
.us-cite-search:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(184,134,11,.15);
}
.us-cite-results{
  max-height:280px;overflow-y:auto;
  border:1px solid var(--border-light);
  border-radius:6px;
  background:var(--bg);
}
.us-cite-result{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  width:100%;padding:8px 12px;
  background:transparent;border:0;border-bottom:1px solid var(--border-light);
  text-align:left;cursor:pointer;
  font-family:inherit;color:var(--text);
}
.us-cite-result:last-child{border-bottom:0}
.us-cite-result:hover{background:rgba(184,134,11,.06)}
.us-cite-result-active{
  background:rgba(184,134,11,.12);
}
.us-cite-result-active::before{
  content:"✓ ";color:var(--accent);
}
.us-cite-result-title{
  font-size:.84rem;font-weight:500;
}
.us-cite-result-sub{
  font-size:.7rem;color:var(--text-muted);
}
.us-cite-results-empty{
  padding:16px;color:var(--text-muted);
  font-size:.82rem;text-align:center;
}

/* ── Narrow viewport: collapse rail to top tab strip ────── */
@media (max-width:720px){
  .unified-settings-body{flex-direction:column}
  .unified-settings-tabs{
    width:100%;flex-direction:row;
    overflow-x:auto;overflow-y:hidden;
    border-right:none;
    border-bottom:1px solid var(--border-light);
    padding:8px 4px;
  }
  .unified-settings-tab{
    border-left:none;
    border-bottom:3px solid transparent;
    white-space:nowrap;
    padding:8px 14px;
  }
  .unified-settings-tab.active{
    border-left-color:transparent;
    border-bottom-color:var(--gold);
  }
  .unified-settings-overlay .unified-settings-modal-content{
    width:96vw;height:92vh;max-height:92vh;
  }
}