/* Settings -- the command center for one account.
   styles.css loads first and paints the app's flame identity; this file
   deliberately does not inherit it. Settings is a back office: instruments,
   not atmosphere. Its own token set lives under --s-*, it is not themed by
   the Appearance picker (that picker changes the app, not this room), and
   the accent is used once per screen instead of everywhere. */

html, html[data-theme] {
  /* Warm neutral greys, low contrast between surfaces, one ember accent.
     Nothing here glows; nothing here moves unless you touch it. */
  --s-bg: #171614;
  --s-panel: #1e1d1a;
  --s-panel-2: #24231f;
  --s-raise: rgba(255, 255, 255, .045);
  --s-raise-2: rgba(255, 255, 255, .075);
  --s-line: rgba(255, 255, 255, .085);
  --s-line-2: rgba(255, 255, 255, .16);
  --s-text: #edeae3;
  --s-text-2: #a8a29a;
  --s-text-3: #7d7871;
  --s-accent: #c9683f;
  --s-accent-hi: #d8794f;
  --s-accent-soft: rgba(201, 104, 63, .14);
  --s-info: #7e9fc4;
  --s-info-soft: rgba(126, 159, 196, .14);
  --s-ok: #7fae84;
  --s-ok-soft: rgba(127, 174, 132, .14);
  --s-warn: #cfa257;
  --s-warn-soft: rgba(207, 162, 87, .14);
  --s-danger: #cd6f6b;
  --s-danger-soft: rgba(205, 111, 107, .14);
  --s-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --s-radius: 10px;
}

/* The app paints three radial glows onto every body. Not in here. */
body {
  background: var(--s-bg);
  background-image: none;
  color: var(--s-text);
  -webkit-font-smoothing: antialiased;
}

/* styles.css gradients the primary button, the toggles, the meters and the
   avatar from the active app theme. Settings keeps one flat accent so the
   page reads as instrumentation instead of marketing. */
html[data-theme] .settings-btn.primary,
html[data-theme] .toggle[aria-checked="true"],
html[data-theme] .meter-fill,
html[data-theme] .avatar,
html[data-theme] .confirm-no { background: none; }
html[data-theme] .settings-btn.primary { background: var(--s-accent); }
html[data-theme] .toggle[aria-checked="true"] { background: var(--s-accent); }
html[data-theme] .meter-fill { background: var(--s-info); }
html[data-theme] .avatar { background: var(--s-raise-2); }

/* ---- Shell ---- */

.settings-shell { display: flex; min-height: 100dvh; width: min(100%, 1180px); margin: 0 auto; }

.settings-nav {
  flex: none; width: 244px; height: 100dvh; position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: max(20px, env(safe-area-inset-top)) 12px 18px;
  border-right: 1px solid var(--s-line);
  background: var(--s-bg);
}
.settings-brand {
  display: flex; align-items: center; gap: 9px; padding: 4px 8px 20px;
  color: var(--s-text); text-decoration: none;
  font: 600 12px/1 var(--s-mono); letter-spacing: .1em; text-transform: uppercase;
}
.settings-brand img { width: 20px; height: 20px; object-fit: contain; filter: grayscale(.35) brightness(.95); }
.settings-nav-label {
  padding: 14px 8px 6px; color: var(--s-text-3);
  font: 600 10px/1 var(--s-mono); letter-spacing: .14em; text-transform: uppercase;
}
.settings-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 9px; color: var(--s-text-2); background: transparent;
  border: 0; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.settings-nav-item svg { flex: none; width: 16px; height: 16px; opacity: .7; }
.settings-nav-item:hover { color: var(--s-text); background: var(--s-raise); }
.settings-nav-item.active { color: var(--s-text); background: var(--s-raise-2); font-weight: 600; }
.settings-nav-item.active svg { opacity: 1; color: var(--s-accent); }
.settings-nav-spacer { flex: 1; }
.settings-nav-foot { display: flex; flex-direction: column; gap: 1px; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--s-line); }

.settings-main { flex: 1; min-width: 0; padding: max(20px, env(safe-area-inset-top)) 34px 90px; }
.settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--s-line); }
.settings-head h1 { margin: 0; font: 600 21px/1.2 var(--sans); letter-spacing: -.01em; }
.settings-head-sub { margin: 5px 0 0; color: var(--s-text-2); font-size: 13px; line-height: 1.5; }
.settings-close {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--s-text-3); background: transparent; border: 1px solid var(--s-line);
  border-radius: 8px; font-size: 16px; line-height: 1; cursor: pointer; text-decoration: none;
}
.settings-close:hover { color: var(--s-text); border-color: var(--s-line-2); }

.settings-panel { display: none; }
.settings-panel.active { display: block; }

/* ---- Sections: a labelled instrument panel, always open ---- */

.settings-section { margin: 0 0 28px; }
.settings-section > h2 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 3px;
  font: 600 11px/1 var(--s-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--s-text-3);
}
.settings-section > p.section-note { margin: 0 0 14px; max-width: 62ch; color: var(--s-text-2); font-size: 13px; line-height: 1.55; }
.settings-section > h2 + p.section-note { margin-top: 8px; }

/* Rows sit inside a bordered block so a section reads as one unit. */
.settings-rows {
  border: 1px solid var(--s-line); border-radius: var(--s-radius);
  background: var(--s-panel); overflow: hidden;
}
.settings-rows + .settings-rows { margin-top: 10px; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 16px; border-bottom: 1px solid var(--s-line);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.settings-row-text { min-width: 0; flex: 1; }
.settings-row-text strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--s-text); }
.settings-row-text span { display: block; margin-top: 3px; color: var(--s-text-2); font-size: 12.5px; line-height: 1.5; }
.settings-row-text span a { color: var(--s-info); }
.settings-row-text .value { color: var(--s-text); font-size: 13.5px; font-family: var(--s-mono); }
.settings-row-action { flex: none; display: flex; align-items: center; gap: 8px; }

/* ---- Controls ---- */

.settings-btn {
  padding: 8px 14px; color: var(--s-text); background: var(--s-raise);
  border: 1px solid var(--s-line-2); border-radius: 8px;
  font-size: 12.5px; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.settings-btn:hover { background: var(--s-raise-2); }
.settings-btn:disabled { opacity: .45; cursor: default; background: var(--s-raise); }
.settings-btn.primary { color: #fff; background: var(--s-accent); border-color: transparent; }
.settings-btn.primary:hover { background: var(--s-accent-hi); }
.settings-btn.primary:disabled { background: var(--s-raise); color: var(--s-text-3); }
.settings-btn.danger { color: var(--s-danger); border-color: var(--s-danger-soft); background: transparent; }
.settings-btn.danger:hover { background: var(--s-danger-soft); border-color: var(--s-danger); }
.settings-btn.ghost { background: transparent; border-color: var(--s-line); color: var(--s-text-2); }
.settings-btn.ghost:hover { color: var(--s-text); border-color: var(--s-line-2); background: transparent; }
.settings-btn .badge {
  margin-left: 8px; padding: 2px 6px; border-radius: 5px;
  background: var(--s-ok-soft); color: var(--s-ok);
  font: 600 10px/1.4 var(--s-mono); letter-spacing: .04em;
}
.settings-link { padding: 0; color: var(--s-text-2); background: none; border: 0; font-size: 12.5px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.settings-link:hover { color: var(--s-text); }

.settings-input {
  width: 100%; padding: 9px 11px; color: var(--s-text); background: var(--s-bg);
  border: 1px solid var(--s-line-2); border-radius: 8px; font: inherit; font-size: 13px;
}
.settings-input:focus { outline: none; border-color: var(--s-accent); box-shadow: 0 0 0 3px var(--s-accent-soft); }
.settings-input::placeholder { color: var(--s-text-3); }
.settings-input.narrow { width: 230px; max-width: 100%; }
textarea.settings-input { min-height: 104px; resize: vertical; line-height: 1.55; }
.settings-counter { margin-top: 6px; color: var(--s-text-3); font: 500 11px/1 var(--s-mono); text-align: right; }
.settings-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--s-text-2); }
.settings-inline .settings-input { width: auto; flex: 1; min-width: 150px; }

.toggle {
  position: relative; flex: none; width: 38px; height: 22px;
  background: var(--s-raise-2); border: 0; border-radius: 99px; cursor: pointer;
  transition: background .15s ease;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: transform .15s ease;
}
.toggle[aria-checked="true"] { background: var(--s-accent); }
.toggle[aria-checked="true"]::after { transform: translateX(16px); }
.toggle:disabled { opacity: .4; cursor: default; }

.avatar {
  width: 38px; height: 38px; display: grid; place-items: center;
  color: var(--s-text); background: var(--s-raise-2);
  border: 1px solid var(--s-line-2); border-radius: 8px;
  font: 600 15px/1 var(--s-mono);
}

/* ---- Appearance: the one place app colors still show ---- */

.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.theme-card {
  position: relative; padding: 10px; color: var(--s-text);
  background: var(--s-panel); border: 1px solid var(--s-line); border-radius: var(--s-radius);
  cursor: pointer; text-align: left;
}
.theme-card:hover { border-color: var(--s-line-2); }
.theme-card.active { border-color: var(--s-accent); }
.theme-swatch { height: 38px; border-radius: 6px; margin-bottom: 8px; }
.theme-card strong { display: block; font-size: 12.5px; font-weight: 600; }
.theme-card span { color: var(--s-text-3); font-size: 11px; }

/* ---- Cards ---- */

.settings-card { padding: 16px 18px; background: var(--s-panel); border: 1px solid var(--s-line); border-radius: var(--s-radius); }
.settings-card + .settings-card { margin-top: 10px; }
.settings-card h3 { margin: 0 0 4px; font: 600 15px/1.25 var(--sans); }
.settings-card p { margin: 0; color: var(--s-text-2); font-size: 12.5px; line-height: 1.55; }
.settings-card.accent { border-color: var(--s-accent-soft); background: var(--s-panel-2); }
.settings-card.warn { border-color: var(--s-warn-soft); background: var(--s-panel-2); }
.settings-card.cofounder { border-color: var(--s-info-soft); background: var(--s-panel-2); }
.settings-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.settings-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--s-line); }

/* Status pills read like instrument labels, not stickers. */
.pill {
  flex: none; padding: 3px 8px; border-radius: 5px;
  background: var(--s-raise-2); color: var(--s-text-2);
  font: 600 10px/1.5 var(--s-mono); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
.pill.hot { background: var(--s-accent-soft); color: var(--s-accent-hi); }
.pill.cool { background: var(--s-info-soft); color: var(--s-info); }
.pill.ok { background: var(--s-ok-soft); color: var(--s-ok); }
.pill.warn { background: var(--s-warn-soft); color: var(--s-warn); }

/* A short banner-style summary at the top of a panel: what is true now. */
.status-strip {
  display: flex; flex-wrap: wrap; gap: 1px; margin-bottom: 20px;
  border: 1px solid var(--s-line); border-radius: var(--s-radius);
  background: var(--s-line); overflow: hidden;
}
.status-cell { flex: 1 1 150px; padding: 12px 14px; background: var(--s-panel); }
.status-cell dt { margin: 0 0 5px; color: var(--s-text-3); font: 600 10px/1 var(--s-mono); letter-spacing: .12em; text-transform: uppercase; }
.status-cell dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--s-text); }
.status-cell dd small { display: block; margin-top: 3px; color: var(--s-text-2); font-size: 11.5px; font-weight: 400; }

.consent-card { padding: 20px; }
.consent-card .consent-flame { width: 28px; height: 28px; margin: 0 0 10px; display: block; object-fit: contain; filter: grayscale(.3); }
.consent-card h3 { font-size: 16px; }
.consent-card p { margin: 6px 0 14px; max-width: 64ch; }
.consent-granted { display: inline-flex; align-items: center; gap: 7px; color: var(--s-ok); font-size: 12.5px; font-weight: 600; }

/* ---- Meters ---- */

.meter { display: grid; grid-template-columns: 190px 1fr 120px; align-items: center; gap: 18px; padding: 14px 16px; border-bottom: 1px solid var(--s-line); }
.meter:last-child { border-bottom: 0; }
.meter-label strong { display: block; font-size: 13px; font-weight: 600; }
.meter-label span { display: block; margin-top: 3px; color: var(--s-text-3); font-size: 11.5px; }
.meter-track { height: 6px; background: var(--s-raise-2); border-radius: 99px; overflow: hidden; }
.meter-fill { height: 100%; border-radius: 99px; background: var(--s-info); transition: width .3s ease; }
.meter-fill.near { background: var(--s-warn); }
.meter-fill.full { background: var(--s-danger); }
.meter-value { color: var(--s-text-2); font: 500 12px/1 var(--s-mono); text-align: right; white-space: nowrap; }

/* ---- Tables ---- */

.table-wrap { border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-panel); overflow-x: auto; }
.settings-table { width: 100%; border-collapse: collapse; }
.settings-table th, .settings-table td { padding: 11px 14px; text-align: left; font-size: 12.5px; border-bottom: 1px solid var(--s-line); vertical-align: middle; }
.settings-table tr:last-child td { border-bottom: 0; }
.settings-table th { color: var(--s-text-3); font: 600 10px/1 var(--s-mono); letter-spacing: .11em; text-transform: uppercase; background: var(--s-panel-2); }
.settings-table td.muted, .settings-table .muted { color: var(--s-text-3); }
.settings-table td.num { font-family: var(--s-mono); }
.settings-table a { color: var(--s-info); }

/* ---- Plans ---- */

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 10px; }
.plan-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--s-panel); border: 1px solid var(--s-line); border-radius: var(--s-radius);
}
.plan-card.current { border-color: var(--s-accent); background: var(--s-panel-2); }
.plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 20px; }
/* The tier name is a label, not a headline: it stays on one line and gives
   room to the "Current" pill rather than wrapping around it. */
.plan-name { font: 600 11px/1 var(--s-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--s-text-2); white-space: nowrap; }
.plan-card-head .pill { padding: 3px 6px; letter-spacing: .06em; }
.plan-card.current .plan-name { color: var(--s-accent-hi); }
.plan-price { font: 600 24px/1 var(--sans); letter-spacing: -.02em; }
.plan-price small { color: var(--s-text-3); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.plan-tagline { color: var(--s-text-2); font-size: 12.5px; line-height: 1.5; }
.plan-card ul { margin: 2px 0 4px; padding: 0; list-style: none; flex: 1; }
.plan-card li { position: relative; padding-left: 16px; margin-bottom: 5px; color: var(--s-text-2); font-size: 12px; line-height: 1.5; }
.plan-card li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--s-line-2); }
.plan-card.current li::before { background: var(--s-accent); }
.plan-card .settings-btn { width: 100%; text-align: center; }

/* ---- Credit packs ---- */

.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pack-card { padding: 13px; color: var(--s-text); background: var(--s-panel); border: 1px solid var(--s-line); border-radius: var(--s-radius); text-align: left; cursor: pointer; }
.pack-card:hover { border-color: var(--s-accent); }
.pack-card strong { display: block; font: 600 18px/1 var(--sans); }
.pack-card span { display: block; margin-top: 4px; color: var(--s-text-2); font-size: 11.5px; }
.pack-card em { display: inline-block; margin-top: 7px; padding: 2px 6px; border-radius: 5px; background: var(--s-ok-soft); color: var(--s-ok); font: 600 10px/1.4 var(--s-mono); font-style: normal; letter-spacing: .04em; }

/* ---- Referral ---- */

.referral-hero { padding: 20px; }
.referral-hero .referral-flame { width: 30px; height: 30px; margin: 0 0 10px; display: block; object-fit: contain; filter: grayscale(.3); }
.referral-hero h3 { font-size: 16px; }
.referral-hero p { max-width: 62ch; margin: 6px 0 14px; }
.referral-link { display: flex; gap: 8px; }
.referral-link .settings-input { flex: 1; font-family: var(--s-mono); font-size: 12.5px; }
.referral-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.referral-stat { padding: 13px 14px; background: var(--s-panel); border: 1px solid var(--s-line); border-radius: var(--s-radius); }
.referral-stat strong { display: block; font: 600 19px/1.1 var(--s-mono); }
.referral-stat span { display: block; margin-top: 5px; color: var(--s-text-3); font: 600 10px/1 var(--s-mono); letter-spacing: .11em; text-transform: uppercase; }

/* ---- Reference blocks (was: collapsed disclosure drawers) ----
   Every drawer on this page is open. Nothing about what we keep, or what
   we do with it, is one click away from being read. */
.settings-facts { border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-panel); }
.settings-facts + .settings-facts { margin-top: 10px; }
.settings-facts h3 { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--s-line); font: 600 11px/1 var(--s-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--s-text-2); }
.settings-facts ul { margin: 0; padding: 12px 16px 14px 32px; color: var(--s-text-2); font-size: 12.5px; line-height: 1.65; }
.settings-facts li { margin-bottom: 6px; }
.settings-facts li:last-child { margin-bottom: 0; }
.settings-facts li::marker { color: var(--s-text-3); }

.settings-empty { padding: 14px 16px; color: var(--s-text-3); font-size: 12.5px; }
.settings-error { margin: 0 0 18px; padding: 11px 14px; color: var(--s-danger); background: var(--s-danger-soft); border: 1px solid var(--s-danger-soft); border-radius: 8px; font-size: 12.5px; }

/* ---- Gate, loading, modal ---- */

.settings-gate { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--s-bg); }
.settings-gate-card { width: min(100%, 370px); padding: 26px; background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 14px; }
.settings-gate-card img { width: 30px; height: 30px; margin: 0 0 14px; display: block; filter: grayscale(.3); }
.settings-gate-card h1 { margin: 0 0 8px; font: 600 17px/1.3 var(--sans); }
.settings-gate-card p { margin: 0 0 18px; color: var(--s-text-2); font-size: 12.5px; line-height: 1.55; }
.settings-gate-card .settings-btn { width: 100%; padding: 11px; text-align: center; }
.settings-gate-card .settings-btn + .settings-btn { margin-top: 8px; }

.settings-loading { padding: 50px 0; color: var(--s-text-3); text-align: center; font: 500 12px/1 var(--s-mono); letter-spacing: .06em; }

.settings-mobile-foot { display: none; }

@media (max-width: 899px) {
  .settings-shell { flex-direction: column; }
  .settings-nav {
    position: sticky; top: 0; z-index: 5; width: 100%; height: auto;
    padding: max(10px, env(safe-area-inset-top)) 12px 6px;
    background: rgba(23, 22, 20, .94); backdrop-filter: blur(10px);
    border-right: 0; border-bottom: 1px solid var(--s-line);
  }
  .settings-brand { padding: 2px 4px 10px; }
  .settings-nav-label, .settings-nav-spacer, .settings-nav-foot { display: none; }
  .settings-nav-items { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 4px; }
  .settings-nav-items::-webkit-scrollbar { display: none; }
  .settings-nav-item { width: auto; flex: none; padding: 7px 11px; border-radius: 99px; font-size: 12.5px; border: 1px solid var(--s-line); }
  .settings-nav-item svg { display: none; }
  .settings-main { padding: 18px 16px 80px; }
  .settings-head { padding-bottom: 16px; margin-bottom: 20px; }
  .settings-head h1 { font-size: 19px; }
  .settings-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .settings-row.inline-mobile { flex-direction: row; align-items: center; }
  .settings-row-action { justify-content: flex-start; flex-wrap: wrap; }
  .meter { grid-template-columns: 1fr; gap: 8px; }
  .meter-value { text-align: left; }
  .referral-stats { grid-template-columns: 1fr; }
  .referral-link { flex-direction: column; }
  .settings-mobile-foot { display: flex; gap: 8px; margin-top: 30px; }
  .settings-mobile-foot .settings-btn { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .settings-nav-item, .settings-btn, .meter-fill, .toggle, .toggle::after { transition: none; }
}