/* ─── Settings Screen ───────────────────────────────────────
   Card-based settings layout. Uses Mist tokens from theme.css.
   Class names match the Blueprint canon (Gravity is the
   reference) so backport is a clean copy.
   ──────────────────────────────────────────────────────── */

.settings {
  max-width: var(--app-content-width);
  margin: 0 auto;
}

.settings .page-title {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: var(--tk-h2);
  color: var(--text-primary);
  margin: 0 0 var(--space-lg);
}

/* ── Section card ────────────────────────────────────────── */
.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}

.settings-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.settings-section-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.settings-section-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
}

/* ── Rows ────────────────────────────────────────────────── */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.settings-row + .settings-row,
.settings-row + .settings-actions {
  border-top: 1px solid var(--rule-softer);
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
}

.settings-row-label {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  margin: 0;
  flex-shrink: 0;
}

.settings-row-value {
  font-size: var(--text-body-sm);
  color: var(--text-primary);
  margin: 0;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Caption sits under a row-label for hint/explanatory text.
   Smaller and muted so the row's primary label stays primary. */
.settings-row-caption {
  font-size: var(--t-mono-xs);
  color: var(--text-tertiary);
  margin: 2px 0 0;
  line-height: 1.4;
}

/* ── Form inputs inside settings ────────────────────────── */
.settings-select,
.settings-input {
  width: 100%;
  font-size: var(--text-body-sm);
  font-family: inherit;
  padding: var(--space-sm) var(--space-md);
  margin: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule-soft);
  background-color: var(--input-bg);
  color: var(--text-primary);
  height: auto;
  min-height: unset;
}

.settings-select:focus,
.settings-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Reset bare-element button override (theme.css editorial mono caps)
   for buttons that live inside settings — they are content, not CTAs. */
.settings-section form { margin: 0; }

/* ── Plan badge ──────────────────────────────────────────── */
.settings-plan-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
}

.settings-plan-badge--pro {
  background: var(--accent);
  color: var(--accent-on);
}

/* ── Action buttons (inside settings cards) ─────────────── */
.settings-actions {
  margin-top: var(--space-sm);
}

.settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.625rem var(--space-md);
  border-radius: var(--radius-lg);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  min-height: 44px;
}

.settings-btn--primary {
  background: var(--text-primary);
  color: var(--bg-base);
}

.settings-btn--primary:hover {
  background: var(--text-secondary);
  color: var(--bg-base);
  text-decoration: none;
}

.settings-btn--secondary {
  background: var(--bg-muted);
  color: var(--text-primary);
}

.settings-btn--secondary:hover {
  background: var(--rule-soft);
  color: var(--text-primary);
  text-decoration: none;
}

/* ── Legal links list (Privacy / Terms) ─────────────────── */
.settings-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.settings-links a {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  padding: var(--space-xs) 0;
  min-height: auto;
}

.settings-links a:hover {
  color: var(--text-primary);
}

/* ── Sign out (full-width, quiet) ────────────────────────── */
.settings-sign-out {
  margin-top: var(--space-lg);
  text-align: center;
}

.settings-sign-out form { margin: 0; }

.settings-sign-out button,
.settings-sign-out [type="submit"] {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--space-sm) var(--space-md);
}

.settings-sign-out button:hover,
.settings-sign-out [type="submit"]:hover {
  color: var(--text-primary);
}

/* ── Danger zone (delete account) ────────────────────────── */
.settings-danger {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
}

.settings-danger-title {
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  font-weight: 500;
  color: var(--color-danger);
  margin: 0 0 var(--space-xs);
}

.settings-danger-body {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-md);
}

.settings-danger button,
.settings-danger [type="submit"] {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-danger);
  padding: var(--space-sm) 0;
}

.settings-danger button:hover {
  color: var(--text-primary);
}

/* ── Page footer (version tag) ───────────────────────────── */
.settings-footer {
  text-align: center;
  padding: var(--space-md) 0 var(--space-lg);
}

.settings-footer-text {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* ── Quiet section (Sign out + Delete account row) ─────────
   Hobbycat-inspired: no header, no danger banner. Just two
   text-buttons in a row. Delete-account expands an inline
   confirmation panel via the `toggle` Stimulus controller. */
.settings-section--quiet {
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-softer);
}
.settings-quiet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.settings-quiet-row form {
  margin: 0;
  display: inline-flex;
}
.btn-quiet--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs, 6px);
  border: none;
  background: transparent;
  padding: 6px 0;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  cursor: pointer;
  min-height: auto;
}
.btn-quiet--inline:hover {
  color: var(--text-primary);
  border-color: transparent;
  background: transparent;
}
.btn-quiet--muted {
  color: var(--text-muted);
}
.btn-quiet--muted:hover {
  color: var(--text-secondary);
}
.btn-quiet--danger {
  color: var(--text-tertiary);
  border-color: var(--rule-soft);
}
.btn-quiet--danger:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

/* Inline delete confirmation — appears in place of the row above
   when the user taps Delete account. Editorial copy + Keep / Delete
   actions. No mochi (that's Hobbycat-specific) but same structure. */
.settings-delete-confirm {
  padding: var(--space-md) 0;
}
.settings-delete-confirm__title {
  font-family: var(--font-serif);
  font-size: 1.176rem;
  color: var(--text-primary);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.settings-delete-confirm__body {
  font-family: var(--font-body);
  font-size: 0.941rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 18px;
  max-width: 60ch;
}
.settings-delete-confirm__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.settings-delete-confirm__actions form {
  margin: 0;
  display: inline-flex;
}

/* Final-block delete account row.
   Sits at the very bottom of the settings page, behind a hairline
   divider. Single quiet row holding the .btn-danger-quiet trigger —
   visible enough to find, quiet enough not to shout. */
.settings-delete-divider {
  border: none;
  border-top: 1px solid var(--rule-softer);
  margin: var(--space-xl) 0 var(--space-md);
}
.settings-delete-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 6px 0;
}