/* =================================================================
   READER ACCOUNT PAGE

   Layout for /account/ — handles three states:
     1. Logged-out: side-by-side login + register forms
     2. Logged-in reader: profile card + reading prefs card
     3. Logged-in staff: notice that this page is for readers
================================================================= */

.main-account {
    background: #fafafa;
    /* Override .main's `overflow: hidden` from shared.css — the account
       page has long forms and needs to scroll. */
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    /* `.main` is a 4-column grid; that doesn't apply here — we run a
       single content column with our own internal grid below. */
    display: block;
    -webkit-overflow-scrolling: touch;
}
/* Hide the scrollbar in the chrome but keep functional. */
.main-account::-webkit-scrollbar { width: 8px; }
.main-account::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 4px; }
.main-account::-webkit-scrollbar-track { background: transparent; }

.account-wrap {
    /* Take advantage of the available width without becoming a sea of
       blank space. On wide desktops the cards lay out in a 2-column
       grid; below 1080px (laptop), we fall back to single column for
       readability. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 40px 96px;
}

/* The hero (title + member-since) spans the full width on every size. */
.account-hero {
    /* Already styled below; just makes sure it doesn't get squeezed
       by the grid when we switch to 2-col below. */
    grid-column: 1 / -1;
}

/* Two-column grid for the cards on wide screens. The Profile and
   Reading-preferences cards sit side-by-side; Advanced search is
   wide and spans both columns. Below 1080px we collapse to single
   column so cards keep a comfortable reading width. */
@media (min-width: 1080px) {
    .account-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        align-items: start;
    }
    /* Reading preferences card — pin to second column on wide screens. */
    .account-wrap > .account-card:nth-of-type(2) {
        margin: 0;
    }
    .account-wrap > .account-card:first-of-type {
        margin: 0;
    }
    /* Advanced search spans full width (its sliders need horizontal
       real estate). */
    .account-wrap > .account-card[data-account-adv-search] {
        grid-column: 1 / -1;
        margin: 0;
    }
}

/* ============ Hero ============ */
.account-hero {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ececec;
}
.account-eyebrow {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #999;
    margin-bottom: 12px;
}
.account-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    color: #1a1a1a;
    margin: 0 0 12px;
}
.account-tagline {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
    line-height: 1.45;
    color: #555;
    margin: 0;
    max-width: 600px;
}

/* ============ Cards ============ */
.account-card {
    background: white;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.account-card-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 16px;
    color: #1a1a1a;
}
.account-card-description {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    margin: 0 0 20px;
}
.account-card-hint {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 12px;
    color: #888;
    font-style: italic;
}
.account-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

/* ============ Profile row ============ */
.account-profile-row {
    display: flex;
    align-items: center;
    gap: 20px;
}
.account-avatar img {
    border-radius: 50%;
    display: block;
}
.account-profile-info {
    flex: 1;
}
.account-profile-name {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}
.account-profile-email {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}

/* ============ Category grid (reading prefs) ============ */
.account-cats-grid {
    display: grid;
    /* On narrow widths (single-column layout) we get 1-2 columns of
       wider rows; on wider layouts (2-col grid) the rows stack
       comfortably within the column. */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.account-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* `min-width: 0` lets the row shrink inside its grid cell — without
       it the inner flex children would push the row wider than the
       grid track. */
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line, #ececec);
    border-radius: 4px;
    background: var(--bg, white);
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    cursor: pointer;
    user-select: none;
}
.account-cat-row:hover {
    background: var(--bg-soft, #fafafa);
    border-color: var(--text-faint, #d4d4d4);
}
.account-cat-row.is-disabled {
    opacity: 0.55;
    background: var(--bg-soft, #f7f7f7);
}
.account-cat-row.is-disabled:hover {
    opacity: 0.85;
}
.account-cat-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 12px;  /* Hard fixed — never shrinks. */
}
.account-cat-name {
    /* `min-width: 0` + `flex: 1 1 auto` lets long names truncate with
       an ellipsis rather than pushing siblings out of the row. */
    flex: 1 1 auto;
    min-width: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: calc(14px * var(--font-scale, 1));
    color: var(--text, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The toggle switch must never shrink; if a label is so long that we
   can't fit both, the label truncates (ellipsis) — the toggle stays
   the same size so the user can always operate it. */
.account-toggle {
    flex: 0 0 38px;
}

/* ============ iOS-style toggle switch (reading prefs + future bits) ============ */
.account-toggle {
    position: relative;
    width: 38px;
    height: 22px;
    display: inline-block;
}
.account-toggle-input {
    /* Native checkbox is invisible — we click the row, not this. */
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}
.account-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--line, #cfcfcf);
    border-radius: 999px;
    transition: background 0.18s ease;
}
.account-toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;  /* Knob is always white regardless of theme. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease, background 0.18s ease;
}
.account-cat-row.is-enabled .account-toggle-slider {
    background: var(--link-accent, #1f8fff);
}
.account-cat-row.is-enabled .account-toggle-slider::before {
    transform: translateX(16px);
}

/* ============ Advanced-search section ============

   The slider here uses the same .slider-track / .slider-fill /
   .slider-thumb classes as the topbar popover (because shared.js
   reuses the same drag handler), so we have to override the topbar
   colours when the slider lives inside an account card.

   We override at the `.account-slider-track` scope only — that way
   topbar sliders keep their dark look untouched.
================================================================= */
.account-sliders {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 4px;
}
.account-slider-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.account-slider-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}
.account-slider-top label {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: calc(15px * var(--font-scale, 1));
    color: var(--text, #1a1a1a);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-slider-pct {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: calc(14px * var(--font-scale, 1));
    font-weight: 600;
    color: var(--link-accent, #1f8fff);
    min-width: 48px;
    text-align: right;
    flex: 0 0 auto;
}

/* Light-themed slider — overrides shared.css topbar defaults (the
   topbar version has a dark #555 track and a white fill). We use a
   higher-specificity selector + properties so we win the cascade. */
.account-slider-track.slider-track {
    /* Reset the topbar's 1px track — we want a thicker, more visible
       bar in the light card. The height stays at 28px so the track is
       a 28-tall hit area with the visual bar centered inside it. */
    position: relative;
    height: 28px;
    width: 100%;
    background: transparent;     /* hide the hardcoded #555 from shared.css */
    cursor: pointer;
    touch-action: none;
}
.account-slider-track::before {
    /* The actual visible track (thin line). Stays inside the 28px
       hit area, vertically centered. */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: var(--line, #e6e6e6);
    border-radius: 2px;
    pointer-events: none;
}
.account-slider-track .slider-fill {
    /* Override topbar's white fill on a dark track — here we have a
       light track, so the fill is the accent colour instead. */
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: var(--link-accent, #1f8fff);
    border-radius: 2px;
    pointer-events: none;
}
.account-slider-track .slider-thumb {
    /* Override topbar's 12px white circle — here we have a larger
       white knob with an accent-coloured ring. */
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--link-accent, #1f8fff);
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    transition: box-shadow 0.15s;
    cursor: grab;
}
.account-slider-track:hover .slider-thumb,
.account-slider-track .slider-thumb:active {
    box-shadow: 0 1px 6px rgba(31, 143, 255, 0.4);
}
.account-slider-hint {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: calc(12px * var(--font-scale, 1));
    color: var(--text-muted, #777);
    margin: 0;
    line-height: 1.4;
}
.account-adv-reset {
    margin-top: 18px;
}

/* Dark-theme variant: when the user has the night theme on (or
   low-contrast sepia), the slider thumb's white knob can still look
   right — we just adjust the track shadow and disabled background. */
body.theme-negative .account-cat-row {
    background: var(--bg-card);
    border-color: var(--line);
}
body.theme-negative .account-cat-row:hover {
    background: var(--bg-right);
}
body.theme-negative .account-cat-row.is-disabled {
    background: var(--bg-soft);
}
body.theme-negative .account-toggle-slider::before {
    /* Knob slightly darker than pure white so it's not blinding. */
    background: #e8e8e8;
}
body.theme-negative .account-slider-track .slider-thumb {
    background: #f4f4f4;
}

/* ============ Buttons ============ */
.account-btn {
    display: inline-block;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
}
.account-btn-primary {
    background: #1a1a1a;
    color: white;
    border-color: #1a1a1a;
}
.account-btn-primary:hover { background: #333; border-color: #333; }
.account-btn-primary:disabled { background: #b8b8b8; border-color: #b8b8b8; cursor: not-allowed; }

.account-btn-secondary {
    background: white;
    color: #1a1a1a;
    border-color: #d4d4d4;
}
.account-btn-secondary:hover { background: #f5f5f5; border-color: #999; }

.account-btn-ghost {
    background: transparent;
    color: #777;
    border-color: transparent;
}
.account-btn-ghost:hover { color: #1a1a1a; }

/* ============ Auth grid (login + signup) ============ */
.account-auth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.account-auth-card {
    margin-bottom: 0;
}
.account-auth-disabled {
    background: #f7f7f7;
    text-align: center;
    color: #777;
}

/* ============ Forms ============ */
.account-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.account-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.account-field label {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #555;
}
.account-field input[type="text"],
.account-field input[type="email"],
.account-field input[type="tel"],
.account-field input[type="password"] {
    padding: 10px 12px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 15px;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    background: white;
    color: #1a1a1a;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.account-field input::placeholder {
    color: #b0b0b0;
}
.account-field input:focus {
    outline: none;
    border-color: #1f8fff;
    box-shadow: 0 0 0 3px rgba(31,143,255,0.15);
}
.account-field-inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 12px;
}
.account-field-inline label {
    font-weight: 400;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
}
.account-field-link {
    color: #1f8fff;
    text-decoration: none;
}
.account-field-link:hover { text-decoration: underline; }
.account-field-hint {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 11px;
    color: #999;
}

.account-form-status {
    min-height: 1.2em;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 13px;
    color: #c92027;
    font-weight: 500;
}
.account-form-status:empty { display: none; }

/* ============ Mobile ============ */
@media (max-width: 640px) {
    .account-wrap { padding: 32px 18px 56px; }
    .account-title { font-size: 30px; }
    .account-card { padding: 20px; }
    .account-auth-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   SOCIAL LOGIN BUTTONS

   Placed at the top of the auth card. Stack on mobile, row on desktop.
================================================================= */

.account-social-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.account-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    background: white;
    color: #1a1a1a;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.account-social-btn:hover { background: #f5f5f5; border-color: #999; }
.account-social-btn:active { transform: scale(0.98); }
.account-social-btn svg { flex-shrink: 0; }

/* Apple button: native Apple Sign In styling (black) */
.account-social-apple {
    background: #000;
    color: white;
    border-color: #000;
}
.account-social-apple:hover { background: #1a1a1a; border-color: #1a1a1a; }

/* =================================================================
   DIVIDER ("or sign in with email")
================================================================= */

.account-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
}
.account-divider::before,
.account-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ececec;
}

/* =================================================================
   SINGLE AUTH CARD (centered, when only one form is shown)
================================================================= */

.account-auth-single {
    max-width: 440px;
    margin: 0 auto;
}

/* =================================================================
   FORM FOOTER (link to register/login switch)
================================================================= */

.account-form-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 14px;
    color: #555;
}
.account-form-footer a {
    color: #1f8fff;
    text-decoration: none;
    font-weight: 600;
}
.account-form-footer a:hover { text-decoration: underline; }

/* =================================================================
   AUTH VIEW — centered card

   Applied to /account/ (logged-out) and /register/. Centers the form
   in the available viewport so users land on a focused single panel
   instead of a left-aligned wall of whitespace.

   Dashboard / staff views keep the regular top-aligned layout because
   they're taller and benefit from natural scrolling.
================================================================= */

.main-account-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    /* On short viewports the auth form would still get cut off — let
       it scroll if needed. */
    overflow-y: auto;
    min-height: 100%;
}

.account-wrap--auth {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 40px 24px;
}

.account-hero--centered {
    text-align: center;
    border-bottom: none;
    margin-bottom: 20px;
    padding-bottom: 0;
}
.account-hero--centered .account-tagline {
    margin-left: auto;
    margin-right: auto;
}

/* On the centered view the card spans the full wrap width — no nested
   `account-auth-single` cap needed. */
.account-wrap--auth .account-card { margin-bottom: 0; }
.account-wrap--auth .account-auth-single { max-width: none; }

/* =================================================================
   OPTIONAL FIELD MARKER + STATUS COLOURS
================================================================= */

.account-field-optional {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #999;
    margin-left: 6px;
    text-transform: none;
    letter-spacing: 0;
}

.account-form-status.is-success {
    color: #1a7f37;
}
.account-form-status.is-error {
    color: #b42318;
}

/* =================================================================
   INLINE FORM (used inside the Profile card for WhatsApp edit)

   Visually quieter than the standalone auth forms — no full-width
   button, no top divider — so it sits naturally between the profile
   row and the actions row.
================================================================= */

.account-form-inline {
    margin: 20px 0 4px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}
.account-form-inline .account-field { margin-bottom: 10px; }
.account-form-inline .account-btn {
    width: auto;
    padding: 8px 18px;
    font-size: 13px;
}

.account-profile-whatsapp {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-top: 4px;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 13px;
    color: #444;
}
.account-profile-whatsapp-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
}

/* =================================================================
   ACCOUNT SIDEBAR — right column on /account/ and /register/

   Inherits the base `.sidebar-right` look from shared.css (light
   panel, 1px border-left). When the widget area is empty we just
   show the bare column so the chrome stays balanced.
================================================================= */

.sidebar-right--account .widget {
    padding: 18px 18px 22px;
    border-bottom: 1px solid #e0e0e0;
}
.sidebar-right--account .widget:last-child {
    border-bottom: none;
}
.sidebar-right--account .widget h4 {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 700;
    font-size: 18px;
    color: #000;
    margin: 0 0 12px;
    letter-spacing: -0.005em;
}
.sidebar-right--account .widget p,
.sidebar-right--account .widget ul,
.sidebar-right--account .widget ol {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    margin: 0 0 10px;
}
.sidebar-right--account .widget a { color: #1f8fff; text-decoration: none; }
.sidebar-right--account .widget a:hover { text-decoration: underline; }

/* =================================================================
   AUTH VIEW — narrower screens

   At mobile the chrome already collapses the right column (see
   shared.css). We just relax the centered padding.
================================================================= */
@media (max-width: 720px) {
    .account-wrap--auth {
        padding: 24px 16px 56px;
    }
    .main-account-auth {
        align-items: flex-start;
    }
}

/* =================================================================
   THEME + FONT-SCALE COMPLIANCE

   The page-account.php was originally styled with hardcoded greys
   and white backgrounds. To honour the global theme (default /
   low-contrast / negative) and the font-size slider in the text-edit
   popover, we override colours via CSS variables and font sizes via
   `calc(Npx * var(--font-scale, 1))`.

   This block is intentionally at the end of the stylesheet so it
   wins over the earlier hardcoded rules without `!important`.
================================================================= */

/* Background of the whole account page tracks the global bg. */
.main-account { background: var(--bg-soft, #fafafa); }

/* Hero */
.account-eyebrow {
    color: var(--text-muted, #999);
    font-size: calc(11px * var(--font-scale, 1));
}
.account-title {
    color: var(--text-strong, var(--text, #1a1a1a));
    font-size: calc(40px * var(--font-scale, 1));
}
.account-tagline {
    color: var(--text-muted, #555);
    font-size: calc(16px * var(--font-scale, 1));
}
.account-hero {
    border-bottom-color: var(--line, #ececec);
}

/* Cards */
.account-card {
    background: var(--bg, white);
    border-color: var(--line, #ececec);
    color: var(--text, #1a1a1a);
}
.account-card-title {
    color: var(--text-strong, var(--text, #1a1a1a));
    font-size: calc(22px * var(--font-scale, 1));
}
.account-card-description {
    color: var(--text-muted, #555);
    font-size: calc(14px * var(--font-scale, 1));
}
.account-card-hint {
    color: var(--text-faint, #888);
    border-top-color: var(--line, #f0f0f0);
    font-size: calc(12px * var(--font-scale, 1));
}

/* Profile rows */
.account-profile-name {
    color: var(--text-strong, #1a1a1a);
    font-size: calc(20px * var(--font-scale, 1));
}
.account-profile-email {
    color: var(--text-muted, #777);
    font-size: calc(13px * var(--font-scale, 1));
}

/* Forms */
.account-field label {
    color: var(--text-muted, #555);
    font-size: calc(12px * var(--font-scale, 1));
}
.account-field input[type="text"],
.account-field input[type="email"],
.account-field input[type="tel"],
.account-field input[type="password"] {
    background: var(--bg, white);
    color: var(--text, #1a1a1a);
    border-color: var(--line, #d4d4d4);
    font-size: calc(15px * var(--font-scale, 1));
}
.account-field input:focus {
    border-color: var(--link-accent, #1f8fff);
}
.account-field-hint {
    color: var(--text-faint, #999);
    font-size: calc(11px * var(--font-scale, 1));
}

/* Buttons */
.account-btn {
    font-size: calc(13px * var(--font-scale, 1));
}
.account-btn-primary {
    background: var(--text-strong, #1a1a1a);
    color: var(--bg, #fff);
    border-color: var(--text-strong, #1a1a1a);
}
.account-btn-primary:hover {
    background: var(--text, #333);
    border-color: var(--text, #333);
}
.account-btn-secondary {
    background: var(--bg, white);
    color: var(--text, #1a1a1a);
    border-color: var(--line, #d4d4d4);
}
.account-btn-secondary:hover {
    background: var(--bg-soft, #f5f5f5);
    border-color: var(--text-faint, #999);
}
.account-btn-ghost {
    color: var(--text-muted, #777);
}
.account-btn-ghost:hover {
    color: var(--text-strong, #1a1a1a);
}

/* Status messages */
.account-form-status.is-success { color: #1f8f4f; }
.account-form-status.is-error   { color: #c92027; }
body.theme-negative .account-form-status.is-success { color: #66e69b; }
body.theme-negative .account-form-status.is-error   { color: #ff7a7f; }

/* Sliders + slider labels (already partially themed above, finalise here) */
.account-slider-top label,
.account-slider-pct,
.account-slider-hint {
    /* Make sure these scale with the font slider. */
    /* (Sizes already declared above via calc — this comment is a
       breadcrumb in case someone wonders why we don't redeclare.) */
}

/* Profile card top row */
.account-profile-whatsapp-label {
    color: var(--text-muted, #555);
    font-size: calc(11px * var(--font-scale, 1));
}
.account-profile-whatsapp-value {
    color: var(--text, #1a1a1a);
    font-size: calc(13px * var(--font-scale, 1));
}

/* Divider line ("or" between social and email auth) — keeps contrast. */
.account-divider {
    color: var(--text-faint, #888);
}
.account-divider::before,
.account-divider::after {
    background: var(--line, #e5e5e5);
}

/* =================================================================
   FLASH MESSAGES (top of dashboard, after redirects)

   Shown after the lost-password flow ("we sent you an email") and
   after a successful reset ("your password has been updated"). The
   message spans the full width of the wrap, sitting between the hero
   and the first card.
================================================================= */
.account-flash {
    grid-column: 1 / -1;
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: 6px;
    border: 1px solid;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: calc(14px * var(--font-scale, 1));
    line-height: 1.5;
}
.account-flash.is-info {
    background: #eef6ff;
    border-color: #b5d8f5;
    color: #155b9a;
}
.account-flash.is-success {
    background: #e7f6ec;
    border-color: #a8d8b7;
    color: #157f3e;
}
.account-flash.is-error {
    background: #fdecea;
    border-color: #f5b8b3;
    color: #b1271f;
}
body.theme-negative .account-flash.is-info {
    background: rgba(31, 143, 255, 0.12);
    border-color: rgba(31, 143, 255, 0.35);
    color: #8ec5ff;
}
body.theme-negative .account-flash.is-success {
    background: rgba(31, 143, 79, 0.12);
    border-color: rgba(31, 143, 79, 0.35);
    color: #7fdca0;
}
body.theme-negative .account-flash.is-error {
    background: rgba(201, 32, 39, 0.12);
    border-color: rgba(201, 32, 39, 0.35);
    color: #ff8a8e;
}

/* =================================================================
   FOLLOWED COLUMNISTS — list in the account dashboard
================================================================= */
.account-followed-empty {
    padding: 24px 0;
    text-align: center;
}
.account-followed-empty p {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: calc(14px * var(--font-scale, 1));
    color: var(--text-muted, #555);
    margin: 0 0 16px;
}

.account-followed-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.account-followed-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line, #ececec);
    border-radius: 4px;
    background: var(--bg, white);
    transition: opacity 0.25s, transform 0.25s, background 0.15s, border-color 0.15s;
    min-width: 0;
}
.account-followed-row:hover {
    background: var(--bg-soft, #fafafa);
    border-color: var(--text-faint, #d4d4d4);
}
.account-followed-row.is-leaving {
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
}
.account-followed-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex: 0 0 40px;
    object-fit: cover;
}
.account-followed-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.account-followed-name {
    display: block;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: calc(15px * var(--font-scale, 1));
    font-weight: 600;
    color: var(--text-strong, #1a1a1a);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-followed-name:hover {
    color: var(--link-accent, #1f8fff);
}
.account-followed-meta {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: calc(12px * var(--font-scale, 1));
    color: var(--text-muted, #777);
    margin-top: 2px;
}

/* Compact follow button variant for the followed-list */
.follow-btn.follow-btn-sm {
    padding: 6px 14px;
    font-size: calc(12px * var(--font-scale, 1));
    border-radius: 999px;
    flex: 0 0 auto;
}

/* ============ NOTIFICATION PREFERENCES ============
   List of checkbox rows in the account dashboard, each toggling
   one kind of notification's email opt-in. Visual mirrors the
   other account cards — clean rows, subtle dividers, accent on
   the checked state. */
.account-notif-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.account-card-help {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: calc(13px * var(--font-scale, 1));
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 16px;
}
.account-notif-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.12s;
}
.account-notif-row:hover { background: rgba(0, 0, 0, 0.02); }
.account-notif-row:last-of-type { border-bottom: none; }
.account-notif-row input[type="checkbox"] {
    /* Browser-native checkbox restyled to match the rest of the
       theme — accent-color is widely supported and respects dark
       mode automatically. */
    width: 16px;
    height: 16px;
    accent-color: var(--text-strong, #1a1a1a);
    cursor: pointer;
    flex-shrink: 0;
}
.account-notif-label {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: calc(14px * var(--font-scale, 1));
    color: var(--text-strong);
    font-weight: 500;
    line-height: 1.3;
}

/* ============ HOME PAGE COLUMNS PREFERENCE ============
   Each row pairs a column number with two-or-three dropdowns:
   "type" (time/category) + the matching "value" dropdown. The unused
   value dropdown stays hidden via the `hidden` attribute set by JS. */
.account-home-cols-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.account-home-col-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.account-home-col-row:last-of-type {
    border-bottom: none;
}
.account-home-col-num {
    flex: 0 0 86px;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: calc(13px * var(--font-scale, 1));
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.account-home-col-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}
.account-home-col-controls select {
    flex: 1 1 180px;
    min-width: 160px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: transparent;
    color: var(--text-strong);
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: calc(13px * var(--font-scale, 1));
    cursor: pointer;
    /* Hide the dropdowns when JS sets the `hidden` attribute. */
}
.account-home-col-controls select[hidden] {
    display: none;
}
.account-home-cols-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.account-home-cols-actions .account-form-status {
    margin-left: auto;
}

/* Mobile: stack the dropdowns and let them go full-width */
@media (max-width: 640px) {
    .account-home-col-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .account-home-col-num {
        flex: 0 0 auto;
    }
    .account-home-col-controls {
        width: 100%;
    }
    .account-home-col-controls select {
        flex: 1 1 100%;
    }
}