.account-page { max-width: 60rem; margin-inline: 0; min-width: 0; } /* R6.4 (R-4131, R-4159): the column starts where the title and the strip start, not centred beside them */
.account-page [hidden] { display: none !important; }
.account-page .account-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block: var(--space-4); }
.account-page .btn { min-height: var(--control-target-min); }
.account-page p, .account-page dd, .account-page .list-row__fact { overflow-wrap: anywhere; }
.account-rows { border-top: var(--rule-width) solid var(--color-border); }
.account-next { padding: var(--space-4); margin-bottom: var(--space-5); border: var(--rule-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.account-next h2 { font-size: var(--text-base); font-weight: 600; } /* C6 r2: a count head is a sentence, not a card title */
.account-next h2 a { display: inline-flex; align-items: center; min-height: var(--control-target-min); }
.account-next p { margin-block: var(--space-3); }
.account-form { display: grid; gap: var(--space-5); }
.account-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--space-4); }
.account-form legend { font-weight: 700; padding-block: var(--space-3); }
.account-form label { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.account-form input, .account-form select, .account-form textarea { width: 100%; min-width: 0; min-height: var(--control-target-min); padding: var(--space-3); border: var(--rule-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); }
.account-form .account-form-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); }
.account-form .account-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.account-page .account-onboarding-item { scroll-margin-top: var(--space-5); }
@media (max-width: 24.375em) { .account-form .account-form-pair { grid-template-columns: minmax(0,1fr); } }
.account-onboarding-item { padding-block: var(--space-5); }
.account-onboarding-item h2 { font-size: var(--text-base); font-weight: 600; } /* Batch 11 clean-up (C6): an item's name is a row name, not a card title */
.account-onboarding-item p { margin-block: var(--space-3); }
.account-check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-target-min); margin-block: var(--space-3); }
.account-check input { width: var(--space-6); height: var(--space-6); flex: 0 0 var(--space-6); accent-color: var(--color-action); }
.account-note { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.receipt-note { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--color-text-secondary); }
/* R4.5: a sentence on an account page is clear of the control or heading under it (it touched the first label). */
.account-page > p, .account-page .account-form > p { margin-block: 0 var(--space-4); }
.account-page .banner + p { margin-top: var(--space-4); }
.account-rows > h2 { margin-block: var(--space-4) var(--space-2); }
/* The rows of an account list sit directly in the page, not in a card, so the list is its own `rows` container (the stacked-row rule above measures it). */
.account-rows { container: rows / inline-size; }

/* R6.1e (R-4295): a confirmation box sits beside its label; .account-form label alone would stack them. */
.account-form .account-check { display: flex; align-items: flex-start; }
.account-form .account-check input { width: var(--space-6); min-height: 0; padding: 0; }
.account-form textarea { font: inherit; resize: vertical; }
/* R6.4 (R-2298): a field a refusal refers to has a block edge as well as the banner's words. */
.account-form input[aria-invalid="true"] { border-color: var(--color-block); }
/* R6.4 (R-4135, R-4144, R-4149): a date, a choice and an amount are as wide as their value, not the page. */
.account-form input[type="date"], .account-form select, .account-form input[inputmode="decimal"] { max-width: 20rem; }
/* R6.4 (R-2128, R-2184): the line a script writes while it works or after an unknown outcome is a panel, not body text; it turns to the warn edge only once a task has marked its outcome unknown. */
.account-page [role="status"][id$="-feedback"]:not([hidden]) { padding: var(--space-3) var(--space-4); border-inline-start: calc(3 * var(--rule-width)) solid var(--color-border-strong); background: var(--color-bg-subtle); margin-block: var(--space-4); }
#account-task[data-outcome-unknown="true"] #account-task-feedback { border-inline-start-color: var(--color-warn); background: var(--color-warn-bg); }
/* R6.4: the settings grid is a grid item; without this it grows to the table's widest line and pushes a 320px page sideways. */
.account-form > .card { min-width: 0; }
.account-form [data-toggle-grid] { width: 100%; }
.account-form [data-toggle-grid] th, .account-form [data-toggle-grid] td { overflow-wrap: anywhere; }
/* R6.4 capture: a switch is drawn at the control glyph size, not stretched by the form's field rule, and the two channel columns are narrow so the kind's name keeps its width. */
.account-form [data-toggle-grid] input[type="checkbox"] { width: var(--control-glyph, 1.25rem); height: var(--control-glyph, 1.25rem); min-height: 0; padding: 0; }
.account-form [data-toggle-grid] :is(th, td):not(:first-child) { width: 4.5rem; text-align: center; padding-inline: var(--space-1); }
.account-form [data-toggle-grid] td label { display: inline-flex; justify-content: center; min-width: var(--control-target-min); min-height: var(--control-target-min); align-items: center; }
/* R6.4: the Unread, All, Settings switch sits inside the page column; phone.css gives a strip width 0 with a 100% minimum, which a column that sizes to its content resolves to nothing. */
.account-page > .subnav[data-nav="view"] { width: 100%; }
.account-form [data-toggle-grid] input[type="checkbox"] { accent-color: var(--color-action); }
/* Batch 11 clean-up (C6, DD12): a list of facts about the reader has grey regular labels and values in body ink; the name of a thing in a list of things stays the row's bold name. */
.account-rows--facts .list-row__name, .account-facts .list-row__name { font-weight: 400; color: var(--color-text-secondary); }
.account-rows--facts .list-row__fact, .account-facts .list-row__fact { color: var(--color-text); }
.account-facts { container: rows / inline-size; }
/* Batch 11 clean-up (C6): one field-width rhythm per form (a number and a zone are as wide as a choice); a section head is a quiet head over its fields, not a fourth bold line. */
.account-form input[type="number"] { max-width: 20rem; }
.account-form legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); }
/* Batch 11 clean-up (C6): the terms text keeps a readable measure inside the full page column. */
.terms-page p, .terms-page li { max-width: 70ch; }
/* Batch 11 clean-up (C6): a banner is clear of the label, row or form under it, wherever a wrapper sits between; the last row of a card carries no hanging rule; a card head with a status wraps instead of pushing the page sideways at 320. */
.account-page:not(.grid) .banner { margin-block-end: var(--space-4); }
.account-page .card > .list-row:last-child { border-bottom: 0; }
.account-page .card__header { flex-wrap: wrap; row-gap: var(--space-1); }
/* Batch 11 clean-up (C6): a product's claim is a second line of its fact; a disclosure door reads at the row text size. */
.account-rows [data-catalogue-claim-text] { display: block; }
.account-page details { font-size: var(--text-sm); }
/* Batch 11 clean-up (C6): the settings grid's rules run under the whole row, and a kind's name starts where the card title does. */
.account-form [data-toggle-grid] :is(th, td) { border-bottom: var(--rule-width) solid var(--color-border); }
.account-form [data-toggle-grid] tbody th[scope="row"] { padding-inline-start: 0; text-align: start; font-weight: 600; }
/* Batch 11 clean-up (C6): a count that stands alone is the page's lead line, not a card holding one line. */
.account-next:not(:has(a, p, form, button)) { padding: 0; border: 0; background: none; }

/* Batch 11 clean-up (C6 r2): one help size; a form section is a card with one heading over a two-column field grid; the Account strip ends where the cards end and shows whole tabs on a phone (it wraps rather than cutting a word behind a chevron); a code is as wide as its value; a history row's status sits at the row's right edge. */
.account-note--help { font-size: var(--text-xs); }
.account-form fieldset.account-fieldset { padding: var(--space-4); border: var(--rule-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: start; }
.account-fieldset legend { float: left; width: 100%; grid-column: 1 / -1; font-size: var(--text-lg); font-weight: 600; color: var(--color-text); padding-block: 0 var(--space-2); }
.account-fieldset .account-fieldset__help { grid-column: 1 / -1; margin: 0; }
.subnav[aria-label="Account"] { max-width: 60rem; }
@media (max-width: 40em) { .subnav[aria-label="Account"] { flex-wrap: wrap; overflow: visible; } }
.account-form input[name="code"] { max-width: 20rem; }
.account-history .list-row__status { justify-self: end; }
.account-page .receipt-note { padding: var(--space-3) var(--space-4); margin: 0; }
.account-form .account-actions { margin-block: 0; }
.account-onboarding-item p .door { font-size: var(--text-sm); }
.page-header__actions .door { font-size: var(--text-sm); }
.account-form [data-toggle-grid] [data-cell="absent"] .card__meta { white-space: nowrap; font-size: var(--text-xs); }
.terms-page .terms-card { max-width: calc(70ch + 2 * var(--space-6)); }
.account-page .account-email { overflow-wrap: anywhere; } /* lead: a long address breaks inside itself, never past the edge */
.account-page .account-lines { white-space: pre-line; padding: var(--space-3) var(--space-4); }
.account-page .invoice-lines tbody th { font-weight: 400; } /* one label weight on the invoice page: the summary's labels and the lines' names read alike */