/* v2/app/settings/settings.css: page rhythm for Settings, /start and login (issue 390 part D). Only --v2-* variables. Loaded after core.css by the three pages.
 * The variants it used to carry (StepRowX, PageField, FormBar, PageNote, Notice, the history section) live in ../../components.css since the
 * consolidation pass; this file is layout only. */

/* ---------------------------------------------------------------- page rhythm */
.v2set-page { display: flex; flex-direction: column; gap: var(--v2-space-16); padding-top: var(--v2-space-28); } /* Figma: the header sits 28px lower than the Feed's ModeToggle row */
.v2set-page > .v2-detailheader { margin-bottom: var(--v2-space-8); }
.v2set-page.has-bar { padding-bottom: var(--v2-space-96); } /* room for the fixed form footer (ActionBar fixed) */
.v2set-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--v2-space-12); }
.v2set-disabled { opacity: .62; }
.v2set-disabled .v2-listrow { cursor: default; }
.v2set-sub { margin: 0; font: var(--v2-type-small); color: var(--v2-body); }

/* ---------------------------------------------------------------- forms on the gradient */
.v2set-form { display: flex; flex-direction: column; gap: var(--v2-space-20); }
.v2set-form .v2-choicefield-label { color: var(--v2-label); }

/* ---------------------------------------------------------------- billing */
.v2set-balance { padding: var(--v2-space-20); display: flex; flex-direction: column; gap: var(--v2-space-16); }
.v2set-balance .v2-stat-value { margin: var(--v2-space-4) 0 !important; }
.v2set-balance .v2-pill-small { min-height: 36px; }

/* ---------------------------------------------------------------- signed-out pages: login and /start */
.v2s-solo .v2a-col { padding-top: var(--v2-space-48); }
.v2s-title { margin: 0; font: var(--v2-type-heading); color: var(--v2-label); overflow-wrap: anywhere; text-wrap: balance; }
.v2s-solo .v2-pagenote { font: var(--v2-type-body); margin-bottom: var(--v2-space-4); }
.v2s-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-space-16); }
.v2s-stack > .v2-field, .v2s-stack > .v2v-wide, .v2s-stack > .v2-card, .v2s-stack > .v2-notice, .v2s-stack > .v2-toast { align-self: stretch; }
.v2s-solo .v2-toast { margin-bottom: var(--v2-space-16); }
.v2s-solo .v2s-hidden { display: none; }
.v2set-balance .v2a-meta { margin: 0; color: var(--v2-body); }

/* ---------------------------------------------------------------- sign-in and onboarding: one white card on the gradient (issue 381, the draft's card language) */
.v2s-authcard { padding: var(--v2-space-24); }
.v2s-authcard .v2s-title { color: var(--v2-cardink); }
.v2s-authcard .v2-pagenote { color: var(--v2-body); }
.v2s-authcard .v2-field-label { color: var(--v2-cardink); }
.v2s-authcard .v2s-stack { gap: var(--v2-space-16); }
.v2s-authcard .v2-divider { align-self: stretch; margin: 0; }
@media (min-width: 900px) {
  .v2s-solo .v2a-col { max-width: 616px; padding-top: calc(var(--v2-space-48) + var(--v2-space-32)); }
  .v2s-authcard { padding: var(--v2-space-36) var(--v2-space-36) var(--v2-space-32); }
  .v2s-title { font: var(--v2-type-desk-heading); }
  .v2s-solo .v2-pagenote { font: var(--v2-type-desk-subtitle); }
  .v2s-authcard .v2-pagenote { font: var(--v2-type-desk-default); }
  .v2s-authcard .v2-field-label { font: var(--v2-type-desk-default); }
}

/* ---------------------------------------------------------------- desktop (>= 1100px): one centred column; the section tabs sit on top (issue 381, owner: the left rail left the page lopsided) */
.v2set-tabs { margin-bottom: var(--v2-space-8); }
.v2set-tabs .v2-chiprow { justify-content: center; gap: var(--v2-space-8); }
@media (min-width: 1100px) { .v2set-page { padding-top: 0; } }

/* ---------------------------------------------------------------- StatusRow: icon, text, status Badge, action pill (settings-ui.js) */
.v2set-srow { flex-wrap: wrap; row-gap: var(--v2-space-8); }
.v2set-srow .v2-listrow-text { flex: 1 1 var(--v2-space-96); }
.v2set-ico { flex: none; width: var(--v2-space-28); height: var(--v2-space-28); object-fit: contain; }
.v2set-srow-end { display: inline-flex; align-items: center; flex: none; gap: var(--v2-space-12); }
.v2set-srow-end .v2-pill-small { min-height: 36px; }
@media (max-width: 519px) { /* phone: the state and the action drop under the text, aligned with it */
  .v2set-srow-end { flex-basis: 100%; }
  .v2set-srow.has-ico .v2set-srow-end { padding-left: calc(var(--v2-space-28) + var(--v2-space-12)); }
}

/* ---------------------------------------------------------------- StatusRow: icon, text, status Badge, action pill (settings-ui.js) */
.v2set-srow { flex-wrap: wrap; row-gap: var(--v2-space-8); }
.v2set-srow .v2-listrow-text { flex: 1 1 var(--v2-space-96); }
.v2set-ico { flex: none; width: var(--v2-space-28); height: var(--v2-space-28); object-fit: contain; }
.v2set-srow-end { display: inline-flex; align-items: center; flex: none; gap: var(--v2-space-12); }
.v2set-srow-end .v2-pill-small { min-height: 36px; }
@media (max-width: 519px) { /* phone: the state and the action drop under the text, aligned with it */
  .v2set-srow-end { flex-basis: 100%; }
  .v2set-srow.has-ico .v2set-srow-end { padding-left: calc(var(--v2-space-28) + var(--v2-space-12)); }
}