/* Reader Account in the final design (f3, Claude Design package 2026-09-29, "4-01".."4-10"). */
/*
 * Loaded by account/layout.blade.php after bde-f2.css (the shared chrome) and after
 * public/css/v3/account.css (the account shell's structure, focus ring and 44px targets), so it
 * wins by order or by one extra element. Every rule is anchored to the account pages and every
 * colour is an --account-* token, set once for light and once for dark, so the reader's
 * appearance choice (Reader preferences > Appearance: light, dark, device) keeps working. The
 * shared chrome's --f2-* colours point at these tokens inside the account pages.
 *
 * The f3 screens take their values from the design source literally (9-2 "P.auth", "P.library",
 * "P.account" and bde-site.js): the #FFF7F3 page, white cards with the 0 12px 30px -20px warm
 * shadow, 26-32 px radii, fields 52 px on #FFF9F6 with a 1.5 px #EBD6CC line, coral #C9401F for
 * the main action, Outfit headings, DM Sans for the rest, Source Serif 4 for book titles.
 *
 * Colour (WCAG 2.2 AA, measured; the pairs tests/js/app-account.test.mjs checks):
 *   light  accent #C9401F: 4.96:1 on white, 4.69:1 on the page, 4.56:1 on accent-soft #FFF3EE;
 *          white on accent 4.96:1; label #5C4F4A 7.4:1 and muted #6E605A 5.7:1 on the page.
 *   dark   accent #FF9C82 on #241C19 and on the page; #1A1412 on accent.
 */

/* ---------- palette ---------- */
body.account-body {
  --account-canvas: #FFF7F3;
  --account-surface: #FFFFFF;
  --account-soft: #FFF9F6;
  --account-ink: #221A17;
  --account-body: #4E423D;
  --account-muted: #6E605A;
  --account-line: #F3E3DC;
  --account-border: #EBD6CC;
  --account-input-line: #9A847A;
  --account-accent: #C9401F;
  --account-accent-hover: #A8361A;
  --account-accent-soft: #FFF3EE;
  --account-on-accent: #FFFFFF;
  --account-danger: #B3261E;
  --account-danger-bg: #FDECEA;
  --account-danger-line: #F4C7C2;
  --account-success: #0B6A4E;
  --account-success-bg: #E1F5EE;
  --account-info: #1A55A6;
  --account-info-bg: #E4F1FF;
  --account-track: #F6EAE4;
  --account-auth-from: #FFF7F3;
  --account-auth-to: #FFF7F3;
  --account-shadow: rgba(80, 40, 25, .45);
  --account-footer: #2A2350;
  --account-footer-ink: #C4BEE6;
  --account-accent-deep: #A8361A;
  --account-accent-bright: #E4532F;
  --account-on-bright: #1A1210;
  --account-warm: #FFF7F3;
  --account-warm-2: #FFE9E1;
  --account-control-line: #EBD6CC;
  --account-label: #5C4F4A;
  --account-violet-bg: #ECE9FF;
  --account-violet: #4B3CC9;
  --account-success-deep: #0B5A42;
  --account-switch-off: #D9C4B8;
  --account-warn-bg: #FFF3D1;
  --account-warn: #6B4700;
  --account-icon-ink: #B53A1C;
  --account-grey-btn: #EFEFEF;
  color-scheme: light;
}

html[data-account-appearance='dark'] body.account-body {
  --account-canvas: #1A1412;
  --account-surface: #241C19;
  --account-soft: #2C2320;
  --account-ink: #F6ECE8;
  --account-body: #DCCBC4;
  --account-muted: #BCA9A1;
  --account-line: #3A2E2A;
  --account-border: #4A3B36;
  --account-input-line: #8E786F;
  --f2-field-edge: #8E786F;
  --account-accent: #FF9C82;
  --account-accent-hover: #FFB9A7;
  --account-accent-soft: #3A2520;
  --account-on-accent: #1A1412;
  --account-danger: #FF9A8F;
  --account-danger-bg: #3A1D1A;
  --account-danger-line: #6B2E27;
  --account-success: #7ADBB0;
  --account-success-bg: #0F2A21;
  --account-info: #A9C8FF;
  --account-info-bg: #172238;
  --account-track: #3A2E2A;
  --account-auth-from: #1A1412;
  --account-auth-to: #1A1412;
  --account-shadow: rgba(0, 0, 0, .55);
  --account-footer: #120E0C;
  --account-footer-ink: #D6C7C0;
  --account-accent-deep: #FFB9A7;
  --account-accent-bright: #FF7A59;
  --account-on-bright: #1A1412;
  --account-warm: #1F1815;
  --account-warm-2: #3A2520;
  --account-control-line: #4A3B36;
  --account-label: #CDBAB2;
  --account-violet-bg: #2A2548;
  --account-violet: #BDB4FF;
  --account-success-deep: #7ADBB0;
  --account-switch-off: #5A4A44;
  --account-warn-bg: #3A2E12;
  --account-warn: #F2D08A;
  --account-icon-ink: #FFB9A7;
  --account-grey-btn: #3A2E2A;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-account-appearance='system'] body.account-body {
    --account-canvas: #1A1412;
    --account-surface: #241C19;
    --account-soft: #2C2320;
    --account-ink: #F6ECE8;
    --account-body: #DCCBC4;
    --account-muted: #BCA9A1;
    --account-line: #3A2E2A;
    --account-border: #4A3B36;
    --account-input-line: #8E786F;
    --f2-field-edge: #8E786F;
    --account-accent: #FF9C82;
    --account-accent-hover: #FFB9A7;
    --account-accent-soft: #3A2520;
    --account-on-accent: #1A1412;
    --account-danger: #FF9A8F;
    --account-danger-bg: #3A1D1A;
    --account-danger-line: #6B2E27;
    --account-success: #7ADBB0;
    --account-success-bg: #0F2A21;
    --account-info: #A9C8FF;
    --account-info-bg: #172238;
    --account-track: #3A2E2A;
    --account-auth-from: #1A1412;
    --account-auth-to: #1A1412;
    --account-shadow: rgba(0, 0, 0, .55);
    --account-footer: #120E0C;
    --account-footer-ink: #D6C7C0;
    --account-accent-deep: #FFB9A7;
    --account-accent-bright: #FF7A59;
    --account-on-bright: #1A1412;
    --account-warm: #1F1815;
    --account-warm-2: #3A2520;
    --account-control-line: #4A3B36;
    --account-label: #CDBAB2;
    --account-violet-bg: #2A2548;
    --account-violet: #BDB4FF;
    --account-success-deep: #7ADBB0;
    --account-switch-off: #5A4A44;
    --account-warn-bg: #3A2E12;
    --account-warn: #F2D08A;
    --account-icon-ink: #FFB9A7;
    --account-grey-btn: #3A2E2A;
    color-scheme: dark;
  }
}

html[data-account-appearance='dark'] { background: #1A1412; }
@media (prefers-color-scheme: dark) { html[data-account-appearance='system'] { background: #1A1412; } }

/* The shared chrome's colours follow the account palette on these pages, and the page takes
   the design's type: DM Sans for the interface, Outfit for headings. */
body.account-body {
  --f2-page: var(--account-canvas);
  --f2-surface: var(--account-surface);
  --f2-soft: var(--account-soft);
  --f2-hover: var(--account-accent-soft);
  --f2-line: var(--account-line);
  --f2-field: var(--account-border);
  --f2-field-strong: var(--account-input-line);
  --f2-ink: var(--account-ink);
  --f2-body: var(--account-body);
  --f2-sub: var(--account-body);
  --f2-muted: var(--account-muted);
  --f2-coral: var(--account-accent);
  --f2-coral-dark: var(--account-accent-hover);
  --f2-coral-tint: var(--account-warm-2);
  --f2-accent: var(--account-accent-bright);
  --f2-danger: var(--account-danger);
  --f2-shadow-card: 0 12px 30px -20px var(--account-shadow);
  --app-card-shadow: 0 12px 30px -20px var(--account-shadow);
  --app-lift-shadow: 0 24px 50px -28px var(--account-shadow);
  --app-cover-shadow: 0 16px 28px -14px var(--account-shadow);
  --app-ease: cubic-bezier(.22, 1, .36, 1);
  background: var(--account-canvas);
  color: var(--account-ink);
  font-family: var(--f2-ui);
  font-size: 15.5px;
  line-height: 1.5;
}
/* Bengali letters in Hind Siliguri, Latin in DM Sans and Outfit; Bengali headings keep their
   natural spacing (no negative tracking, never upper case). */
html[lang='bn'] body.account-body {
  --f2-ui: 'DM Sans', 'Hind Siliguri', 'DM Sans Fallback', system-ui, sans-serif;
  --f2-display: 'Outfit', 'Hind Siliguri', 'Outfit Fallback', 'DM Sans', system-ui, sans-serif;
  font-family: var(--f2-ui);
}
.account-body ::selection { background: var(--account-warm-2); color: var(--account-ink); }
.account-body a { color: var(--account-accent); text-underline-offset: 3px; }
.account-body a:hover { color: var(--account-accent-hover); }
/* Controls and cards are links by shape, not by underline; running text keeps its underline. */
.account-body :is(.account-auth__switch, .account-auth__row, .account-auth__done, .account-security__back, .account-discussion__hero, .reader-library-breadcrumbs, .account-inline-actions, .account-library-editor__controls, .reader-library-actions, .account-library-book h3, .account-primary-nav, .account-shelf-tabs, .account-auth__tabs) a { text-decoration: none; }
.account-body :is(.account-auth__switch, .account-auth__row, .account-auth__done, .account-security__back, .account-discussion__hero, .reader-library-breadcrumbs, .account-inline-actions, .account-library-editor__controls, .reader-library-actions) a:hover { text-decoration: underline; }

/* Rounded controls keep their own shape when focused (account.css rounds every ring to 8px). */
.account-body :is(.account-primary-action, .account-secondary-action, .account-danger-action, .account-header__logout, .account-inline-actions button, .account-history-nav a, .reader-library-empty .btn):focus-visible { border-radius: 16px; }
.account-body :is(.account-tabs a, .account-auth__tabs a):focus-visible { border-radius: 14px; }
.account-body .account-chip:focus-visible { border-radius: 999px; }
.account-body .account-seg input:focus-visible + span { outline: 3px solid var(--account-accent); outline-offset: 2px; border-radius: 12px; }
.account-body :is(.account-field, .account-library-editor__controls) :is(input, select, textarea):focus-visible { border-radius: 14px; }

/* ---------- the shared chrome on account pages ---------- */
body.account-body .f2-header { background: var(--account-surface); box-shadow: 0 1px 0 var(--account-line); }
body.account-body .f2-header .f2-signin { color: var(--account-on-accent); }
body.account-body .f2-header .f2-signin:hover { color: var(--account-on-accent); }
body.account-body :is(.f2-drawer, .f2-sheet, .f2-langmenu) { background: var(--account-surface); }
body.account-body .f2-footer { border-top-color: var(--account-line); }
body.account-body .f2-footer__top { background: var(--account-surface); }
body.account-body .f2-tabbar { background: var(--account-surface); }
body.account-body .f2-tabbar-space { background: var(--account-canvas); }
/* The current logo (kept unchanged until the rebrand) has a dark wordmark: on the dark account
   palette it sits on a small light plate instead of being recoloured. */
html[data-account-appearance='dark'] body.account-body :is(.f2-header .account-brand, .f2-footer .f2-brand) img { box-sizing: content-box; padding: 4px 8px; border-radius: 8px; background: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  html[data-account-appearance='system'] body.account-body :is(.f2-header .account-brand, .f2-footer .f2-brand) img { box-sizing: content-box; padding: 4px 8px; border-radius: 8px; background: #FFFFFF; }
}


/* ---------- f3: header account button, page frame, shared controls ---------- */
/* Links in the f3 account screens are links by colour and shape, as drawn (a { text-decoration:
   none }); the one link inside running text ("Change shelf" in a progress line) keeps a line. */
.account-body :is(.account-auth, .account-page) a { text-decoration: none; }
.account-body :is(.account-auth, .account-page) a.account-inline-link { text-decoration: underline; text-underline-offset: 3px; }

/* The design's signed-in account button (BDe Header): the first letter on a coral square and the
   first name, after My shelf. From 768 px; phones keep the globe, as drawn. */
/* In the bar: the account's language menu where the design draws its language button, then My
   shelf, then the account button (the account tools box lets its children take their places). */
body.account-body .f2-header__account { display: contents; }
body.account-body .f2-header__tools > .f2-header__shelf { order: 1; }
body.account-body .f2-header__tools > .f2-signin, .account-body .account-userbtn { order: 2; }
.account-body .account-userbtn {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; box-sizing: border-box; height: 44px; padding: 0 14px 0 4px;
  border: 1.5px solid var(--account-border); border-radius: 14px; background: var(--account-surface);
  color: var(--account-ink); font: 700 15px/1 var(--f2-ui); white-space: nowrap; text-decoration: none;
}
.account-body .account-userbtn:hover { border-color: var(--account-accent); color: var(--account-ink); }
.account-userbtn > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--account-accent); color: var(--account-on-accent); font-family: var(--f2-display); font-size: 15px; font-weight: 800; }
.account-body .account-userbtn:focus-visible { border-radius: 14px; }

/* The account's own language menu, drawn like the design's language button: a globe, the
   language and a chevron (the short code alone on a phone). */
.account-language summary {
  gap: 6px; height: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px;
  background: var(--account-accent-soft); color: var(--account-ink); font: 700 14px/1 var(--f2-ui);
  transition: background-color .16s var(--app-ease);
}
.account-language summary:hover { background: var(--account-warm-2); }
.account-language summary svg { flex: 0 0 auto; }
.account-language[open] .account-language__chev { transform: rotate(180deg); }
.account-language__chev { transition: transform .16s var(--app-ease); }
.account-language__code { display: none; }
.account-language__menu { top: calc(100% + 8px); min-width: 220px; padding: 8px; border: 0; border-radius: 20px; background: var(--account-surface); box-shadow: 0 24px 50px -16px var(--account-shadow); }
.account-language__menu a { min-height: 46px; padding: 0 14px; border-radius: 14px; font-size: 15px; font-weight: 600; }
.account-body .account-language__menu a:hover { background: var(--account-accent-soft); color: var(--account-ink); }
.account-body .account-language__menu a[aria-current='page'] { background: var(--account-warm-2); color: var(--account-accent-deep); font-weight: 700; }

/* The page frame (bde-site.js S.main): 1280 wide, 14/16 px on a phone, 24 px compact, 28/48 px
   from 1100 px. The footer sets the gap under the page. */
.account-body .account-main, .account-body .account-main:has(> .account-auth) { display: block; flex: 0 0 auto; padding: 0; }
.account-body :is(.account-page, .account-auth) { display: block; box-sizing: border-box; min-height: 0; max-width: 1280px; margin: 0 auto; padding: 14px 16px 0; background: none; place-items: normal; }
/* The design sets no line height except where it names one, so the f3 screens use "normal". */
.account-body :is(.account-page, .account-auth) { line-height: normal; }
@media (min-width: 768px) { .account-body :is(.account-page, .account-auth) { padding: 24px 24px 0; } }
@media (min-width: 1100px) { .account-body :is(.account-page, .account-auth) { padding: 28px 48px 0; } }

/* The reader's first letter on a coral disc (My shelf, Account settings). Decorative. */
.account-disc {
  display: grid; place-items: center; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  background: var(--account-accent); color: var(--account-on-accent);
  font-family: var(--f2-display); font-size: 20px; font-weight: 800; line-height: 1;
}

/* Buttons of the account pages (the design's 44/48/50 px pills). */
.account-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 44px; padding: 0 16px;
  border: 1.5px solid var(--account-border); border-radius: 14px; background: var(--account-surface);
  color: var(--account-ink); font: 700 14px/1.2 var(--f2-ui); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .16s var(--app-ease), border-color .16s var(--app-ease), color .16s var(--app-ease);
}
.account-body .account-btn { color: var(--account-ink); }
.account-body .account-btn:hover { border-color: var(--account-accent); color: var(--account-ink); }
.account-body .account-btn--grey { background: var(--account-grey-btn); }
.account-btn--tall { height: auto; min-height: 48px; padding: 0 20px; font-size: 15px; }
.account-body .account-btn--primary { border: 0; background: var(--account-accent); color: var(--account-on-accent); }
.account-body .account-btn--primary:hover { background: var(--account-accent-hover); color: var(--account-on-accent); }
.account-body .account-btn--danger { border: 0; background: var(--account-danger); color: var(--account-surface); }
.account-body .account-btn--danger:hover { background: var(--account-ink); color: var(--account-surface); }
.account-btn--save { height: 50px; padding: 0 22px; font-size: 16px; width: 100%; max-width: 240px; }
.account-body .account-btn:focus-visible { border-radius: 14px; }
html[lang='bn'] .account-btn { font-weight: 600; }

/* A field's hint line (13.5 px muted), as under the design's password and code fields. */
.account-body .account-field__hint { margin: 0; font-size: 13.5px; line-height: normal; color: var(--account-muted); }
.account-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Ours: the way back to the reader's language site (and book), only when they came from one. */
.account-exit { box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 0 16px; max-width: 1280px; margin: 0 auto; padding: 6px 16px 0; font-size: 13.5px; font-weight: 600; }
.account-body .account-exit a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--account-muted); text-decoration: none; }
.account-body .account-exit a:hover { color: var(--account-accent); }
.account-exit a:first-child::before { content: '\2190'; font-weight: 700; }
.account-exit + :is(.account-page, .account-auth) { padding-top: 4px; }
@media (min-width: 768px) { .account-exit { padding: 8px 24px 0; } }
@media (min-width: 1100px) { .account-exit { padding: 10px 48px 0; } }

/* A small status label (a note's catalogue, "Setup required"): a pill, never a tracked eyebrow. */
.account-kicker {
  display: inline-flex; align-items: center; min-height: 28px; margin: 0 0 10px; padding: 0 12px; border-radius: 999px;
  background: var(--account-warm-2); color: var(--account-accent-deep); font-size: 13px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
}

/* ---------- cards ---------- */
.account-card {
  padding: clamp(18px, 2.4vw, 28px); border: 0; border-radius: 26px;
  background: var(--account-surface); box-shadow: var(--app-card-shadow);
}
.account-card + .account-card, .account-stack > * + * { margin-top: 16px; }
.account-card > header { margin-bottom: 16px; }
.account-card > header p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--account-muted); }

/* ---------- fields ---------- */
.account-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.account-field > label, .account-field__label-row label, .account-profile-email > span, .account-security__credentials label, .account-library-editor__controls > label {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--account-label);
}
.account-field > p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--account-muted); }
.account-body .account-field :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea),
.account-body .account-library-editor__controls :is(input, select) {
  box-sizing: border-box; width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--f2-field-edge, #9B8B84);
  border-radius: 14px; background: var(--account-soft); color: var(--account-ink); font: 400 16px/1.4 var(--f2-ui);
  transition: border-color .16s var(--app-ease), box-shadow .16s var(--app-ease);
}
.account-body .account-field textarea { min-height: 128px; padding: 12px 16px; line-height: 1.55; }
.account-body .account-field select, .account-body .account-library-editor__controls select { padding-right: 36px; }
.account-body :is(.account-field, .account-library-editor__controls) :is(input, select, textarea):hover { border-color: var(--account-input-line); }
.account-body :is(.account-field, .account-library-editor__controls) :is(input, select, textarea):focus { border-color: var(--account-accent); box-shadow: 0 0 0 3px var(--account-warm-2); }
.account-body :is(.account-field, .account-library-editor__controls) :is(input, select, textarea):focus-visible { outline: 2px solid transparent; outline-offset: 0; }
.account-body :is(.account-field, .account-library-editor__controls) :is(input, select, textarea)[aria-invalid='true'] { border-color: var(--account-danger); background: var(--account-surface); box-shadow: 0 0 0 3px var(--account-danger-bg); }
.account-field-error, .reader-library-field-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.account-body .account-field-error, .account-body .reader-library-field-error { color: var(--account-danger); }

/* The password field keeps room for its Show button, which sits inside the field's right edge. */
.account-password { position: relative; }
.account-body .account-password input { padding-right: 96px; }
.account-password__toggle {
  position: absolute; top: 4px; right: 4px; min-width: 44px; height: 44px; padding: 0 14px; border: 0; border-radius: 11px;
  background: transparent; font: 700 14.5px/1 var(--f2-ui); cursor: pointer;
}
.account-body .account-password__toggle { color: var(--account-accent); }
.account-body .account-password__toggle:hover { background: var(--account-accent-soft); color: var(--account-accent-hover); }
.account-body .account-password__toggle:focus-visible { border-radius: 11px; outline-offset: -2px; }

.account-check { gap: 10px; min-height: 44px; margin: 0; font-size: 14.5px; color: var(--account-label); }
.account-check input { width: 20px; height: 20px; accent-color: var(--account-accent); }
.account-check--panel { padding: 10px 0; }

/* ---------- buttons ---------- */
.account-primary-action, .account-secondary-action, .account-danger-action {
  box-sizing: border-box; min-height: 50px; padding: 0 22px; border-width: 1.5px; border-radius: 16px;
  font: 700 15.5px/1.25 var(--f2-ui); box-shadow: none;
  transition: background-color .16s var(--app-ease), border-color .16s var(--app-ease), color .16s var(--app-ease);
}
.account-primary-action:focus-visible { border-radius: 16px; }
.account-body .account-primary-action { background: var(--account-accent); border-color: var(--account-accent); color: var(--account-on-accent); box-shadow: none; }
.account-body .account-primary-action:hover { background: var(--account-accent-hover); border-color: var(--account-accent-hover); color: var(--account-on-accent); }
.account-body .account-secondary-action { background: var(--account-surface); border-color: var(--account-control-line); color: var(--account-ink); }
.account-body .account-secondary-action:hover { border-color: var(--account-accent); color: var(--account-ink); }
.account-body .account-danger-action { background: var(--account-surface); border-color: var(--account-danger-line); color: var(--account-danger); }
.account-body .account-danger-action:hover { border-color: var(--account-danger); color: var(--account-danger); }
.account-body .account-danger-action--solid { background: var(--account-danger); border-color: var(--account-danger); color: var(--account-surface); }
.account-body .account-danger-action--solid:hover { background: var(--account-ink); border-color: var(--account-ink); color: var(--account-surface); }
.account-body :is(.account-primary-action, .account-secondary-action, .account-danger-action):active:not(:disabled) { transform: translateY(1px); }
html[lang='bn'] body.account-body :is(.account-primary-action, .account-secondary-action, .account-danger-action) { font-weight: 600; }

.account-inline-actions a { font-size: 14px; font-weight: 700; }
.account-inline-actions button { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--account-control-line); border-radius: 14px; background: var(--account-surface); color: var(--account-ink); font: 700 14px/1 var(--f2-ui); }
.account-body .account-inline-actions button:hover { border-color: var(--account-accent); }
.account-history-nav a { min-height: 44px; padding: 0 18px; border: 1.5px solid var(--account-control-line); border-radius: 14px; font-size: 14px; font-weight: 700; }
.account-body .account-history-nav a { color: var(--account-ink); }
.account-body .account-history-nav a:hover { border-color: var(--account-accent); color: var(--account-ink); }

/* ---------- notices, statuses, empty text ---------- */
.account-feedback { margin: 0 0 16px; }
.account-body .account-feedback.notice { padding: 12px 16px; border: 0; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.5; }
.account-body .notice-success { background: var(--account-success-bg); color: var(--account-success); }
.account-body .notice-error { background: var(--account-danger-bg); color: var(--account-danger); }
.account-body .notice-info { background: var(--account-info-bg); color: var(--account-info); }
.account-field .account-feedback { margin: 0; padding: 0; background: none; font-size: 13.5px; font-weight: 600; color: var(--account-danger); }
.account-empty { padding: 24px 16px; border: 0; border-radius: 18px; background: var(--account-soft); font-size: 14.5px; line-height: 1.55; color: var(--account-muted); }
.account-status { min-height: 26px; padding: 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0; }
.account-status--pending { background: var(--account-info-bg); color: var(--account-info); }

/* ---------- progress ---------- */
.account-body progress { height: 6px; max-width: none; border-radius: 99px; background: var(--account-track); }
.account-body progress::-webkit-progress-bar { background: var(--account-track); border-radius: 99px; }
.account-body progress::-webkit-progress-value { background: var(--account-accent); border-radius: 99px; }
.account-body progress::-moz-progress-bar { background: var(--account-accent); border-radius: 99px; }
.account-progress > :is(span, b), .reader-library-continue-progress b { font-size: 13px; font-weight: 700; color: var(--account-muted); font-variant-numeric: tabular-nums; }


/* ---------- f3 4-01..4-03, 4-07..4-10: sign in and the other entry cards ----------
 * 9-2 "P.auth": a 1080 px grid of the white card and "What an account adds", two columns from
 * 2 x 380 px and centred on each other; the card 32 px round with the lifted shadow. */
.account-auth__layout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(20px, 3vw, 36px);
  align-items: center; max-width: 1080px; margin: 0 auto; padding-top: clamp(4px, 3vw, 20px);
}
.account-body .account-auth__card {
  width: auto; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; min-width: 0;
  padding: clamp(22px, 3.4vw, 36px); border: 0; border-radius: 32px;
  background: var(--account-surface); box-shadow: var(--app-lift-shadow);
}
.account-auth__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--account-soft); }
.account-auth__tabs a {
  flex: 1 1 0; display: grid; place-items: center; min-height: 46px; padding: 4px 10px; box-sizing: border-box; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; line-height: 1.2; text-align: center;
  transition: background-color .16s var(--app-ease), color .16s var(--app-ease);
}
.account-body .account-auth__tabs a { color: var(--account-label); }
.account-body .account-auth__tabs a:hover { color: var(--account-ink); }
.account-body .account-auth__tabs a.is-lit { background: var(--account-surface); color: var(--account-ink); box-shadow: 0 2px 8px rgba(80, 40, 25, .1); }
html[data-account-appearance='dark'] body.account-body .account-auth__tabs a.is-lit { background: var(--account-accent-soft); box-shadow: none; }
@media (prefers-color-scheme: dark) { html[data-account-appearance='system'] body.account-body .account-auth__tabs a.is-lit { background: var(--account-accent-soft); box-shadow: none; } }
.account-auth__intro { margin: 0; }
.account-body .account-auth h1 { margin: 0; font-family: var(--f2-display); font-size: clamp(28px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.8px; line-height: normal; color: var(--account-ink); text-wrap: balance; }
.account-body .account-auth__intro > p { margin: 6px 0 0; font-size: 15.5px; line-height: normal; color: var(--account-muted); text-wrap: pretty; }
html[lang='bn'] body.account-body .account-auth h1 { letter-spacing: 0; line-height: 1.35; font-weight: 700; }
html[lang='bn'] body.account-body .account-auth__intro > p { line-height: 1.7; }

.account-auth__form, .account-auth__stack { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.account-auth__stack { gap: 12px; }
.account-auth__stack form { margin: 0; }
.account-auth .account-field { margin: 0; }
.account-auth .account-feedback { margin: 0; }
.account-auth .account-primary-action { width: 100%; height: 54px; min-height: 54px; margin: 0; padding: 0 16px; border: 0; border-radius: 16px; font: 700 16px/1.2 var(--f2-ui); }
/* The two-step, new-password and verify screens draw their button 52 px and their labels in ink. */
.account-auth :is(form[action*='two-step'], form[action*='reset-password'], form[action*='verification']) .account-primary-action { height: 52px; min-height: 52px; }
.account-auth form:is([action*='two-step'], [action*='reset-password']) .account-field > label { color: var(--account-ink); }
.account-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.account-body .account-auth__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 700; color: var(--account-accent); }
.account-body .account-auth__back { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 700; color: var(--account-accent); }
.account-auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.account-body .account-auth__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--account-accent); }
.account-body :is(.account-auth__link, .account-auth__back, .account-auth__links a):hover { color: var(--account-accent-hover); }
.account-auth__note { margin: 0; text-align: center; font-size: 14.5px; line-height: normal; color: var(--account-label); }

/* 4-08: the green "Check your email" panel. */
.account-auth__done { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--account-success-bg); color: var(--account-success-deep); }
.account-auth__done b { font-size: 16px; }
.account-auth__done span { font-size: 15px; line-height: 1.55; }
.account-body .account-auth__done .account-auth__link { align-self: flex-start; color: var(--account-success-deep); }

/* 4-07: the code set wide ("1 2 3 4 5 6"). */
.account-body .account-auth .account-field input.account-code-input[id] { font-size: 22px; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
/* 4-09: one "Show passwords" for both fields. */
.account-auth__showboth { align-self: flex-start; min-height: 44px; padding: 0 4px; border: 0; background: none; font: 700 14.5px/1 var(--f2-ui); cursor: pointer; }
.account-body .account-auth__showboth { color: var(--account-accent); }
.account-body .account-auth__showboth:hover { color: var(--account-accent-hover); }
/* 4-10: the mail note, then "Send the email again" and the white wide button under it. */
.account-auth__mailnote {
  display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 16px; border: 1.5px solid var(--account-line);
  border-radius: 16px; background: var(--account-soft); font-size: 15px; line-height: 1.6; color: var(--account-body);
}
.account-auth__mailnote svg { flex: 0 0 auto; color: var(--account-accent); }
.account-body .account-auth__wide { width: 100%; height: auto; min-height: 48px; border-radius: 16px; font-size: 15px; }

/* "What an account adds": three numbered rows. */
.account-auth__aside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.account-body .account-auth__aside h2 { margin: 0; font-family: var(--f2-display); font-size: 22px; font-weight: 700; letter-spacing: 0; line-height: normal; color: var(--account-ink); }
.account-benefits { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.account-benefits__item { display: flex; gap: 12px; padding: 14px; border-radius: 20px; background: var(--account-surface); box-shadow: var(--app-card-shadow); }
.account-benefits__icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; font-weight: 800; }
.account-benefits__item--1 .account-benefits__icon { background: var(--account-warm-2); color: var(--account-icon-ink); }
.account-benefits__item--2 .account-benefits__icon { background: var(--account-violet-bg); color: var(--account-violet); }
.account-benefits__item--3 .account-benefits__icon { background: var(--account-success-bg); color: var(--account-success); }
.account-benefits__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14.5px; line-height: 1.45; color: var(--account-muted); }
.account-benefits__text b { font-size: 15.5px; color: var(--account-ink); }
.account-body .account-auth input::placeholder { color: var(--account-muted); opacity: 1; }

/* ---------- account home ---------- */
.account-dashboard.account-stack > * + * { margin-top: 18px; }
.account-dashboard.account-stack > .account-page-head + * { margin-top: 0; }
.account-security-summary { gap: 14px; }
.account-security-summary p { margin: 6px 0 0; font-size: 14.5px; color: var(--account-muted); }
.account-security-summary__action strong { font-size: 13.5px; color: var(--account-body); }
.account-library-summary__heading { margin-bottom: 14px; }
.reader-library-shelf-counts { gap: 12px; }
.reader-library-shelf-counts > div { position: relative; gap: 2px; padding: 16px 18px 6px; border-radius: 20px; background: var(--account-surface); box-shadow: var(--app-card-shadow); transition: background-color .16s var(--app-ease); }
.reader-library-shelf-counts > div:hover { background: var(--account-accent-soft); }
.reader-library-shelf-counts dd { font-family: var(--f2-display); font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.reader-library-shelf-counts dt { font-size: 14px; }
.account-body .reader-library-shelf-counts dt a { color: var(--account-ink); font-weight: 700; }
.reader-library-shelf-counts dt a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.account-body .reader-library-shelf-counts dt a:focus-visible { outline: 0; }
.account-body .reader-library-shelf-counts dt a:focus-visible::after { outline: 3px solid var(--account-accent); outline-offset: 3px; }
.account-library-summary__continue { margin-top: 22px; }
.account-body .account-library-summary__continue h3 { margin-bottom: 12px; font-family: var(--f2-display); font-size: 19px; }
.account-dashboard__grid { gap: 16px; margin-top: 16px; }
.account-dashboard__grid > .account-card + .account-card, .account-discussion__columns > .account-card + .account-card, .account-security__grid > .account-card + .account-card { margin-top: 0; }
.account-panel__heading { margin-bottom: 14px; }
.account-panel__heading > span { font-size: 13.5px; color: var(--account-muted); }
.account-notification-list p, .account-activity-list p, .account-own-note-list p { font-size: 14.5px; }
.account-notification-list time, .account-activity-list time, .account-own-note-list time { font-size: 12.5px; }
.account-notification-list > li.is-unread strong::before { background: var(--account-accent); }

/* Continue reading: the design's card, cover left, the title in the book serif, where it is from,
   a coral progress line, and the round coral arrow. The whole card is one link. */
.account-library-summary__continue ol, .account-continue ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.account-body .account-library-summary__continue li a, .account-body .account-continue li a {
  position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) 44px; grid-template-rows: auto auto;
  align-items: center; column-gap: 14px; row-gap: 6px; height: 100%; box-sizing: border-box; padding: 12px;
  border: 0; border-radius: 22px; background: var(--account-surface); box-shadow: var(--app-card-shadow);
  color: var(--account-ink); text-decoration: none; transition: transform .2s var(--app-ease);
}
.account-body .account-library-summary__continue li a:hover, .account-body .account-continue li a:hover { transform: translateY(-2px); color: var(--account-ink); }
.account-body :is(.account-library-summary__continue, .account-continue) li a > .reader-library-cover { grid-row: 1 / span 2; width: 60px; height: 90px; border-radius: 10px; }
.account-body :is(.account-library-summary__continue, .account-continue) .reader-library-continue-identity { grid-column: 2; align-self: end; }
.account-body :is(.account-library-summary__continue, .account-continue) li a > :is(.account-progress, .reader-library-continue-progress) { grid-column: 2; grid-row: 2; align-self: start; }
.account-body :is(.account-library-summary__continue, .account-continue) .reader-library-continue-go { grid-column: 3; grid-row: 1 / span 2; }
.reader-library-continue-go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--account-accent); color: var(--account-on-accent); }
.reader-library-continue-identity strong { font-family: var(--f2-serif); font-size: 16.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reader-library-continue-identity strong:lang(bn) { line-height: 1.5; }
.reader-library-continue-identity small { margin-top: 3px; font-size: 13.5px; color: var(--account-muted); }
.account-body .account-continue.account-card, .account-body .account-library-summary.account-card { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.account-continue { margin-bottom: 26px; }
.account-continue > header { margin-bottom: 12px; }



/* ---------- f3 4-04 / 4-05: My shelf ---------- */
.account-shelf__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px; border-radius: 26px;
  background: var(--account-surface); box-shadow: var(--app-card-shadow);
}
.account-shelf__title, .account-settings__title { flex: 1 1 200px; min-width: 0; }
.account-body .account-page h1 { margin: 0; font-family: var(--f2-display); font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.6px; line-height: normal; color: var(--account-ink); }
.account-body .account-settings h1, .account-body .account-settings__head h1 { font-size: clamp(26px, 3.4vw, 36px); }
.account-shelf__title p, .account-settings__title p { margin: 4px 0 0; font-size: 15px; line-height: normal; color: var(--account-muted); overflow-wrap: anywhere; }
html[lang='bn'] body.account-body .account-page h1 { letter-spacing: 0; line-height: 1.35; font-weight: 700; }
.account-shelf__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.account-shelf__acts form { margin: 0; }
.account-page > .account-feedback { margin: 14px 0 0; }

/* The section chips (S.scroll): they wrap on a computer and scroll sideways on a phone. The
   first is drawn dark, as designed; Archived is the small extra chip. */
.account-chips { margin-top: 14px; }
.account-chips ul { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.account-chips li { flex: 0 0 auto; }
.account-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; box-sizing: border-box; border-radius: 999px;
  background: var(--account-surface); font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: background-color .16s var(--app-ease), color .16s var(--app-ease);
}
.account-body .account-chip { color: var(--account-ink); }
.account-body .account-chip:hover { background: var(--account-accent-soft); color: var(--account-ink); }
.account-body .account-chip.is-lit { background: var(--account-ink); color: var(--account-canvas); }
.account-chip--small { padding: 0 14px; font-size: 13px; font-weight: 600; }

.account-section { margin-top: 28px; scroll-margin-top: 90px; }
.account-chips + .account-section { margin-top: 22px; }
.account-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.account-body .account-main .account-section__title { margin: 0; font-family: var(--f2-display); font-size: clamp(20px, 2.2vw, 24px); font-weight: 700; letter-spacing: 0; line-height: normal; color: var(--account-ink); }
.account-section > .account-section__title { margin-bottom: 14px; }
.account-body .account-section__more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--account-accent); white-space: nowrap; }
.account-body .account-section__more:hover { color: var(--account-accent-hover); }

/* "Continue reading": white cards, cover 60 x 90, serif title, the line, the coral bar, the arrow. */
.account-progress-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.account-progress-card { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 22px; background: var(--account-surface); box-shadow: var(--app-card-shadow); }
.account-progress-card > .reader-library-cover { flex: 0 0 auto; width: 60px; height: 90px; border-radius: 10px; }
.account-progress-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.account-body .account-progress-card__title { display: block; padding: 11px 0; margin: -11px 0; font-family: var(--f2-serif); font-size: 16.5px; font-weight: 600; line-height: 1.25; color: var(--account-ink); }
.account-body .account-progress-card__title:hover { color: var(--account-accent); }
.account-progress-card__title:lang(bn) { line-height: 1.5; }
.account-progress-card__note { font-size: 13.5px; color: var(--account-muted); }
.account-body .account-progress-card__note a { color: var(--account-accent); font-weight: 700; }
.account-progress-card__track { display: block; height: 6px; border-radius: 99px; background: var(--account-track); overflow: hidden; }
.account-progress-card__track > span { display: block; height: 100%; border-radius: 99px; background: var(--account-accent); }
.account-body .account-progress-card__go { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--account-accent); color: var(--account-on-accent); }
.account-body .account-progress-card__go:hover { background: var(--account-accent-hover); color: var(--account-on-accent); }
.account-body .account-progress-card__go:focus-visible { border-radius: 50%; }

/* Covers (S.shelf): six across from 768 px, a sideways row of 140 px covers on a phone; a
   shelf's own list wraps into rows (S.grid). Title in the book serif, author on one line. */
.account-covers { margin: 0; padding: 0; list-style: none; }
.account-covers--shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
.account-covers--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 20px; }
.account-covers > li { display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; }
.account-body .account-cover-card { display: flex; flex-direction: column; color: var(--account-ink); }
.account-cover-card__cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; background: var(--account-track); box-shadow: var(--app-cover-shadow); }
.account-cover-card__cover > img, .account-cover-card__cover > .f2-house { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.account-cover-card__cover > .reader-library-cover { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.account-cover-card__title { margin-top: 10px; font-family: var(--f2-serif); font-size: 15px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.account-cover-card__title:lang(bn) { line-height: 1.5; }
.account-cover-card__author { margin-top: 3px; font-size: 13px; color: var(--account-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-body .account-cover-card:hover .account-cover-card__title { color: var(--account-accent); }
.account-body .account-cover-card__edit { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin: -6px 0 -8px; font-size: 13px; font-weight: 700; color: var(--account-accent); }
.account-body .account-cover-card__edit:hover { color: var(--account-accent-hover); }

/* The reading-lists slot and the empty text of a shelf's own list. */
.account-slot { margin: 0; padding: 20px; border-radius: 22px; background: var(--account-surface); box-shadow: var(--app-card-shadow); font-size: 15px; line-height: 1.55; color: var(--account-label); }
.account-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; font-size: 14px; color: var(--account-muted); }

/* 4-05: the empty shelf. */
.account-empty-shelf {
  display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; padding: clamp(24px, 4vw, 44px);
  border-radius: 28px; background: var(--account-surface); box-shadow: var(--app-card-shadow); text-align: center;
}
.account-empty-shelf__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; background: var(--account-warm-2); color: var(--account-icon-ink); }
.account-body .account-empty-shelf h2 { margin: 0; font-family: var(--f2-display); font-size: 22px; font-weight: 700; letter-spacing: 0; color: var(--account-ink); }
.account-empty-shelf p { max-width: 46ch; margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--account-label); }
.account-empty-shelf__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.account-body .account-empty-shelf .account-btn--tall { min-height: 50px; padding: 0 20px; font-size: 16px; }

/* ---------- f3 4-06: Account settings ---------- */
.account-settings__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.account-settings__signout { margin: 0 0 0 auto; }
.account-tabs {
  display: flex; gap: 4px; box-sizing: border-box; width: max-content; max-width: 100%; margin-top: 16px; padding: 5px;
  border-radius: 18px; background: var(--account-surface); box-shadow: var(--app-card-shadow); overflow-x: auto;
}
.account-tabs a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 14px;
  font-size: 14.5px; font-weight: 700; white-space: nowrap;
  transition: background-color .16s var(--app-ease), color .16s var(--app-ease);
}
.account-body .account-tabs a { color: var(--account-label); }
.account-body .account-tabs a:hover { background: var(--account-accent-soft); color: var(--account-ink); }
.account-body .account-tabs a[aria-current='page'] { background: var(--account-accent); color: var(--account-on-accent); }

.account-settings__cards { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin-top: 18px; }
.account-settings__cards > .account-feedback { margin: 0; }
.account-set-card {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px 28px; margin: 0; padding: 28px;
  border-radius: 26px; background: var(--account-surface); box-shadow: var(--app-card-shadow);
}
.account-body .account-set-card h2 { margin: 0; font-family: var(--f2-display); font-size: 20px; font-weight: 700; letter-spacing: 0; line-height: normal; color: var(--account-ink); }
.account-body .account-set-card h2.account-set-card__danger { color: var(--account-danger); }
.account-set-card__intro p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--account-muted); }
.account-set-card__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; margin: 0; }
.account-set-card__fields--rows { display: flex; flex-direction: column; gap: 12px; }
.account-set-card__fields--start { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.account-set-card__fields > form { margin: 0; }
.account-set-card .account-field { margin: 0; min-width: 0; }
.account-field--wide { grid-column: 1 / -1; }
.account-set-card__act { grid-column: 2; display: flex; justify-content: flex-end; margin: 0; }
.account-set-card__fields--rows .account-set-card__act { grid-column: auto; }
.account-set-card__note { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--account-muted); }
.account-body .account-set-card input[readonly] { background: var(--account-soft); color: var(--account-ink); cursor: default; }

/* Email notifications: the design's rows with a switch (52 x 44 hit area, a 32 px track). */
.account-toggles { display: flex; flex-direction: column; }
.account-toggle { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; padding: 10px 0; box-sizing: border-box; border-bottom: 1px solid var(--account-line); }
.account-toggle__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-toggle__text b { font-size: 15.5px; color: var(--account-ink); }
.account-toggle__text span { font-size: 14px; line-height: normal; color: var(--account-muted); }
.account-body input.account-switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 52px; height: 44px; margin: 0; box-sizing: border-box;
  border: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; background-clip: padding-box;
  border-radius: 99px; background-color: var(--account-switch-off); cursor: pointer; transition: background-color .15s var(--app-ease);
}
.account-body input.account-switch::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 4px rgba(80, 40, 25, .3); transition: left .15s var(--app-ease);
}
.account-body input.account-switch:checked { background-color: var(--account-accent); }
.account-body input.account-switch:checked::after { left: 24px; }
.account-body input.account-switch:focus-visible { outline: 3px solid var(--account-accent); outline-offset: 2px; }
/* With script the switches save as they turn, so their Save button steps aside. */
.account-autosave-ready [data-account-autosave-fallback] { display: none; }

/* The newsletter row (only where a list exists): the languages as check boxes, then Subscribe. */
.account-newsletter { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.account-newsletter__choices { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; border: 0; }

/* Reader preferences: the appearance as a segmented choice. */
.account-appearance { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.account-appearance legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--account-label); }
.account-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; align-self: flex-start; padding: 4px; border-radius: 16px; background: var(--account-soft); }
.account-seg label { position: relative; display: flex; }
.account-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.account-seg span { display: grid; place-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14.5px; font-weight: 700; color: var(--account-label); }
.account-seg input:checked + span { background: var(--account-surface); color: var(--account-ink); box-shadow: 0 2px 8px rgba(80, 40, 25, .1); }

.account-set-card__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.account-status-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.account-status-pill--off { background: var(--account-warn-bg); color: var(--account-warn); }
.account-status-pill--on { background: var(--account-success-bg); color: var(--account-success); }
.account-deletion-pending { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--account-danger-bg); color: var(--account-danger); font-size: 14.5px; line-height: 1.5; }
.account-deletion-pending code { font-size: 13.5px; }

@media (max-width: 767px) {
  .account-chips ul { flex-wrap: nowrap; gap: 12px; margin: 0 -16px; padding: 4px 16px 10px; overflow-x: auto; scrollbar-width: none; }
  .account-chips ul::-webkit-scrollbar { display: none; }
  .account-covers--shelf { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 140px; gap: 14px; margin: 0 -16px; padding: 4px 16px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .account-covers--shelf::-webkit-scrollbar { display: none; }
  .account-covers--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .account-set-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; }
  .account-set-card__fields { grid-template-columns: minmax(0, 1fr); }
  .account-set-card__act { grid-column: 1; justify-content: stretch; }
  .account-btn--save { max-width: 240px; }
}
/* Ours: the reader's last data downloads, a quiet list under "Download my data". */
.account-exports { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.account-body .account-exports h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--account-label); }
.account-exports ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--account-muted); }
.account-exports li { display: flex; flex-wrap: wrap; gap: 0 8px; }
.account-exports b { font-weight: 600; color: var(--account-body); overflow-wrap: anywhere; }
/* The bar is a real <progress> when progress was noted (the design's 6 px coral line). */
.account-body progress.account-progress-card__track { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 99px; background: var(--account-track); color: var(--account-accent); overflow: hidden; }
.account-body progress.account-progress-card__track::-webkit-progress-bar { background: var(--account-track); border-radius: 99px; }
.account-body progress.account-progress-card__track::-webkit-progress-value { background: var(--account-accent); border-radius: 99px; }
.account-body progress.account-progress-card__track::-moz-progress-bar { background: var(--account-accent); border-radius: 99px; }

/* A cover: the picture, or the BDeBooks house cover with the title and author. */
.reader-library-cover { position: relative; display: block; overflow: hidden; container-type: inline-size; background: var(--account-track); }
.reader-library-cover--row { width: 60px; height: 90px; border-radius: 10px; }
.reader-library-cover img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; }
.reader-library-cover__blank { position: absolute; inset: 0; background: var(--account-track); }

/* The empty shelf: the design's white panel, a tinted book icon, a line, one way to the books. */
.reader-library-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 16px; padding: clamp(24px, 4vw, 44px) 20px;
  border: 0; border-radius: 28px; background: var(--account-surface); box-shadow: var(--app-card-shadow); text-align: center;
  overflow: visible; isolation: auto;
}
.reader-library-empty::before { content: none; }
.reader-library-empty__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; background: var(--account-warm-2); color: var(--account-accent-deep); }
.account-body .reader-library-empty h3 { font-family: var(--f2-display); font-size: 22px; }
.reader-library-empty p { max-width: 46ch; margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--account-body); text-wrap: pretty; }
.reader-library-empty > a { margin: 4px 0 0; }
.account-body .reader-library-empty .btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 0; border-radius: 16px;
  background: var(--account-accent); color: var(--account-on-accent); font: 700 15.5px/1.2 var(--f2-ui); text-decoration: none; box-shadow: none;
}
.account-body .reader-library-empty .btn:hover { background: var(--account-accent-hover); color: var(--account-on-accent); }

/* One saved book: its cover and name in a white card, then the shelf and progress form. */
.account-library-editor__hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin: 12px 0 16px; padding: clamp(18px, 2.4vw, 28px); border-radius: 26px; background: var(--account-surface); box-shadow: var(--app-card-shadow); overflow: visible; isolation: auto; }
.account-library-editor__hero::before { content: none; }
.reader-library-editor-identity { display: flex; align-items: center; gap: 22px; min-width: 0; }
.reader-library-cover--editor { width: 140px; height: 210px; border-radius: 14px; box-shadow: var(--app-cover-shadow); }
.account-body .account-library-editor__hero h1 { font-family: var(--f2-serif); font-weight: 600; letter-spacing: 0; }
.account-library-editor__author { margin: 6px 0 0; font-size: 15px; color: var(--account-muted); }
.account-body .account-library-editor__privacy { max-width: 320px; margin: 0; }
.account-library-editor__form > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.account-library-editor__controls { gap: 16px; }
.account-library-editor__controls small { font-size: 13.5px; color: var(--account-muted); }
.account-library-editor__progress b { font-size: 15px; color: var(--account-muted); }
.account-library-editor__controls > a { font-size: 14.5px; font-weight: 700; }
.account-library-editor__remove { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--account-line); }


.account-security__back { margin: -10px 0 18px; }
.account-security__back a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 700; text-decoration: none; }
.account-security__grid { gap: 16px; }
.account-security__grid p, .account-security__setup > p:not(.account-kicker), .account-security__notice > p:not(.account-kicker) { font-size: 14.5px; line-height: 1.55; color: var(--account-muted); }
.account-security__enabled { min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--account-success-bg); font-size: 13px; }
.account-body .account-security__enabled { color: var(--account-success); }
.account-security__credentials code, .account-recovery-codes code { border-radius: 12px; background: var(--account-soft); color: var(--account-ink); font-size: 14.5px; letter-spacing: .06em; }
.account-body .account-security__credentials textarea { border: 1.5px solid var(--account-input-line); border-radius: 14px; background: var(--account-soft); }

/* ---------- discussion ---------- */
.account-discussion__hero { gap: 10px 20px; margin-bottom: 18px; }
.account-discussion__hero > a { font-size: 14.5px; font-weight: 700; text-decoration: none; }
.account-discussion__columns { gap: 16px; margin-top: 16px; }
.account-public-note header strong { font-size: 15px; }
.account-public-note header time { font-size: 12.5px; }
.account-public-note p { font-size: 15px; line-height: 1.65; }
.account-public-note-list__replies { border-left-width: 2px; border-left-color: var(--account-line); }
.account-disclosure > summary, .account-spoiler summary { font-size: 14.5px; font-weight: 700; }


/* ---------- tablet and phone (the retained account pages: Activity, a book's shelf page,
   discussion, two-step setup) ---------- */
@media (max-width: 980px) {
  .account-dashboard__grid, .account-discussion__columns, .account-security__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .account-body .account-shell { padding-left: 16px; padding-right: 16px; }
  .account-library-list > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .reader-library-shelf-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Phones: the account's language menu shrinks to the design's globe and short code; the
     account button waits for a wider screen (the menu's foot offers My shelf and Account). */
  .account-body .account-userbtn { display: none; }
  .account-language summary { padding: 0 10px; }
  .account-language__chev { display: none; }
  /* The name stays the control's accessible name; only the short code is drawn. */
  .account-language__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .account-language__code { display: inline; }
  .account-language__menu { position: fixed; top: 64px; right: 12px; left: auto; }
  .account-settings__signout { margin-left: auto; }
}

@media (max-width: 420px) {
  .account-body :is(.account-primary-action, .account-secondary-action, .account-danger-action) { padding-left: 16px; padding-right: 16px; }
  .reader-library-cover--editor { width: 104px; height: 156px; }
  .reader-library-editor-identity { align-items: flex-start; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .account-body :is(.account-library-summary__continue) li a:hover { transform: none; }
  .account-body :is(.account-primary-action, .account-secondary-action, .account-danger-action):active { transform: none; }
  .account-body input.account-switch, .account-body input.account-switch::after { transition: none; }
  .account-language__chev { transition: none; }
}

/* Register: the design's terms box (4-02): top-aligned tick, 14.5/1.45, bold links. */
.account-body .account-field .account-check--terms { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; font-size: 14.5px; font-weight: 400; line-height: 1.45; color: #5C4F4A; }
.account-check--terms input { margin: 1px 0 0; flex: 0 0 auto; }
.account-check--terms a { font-weight: 700; }