/* ───────────────────────────────────────────────────────────────────────────
   settings-layout.css — what only the Settings page has (Settings phase 2,
   PR 1; docs/design/settings-ia-2026-10-07.md, option B). The section list
   itself (layout, list, sections, phone view) is the shared
   css/section-shell.css since app IA PR 1; settings.html links it first.
   Routing and visibility: /js/settings-router.js. Tokens only
   (css/penna-tokens.css).
   ─────────────────────────────────────────────────────────────────────────── */

/* `hidden` must win over the admin link's display:block. */
.settings-nav__admin[hidden] { display: none; }

.settings-nav__admin {
  display: block;
  margin-top: 24px;
  padding: 0 12px;
  font-size: .8rem;
  color: var(--muted);
}

/* ── Sections ── */
.settings-card { max-width: 640px; }
.settings-card--narrow { max-width: 480px; }
.settings-section > .card + .card { margin-top: 16px; }

/* Temporary, until phase 2 strips the inline styles of the blocks that moved
   here verbatim (PRs 3-5): a card that used to sit under another one carries
   an inline margin-top that does not belong at the top of a section. */
.settings-section__title + .card { margin-top: 0 !important; }

/* Cards stacked in one section (VAT & OSS). */
.settings-stack {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Getting paid (phase 2, PR 2: was inline styles) ── */
.pay-methods__intro {
  margin: 0 0 16px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--slate-500);
}
.pay-method {
  padding: 14px 16px;
  background: var(--paper-lo);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.pay-method + .pay-method { margin-top: 12px; }
.pay-method__title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--slate-700);
}
.pay-method__intro {
  margin: 4px 0 14px;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--slate-500);
}
.pay-method__note {
  margin: 2px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--slate-500);
}
.field-label-hint {
  font-size: .78rem;
  font-weight: 400;
  color: var(--slate-400);
}

/* Bookkeeping card: the "how to connect" link under the title. It carries the
   `hidden` attribute while the active provider has no guide (e-conomic). */
.bk-help {
  font-size: .8rem;
  margin: 2px 0 8px;
}