/* ── Account Settings / Preferences / Price Alerts / Followed Figures modals ──
   Shared with static/account-modals.js on pages that don't already have this CSS
   inline (tickers.html, portfolio.html, calendar.html). Ported from index.html,
   which keeps its own separate copy of this CSS in its inline <style> block.
   .auth-overlay/.auth-modal/.panel-modal/.panel-scroll-body/.menu-toggle/
   .auth-form/.auth-field/.auth-error/.auth-submit/.auth-modal-back/
   .auth-success-msg/.mfa-intro/.mfa-code-input/.digest-gate-box's siblings
   already exist on the host page — only the classes below are new. ── */

/* ── Settings modal layout ── */
.auth-modal.settings-modal {
  width: min(50vw, 820px, calc(100vw - 2rem));
  min-width: min(480px, calc(100vw - 2rem));
  height: 85vh; max-height: 840px;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.settings-modal-head {
  flex-shrink: 0; position: relative;
  padding: 1.75rem 2rem 0;
}
.settings-modal-title {
  font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 1.25rem;
  padding-right: 2rem;
}
.settings-modal-body {
  flex: 1 1 0; min-height: 0;
  overflow-y: auto; padding: 1.5rem 2rem 2rem;
  scrollbar-width: thin; scrollbar-color: var(--border2) transparent;
}
.settings-modal-body::-webkit-scrollbar { width: 4px; }
.settings-modal-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ── Settings tabs ── */
.settings-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 0;
  overflow-x: auto; scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab-btn {
  flex-shrink: 0; background: none; border: none; color: var(--text-muted);
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 0.55rem 0.9rem; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; white-space: nowrap;
}
.settings-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.settings-tab-btn.danger-tab { color: var(--negative); }
.settings-tab-btn.danger-tab.active { border-bottom-color: var(--negative); }
.settings-pane { display: none; }
.settings-pane.active { display: block; }

@media (max-width: 480px) {
  .settings-tab-btn { min-height: 44px; display: inline-flex; align-items: center; font-size: 0.875rem; }
}

/* ── Sessions / danger zone / generic settings rows ── */
.session-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border); gap: 0.75rem;
}
.session-item:last-child { border-bottom: none; }
.session-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.session-dot.current { background: var(--accent); }
.session-dot.other { background: var(--text-dim); }
.session-meta { font-size: 0.75rem; color: var(--text-muted); }
.session-label { font-size: 0.8rem; font-weight: 500; color: var(--text); }
.danger-zone-warning {
  font-size: 0.8rem; color: var(--text-muted); line-height: 1.5;
  background: var(--negative-subtle); border: 1px solid rgba(220,38,38,0.2);
  border-radius: 8px; padding: 0.75rem; margin-bottom: 1rem;
}
.settings-section { margin-bottom: 1.5rem; }
.settings-section-title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 1rem;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-size: 0.85rem; font-weight: 500; color: var(--text); }
.settings-row-desc { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }

/* ── Profile pane ── */
.profile-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.25rem 0 1.5rem; text-align: center;
}
.profile-avatar {
  width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent) 0%, #0096ff 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; font-weight: 800; color: #fff; letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}
.profile-display-name { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
.profile-display-email { font-size: 0.75rem; color: var(--text-muted); }
.profile-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; margin-bottom: 1.75rem;
}
.profile-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.8rem 0.4rem; text-align: center;
  border-right: 1px solid var(--border);
}
.profile-stat:last-child { border-right: none; }
.profile-stat-val { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1; }
.profile-stat-label {
  font-size: 0.6rem; color: var(--text-dim); margin-top: 0.3rem;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ── Subscription cards ── */
.premium-card {
  border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1.75rem;
  background: linear-gradient(135deg, rgba(255,184,0,0.09), rgba(255,140,0,0.04));
  border: 1px solid rgba(255,184,0,0.3);
}
.premium-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.premium-card-crown { font-size: 1rem; line-height: 1; }
.premium-card-title { font-size: 0.88rem; font-weight: 700; color: #FFB800; }
.premium-card-badge {
  margin-left: auto; font-size: 0.6rem; font-weight: 700; padding: 0.15rem 0.55rem;
  border-radius: 20px; background: rgba(255,184,0,0.15); color: #FFB800;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.premium-card-sub { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 1rem; }
.btn-manage-sub {
  width: 100%; justify-content: center;
  border-color: rgba(255,184,0,0.35) !important; color: #FFB800 !important;
}
.btn-manage-sub:hover { background: rgba(255,184,0,0.07) !important; }
.upgrade-card {
  border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1.75rem;
  background: var(--surface2); border: 1px solid var(--border2);
}
.upgrade-card-title { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 0.7rem; }
.upgrade-card-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.upgrade-card-list li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; color: var(--text-muted); padding: 0.2rem 0;
}
.upgrade-card-list li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }

/* ── Collapsible password ── */
.cp-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 0.75rem 0; cursor: pointer; font-family: inherit;
  font-size: 0.85rem; font-weight: 500; color: var(--text); text-align: left;
  transition: color 0.15s;
}
.cp-toggle:hover { color: var(--accent); }
.cp-chevron { font-size: 0.7rem; color: var(--text-dim); transition: transform 0.2s; }
.cp-toggle[aria-expanded="true"] .cp-chevron { transform: rotate(180deg); }
.cp-collapse { overflow: hidden; max-height: 0; transition: max-height 0.28s ease; }
.cp-collapse.open { max-height: 480px; }
.cp-collapse .auth-form { padding-top: 1rem; }

/* ── Sign out row (Profile pane) ── */
.btn-signout-muted {
  display: block; width: 100%; background: none; border: none;
  border-top: 1px solid var(--border); padding: 1rem 0 0; margin-top: 0.25rem;
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--text-dim); cursor: pointer; text-align: center;
  transition: color 0.15s;
}
.btn-signout-muted:hover { color: var(--text-muted); }

/* ── Username field ── */
.username-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.username-input {
  flex: 1; background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 8px; color: var(--text); font-family: inherit;
  font-size: 0.82rem; padding: 0.45rem 0.75rem; outline: none;
  transition: border-color 0.15s;
}
.username-input:focus { border-color: var(--accent); }
.username-save-btn {
  flex-shrink: 0; font-size: 0.75rem; padding: 0.42rem 0.85rem;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.username-save-btn.visible { opacity: 1; pointer-events: auto; }
.username-hint { font-size: 0.68rem; color: var(--text-dim); }

/* ── AI Summary Style — card selector ── */
.style-card-group { display: flex; flex-direction: column; gap: 0.5rem; }
.style-card {
  display: block; position: relative; cursor: pointer;
  border: 1.5px solid var(--border2); border-radius: 10px;
  padding: 0.8rem 1rem; background: var(--surface2);
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.style-card:hover { border-color: rgba(255,255,255,0.2); }
.style-card.sel { border-color: var(--accent); background: var(--accent-subtle); }
.style-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.style-card-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.2rem; }
.style-card-dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border2); background: none;
  transition: border-color 0.15s, background 0.15s;
}
.style-card.sel .style-card-dot { border-color: var(--accent); background: var(--accent); }
.style-card-name { font-size: 0.84rem; font-weight: 600; color: var(--text); }
.style-card-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.45; padding-left: 1.35rem; }

/* ── Inline preference controls ── */
.pref-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border);
}
.pref-row:last-child { border-bottom: none; }
.pref-label { font-size: 0.84rem; font-weight: 500; color: var(--text); }
.pref-row-text { flex: 1; }
.pref-row-title { font-size: 0.84rem; font-weight: 500; color: var(--text); }
.pref-row-desc { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.pref-notif-btn {
  flex-shrink: 0;
  background: #000000; color: #fff; border: 1px solid #000000;
  border-radius: var(--radius); font-family: inherit; font-size: 0.78rem;
  font-weight: 600; padding: 0.4rem 0.9rem; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.pref-notif-btn:hover:not(:disabled) { opacity: 0.85; }
.pref-notif-btn:disabled { opacity: 0.6; cursor: default; }
.pref-select {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 7px; color: var(--text); font-family: inherit;
  font-size: 0.78rem; padding: 0.35rem 0.6rem; outline: none; cursor: pointer;
  transition: border-color 0.15s;
}
.pref-select:focus { border-color: var(--accent); }
.pref-checks { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pref-check-label {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; color: var(--text-muted); cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 6px; padding: 0.3rem 0.65rem;
  transition: border-color 0.15s, color 0.15s;
}
.pref-check-label:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.pref-check-label input { display: none; }

/* ── Sources ── */
.source-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.15rem; }
.source-pill {
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 20px;
  color: var(--text-muted); font-family: inherit; font-size: 0.74rem; font-weight: 500;
  padding: 0.3rem 0.75rem; cursor: pointer; transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.source-pill:hover { border-color: var(--accent); color: var(--accent); }
.source-pill.pill-all { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.source-pill.pill-off { opacity: 0.35; color: var(--text-dim); }
@media (max-width: 768px) {
  .source-pill { min-height: 36px; display: inline-flex; align-items: center; }
}

/* ── MFA (status/QR/secret/backup codes not already covered by the host page's
   own .mfa-intro/.mfa-code-input) ── */
.mfa-status-badge {
  font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.55rem;
  border-radius: 20px; letter-spacing: 0.04em;
}
.mfa-status-badge.on { background: var(--accent-subtle); color: var(--accent); }
.mfa-status-badge.off { background: var(--surface2); color: var(--text-muted); }
.mfa-qr-wrap { text-align: center; margin: 1rem 0; }
.mfa-qr-wrap img { width: 180px; height: 180px; border-radius: 8px; background: #fff; padding: 6px; }
.mfa-secret-box {
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px;
  padding: 0.5rem 0.75rem; font-family: monospace; font-size: 0.78rem;
  color: var(--text-muted); word-break: break-all; text-align: center;
  margin-bottom: 1rem; user-select: all;
}
.backup-codes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin: 0.75rem 0; }
.backup-code-item {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.4rem 0.6rem; font-family: monospace; font-size: 0.82rem;
  color: var(--text); text-align: center; letter-spacing: 0.08em;
}
.backup-codes-warning {
  font-size: 0.75rem; color: #ffb400; background: rgba(255,180,0,0.08);
  border: 1px solid rgba(255,180,0,0.2); border-radius: 7px;
  padding: 0.5rem 0.75rem; margin-top: 0.5rem; line-height: 1.45;
}
.backup-codes-copy-btn {
  width: 100%; margin-top: 0.75rem; background: var(--surface2);
  border: 1px solid var(--border2); border-radius: 8px; color: var(--text-muted);
  font-family: inherit; font-size: 0.78rem; padding: 0.5rem; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.backup-codes-copy-btn:hover { color: var(--text); border-color: var(--text-muted); }

/* ── Preferences sync toast ── */
.prefs-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 400;
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: 10px; padding: 0.55rem 1rem;
  font-size: 0.78rem; color: var(--accent); font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.prefs-toast.visible { opacity: 1; pointer-events: none; transform: translateY(0); }

/* ── Email Digest / Daily Brief / Breaking News / Figure Alert / Event gates ── */
.digest-gate-box {
  border: 1px solid var(--border2); border-radius: 12px;
  padding: 1.25rem; text-align: center; background: var(--surface2);
}
.digest-gate-box .gate-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
.digest-gate-box .gate-title { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 0.3rem; }
.digest-gate-box .gate-desc { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.5; }
.digest-freq-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.digest-freq-label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--text); cursor: pointer; }
.digest-freq-label input[type="radio"] { accent-color: var(--accent); cursor: pointer; }
.digest-freq-label.locked { opacity: 0.5; cursor: default; }
.digest-cats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1.5rem; margin-top: 0.25rem; }
.digest-cat-label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--text); cursor: pointer; }
.digest-cat-label input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.digest-preview-msg { font-size: 0.78rem; text-align: center; margin-top: 0.35rem; display: none; }
.mb-email-send-msg { font-size: 0.78rem; }

/* ── Followed figures list (Preferences pane) ── */
.followed-figures-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px; max-height: 200px; overflow-y: auto;
}
.followed-figure-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--surface2);
  border: 0.5px solid var(--border); border-radius: 8px; font-size: 13px;
}
.followed-figure-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.followed-figure-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.followed-figure-category { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.followed-figure-remove {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 13px; padding: 2px 6px; border-radius: 4px;
  transition: color 0.15s, background 0.15s; flex-shrink: 0;
}
.followed-figure-remove:hover { color: var(--negative); background: var(--negative-subtle); }
.figures-empty, .figures-loading { font-size: 13px; color: var(--text-muted); padding: 8px 0; line-height: 1.5; }
.pref-manage-figures-btn {
  background: none; border: 0.5px solid var(--border2); border-radius: 8px;
  color: var(--accent); font-size: 13px; font-weight: 600; padding: 7px 14px;
  cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s; margin-top: 4px;
}
.pref-manage-figures-btn:hover { background: var(--accent-dim); border-color: var(--accent); }

/* ── Manage Figures sub-modal ── */
.figures-modal-category-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-dim); margin: 16px 0 8px;
}
.figures-modal-category-label:first-child { margin-top: 0; }
.figures-modal-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.figures-modal-tile {
  background: var(--surface2); border: 0.5px solid var(--border2); border-radius: 8px;
  padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none; white-space: nowrap;
}
.figures-modal-tile:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.figures-modal-tile.selected { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.figures-modal-tile.locked { opacity: 0.5; }

/* ── Password strength meter (host page has its own copy for signup; this one
   is for the Settings modal's change-password field, id="cp-*") ── */
.pw-strength { margin-top: -0.15rem; }
.pw-strength-bar { display: flex; gap: 4px; }
.pw-strength-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--border2); transition: background-color 0.15s; }
.pw-strength-seg.fill-weak { background: #dc2626; }
.pw-strength-seg.fill-fair { background: #d97706; }
.pw-strength-seg.fill-strong { background: #2563eb; }
.pw-strength-seg.fill-vstrong { background: #16a34a; }
.pw-strength-label { font-size: 0.72rem; font-weight: 600; margin-top: 0.3rem; color: var(--text-muted); }
.pw-criteria { list-style: none; margin: 0.45rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.5rem; }
.pw-criteria li { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; }
.pw-criteria li::before { content: "✗"; font-size: 0.7rem; color: var(--red); flex-shrink: 0; }
.pw-criteria li.met { color: var(--positive); }
.pw-criteria li.met::before { content: "✓"; color: var(--positive); font-weight: 700; }