/* account pages. Owned by the account surface group; shared components live in ../app.css.
   Covers /user/account (all tabs), /user/data, claim + upload flows, checkout,
   and the printable invoice. Colours come from the --c-* tokens so dark mode
   flips without extra rules; html.dark rules below only cover what tokens can't. */

/* ---- Page head ---- */
.acct-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (min-width: 640px) {
    .acct-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.acct-head h1 {
    font-size: clamp(1.875rem, 1.45rem + 1.1vw, 2.375rem);
    line-height: 1.1;
    color: var(--c-ink);
}
.acct-head-lede {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--c-ink-2);
}
.acct-back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-ink-3);
}
.acct-back:hover { color: var(--c-ink); }

/* ---- Tabs: forest underline on the current tab, like the primary menu ---- */
.acct-tabs { border-bottom: 1px solid var(--c-line); }
.acct-tabs > nav { display: flex; gap: 1.75rem; margin-bottom: -1px; }
.acct-tab {
    padding: 0 0.125rem 0.75rem;
    border-bottom: 2px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-ink-3);
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.acct-tab:hover { color: var(--c-ink); border-bottom-color: var(--c-line-strong); }
.acct-tab.is-active,
.acct-tab.is-active:hover {
    color: var(--c-ink);
    font-weight: 600;
    border-bottom-color: var(--c-primary);
}
.acct-panel { padding-top: 2rem; }

/* ---- Settings groups: heading + note on the left, the work on the right ---- */
.acct-group {
    display: grid;
    gap: 1rem 3rem;
}
@media (min-width: 1024px) {
    .acct-group,
    .acct-actions--aligned { grid-template-columns: 16rem minmax(0, 1fr); }
}
.acct-group + .acct-group {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--c-line);
}
/* A group that opens a form after a read-only group (upload flow). */
.acct-group + form > .acct-group:first-of-type {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--c-line);
}
.acct-group-head h2 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--c-ink);
}
.acct-group-head p {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--c-ink-3);
}
.acct-group-body { min-width: 0; }

/* Rows inside one card, separated by hairlines. */
.acct-rows > * + * { border-top: 1px solid var(--c-line); }
.acct-row { padding: 1.25rem 1.5rem; }
.acct-row h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-ink);
}
.acct-row-note {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--c-ink-3);
}

/* ---- Form fields ---- */
.acct-fields { display: grid; gap: 1.5rem 1.25rem; }
@media (min-width: 640px) {
    .acct-fields--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .acct-fields--name { grid-template-columns: 8.5rem minmax(0, 1fr); }
    .acct-span-2 { grid-column: 1 / -1; }
}
.acct-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--c-ink);
}
.acct-req { margin-left: 0.125rem; color: var(--c-danger); }
.acct-opt { font-weight: 400; color: var(--c-ink-3); }
.acct .acct-input {
    display: block;
    width: 100%;
    height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--c-line-strong);
    border-radius: 0.5rem;
    background-color: var(--c-bg);
    color: var(--c-ink);
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 0.15s ease;
}
.acct .acct-input:hover { border-color: var(--c-ink-3); }
.acct textarea.acct-input {
    height: auto;
    min-height: 6rem;
    padding: 0.625rem 0.75rem;
    line-height: 1.5;
}
.acct .acct-input--icon { padding-left: 2.5rem; }
.acct .acct-input--close { padding-right: 3rem; }
.acct .acct-input--currency { padding-left: 2rem; }
.acct .acct-input::placeholder { color: var(--c-ink-3); opacity: 0.8; }
.acct .acct-input.border-red-500,
.acct .acct-input.border-red-500:hover { border-color: #b42318; }
.acct-help {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--c-ink-3);
}
.acct-error {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #b42318;
}
html.dark .acct-error { color: #fca5a5; }
.acct-actions {
    display: grid;
    column-gap: 3rem;
    margin-top: 2rem;
}
.acct-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
@media (min-width: 1024px) {
    .acct-actions--aligned .acct-actions-row { grid-column: 2; }
}
/* Mobile: stacked actions put the primary on top. */
@media (max-width: 639px) {
    .acct-actions-row--stack { flex-direction: column-reverse; align-items: stretch; }
}

/* The account panels force a 2.75rem height on every visible input (app.css);
   radios are visible inputs too and must keep their own size. */
[data-profile-panel] input[type="radio"]:not(.sr-only) {
    height: 1rem;
    min-height: 1rem;
}
/* app.css pins focused account fields to the light brand green with
   !important; the global focus colour is the token that flips in dark mode. */
html.dark [data-profile-panel] input:not([type="hidden"]):not(.sr-only):focus,
html.dark [data-profile-panel] textarea:focus,
html.dark [data-profile-panel] .app-select-trigger:focus,
html.dark [data-profile-panel] .app-select-trigger[aria-expanded="true"] {
    border-color: var(--c-focus) !important;
}
.acct .app-select-trigger { border-color: var(--c-line-strong); }
/* Inline editor buttons match the 2.75rem fields beside them. */
.acct #profile-phone-submit,
.acct #profile-email-submit,
.acct #profile-email-verify { height: 2.75rem; }

/* Selectable option rows (privacy visibility, plan choice). */
.acct-option {
    display: flex;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.acct-option:hover { background: var(--c-surface); }
.acct-option:has(input:checked) { background: var(--c-primary-soft); }
.acct-option input[type="radio"] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1875rem;
    accent-color: var(--c-primary);
}
.acct-option-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-ink);
}
.acct-option-text {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--c-ink-2);
}

/* Toggle switch (research settings). */
.acct-switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.acct-switch-track {
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--c-line-strong);
    transition: background-color 0.15s ease;
}
.acct-switch-thumb {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 26, 22, 0.25);
    transition: transform 0.2s var(--ease-out);
}
.acct-switch input:checked ~ .acct-switch-track { background: var(--c-primary); }
.acct-switch input:checked ~ .acct-switch-thumb { transform: translateX(1.25rem); }
.acct-switch input:focus-visible ~ .acct-switch-track { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* Small field labels inside read-only rows (active email, code expiry). */
.acct-kv-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--c-ink-3);
}
.acct-kv-value {
    font-size: 0.9375rem;
    color: var(--c-ink);
}
.acct-mono { font-family: var(--font-display); font-size: 0.875rem; }
/* Empty identifier rows read "Click to add": a prompt, not an identifier. */
.acct-mono.text-ink-400 { font-family: inherit; }

/* Quiet destructive button. */
.btn-danger-quiet {
    background: var(--c-raised);
    color: #b42318;
    border-color: var(--c-line-strong);
}
.btn-danger-quiet:hover { background: #fef3f2; border-color: #f4b4ad; color: #912018; }
html.dark .btn-danger-quiet { color: #fca5a5; }
html.dark .btn-danger-quiet:hover { background: #331616; border-color: #5a2626; color: #fecaca; }

/* Inline callouts: tinted fill, 1px border, no side stripe. */
.acct-callout {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--c-line);
    border-radius: 0.5rem;
    background: var(--c-surface);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--c-ink-2);
}
.acct-callout > i { margin-top: 0.125rem; flex-shrink: 0; }
.acct-callout.hidden { display: none; }
.acct-callout--gold { border-color: #f6d784; background: #fff8e1; color: #3d2c05; }
.acct-callout--gold > i { color: #a26f00; }
html.dark .acct-callout--gold { border-color: rgba(255, 183, 7, 0.3); background: rgba(255, 183, 7, 0.08); color: #f3e3b5; }
html.dark .acct-callout--gold > i { color: #ffd04d; }
.acct-callout--rust { border-color: #f1c7b3; background: #fdf3ee; color: #8a2f0b; }
html.dark .acct-callout--rust { border-color: rgba(194, 65, 12, 0.4); background: rgba(194, 65, 12, 0.12); color: #fdba98; }

/* ---- Overview summary ---- */
.acct-summary { display: grid; }
.acct-summary > div { padding: 1.25rem 1.5rem; min-width: 0; }
.acct-summary > div + div { border-top: 1px solid var(--c-line); }
@media (min-width: 768px) {
    .acct-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acct-summary > div + div { border-top: 0; border-left: 1px solid var(--c-line); }
}
.acct-summary dt { font-size: 0.8125rem; font-weight: 500; color: var(--c-ink-3); }
.acct-summary dd { margin-top: 0.25rem; }
.acct-summary-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-ink);
}
.acct-summary-sub {
    font-size: 0.875rem;
    color: var(--c-ink-3);
    overflow-wrap: anywhere;
}

/* ---- Plan + credit widgets ---- */
.acct-widget { display: flex; flex-direction: column; }
.acct-widget-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-ink-2);
}
.acct-widget-title i { font-size: 1rem; color: var(--c-ink-3); font-weight: 400; }
.acct-widget-figure {
    margin-top: 0.5rem;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}
.acct-widget-figure.is-forest { color: var(--c-primary); }
.acct-widget-figure.is-muted { color: var(--c-ink-3); }
.acct-widget-figure--sm { font-size: 1.125rem; }
.acct-meter {
    height: 0.5rem;
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--c-surface);
    box-shadow: inset 0 0 0 1px var(--c-line);
}
.acct-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--c-primary);
}
.acct-meter.is-high > span { background: #b5532a; }
.acct-widget-meta {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--c-ink-3);
    font-variant-numeric: tabular-nums;
}
.acct-widget-meta + .acct-widget-meta { margin-top: 0.125rem; }
.acct-widget-meta strong { font-weight: 600; color: var(--c-ink); }
.acct-widget-note { margin-top: 0.75rem; font-size: 0.8125rem; }
.acct-widget-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1.25rem;
}
.acct-widget-foot {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--c-line);
    font-size: 0.8125rem;
    color: var(--c-ink-3);
}
.acct-text-btn {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
}
.acct-text-btn:hover { text-decoration-color: currentColor; }
.acct-text-btn--rust { color: #b5532a; }
html.dark .acct-text-btn--rust { color: #f0a07a; }

/* ---- Payment history ---- */
.acct-table-wrap { overflow-x: auto; }
.acct-table th:first-child,
.acct-table td:first-child { padding-left: 1.5rem; }
.acct-table th:last-child,
.acct-table td:last-child { padding-right: 1.5rem; }
.acct-table tbody tr:last-child td { border-bottom: 0; }
.acct-table th { white-space: nowrap; }
.acct-table th.text-right { text-align: right; }
/* Inter's tabular figures also widen the hyphen ("top - up"); text cells opt out. */
.acct-table td.acct-text { font-variant-numeric: normal; }
.acct-table td { vertical-align: middle; }
.acct-cap { text-transform: capitalize; }

/* ---- Empty states ---- */
.acct-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 1.5rem;
    text-align: center;
}
.acct-empty svg { width: 4.5rem; height: 4.5rem; color: var(--c-primary); }
.acct-empty h2 { margin-top: 1.25rem; font-size: 1rem; font-weight: 600; color: var(--c-ink); }
.acct-empty p { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.55; color: var(--c-ink-2); }

/* ---- My data: research ledger ---- */
.acct-ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.acct-ledger > div {
    min-width: 0;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--c-line);
}
.acct-ledger > div:nth-child(-n+2) { border-top: 0; }
.acct-ledger > div:nth-child(even) { border-left: 1px solid var(--c-line); }
@media (min-width: 1024px) {
    .acct-ledger { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
    .acct-ledger > div { border-top: 0; }
    .acct-ledger > div + div { border-left: 1px solid var(--c-line); }
}
.acct-ledger dt { font-size: 0.8125rem; font-weight: 500; color: var(--c-ink-3); }
.acct-ledger dd { margin-top: 0.25rem; }
.acct-ledger-figure {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}
.acct-ledger-figure--text {
    font-size: 1.0625rem;
    line-height: 1.35;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}
.acct-ledger-sub { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }

/* List toolbar (exports + count) and list items. */
.acct-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.acct-count { font-size: 0.875rem; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.acct-count strong { font-weight: 600; color: var(--c-ink); }
.acct-item { transition: border-color 0.15s ease; }
.acct-item:hover { border-color: var(--c-line-strong); }
.acct-item-title a:hover { color: var(--c-primary); }
.acct-item-label { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; color: var(--c-ink-3); }

/* Kebab menus and modals: the only floating surfaces here. */
.acct-menu {
    border: 1px solid var(--c-line);
    border-radius: 0.5rem;
    background: var(--c-raised);
    padding: 0.25rem;
}
.acct-menu-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    color: var(--c-ink-2);
}
.acct-menu-item i { color: var(--c-ink-3); }
.acct-menu-item:hover { background: var(--c-surface); color: var(--c-ink); }
.acct-menu-item--danger,
.acct-menu-item--danger i { color: #b42318; }
.acct-menu-item--danger:hover { background: #fef3f2; color: #912018; }
html.dark .acct-menu-item--danger,
html.dark .acct-menu-item--danger i { color: #fca5a5; }
html.dark .acct-menu-item--danger:hover { background: #331616; color: #fecaca; }
.acct-menu-sep { margin: 0.25rem 0; border-top: 1px solid var(--c-line); }
.acct-icon-btn {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-line);
    border-radius: 0.5rem;
    background: var(--c-raised);
    color: var(--c-ink-3);
}
.acct-icon-btn:hover { border-color: var(--c-line-strong); color: var(--c-ink); }
.acct-modal-panel {
    width: 100%;
    max-width: 28rem;
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background: var(--c-raised);
}
.acct-modal-panel h2,
.acct-modal-panel h3 { font-size: 1rem; font-weight: 600; color: var(--c-ink); }
.acct-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--c-line);
}

/* Pagination (publications tab). */
.acct-page {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-line);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-ink-2);
    font-variant-numeric: tabular-nums;
}
a.acct-page:hover { border-color: var(--c-line-strong); color: var(--c-ink); background: var(--c-surface); }
.acct-page.is-current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
html.dark .acct-page.is-current { color: #101512; }
.acct-page.is-disabled { color: var(--c-line-strong); }
.acct-page.is-gap { border-color: transparent; color: var(--c-ink-3); }

/* ---- Claim + upload flows ---- */
.acct-paper-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-ink);
}
.acct-paper-meta { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--c-ink-3); }
.acct-subhead { font-size: 0.875rem; font-weight: 600; color: var(--c-ink); }
.acct-prose { font-size: 0.9375rem; line-height: 1.65; color: var(--c-ink-2); }

/* Author choice pills. */
.acct-pill {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--c-line-strong);
    border-radius: 999px;
    background: var(--c-raised);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-ink-2);
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.acct-pill:hover { border-color: var(--c-ink-3); color: var(--c-ink); }
.peer:checked + .acct-pill { border-color: var(--c-primary); background: var(--c-primary); color: #fff; }
html.dark .peer:checked + .acct-pill { color: #101512; }
.peer:focus-visible + .acct-pill { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.acct-pill-pos { flex-shrink: 0; font-size: 0.75rem; font-weight: 600; opacity: 0.65; font-variant-numeric: tabular-nums; }

/* Upload dropzone + evidence rows: token colours so they work in dark mode
   (the shared .profile-evidence-* rules in app.css are light-only). */
.acct .profile-evidence-dropzone {
    border-color: var(--c-line-strong);
    background: var(--c-bg);
}
.acct .profile-evidence-dropzone:hover,
.acct .profile-evidence-dropzone.is-dragging {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}
.acct .profile-evidence-icon { background: var(--c-primary-soft); color: var(--c-primary); }
.acct .profile-evidence-file-row { border-color: var(--c-line); background: var(--c-surface); }
.acct .profile-evidence-file-icon { color: var(--c-ink-3); }
.acct .profile-editor-secondary-button {
    border-color: var(--c-line-strong);
    background: var(--c-raised);
    color: var(--c-ink);
    font-size: 0.875rem;
}
.acct .profile-editor-secondary-button:hover { border-color: var(--c-ink-3); background: var(--c-surface); }
.acct .profile-editor-primary-button { background: var(--c-primary); color: #fff; font-size: 0.875rem; }
.acct .profile-editor-primary-button:hover { background: var(--c-primary-hover); }
html.dark .acct .profile-editor-primary-button { color: #101512; }
.acct .profile-editor-icon-button { border-color: var(--c-line-strong); background: var(--c-raised); color: var(--c-ink-3); }
.acct .profile-editor-icon-button:hover { border-color: var(--c-ink-3); color: var(--c-ink); }
.acct-progress { height: 0.5rem; overflow: hidden; border-radius: 999px; background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); }
.acct-progress > div { background: var(--c-primary); }

/* ---- Checkout ---- */
.acct-seg {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--c-line);
    border-radius: 0.625rem;
    background: var(--c-surface);
}
.acct-seg button {
    height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: 0.4375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-ink-3);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.acct-seg button:hover { color: var(--c-ink); }
.acct-seg button[aria-pressed="true"] {
    background: var(--c-raised);
    border-color: var(--c-line-strong);
    color: var(--c-ink);
}
.acct-plan {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background: var(--c-raised);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.acct-plan.is-buyable { cursor: pointer; }
.acct-plan.is-buyable:hover { border-color: var(--c-line-strong); }
.acct-plan:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-soft); }
.acct-plan.is-locked { cursor: not-allowed; }
.acct-plan.is-locked .acct-plan-name,
.acct-plan.is-locked .acct-plan-price,
.acct-plan.is-locked input { opacity: 0.55; }
.acct-plan input[type="radio"] { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.25rem; accent-color: var(--c-primary); }
.acct-plan-name { font-size: 1rem; font-weight: 600; color: var(--c-ink); }
.acct-plan-price { text-align: right; font-variant-numeric: tabular-nums; }
.acct-plan-price strong { display: block; font-size: 1.125rem; font-weight: 600; color: var(--c-ink); }
.acct-plan-price span { font-size: 0.75rem; color: var(--c-ink-3); }
.acct-preset {
    height: 2rem;
    padding: 0 0.875rem;
    border: 1px solid var(--c-line-strong);
    border-radius: 999px;
    background: var(--c-raised);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-ink-2);
    font-variant-numeric: tabular-nums;
}
.acct-preset:hover { border-color: var(--c-ink-3); color: var(--c-ink); }
.acct-summary-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* ---- Invoice ---- */
.acct-doc-title {
    font-size: 2rem;
    line-height: 1.1;
    color: var(--c-ink);
}
.acct-doc-label { font-size: 0.8125rem; font-weight: 600; color: var(--c-ink-3); }
.acct-doc-table th {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--c-line-strong);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-ink-3);
}
.acct-doc-table td { padding: 1rem 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.acct-doc-totals > div { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }

@media print {
    /* Paper is white whatever the screen theme; drop the dark remap. */
    html.dark .print-document,
    html.dark .print-document * { color: #141a16 !important; border-color: #c9d0cb !important; }
    html.dark .print-document { background: #fff !important; }
    .print-document .bg-ink-50 { background: #f7f8f7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .acct-doc-title { font-size: 1.75rem; }
}

@media (max-width: 639px) {
    .acct .card-pad { padding: 1.25rem; }
    .acct-row { padding: 1.25rem; }
}

/* The shared custom select trigger has no dark rule; inside account forms it
   takes the field tokens so it matches the inputs beside it. */
html.dark .acct .app-select-trigger {
    background: var(--c-bg);
    color: var(--c-ink);
    border-color: var(--c-line-strong);
}
html.dark .acct .app-select-trigger:hover { background: var(--c-surface); }
html.dark .acct .app-select-flag { border-color: var(--c-line-strong); }

/* ---- Hairline sections, not boxes ----
   Settings bodies sit on the page ground, ruled like the home index; only
   floating UI (menus, modals) keeps a card. */
.acct-group-body.card,
.acct-summary.card,
.acct-widget.card {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.acct-group-body.card.card-pad { padding: 0; }
.acct-group-body.acct-rows,
.acct-group-body.acct-row,
.acct-summary.card {
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.acct-group-body .acct-row,
.acct-group-body.acct-row { padding-left: 0; padding-right: 0; }
.acct-widget.card.card-pad {
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--c-line);
}

/* ---- Suggestions tab: funding matched to the member's research ---- */
.sg-list > li { padding: 0.875rem 1.25rem; border-top: 1px solid var(--c-line); }
.sg-list > li:first-child { border-top: 0; }
.sg-list a { color: var(--c-ink); font-size: 0.9375rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.sg-list a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.sg-list p { margin-top: 0.1875rem; color: var(--c-ink-3); font-size: 0.8125rem; line-height: 1.5; }
.sg-more { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 1rem; color: var(--c-primary); font-size: 0.875rem; font-weight: 600; }
.sg-more i { transition: transform 200ms ease; }
.sg-more:hover i { transform: translateX(3px); }
.sg-empty { padding: 0.875rem 0; color: var(--c-ink-3); font-size: 0.875rem; line-height: 1.6; }
.sg-empty a { color: var(--c-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sg-upsell h3 { color: var(--c-ink); font-size: 1rem; font-weight: 600; }
.sg-upsell p { margin: 0.375rem 0 1.125rem; max-width: 40rem; color: var(--c-ink-2); font-size: 0.875rem; line-height: 1.6; }
.sg-loading { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem 0; color: var(--c-ink-3); font-size: 0.875rem; }
.sg-spinner { width: 1.125rem; height: 1.125rem; border: 2px solid var(--c-line); border-top-color: var(--c-primary); border-radius: 50%; animation: sg-spin 0.8s linear infinite; }
@keyframes sg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sg-spinner { animation-duration: 2.4s; } }
.sg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1rem; }
.sg-updated { display: flex; align-items: center; gap: 0.625rem; color: var(--c-ink-3); font-size: 0.875rem; }
.sg-bar .btn[disabled] { cursor: default; opacity: 0.7; }

/* ---- My account: stacked like the Wits account page ----
   Each section is one full-width box with its heading inside and its fields,
   figures and widgets in rows. Scoped to the account page (.acct-stack); the
   other account screens keep the hairline groups above. */
.acct-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.75rem; }

.acct-stack .acct-group {
    display: block;
    padding: 1.5rem;
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background: var(--c-raised);
}
.acct-stack .acct-group + .acct-group { margin-top: 1.5rem; padding-top: 1.5rem; }
.acct-stack .acct-group-head h2 { font-size: 1.125rem; }
.acct-stack .acct-group-head p { margin-top: 0.25rem; }
.acct-stack .acct-group-head + * { margin-top: 1.25rem; }

/* Inside a box the body draws no second frame. */
.acct-stack .acct-group-body.card,
.acct-stack .acct-group-body.acct-rows,
.acct-stack .acct-group-body.acct-row {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.acct-stack .acct-group .acct-row { padding: 1.25rem 0; }
.acct-stack .acct-group .acct-rows > .acct-row:first-child,
.acct-stack .acct-group-body.acct-row { padding-top: 0; }
.acct-stack .acct-group .acct-rows > .acct-row:last-child,
.acct-stack .acct-group-body.acct-row { padding-bottom: 0; }
.acct-stack .acct-option { border-radius: 0.5rem; }
.acct-stack .acct-rows > .acct-option { border-top: 0; }
.acct-stack .acct-rows > .acct-option + .acct-option { margin-top: 0.25rem; }

.acct-stack .acct-widget.card.card-pad {
    padding: 1.5rem;
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background: var(--c-raised);
}
/* Billing: widgets inside a section box are rows of it. */
.acct-stack .acct-group .acct-widget.card.card-pad {
    padding: 1.25rem 0 0;
    border: 0;
    border-top: 1px solid var(--c-line);
    border-radius: 0;
    background: transparent;
}
.acct-stack .acct-group .acct-group-body > .acct-widget:first-child,
.acct-stack .acct-group > .acct-widget.acct-group-body { padding-top: 0; border-top: 0; }

/* Suggestions list sits in the section box without its own frame. */
.acct-stack .sg-list.card,
.acct-stack .acct-group .sg-upsell.card { padding: 0; border: 0; border-radius: 0; background: transparent; }
.acct-stack .sg-list > li { padding: 0.875rem 0; }

/* Overview: the plan and usage widgets each sit in a box. */
/* Every section saves from its own foot: a note on the left, the action on the right. */
.acct-stack .acct-group-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    max-width: 48rem;
    margin-top: 1.5rem;
    padding: 1.25rem 0 1.5rem;
    border-top: 1px solid var(--c-line);
}
.acct-stack .acct-group:has(> .acct-group-foot) { padding-bottom: 0; }
/* The Unverified chip in the header leads to Contact & ORCID. */
.acct-chip-link { cursor: pointer; transition: border-color 150ms ease, color 150ms ease; }
.acct-chip-link:hover { border-color: var(--c-line-strong); color: var(--c-ink); }

/* Boxes span the page like Wits; what is inside them keeps a readable width
   so labels, fields, switches and buttons stay close together. */
.acct-stack .acct-group > .acct-group-head,
.acct-stack .acct-group > .acct-group-body:not(:has(table)) { max-width: 48rem; }
.acct-stack .acct-fields--2 { grid-template-columns: minmax(0, 1fr); }
.acct-stack .acct-span-2 { grid-column: auto; }

/* Keyboard focus on a tab draws inside it; the scrolling tab strip would
   clip an outline drawn outside. */
.acct-stack .acct-tab:focus-visible { outline-offset: -2px; border-radius: 0.25rem; }
@media (max-width: 639px) {
    .acct-stack .acct-group,
    .acct-stack .acct-widget.card.card-pad { padding: 1.25rem; }
}

/* Dark theme: the danger tone had no dark value. */
html.dark { --c-danger: #f97066; }