/* ═══════════════════════════════════════════════════════════════════════════
   EGPHP — Operate
   The customer portal and the admin panel: a control surface, not a page.

   Reference grammar: a dark command centre — near-black canvas, surfaces that
   stack by TONE rather than elevation, hairline borders, 8px radii, no shadows,
   and one chromatic accent that only ever marks the live thing. Compact and
   instrument-like: a tool room, not a pitch deck.

   Identity stays ours (DESIGN.md): copper #E85622 is the only call to action,
   patina #35A08F carries the systems layer, figures are set in the mono face,
   and a copper fill always takes the INK text — white on copper is 3.49:1.

   Scope: everything here is under .account-body / .acct-*, so nothing leaks into
   the marketing pages that share the stylesheet chain.
   ═══════════════════════════════════════════════════════════════════════════ */

.account-body {
    /* ── ground: four tones, no shadows ── */
    --app-bg:        #0C0A11;   /* the room */
    --app-panel:     #131019;   /* a panel on it */
    --app-raised:    #1A1622;   /* a thing inside a panel */
    --app-line:      #262032;   /* hairline */
    --app-line-soft: #1E1926;   /* hairline between rows */

    --app-ink:       #F4F2F7;   /* primary text */
    --app-ink-2:     #A9A2B8;   /* secondary text, labels */
    --app-ink-3:     #6F6880;   /* disabled, meta */

    --app-copper:    #E85622;   /* the one accent: primary action, current page */
    --app-copper-dim:rgba(232, 86, 34, 0.14);
    --app-on-copper: #12101A;   /* text ON copper — never white */
    --app-patina:    #35A08F;   /* systems layer, "live" */
    --app-ok:        #4ADE80;
    --app-warn:      #FBBF24;
    --app-bad:       #F87171;

    --app-r:      8px;          /* panels, inputs, buttons */
    --app-r-sm:   4px;          /* tags */
    --spring: cubic-bezier(0.32, 0.72, 0, 1);
    --tray:  20px;              /* a card's outer radius */
    --core:  14px;              /* what sits inside one */
    --app-side:   236px;
    --app-top:    56px;
    --app-view:   1180px;

    background: var(--app-bg);
    color: var(--app-ink);
    font-family: var(--font-body, "Public Sans", system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* Light is a first-class ground here too: warm paper, the same four tones inverted. */
:root[data-theme="light"] .account-body {
    --app-bg:        #F4F2F7;
    --app-panel:     #FFFFFF;
    --app-raised:    #F7F5FA;
    --app-line:      #E1DDE9;
    --app-line-soft: #EDEAF2;
    --app-ink:       #16131F;
    --app-ink-2:     #56506A;
    --app-ink-3:     #857F97;
    --app-copper-dim:rgba(232, 86, 34, 0.10);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) .account-body {
        --app-bg:        #F4F2F7;
        --app-panel:     #FFFFFF;
        --app-raised:    #F7F5FA;
        --app-line:      #E1DDE9;
        --app-line-soft: #EDEAF2;
        --app-ink:       #16131F;
        --app-ink-2:     #56506A;
        --app-ink-3:     #857F97;
        --app-copper-dim:rgba(232, 86, 34, 0.10);
    }
}

.account-body *,
.account-body *::before,
.account-body *::after { box-sizing: border-box; }

.account-body a { color: inherit; }
.acct-mono { font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace); font-feature-settings: 'zero' 1, 'tnum' 1; }

/* ─────────────────────────────────────────────── the shell */

.acct-app { display: grid; grid-template-columns: var(--app-side) minmax(0, 1fr); min-height: calc(100vh / var(--egz, 1)); }
.acct-app.is-bare { grid-template-columns: minmax(0, 1fr); }

.acct-workspace { min-width: 0; display: flex; flex-direction: column; }

.acct-side {
    position: sticky; top: 0; align-self: start;
    height: calc(100vh / var(--egz, 1)); overflow-y: auto;
    background: var(--app-panel);
    border-inline-end: 1px solid var(--app-line);
    display: flex; flex-direction: column;
    padding: 14px 12px 12px;
}
.acct-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; margin-bottom: 4px; text-decoration: none; }
.acct-brand img { height: 30px; width: auto; display: block; }
.acct-brand span { font-weight: 600; font-size: 12px; line-height: 1; font-family: var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--app-ink-3); }

.acct-side-group { margin-bottom: 14px; }
.acct-side-group > p {
    margin: 0 0 6px; padding: 0 10px;
    font-weight: 500; font-size: 11.5px; line-height: 1; font-family: var(--font-mono, monospace); letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--app-ink-3);
}
.acct-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.acct-side a, .acct-side button {
    display: flex; align-items: center; gap: 11px; width: 100%;
    height: 40px; padding: 0 13px; border: 1px solid transparent; border-radius: 999px;
    background: transparent; color: var(--app-ink-2);
    font-weight: 500; font-size: 13.5px; line-height: 1;
    text-decoration: none; cursor: pointer; text-align: start;
    transition: background-color .4s var(--spring), color .4s var(--spring), border-color .4s var(--spring), transform .4s var(--spring);
}
.acct-side a:hover, .acct-side button:hover { background: var(--app-panel); color: var(--app-ink); transform: translateX(2px); }
[dir="rtl"] .acct-side a:hover, [dir="rtl"] .acct-side button:hover { transform: translateX(-2px); }
.acct-side a.is-here {
    background: var(--app-raised); color: var(--app-ink); font-weight: 600;
    border-color: color-mix(in srgb, var(--app-copper) 45%, transparent);
}
.acct-side a.is-here svg { color: var(--app-copper); }
.acct-side svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--app-ink-3); }
.acct-side .acct-count { margin-inline-start: auto; font-weight: 600; font-size: 11px; line-height: 1; font-family: var(--font-mono, monospace); color: var(--app-ink-3); }

.acct-side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--app-line); }
.acct-side-foot form { margin: 0; }

/* ─────────────────────────────────────────────── top bar */

.acct-top {
    position: sticky; top: 0; z-index: 20;
    height: var(--app-top); display: flex; align-items: center; gap: 14px;
    padding: 0 clamp(16px, 2.2vw, 28px);
    background: color-mix(in srgb, var(--app-bg) 88%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--app-line);
}
.acct-top h1 { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.2; font-family: var(--font-display, inherit); letter-spacing: -0.015em; color: var(--app-ink); }
.acct-crumb { font-weight: 500; font-size: 12px; line-height: 1; font-family: var(--font-mono, monospace); color: var(--app-ink-3); letter-spacing: 0.04em; }
.acct-top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.acct-iconbtn {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--app-line); border-radius: var(--app-r);
    background: transparent; color: var(--app-ink-2); cursor: pointer; text-decoration: none;
}
.acct-iconbtn:hover { border-color: var(--app-ink-3); color: var(--app-ink); }
.acct-iconbtn svg { width: 16px; height: 16px; }
.acct-avatar {
    width: 32px; height: 32px; border-radius: var(--app-r);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--app-copper); color: var(--app-on-copper);
    font-weight: 700; font-size: 13px; line-height: 1; font-family: var(--font-display, inherit);
}

/* ─────────────────────────────────────────────── the view */

.acct-view { padding: clamp(18px, 2.4vw, 28px); max-width: var(--app-view); }
.acct-view > * + * { margin-top: 16px; }

.acct-panel {
    background: var(--app-panel); border: 1px solid var(--app-line); border-radius: var(--tray);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    overflow: hidden;
}
.acct-panel-head {
    display: flex; align-items: center; gap: 12px; min-height: 56px;
    padding: 14px 20px; border-bottom: 1px solid var(--app-line);
}
.acct-panel-head h2 {
    display: flex; align-items: center; gap: 11px;
    margin: 0; font-weight: 600; font-size: 16px; line-height: 1.2;
    font-family: var(--font-display, inherit); letter-spacing: -0.01em; color: var(--app-ink);
}
/* the mark itself: a tile, whatever it sits on */
.acct-mark {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 30px; width: 30px; height: 30px; padding: 6px; border-radius: 10px;
    background: color-mix(in srgb, var(--app-copper) 18%, transparent); color: #FF7A45;
    border: 1px solid color-mix(in srgb, var(--app-copper) 42%, transparent);
    vertical-align: -8px; margin-inline-end: 10px;
}
.acct-panel > h1 { display: flex; align-items: center; gap: 0; }
.acct-panel > h1 .acct-mark { margin-inline-end: 12px; }
.acct-readout dt { display: flex; align-items: center; }
.acct-readout dt .acct-mark { flex: 0 0 26px; width: 26px; height: 26px; padding: 5px; border-radius: 9px; margin-inline-end: 9px; vertical-align: middle; }

/* every section carries a mark, the way the panel's cards do */
.acct-panel-head h2 svg, .acct-panel-head h2 i {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; font-size: 13px;
    background: color-mix(in srgb, var(--app-copper) 18%, transparent); color: #FF7A45;
    border: 1px solid color-mix(in srgb, var(--app-copper) 42%, transparent);
}
.acct-panel-head .acct-panel-tools { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.acct-panel-body { padding: 20px; }
.acct-panel-body > p:first-child { margin-top: 0; }
.acct-panel-body > :last-child { margin-bottom: 0; }

/* The one figure that matters, set like an instrument reading. */
.acct-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.acct-readout > div {
    background: var(--app-panel); border: 1px solid var(--app-line); border-radius: var(--tray);
    padding: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: border-color .5s var(--spring), transform .5s var(--spring);
}
.acct-readout > div:hover { border-color: var(--app-ink-3); transform: translateY(-2px); }
.acct-readout > div.is-accent { border-color: color-mix(in srgb, var(--app-copper) 45%, transparent); }
.acct-readout dt { margin: 0 0 14px; font-weight: 500; font-size: 11px; line-height: 1; font-family: var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--app-ink-3); }
.acct-readout dd { margin: 0; font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05; font-family: var(--font-mono, monospace); color: var(--app-ink); letter-spacing: -0.02em; }
.acct-readout dd small a { display: inline-block; padding: 6px 0; min-height: 28px; text-decoration: none; color: var(--app-copper); }
.acct-readout dd small { display: block; margin-top: 6px; font-weight: 400; font-size: 12px; line-height: 1.35; font-family: var(--font-body, inherit); color: var(--app-ink-2); letter-spacing: 0; }
.acct-readout .is-accent dd { color: var(--app-copper); }

/* ─────────────────────────────────────────────── tables */

.acct-table-wrap { overflow-x: auto; }
/* modern.css carries a legacy `table { display: block }` for the marketing pages, which
   makes a table shrink-wrap instead of filling its column. Every part is restated here. */
.acct-table { display: table; width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto; }
.acct-table thead { display: table-header-group; }
.acct-table tbody { display: table-row-group; }
.acct-table tr { display: table-row; }
.acct-table th, .acct-table td { display: table-cell; }
.acct-table th {
    text-align: start; padding: 10px 16px;
    font-weight: 500; font-size: 11.5px; line-height: 1; font-family: var(--font-mono, monospace); letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--app-ink-3); border-bottom: 1px solid var(--app-line); white-space: nowrap;
}
.acct-table td { padding: 12px 16px; border-bottom: 1px solid var(--app-line-soft); color: var(--app-ink-2); vertical-align: middle; }
.acct-table tbody tr:last-child td { border-bottom: 0; }
.acct-table tbody tr:hover td { background: var(--app-raised); }
.acct-table td strong, .acct-table td b { color: var(--app-ink); font-weight: 600; }
.acct-table .is-num { text-align: end; font-family: var(--font-mono, monospace); font-feature-settings: 'zero' 1, 'tnum' 1; color: var(--app-ink); white-space: nowrap; }
.acct-table .is-tight { width: 1%; white-space: nowrap; }
.acct-table td:has(> .acct-status), .acct-table td:has(> .acct-pill) { width: 1%; white-space: nowrap; }
.acct-table th:first-child, .acct-table td:first-child { width: 40%; }

/* ─────────────────────────────────────────────── status */

.acct-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 12px; line-height: 1; color: var(--app-ink-2); white-space: nowrap; }
.acct-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--app-ink-3); flex: 0 0 6px; }
.acct-status.is-ok::before { background: var(--app-patina); box-shadow: 0 0 0 3px rgba(53, 160, 143, 0.16); }
.acct-status.is-warn::before { background: var(--app-warn); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.16); }
.acct-status.is-danger::before { background: var(--app-bad); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.16); }
.acct-status.is-info::before { background: var(--app-copper); box-shadow: 0 0 0 3px rgba(232, 86, 34, 0.16); }

.acct-tag { display: inline-block; padding: 2px 6px; border-radius: var(--app-r-sm); border: 1px solid var(--app-line); font-weight: 500; font-size: 11px; line-height: 1.5; font-family: var(--font-mono, monospace); color: var(--app-ink-2); }
.acct-tag.is-accent { border-color: transparent; background: var(--app-copper-dim); color: var(--app-copper); }

/* ─────────────────────────────────────────────── buttons */

.acct-btn {
    min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 40px; padding: 0 18px; border-radius: 999px;
    border: 1px solid var(--app-line); background: transparent; color: var(--app-ink);
    font-weight: 600; font-size: 13px; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .4s var(--spring), border-color .4s var(--spring), color .4s var(--spring);
}
.acct-btn:hover { border-color: var(--app-ink-3); background: var(--app-raised); }
.acct-btn.is-primary { background: var(--app-copper); border-color: var(--app-copper); color: var(--app-on-copper); }
.acct-btn.is-primary:hover { background: #F16A3A; border-color: #F16A3A; }
.acct-btn.is-ghost { border-color: transparent; color: var(--app-ink-2); }
.acct-btn.is-ghost:hover { color: var(--app-ink); background: var(--app-raised); }
.acct-btn.is-danger { color: var(--app-bad); border-color: color-mix(in srgb, var(--app-bad) 40%, transparent); }
.acct-btn.is-danger:hover { background: rgba(248, 113, 113, 0.10); border-color: var(--app-bad); }
.acct-btn.is-block { width: 100%; }
.acct-btn.is-lg { height: 40px; padding: 0 18px; font-size: 14px; }
.acct-btn svg { width: 16px; height: 16px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }

/* ─────────────────────────────────────────────── forms */

.acct-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.acct-form label { display: block; }
/* `small` is 0.8em by default, and inside a 12px label that is 9.6px — under every legible
   floor. Nothing in this interface is smaller than 11.5px. */
.account-body small { font-size: 12px; }
.acct-form label small, .acct-field label small { font-size: 11.5px; font-weight: 400; }
.acct-form label > span:first-child,
.acct-field > label,
.acct-field > span:first-child {
    display: block; margin-bottom: 6px;
    font-weight: 500; font-size: 12px; line-height: 1.35; font-family: var(--font-mono, monospace);
    letter-spacing: 0.02em; color: var(--app-ink-2);
}
/* input:not([type]) too: the registrant form and the domain search write <input name="..."> with no
   type, so this list skipped them and they rendered as bare 180px grey browser boxes (2026-09-26). */
.acct-form input:not([type]), .acct-form input[type="text"], .acct-form input[type="email"], .acct-form input[type="password"],
.acct-form input[type="tel"], .acct-form input[type="url"], .acct-form input[type="number"],
.acct-form input[type="date"], .acct-form input[type="search"], .acct-form select, .acct-form textarea {
    /* 40, not 38: the reveal button sits inside the field, so the field's height is the
       floor for that control too. */
    width: 100%; height: 44px; padding: 0 14px; border-radius: 12px;
    background: var(--app-raised); color: var(--app-ink);
    border: 1px solid var(--app-line); border-radius: var(--app-r);
    font-weight: 400; font-size: 16px; line-height: 1;   /* under 16 px an iPhone zooms the portal on focus (r10, R8) */
    transition: border-color .4s var(--spring), background-color .4s var(--spring), box-shadow .4s var(--spring);
}
.acct-form textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.acct-form select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-inline-end: 34px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 15px center, right 10px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .acct-form select { background-position: left 10px center, left 15px center; }
.acct-form input:focus, .acct-form select:focus, .acct-form textarea:focus {
    outline: none; border-color: var(--app-copper); background: var(--app-panel);
    box-shadow: 0 0 0 3px var(--app-copper-dim);
}
.acct-form input::placeholder, .acct-form textarea::placeholder { color: var(--app-ink-3); }
/* Chrome paints its own pale blue over autofilled fields, which read as disabled on a dark
   ground. The inset shadow is the only way to repaint them. */
.acct-form input:-webkit-autofill,
.acct-form input:-webkit-autofill:hover,
.acct-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--app-ink);
    -webkit-box-shadow: 0 0 0 40px var(--app-raised) inset;
    box-shadow: 0 0 0 40px var(--app-raised) inset;
    caret-color: var(--app-ink);
    transition: background-color 9999s ease-out;
}
.acct-form input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px var(--app-panel) inset, 0 0 0 3px var(--app-copper-dim); }
.acct-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.acct-hint { margin: 6px 0 0; font-size: 12px; color: var(--app-ink-3); line-height: 1.5; }
.acct-field-error { margin: 6px 0 0; font-size: 12px; color: var(--app-bad); }

/* `.acct-form label { display:block }` above is more specific than a bare class,
   so the checkbox row states its own class twice to win. */
.acct-check.acct-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--app-ink-2); cursor: pointer; }
.acct-check input { margin: 1px 0 0; width: 18px; height: 18px; accent-color: var(--app-copper); flex: 0 0 18px; }
.acct-check span { line-height: 1.5; }
.acct-check strong { color: var(--app-ink); font-weight: 600; }

/* password field with the reveal control */
.acct-pw { position: relative; }
.acct-pw input { padding-inline-end: 42px; }
.acct-pw button {
    position: absolute; inset-block: 1px; inset-inline-end: 1px; width: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--app-ink-3); cursor: pointer;
}
.acct-pw button:hover { color: var(--app-ink); }
.acct-pw svg { width: 17px; height: 17px; display: block; }
.acct-pw svg[hidden] { display: none; }

/* `hidden` must win. A class that sets `display` beats the user-agent rule for [hidden], so
   the install button — hidden until the browser offers an install — was visible on every
   platform, including the iPhone where that event never fires. */
.account-body [hidden] { display: none !important; }

/* The iPhone sheet is a sheet: it comes up from the bottom edge, above the page, clear of the
   home indicator. As an ordinary panel at the end of a long page nobody ever saw it. */
#acct-ios-sheet {
    position: fixed; z-index: 60;
    inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: 520px; margin-inline: auto;
    border: 1px solid var(--app-copper);
    box-shadow: 0 -2px 0 rgba(0,0,0,.25);
}
#acct-ios-sheet h3 { margin: 0 0 6px; font-size: 15px; }
#acct-ios-sheet p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--app-ink-2); }

/* ─────────────────────────────────────────────── notices & empties */

/* A notice speaks in the same vocabulary as everything else here: a status dot and a
   hairline. It carried a 3px coloured bar down one side, which is a badge this system
   wears nowhere and reads as decoration rather than information. */
.acct-notice {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; border-radius: var(--app-r);
    border: 1px solid var(--app-line);
    background: var(--app-panel); color: var(--app-ink-2); font-size: 13px; line-height: 1.55;
 overflow-wrap: anywhere; }
.acct-notice::before {
    content: ""; flex: 0 0 7px; width: 7px; height: 7px; margin-top: 6px;
    border-radius: 50%; background: var(--app-ink-3);
}
.acct-notice.is-ok::before { background: var(--app-patina); box-shadow: 0 0 0 3px rgba(53, 160, 143, 0.16); }
.acct-notice.is-warn::before { background: var(--app-warn); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.16); }
.acct-notice.is-error::before { background: var(--app-bad); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.16); }
.acct-notice.is-info::before { background: var(--app-copper); box-shadow: 0 0 0 3px rgba(232, 86, 34, 0.16); }
/* the tint carries the tone the bar used to, at a weight that stays behind the words */
.acct-notice.is-error { border-color: color-mix(in srgb, var(--app-bad) 34%, var(--app-line)); }
.acct-notice.is-warn { border-color: color-mix(in srgb, var(--app-warn) 30%, var(--app-line)); }
.acct-notice strong { color: var(--app-ink); }
/* A notice that carries its own way out: the recovery sits under the sentence, not on
   another page. The form is inline so the button keeps the notice's rhythm. */
.acct-inline-form { margin-top: 10px; }
.acct-notice .acct-hint { margin: 4px 0 0; }

.acct-empty { padding: 28px 16px; text-align: center; color: var(--app-ink-3); font-size: 13px; }

/* An empty list carries a picture of what belongs in it — as a column, not a backdrop:
   a wide scene stretched across a short full-width band crops to a slice of flat ground. */
.acct-blank {
    display: grid; gap: 20px; align-items: center;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    padding: 4px 0 2px;
}
.acct-blank-art {
    display: block; overflow: hidden; border-radius: var(--app-r);
    border: 1px solid var(--app-line); background: var(--app-raised);
}
.acct-blank-art img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 45%; }
.acct-blank-say { display: grid; gap: 14px; justify-items: start; }
.acct-blank-say p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--app-ink-2); }
@media (max-width: 700px) {
    .acct-blank { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .acct-blank-art img { aspect-ratio: 16 / 9; }
    .acct-blank-say { justify-items: stretch; text-align: start; }
}
.acct-empty a { color: var(--app-copper); text-decoration: none; font-weight: 600; }
.acct-empty a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────── key/value sheets */

.acct-kv { margin: 0; display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); }
.acct-kv dt { padding: 10px 0; font-weight: 500; font-size: 11px; line-height: 1.6; font-family: var(--font-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-ink-3); border-bottom: 1px solid var(--app-line-soft); }
.acct-kv dd { margin: 0; padding: 10px 0 10px 16px; color: var(--app-ink); border-bottom: 1px solid var(--app-line-soft); font-size: 13.5px; }
[dir="rtl"] .acct-kv dd { padding: 10px 16px 10px 0; }
.acct-kv dt:last-of-type, .acct-kv dd:last-of-type { border-bottom: 0; }
.acct-kv .acct-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--app-ink-3); }


.acct-list { list-style: none; margin: 0; padding: 0; }
.acct-list li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--app-line-soft); font-size: 13.5px; color: var(--app-ink-2); }
.acct-list li:last-child { border-bottom: 0; }
.acct-list li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--app-copper); flex: 0 0 4px; transform: translateY(-2px); }
/* A flex row whose children both refuse to shrink is wider than its box at any width where
   its content is long enough. Here the notification's text block had no `min-width: 0` (a flex
   item's floor is its CONTENT, not zero) and the action beside it is `white-space: nowrap`, so
   at 320 the row needed 295px of a 254px box and the action hung 27px off the screen.
   The text block may shrink, and below 560 the action takes its own line instead. */
.acct-list li > div { min-width: 0; }
@media (max-width: 560px) {
    .acct-list li { flex-wrap: wrap; }
    .acct-list li > .acct-btn { margin-inline-start: 14px; }
}

/* ─────────────────────────────────────────────── auth: a split room */

.acct-auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: calc(100vh / var(--egz, 1)); }
.acct-auth-brand {
    position: relative; overflow: hidden;
    background: #0A0810;                       /* the picture's own ground, behind it */
    border-inline-end: 1px solid var(--app-line);
    padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column;
    min-height: 220px;                         /* the band still shows a picture on a phone */
}
/* The scene, and the scrim that lets type live on it. This picture is a dark frame with a
   bright element in it, which is the only kind a scrim can darken without turning to mud. */
.acct-auth-bg, .acct-auth-bg img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The clip lies over its own still, and only where its shape fits.
   Measured 2026-09-05: on a desktop the brand column is 738×900 — a 0.82 ratio — and a 16:9
   film cropped into that is magnified past the point where the composition survives; the tall
   photograph made for that shape is simply better. Under 900px the column is a short wide
   band (about 2:1), which is close to the film's own frame, so that is where it runs. The
   still is always in the markup underneath, so reduced motion or a blocked video leaves a
   photograph rather than an empty rectangle. */
.acct-auth-film {
    position: absolute; inset: 0; width: 100%; height: 100%; display: none;
    object-fit: cover; object-position: 62% 45%;
}
@media (max-width: 900px) { .acct-auth-film { display: block; } }
@media (prefers-reduced-motion: reduce) { .acct-auth-film { display: none !important; } }
.acct-auth-bg img { object-fit: cover; object-position: 62% 40%; }
.acct-auth-brand::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(105deg, rgba(10, 8, 16, 0.80) 0%, rgba(10, 8, 16, 0.55) 38%, rgba(10, 8, 16, 0.12) 72%, rgba(10, 8, 16, 0) 100%);
}
/* The light theme keeps the same picture — it is a night scene either way — so the type on
   it stays light, whatever the rest of the page is doing. */
.acct-auth-brand, .acct-auth-brand .acct-auth-say h2, .acct-auth-brand .acct-brand span { color: #F4F2F7; }
.acct-auth-brand .acct-auth-say p { color: #C9C3D6; }
.acct-auth-brand .acct-auth-facts li { color: #A9A2B8; }
/* one drawn line, the site's own signature, at the scale of a wall */
.acct-auth-brand::after {
    content: ""; z-index: 2; position: absolute; inset-inline-start: clamp(28px, 4vw, 56px); bottom: 0; top: 0; width: 2px;
    background: linear-gradient(180deg, transparent, var(--app-copper) 22%, var(--app-patina) 78%, transparent);
    opacity: 0.5;
}
/* everything except the two background layers sits above them */
.acct-auth-brand > *:not(.acct-auth-bg):not(.acct-auth-film) { position: relative; z-index: 2; }
.acct-auth-brand .acct-brand { padding-inline-start: 26px; }
.acct-auth-mid { margin: auto 0; }
.acct-auth-say { padding-inline-start: 26px; max-width: 26ch; }
.acct-auth-say p { max-width: 40ch; }
.acct-auth-say h2 { margin: 0 0 14px; font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; font-family: var(--font-display, inherit); letter-spacing: -0.03em; color: var(--app-ink); }
.acct-auth-say p { margin: 0; color: var(--app-ink-2); font-size: 15px; line-height: 1.6; }
.acct-auth-facts { margin: 26px 0 0; padding: 0 0 0 26px; list-style: none; display: grid; gap: 10px; }
[dir="rtl"] .acct-auth-facts { padding: 0 26px 0 0; }
.acct-auth-facts li { display: flex; gap: 10px; align-items: center; font-weight: 500; font-size: 12px; line-height: 1.4; font-family: var(--font-mono, monospace); color: var(--app-ink-3); letter-spacing: 0.02em; }
.acct-auth-facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--app-patina); flex: 0 0 5px; }
.acct-auth-form { background: var(--app-bg); display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 56px); }
.acct-auth-form > div { width: 100%; max-width: 380px; margin: 0 auto; }
.acct-auth-form h1 { margin: 0 0 6px; font-weight: 700; font-size: 26px; line-height: 1.2; font-family: var(--font-display, inherit); letter-spacing: -0.02em; color: var(--app-ink); }
.acct-auth-form .acct-lead { margin: 0 0 22px; color: var(--app-ink-2); font-size: 14px; }
.acct-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 13px; }
.acct-links a { color: var(--app-ink-2); text-decoration: none; }
.acct-links a:hover { color: var(--app-copper); }
.acct-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-weight: 500; font-size: 11.5px; line-height: 1; font-family: var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--app-ink-3); }
.acct-divider::before, .acct-divider::after { content: ""; height: 1px; background: var(--app-line); flex: 1; }
.acct-lead { color: var(--app-ink-2); }

/* the Google button: one white object in a dark room, exactly like the reference */
.acct-google {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    height: 40px; border-radius: var(--app-r);
    background: #FFFFFF; color: #1F1F1F; border: 1px solid #FFFFFF;
    font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none; cursor: pointer;
}
.acct-google:hover { background: #F1F1F1; border-color: #F1F1F1; }
.acct-google svg { width: 18px; height: 18px; }

.acct-hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Google's own badge is positioned past the right edge of the viewport and overflows every
   width. Google permits hiding it as long as the attribution is shown in the form — which is
   exactly what this note is, so the note carries the obligation and the badge goes. */
.grecaptcha-badge { visibility: hidden; }
.acct-recaptcha-note { margin: 14px 0 0; font-size: 12px; color: var(--app-ink-3); line-height: 1.55; }
.acct-recaptcha-note a { color: var(--app-ink-2); }
.acct-recaptcha-note a { color: var(--app-ink-2); }

/* ─────────────────────────────────────────────── responsive */

/* ── the rail becomes a drawer, not a wrapped bar ─────────────────────────────
   It used to lay the fourteen items out as a row that wrapped. That is a bar only if
   they fit on a line, and measured 2026-09-19 across en/fr/de/ar/tr they never do in
   this band: five rows at 900px, eight at 390, nine at 320 in French — 423px of
   navigation standing in front of every page before a word of it is read.
   So the whole band gets ONE pattern: a 44px-tall bar with the brand and a menu
   button, and a panel that opens under it. */
/* Above 900 the rail is a rail and there is nothing to open. `.acct-side button` is
   (0,1,1) and sets `display: flex`, so hiding the control has to name the rail too or the
   desktop layout grows a full-width hamburger inside the list. */
.acct-side .acct-menu { display: none; }

@media (max-width: 900px) {
    .acct-app { grid-template-columns: minmax(0, 1fr); }
    .acct-side {
        /* relative, not static: the panel below anchors to this bar. */
        position: relative; z-index: 30;     /* over .acct-top, which is sticky at 20 */
        height: auto; overflow: visible; padding: 0;
        flex-direction: column; align-items: stretch;
        border-inline-end: 0; border-bottom: 1px solid var(--app-line);
    }
    .acct-side-bar {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 6px 10px;
    }
    /* `.acct-side a, .acct-side button` above is (0,1,1) and sets `width: 100%` and a
       transparent border on EVERY link and button in the rail — including these two. The
       brand took the whole 300px line and pushed the menu button to x=318, right off a
       320px screen, which is the one control that must be reachable. So both rules name
       the rail as well, to outrank it rather than tie with it. */
    .acct-side .acct-brand { padding: 0; margin: 0; flex: 0 0 auto; width: auto; }
    .acct-side .acct-brand span { display: none; }
    .acct-side .acct-menu {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; min-width: 44px; height: 44px; flex: 0 0 44px;   /* never negotiable */
        padding: 0; border: 1px solid var(--app-line); border-radius: 12px;
        background: transparent; color: var(--app-ink); cursor: pointer;
    }
    .acct-side .acct-menu svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--app-ink); }
    .acct-side .acct-menu[aria-expanded="true"] { background: var(--app-raised); border-color: var(--app-ink-3); }

    .acct-side-panel {
        position: absolute; top: 100%; inset-inline: 0;
        background: var(--app-panel);
        border-bottom: 1px solid var(--app-line);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
        padding: 10px 12px 14px;
        max-height: calc(100vh - 56px);
        max-height: calc(100dvh - 56px);
        overflow-y: auto; overscroll-behavior: contain;
    }
    .acct-side-group { margin-bottom: 10px; }
    .acct-side ul { flex-direction: column; gap: 2px; }
    /* The two rules that used to live here — 32px, then 40px from the thumb block —
       are why the 44px floor never reached the navigation. */
    .acct-side a, .acct-side button { min-height: 44px; height: auto; padding: 0 13px; }

    .acct-side-foot { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--app-line); border-inline-start: 0; }

    .acct-auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .acct-auth-brand { border-inline-end: 0; border-bottom: 1px solid var(--app-line); padding: 20px 22px 24px; min-height: 190px; justify-content: center; gap: 14px; }
    .acct-auth-brand .acct-brand { padding-bottom: 0; margin-bottom: 0; }
    .acct-auth-bg img { object-position: 72% 45%; }
    .acct-auth-brand::after { display: none; }
    .acct-auth-brand .acct-brand, .acct-auth-say, .acct-auth-facts { padding-inline-start: 0; }
    .acct-auth-say h2 { font-size: 24px; }
    .acct-auth-say p, .acct-auth-facts { display: none; }
    .acct-view { padding: 16px; }
}

/* The thumb. Measured at 320, 360, 390, 414 and 768: the controls were 32–38px, which is
   under every published touch-target floor, and one `small` was 10px. */
@media (max-width: 900px) {
    .account-body .acct-btn,
    .account-body button,
    .account-body .acct-iconbtn,
    .account-body input:not([type="checkbox"]):not([type="radio"]),
    .account-body select,
    .account-body summary {
        min-height: 44px;
    }
    .account-body .acct-iconbtn { min-width: 44px; }
    .account-body .acct-meta { font-size: 12px; }
    /* the whole row is the target for a checkbox, not the 18px box itself */
    .account-body .acct-check.acct-check { min-height: 44px; align-items: center; }

    /* ⛔ 16px, or iOS Safari ZOOMS THE PAGE the moment the field is focused.
       The fields were 14px, so every form in the portal — sign in, the address on the tax
       page, the card, the support message — threw the layout sideways on the first tap and
       left the person pinching back out before they could type. Below 16 is not a smaller
       field, it is a broken page. Same selector list as the 14px rule above, later in the
       file, so it wins without !important. */
    /* Everything a person types into, by exclusion rather than by list: `<input name="name">`
       carries no `type` attribute at all, so an `input[type="text"]` list silently skips it —
       which is how the domain search, the registrant's names and the service note stayed at
       13px after the rule was written (measured 2026-09-19). */
    .account-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    .account-body select, .account-body textarea {
        font-size: 16px;
    }

    /* A checkbox in a table is not in `.acct-check`, so nothing had ever sized it: the
       notification preferences were fourteen 13x13 boxes — the browser default — on a page
       that is nothing BUT checkboxes. The box grows, and its cell becomes the target. */
    /* `.acct-check input` pins the box with `flex: 0 0 18px`, and a flex-basis beats a width,
       so the box grew taller and stayed 18 wide until the basis was restated too. */
    .account-body input[type="checkbox"], .account-body input[type="radio"] {
        width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--app-copper);
    }
    .account-body .acct-table td:has(> input[type="checkbox"]),
    .account-body .acct-table td:has(> input[type="radio"]) { min-height: 44px; align-items: center; }
}

@media (max-width: 560px) {
    .acct-kv { grid-template-columns: minmax(0, 1fr); }
    .acct-kv dt { border-bottom: 0; padding-bottom: 0; }
    .acct-kv dd { padding: 4px 0 10px; }
    [dir="rtl"] .acct-kv dd { padding: 4px 0 10px; }

    /* Tables restack into blocks rather than hiding their tail. The old rule dropped every
       column past the third, which on the dashboard meant the customer could not see the
       AMOUNT of the payment that is due — the one number the page exists to show. Each cell
       carries its column name (inc/account/table-labels.php) and prints it here. */
    .acct-table, .acct-table tbody, .acct-table tr, .acct-table td { display: block; width: auto; }
    .acct-table thead { display: none; }
    .acct-table tr { padding: 12px 0; border-bottom: 1px solid var(--app-line); }
    .acct-table tr:last-child { border-bottom: 0; }
    .acct-table td {
        display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 4px 10px;
        align-items: baseline; justify-items: start; padding: 3px 0; border: 0;
    }
    .acct-table td::before {
        content: attr(data-label);
        font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--app-ink-3);
    }
    .acct-table td:first-child { grid-template-columns: minmax(0, 1fr); padding-bottom: 6px; font-size: 15px; }
    .acct-table td:first-child::before { display: none; }
    .acct-table td:empty { display: none; }
    /* `width: 1%` is the table trick for "as narrow as your content" — and it is a TABLE trick.
       Once the table is a stack of blocks it means one per cent of the card: the status cell
       became 2.86px wide and clipped its own pill, so an order's state was unreadable on the
       page whose job is to show it (measured 2026-09-19 at 320px). Those rules are (0,2,1) and
       outrank the `width: auto` at the top of this block, so the reset has to name them too. */
    .acct-table .is-tight,
    .acct-table td:has(> .acct-status),
    .acct-table td:has(> .acct-pill),
    .acct-table td:first-child { width: auto; white-space: normal; }

    .acct-table td.is-tight, .acct-table td:last-child { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
    .acct-table td.is-tight::before, .acct-table td:last-child::before { display: none; }
    .acct-table td.is-num { text-align: start; }
    .acct-table td.acct-empty-row { grid-template-columns: minmax(0, 1fr); color: var(--app-ink-2); }
    .acct-table td.acct-empty-row::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .account-body *, .account-body *::before, .account-body *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* print an invoice or a service page without the chrome */
@media print {
    .acct-side, .acct-top, .acct-actions { display: none !important; }
    .account-body { background: #fff; color: #000; }
    .acct-panel { border-color: #ccc; }
}

/* ─────────────────────────────────────────────── panel padding model

   A panel is either composed (head + body, emitted by accountPanelOpen) or written
   inline by a page. Both must look identical, so the panel pads itself and the two
   full-bleed children pull back out to the hairline. */

.acct-panel { padding: 16px; }
.acct-panel > .acct-panel-head:first-child { margin: -16px -16px 16px; }
.acct-panel > .acct-panel-body { padding: 0; }
.acct-panel > .acct-table-wrap { margin: -16px; }
.acct-panel > .acct-table-wrap:not(:first-child) { margin-top: 0; }
.acct-panel > .acct-panel-head + .acct-table-wrap { margin-top: -16px; }
.acct-panel > h1:first-child, .acct-panel > h2:first-child, .acct-panel > .acct-oxid:first-child { margin-top: 0; }
.acct-panel > :last-child { margin-bottom: 0; }
.acct-panel h1 { margin: 0 0 6px; font-weight: 700; font-size: 20px; line-height: 1.25; font-family: var(--font-display, inherit); letter-spacing: -0.02em; color: var(--app-ink); }
.acct-panel h2 { margin: 0 0 12px; font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--app-ink); }
.acct-panel p { margin: 0 0 12px; color: var(--app-ink-2); }

/* the signature hairline, at instrument scale */
.acct-oxid { height: 2px; width: 40px; border-radius: 2px; margin: 0 0 12px; background: linear-gradient(90deg, var(--app-copper), var(--app-patina)); }
.acct-eyebrow { margin: 0 0 8px; font-weight: 500; font-size: 11.5px; line-height: 1; font-family: var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--app-ink-3); }
.acct-meta { color: var(--app-ink-3); font-size: 12px; }
.acct-lead { margin: 0 0 16px; color: var(--app-ink-2); font-size: 14px; max-width: 62ch; }

/* a pill is a status word: same vocabulary as .acct-status, kept for pages that use it */
.acct-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--app-line); font-weight: 500; font-size: 11.5px; line-height: 1.6; font-family: var(--font-mono, monospace); color: var(--app-ink-2); white-space: nowrap; }
.acct-pill.is-ok { color: var(--app-patina); border-color: color-mix(in srgb, var(--app-patina) 40%, transparent); }
.acct-pill.is-warn { color: var(--app-warn); border-color: color-mix(in srgb, var(--app-warn) 40%, transparent); }
.acct-pill.is-danger { color: var(--app-bad); border-color: color-mix(in srgb, var(--app-bad) 40%, transparent); }
/* Over, not wrong: an ended service is history and should not shout in red. */
.acct-pill.is-muted { color: var(--app-ink-3); border-color: color-mix(in srgb, var(--app-ink-3) 32%, transparent); }
.acct-pill.is-info { color: var(--app-copper); border-color: color-mix(in srgb, var(--app-copper) 40%, transparent); }

/* the figures row: one instrument per reading, hairline-separated, never four identical boxes */
.acct-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--app-line); border: 1px solid var(--app-line); border-radius: var(--app-r); overflow: hidden; }
.acct-stat { background: var(--app-panel); padding: 14px 16px; }
.acct-stat strong { display: block; font-weight: 600; font-size: 24px; line-height: 1.1; font-family: var(--font-mono, monospace); color: var(--app-ink); letter-spacing: -0.02em; }
.acct-stat span { display: block; margin-top: 6px; font-weight: 500; font-size: 11.5px; line-height: 1; font-family: var(--font-mono, monospace); letter-spacing: 0.11em; text-transform: uppercase; color: var(--app-ink-3); }

/* the order page opens with its plan's scene, full-bleed at the top of the panel */
.acct-panel-hero { padding-top: 0; overflow: hidden; }
.acct-hero { margin: 0 -16px 16px; }
.acct-hero img { display: block; width: 100%; height: clamp(120px, 16vw, 200px); object-fit: cover; object-position: center 45%; }

/* the auth column: the room is the layout, so the form needs no card of its own */
.acct-authcard { display: block; }
.acct-authcard + .acct-authcard { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--app-line); }

.acct-inline { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.acct-field { display: block; }

/* file inputs: the browser's own button is a different design system */
.acct-form input[type="file"] {
    width: 100%; padding: 9px 12px; font-size: 13px;
    background: var(--app-raised); color: var(--app-ink-2);
    border: 1px dashed var(--app-line); border-radius: var(--app-r); cursor: pointer;
}
.acct-form input[type="file"]:hover { border-color: var(--app-ink-3); }
.acct-form input[type="file"]::file-selector-button {
    margin-inline-end: 12px; padding: 6px 12px; cursor: pointer;
    border: 1px solid var(--app-line); border-radius: var(--app-r-sm);
    background: var(--app-panel); color: var(--app-ink); font: inherit; font-size: 12px; font-weight: 600;
}
.acct-form input[type="file"]::file-selector-button:hover { border-color: var(--app-copper); color: var(--app-copper); }
.acct-idproof { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--app-line); }
.acct-idproof h2 { margin: 0 0 6px; }
.acct-idproof .acct-notice { margin: 12px 0; }

/* pager (inc/pager.php) */
.acct-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.acct-pager .acct-actions { margin: 0; flex-wrap: wrap; }
.acct-pager .acct-btn { min-width: 44px; min-height: 44px; justify-content: center; }

/* ── 4K and ultra-wide displays (2560px & 3840px) ── */
@media (min-width: 2560px) {
    .account-body {
        --app-view: 1680px;
        --app-side: 280px;
    }
}
@media (min-width: 3840px) {
    .account-body {
        --app-view: 2160px;
        --app-side: 320px;
    }
}

/* the brand on a bare portal page (a visitor, no rail): links home */
.acct-top-logo { display: inline-flex; align-items: center; margin-inline-end: 14px; }
.acct-top-logo img { display: block; height: 28px; width: auto; }


/* the stages of a domain moving in from another registrar (account/domain-view.php): a list read top to bottom,
   the finished ones marked, the live one outlined in copper (the accent only ever marks the live thing) */
.acct-stages { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 0; }
.acct-stages li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--app-line-soft); color: var(--app-ink-2); font-size: 14px; }
.acct-stages li .acct-stage-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--app-line); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--app-ink-3); }
.acct-stages li.is-done { color: var(--app-ink); }
.acct-stages li.is-done .acct-stage-mark { background: var(--app-patina); border-color: var(--app-patina); color: var(--app-on-copper); }
.acct-stages li.is-live { color: var(--app-ink); font-weight: 600; }
.acct-stages li.is-live .acct-stage-mark { border-color: var(--app-copper); color: var(--app-copper); box-shadow: 0 0 0 3px var(--app-copper-dim); }
.acct-stages li.is-failed { color: var(--app-ink); }
.acct-stages li.is-failed .acct-stage-mark { border-color: var(--app-bad); color: var(--app-bad); }