/* ─────────────────────────────────────────────────────────────
   Hello Radio — settings view + view-router visibility
   One job: the Settings pane skin (a narrow column of borderless
   surface cards), plus the body[data-view="settings"] rules that
   swap the library chrome for the pane. Tokens only; no decorative
   borders (background tints + shadows do the work).
   ───────────────────────────────────────────────────────────── */

/* ── Narrow content column, centered in the pane ── */
.set-wrap { max-width: 640px; margin: 0 auto; }

/* ── Header — matches the other panes' display title ── */
.set-head { margin-bottom: 22px; }
.set-title {
  font-family: var(--font-display); font-size: var(--text-display);
  font-weight: 700; letter-spacing: -0.3px;
}

/* ── Card stack ── */
.set-cards { display: flex; flex-direction: column; gap: 16px; }
.set-card {
  background: var(--surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 20px 22px;
}
.set-card-h { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.set-card-p {
  margin-top: 8px; color: var(--text-secondary);
  font-size: var(--text-lg); line-height: 1.55;
}

/* ── Account ── */
.set-email { font-size: var(--text-lg); font-weight: 500; margin-top: 10px; }
.set-plan { margin-top: 10px; }
.set-chip {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600;
}
.set-chip-pro { background: var(--focus-ring-soft); color: var(--accent); }
.set-chip-free { background: var(--control-bg); color: var(--text-secondary); }

/* ── Standalone links (carry .nav-underline for the sweep) ── */
.set-link {
  display: inline-block; margin-top: 2px;
  color: var(--accent); font-weight: 600; cursor: pointer;
}

/* ── Logged-out actions ── */
.set-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.set-actions .btn { cursor: pointer; }

/* ── Billing ── */
.set-billing { margin-top: 14px; }
.set-billing[disabled] { opacity: 0.6; cursor: default; }
.set-error { margin-top: 10px; color: var(--prim-error); font-size: var(--text-md); }

/* ── Appearance row ── */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.set-row-label { font-size: var(--text-lg); }

/* ── Sign out — quiet full-width control (about-goto family) ── */
.set-signout {
  width: 100%; padding: 12px 16px; text-align: center;
  background: var(--control-bg); border: none; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-lg); color: var(--text); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.set-signout:hover { background: var(--control-bg-hover); }
.set-signout:active { transform: scale(0.98); }

/* ── Router visibility: hide the library chrome on the settings view ── */
body[data-view="settings"] .pagehead,
body[data-view="settings"] #grid { display: none; }

body[data-view="settings"] .toolwrap,
body[data-view="settings"] .toolbar-i,
body[data-view="settings"] .scope-search,
body[data-view="settings"] #pill-filters { display: none; }