/* css/account.css — account.html layout, mobile nav, overview, order facts,
 * customer thread.  Added 31 Aug 2026.
 *
 * LOADED LAST, after the three inline <style> blocks in account.html. The
 * rk-reskin block wins by !important on most rules, so several selectors here
 * carry !important to beat it. That is a symptom, not a style: the inline
 * blocks should be deleted once this file is verified in a browser, and every
 * !important below removed with them. Until then, this file is additive.
 *
 * Tokens: reuses the --rk-* variables the reskin defines (ink, muted, faint,
 * surface, surface2, line, cyan, cyan-deep, orange, radii, fonts). Nothing
 * new is defined so light/dark keep working from one place.
 */

/* ───────────────────────────── identity row ───────────────────────────── */
.acct-head { display: flex !important; align-items: center; gap: 12px; }
.acct-head .rk-av { flex: none; }
.acct-head-text { flex: 1 1 auto; min-width: 0; position: relative; }

/* badges on nav items and cards */
.acct-badge {
    display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 6px;
    border-radius: 999px; font-size: 11px; font-weight: 600; text-align: center;
    background: var(--rk-orange); color: #fff; margin-left: auto;
}

/* ───────────────────────────── mobile nav strip ───────────────────────── */
@media (max-width: 860px) {
    #accountView .main-heading { font-size: 22px; margin: 2px 0 12px; }
    #sideMenu { gap: 10px !important; position: static !important; }

    .acct-head { padding: 12px 14px !important; }
    .acct-head::before { height: 100% !important; opacity: .5; }
    .acct-head .rk-av { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
    .acct-head .rk-nm { font-size: 15px !important; }
    .acct-head .rk-co { font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* The seven-item vertical list becomes one scrollable row of chips. */
    .acct-nav {
        display: flex !important; flex-direction: row !important; gap: 6px;
        padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
        overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        margin: 0 -12px; padding: 2px 12px 6px !important;
    }
    .acct-nav::-webkit-scrollbar { display: none; }
    .acct-nav .nav-header { display: none !important; }
    #sideMenu .acct-nav .menu-item {
        flex: none; padding: 8px 12px !important; border-radius: 999px !important;
        border: 1px solid var(--rk-line); background: var(--rk-surface); font-size: 13px;
        white-space: nowrap; gap: 6px;
    }
    #sideMenu .acct-nav .menu-item.active { border-color: transparent; }
    #sideMenu .acct-nav .menu-item.active::after { display: none; }
    #sideMenu .acct-nav .menu-item.sign-out { margin-top: 0 !important; margin-left: auto; }
    #sideMenu .acct-nav .menu-item .full-label { display: none !important; }
    #sideMenu .acct-nav .menu-item .short-label { display: inline !important; }
    #sideMenu .acct-nav .menu-item::before { width: 15px; height: 15px; }
    .acct-badge { margin-left: 2px; }

    /* Content that still assumes desktop widths. */
    #contentPane .content-section { padding: 16px 14px !important; }
    .acct-order-actions { flex-direction: column; }
    .acct-order-actions .btn { width: 100% !important; margin: 0 !important; }
    .account-info-row { gap: 14px; }
    .avatar-section { width: auto !important; }
    #contentPane .btn { min-height: 44px; }
}

/* desktop: nothing changes for the vertical list except the two new items get
   the same icon treatment via the same mask mechanism the reskin uses */
#menuOverview::before, #menuSecurity::before {
    content: ''; width: 18px; height: 18px; flex: none; background-color: currentColor; opacity: .85;
    -webkit-mask: var(--acct-icon) center/contain no-repeat; mask: var(--acct-icon) center/contain no-repeat;
}
#menuOverview { --acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E"); }
#menuSecurity { --acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }

/* ───────────────────────────── overview ───────────────────────────────── */
.acct-ov-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 860px) { .acct-ov-grid { grid-template-columns: 1fr; gap: 18px; } }
.acct-ov-h {
    display: flex; align-items: baseline; justify-content: space-between;
    font-family: var(--rk-disp); font-size: 15px; font-weight: 600; color: var(--rk-ink);
    margin: 0 0 10px;
}
.acct-ov-link { font-size: 13px; font-weight: 500; color: var(--rk-cyan-deep); text-decoration: none; }
.acct-ov-link:hover { text-decoration: underline; }
.acct-ov-all { display: inline-block; margin-top: 4px; }
.acct-loading, .acct-ov-empty { color: var(--rk-muted); font-size: 13.5px; margin: 0; }
.acct-ov-empty { padding: 18px; border: 1px dashed var(--rk-line); border-radius: 12px; text-align: center; }
.acct-ov-empty p { margin: 0 0 10px; }

.acct-ov-order {
    border: 1px solid var(--rk-line); background: var(--rk-surface); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s;
}
.acct-ov-order:hover { border-color: var(--rk-cyan); }
.acct-ov-order-top, .acct-ov-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acct-ov-num { font-family: var(--rk-mono); font-size: 13.5px; color: var(--rk-cyan-deep); }
.acct-ov-line { font-size: 13.5px; color: var(--rk-ink); margin: 6px 0 8px; }
.acct-ov-maker { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--rk-muted); }
.acct-ov-order-proof { background: #FAEEDA; border-color: #FAC775; }
body:not(.light-mode) .acct-ov-order-proof { background: #412402; border-color: #854F0B; }
.acct-ov-order-proof .acct-ov-num { color: #633806; }
.acct-ov-order-proof .acct-ov-line { color: #633806; }
body:not(.light-mode) .acct-ov-order-proof .acct-ov-num,
body:not(.light-mode) .acct-ov-order-proof .acct-ov-line { color: #FAC775; }
.acct-pill-proof { background: #FAC775 !important; color: #412402 !important; }
.acct-ov-cta { font-size: 12.5px; font-weight: 600; color: #854F0B; }
body:not(.light-mode) .acct-ov-cta { color: #FAC775; }

.acct-ov-designs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.acct-ov-design {
    display: block; padding: 0; border: 1px solid var(--rk-line); border-radius: 10px; overflow: hidden;
    background: var(--rk-surface2); cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.acct-ov-design:hover { border-color: var(--rk-cyan); }
.acct-ov-design canvas { display: block; width: 100%; height: auto; aspect-ratio: 1.6; object-fit: contain; }
.acct-ov-design-name {
    display: block; padding: 6px 8px; font-size: 12px; color: var(--rk-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--rk-line);
}
.acct-ov-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.acct-ov-actions .btn { width: auto !important; margin: 0 !important; text-align: center; text-decoration: none; }

/* one primary action per view */
.acct-btn-primary, #contentPane .btn.acct-btn-primary {
    background: var(--rk-cyan) !important; border-color: var(--rk-cyan) !important; color: #fff !important; font-weight: 600;
}
.acct-btn-proof, #contentPane .btn.acct-btn-proof {
    background: #BA7517 !important; border-color: #BA7517 !important; color: #fff !important; font-weight: 600; width: auto !important;
}

/* ───────────────────────────── order card additions ───────────────────── */
.acct-proof {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: #FAEEDA; border: 1px solid #FAC775; color: #633806; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
body:not(.light-mode) .acct-proof { background: #412402; border-color: #854F0B; color: #FAC775; }
.acct-proof-text { flex: 1 1 240px; font-size: 13.5px; line-height: 1.45; }

.acct-facts { background: var(--rk-surface2); border-radius: 10px; padding: 8px 12px; margin: 12px 0 16px; }
.acct-fact { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.acct-fact + .acct-fact { border-top: 1px solid var(--rk-line-soft, var(--rk-line)); }
.acct-fact-k { color: var(--rk-muted); }
.acct-fact-v { color: var(--rk-ink); display: inline-flex; align-items: center; gap: 6px; text-align: right; }
.acct-fact-v a { color: var(--rk-cyan-deep); }
.acct-fact-muted { color: var(--rk-faint); }
.acct-maker-av {
    display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
    width: 20px; height: 20px; border-radius: 50%; background: #EEEDFE; color: #26215C;
    font-size: 11px; font-weight: 600;
}
/* The photo fills the frame and is cropped, never scaled. Declared with the
   same two-class specificity as the page's `.content-section img { height: auto }`
   and loaded after it, so this wins; the frame's overflow clips regardless. */
.acct-maker-av img, .content-section .acct-maker-av img {
    display: block; width: 100%; height: 100%; object-fit: cover; max-width: none;
}
body:not(.light-mode) .acct-maker-av { background: #3C3489; color: #CECBF6; }

.acct-order-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-order-actions .btn { width: auto !important; margin: 0 !important; }

/* ───────────────────────────── ask about this order ───────────────────── */
.acct-query { margin: 18px 0 16px; padding: 14px; border: 1px solid var(--rk-line); border-radius: 12px; background: var(--rk-surface2); }
.acct-query h4 { margin: 0 0 4px; }
.acct-query-hint { font-size: 12.5px; color: var(--rk-muted); margin: 0 0 10px; line-height: 1.45; }
.acct-query textarea {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px; font: inherit; font-size: 13.5px;
    padding: 10px 12px; border: 1px solid var(--rk-line); border-radius: 10px; background: var(--rk-surface); color: var(--rk-ink);
}
.acct-query textarea:focus { outline: none; border-color: var(--rk-cyan); box-shadow: 0 0 0 3px rgba(0,169,224,.15); }
.acct-query-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.acct-query-status { font-size: 12.5px; color: var(--rk-muted); flex: 1 1 200px; }
.acct-query-ok  { color: #0F6E56; }
.acct-query-err { color: #A32D2D; }
body:not(.light-mode) .acct-query-ok  { color: #5DCAA5; }
body:not(.light-mode) .acct-query-err { color: #F09595; }
#contentPane .btn.acct-query-send { width: auto !important; margin: 0 !important; }

.acct-query-history { margin-top: 14px; }
.acct-query-history h5 { font-size: 12.5px; font-weight: 600; color: var(--rk-muted); margin: 0 0 6px; }
.acct-query-item { padding: 9px 0; border-top: 1px solid var(--rk-line); }
.acct-query-item-text { font-size: 13.5px; color: var(--rk-ink); white-space: pre-wrap; word-break: break-word; }
.acct-query-item-meta { font-size: 12px; color: var(--rk-faint); margin-top: 3px; }
@media (max-width: 860px) {
    .acct-query-foot { flex-direction: column-reverse; align-items: stretch; }
    #contentPane .btn.acct-query-send { width: 100% !important; }
}

/* ─────────────────── order item rows (qty / price / buttons) ───────────── */
/* The third grid column was a fixed 100px, sized for "Add to Cart". The
   "Save to My Designs" button below it needs ~140px, so it overflowed the
   card's right edge instead of the column growing. minmax lets the column
   take what the widest button needs and no more, and the buttons fill it so
   the two line up. */
#orderHistoryList .item-list li {
    grid-template-columns: 255px minmax(0, 1fr) minmax(140px, auto) !important;
    align-items: start !important;
}
#orderHistoryList .item-list li > div:last-child { min-width: 0; }
#orderHistoryList .item-list .btn,
#orderHistoryList .item-list .addSingleBtn,
#orderHistoryList .item-list .saveToDesignsBtn {
    width: 100% !important;
    margin: 6px 0 0 !important;
    white-space: nowrap;
    box-sizing: border-box;
}

@media (max-width: 860px) {
    /* Three columns will not fit a phone. Preview on top, details under it,
       price and buttons last and full width. */
    #orderHistoryList .item-list li {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        justify-items: stretch;
    }
    #orderHistoryList .item-list li > div:last-child { text-align: left !important; }
    #orderHistoryList .item-preview-canvas { width: 100% !important; max-width: 320px; }
    #orderHistoryList .item-list .btn { min-height: 44px; }
}

/* ───────────────────── action required (top of Overview) ─────────────── */
/* Deliberately the loudest thing on the page. A proof the customer does not
   notice is a job sitting on the bench, so this sits above the fold, carries
   the artwork, and answers in place - no click-through to find it. */
#ovActionRequired:empty { display: none; }
#ovActionRequired { margin: 0 0 22px; }
.acct-ar-head {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--rk-disp); font-size: 16px; font-weight: 600; color: var(--rk-ink); margin: 0 0 10px;
}
.acct-ar-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rk-orange); flex: none; }
@media (prefers-reduced-motion: no-preference) {
    .acct-ar-dot { animation: acctPulse 2s ease-in-out infinite; }
    @keyframes acctPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,130,32,.5); } 50% { box-shadow: 0 0 0 6px rgba(245,130,32,0); } }
}
.acct-ar-card {
    border: 2px solid #FAC775; background: #FAEEDA; border-radius: 14px;
    padding: 16px 18px; margin-bottom: 12px;
}
body:not(.light-mode) .acct-ar-card { background: #2b1a04; border-color: #854F0B; }
.acct-ar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.acct-ar-num { font-family: var(--rk-mono); font-size: 13.5px; color: #633806; }
body:not(.light-mode) .acct-ar-num { color: #FAC775; }
.acct-ar-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #FAC775; color: #412402; }
.acct-ar-line { font-size: 14px; line-height: 1.5; color: #633806; margin: 0 0 10px; }
body:not(.light-mode) .acct-ar-line { color: #FAEEDA; }
.acct-ar-reason {
    font-size: 13.5px; line-height: 1.45; color: #633806;
    background: rgba(255,255,255,.55); border-radius: 8px; padding: 9px 12px; margin-bottom: 12px;
}
body:not(.light-mode) .acct-ar-reason { background: rgba(0,0,0,.25); color: #FAEEDA; }
.acct-ar-card .acct-proof-pair img { background: #fff; }
.acct-ar-card .acct-proof-pair span { color: #633806; }
body:not(.light-mode) .acct-ar-card .acct-proof-pair span { color: #FAC775; }
.acct-ar-card .acct-proof-after span { color: #0086b3; }
.acct-ar-card .acct-proof-actions { margin-top: 6px; }

/* ───────────────────────────── artwork proofs ─────────────────────────── */
.acct-notice {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: #FAEEDA; border: 1px solid #FAC775; color: #633806; border-radius: 12px; padding: 12px 16px; margin: -8px 0 18px; font-size: 13.5px;
}
body:not(.light-mode) .acct-notice { background: #412402; border-color: #854F0B; color: #FAC775; }
.acct-notice a { font-weight: 600; color: #854F0B; text-decoration: none; padding: 6px 12px; border-radius: 8px; background: #FAC775; }
body:not(.light-mode) .acct-notice a { color: #412402; }
.acct-proof-quiet { background: var(--rk-surface2); border-color: var(--rk-line); color: var(--rk-muted); }
body:not(.light-mode) .acct-proof-quiet { background: var(--rk-surface2); border-color: var(--rk-line); color: var(--rk-muted); }
.acct-proofs { margin: 4px 0 14px; }
.acct-proofs h4 { margin: 0 0 8px; }
.acct-proof-card { border: 1px solid var(--rk-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.acct-proof-card-open { border-color: #FAC775; background: #FAEEDA; }
body:not(.light-mode) .acct-proof-card-open { border-color: #854F0B; background: #2b1a04; }
.acct-proof-card-done { opacity: .8; }
.acct-proof-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.acct-proof-v { font-family: var(--rk-mono); font-size: 13px; color: var(--rk-cyan-deep); }
.acct-proof-card-open .acct-proof-v { color: #633806; }
body:not(.light-mode) .acct-proof-card-open .acct-proof-v { color: #FAC775; }
.acct-proof-state { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #FAC775; color: #412402; }
.acct-proof-state-done { font-size: 12px; color: var(--rk-muted); }
.acct-proof-state-done.ok { color: #0F6E56; }
body:not(.light-mode) .acct-proof-state-done.ok { color: #5DCAA5; }
.acct-proof-reason { font-size: 13.5px; line-height: 1.45; color: var(--rk-ink); margin-bottom: 8px; }
.acct-proof-card-open .acct-proof-reason { color: #633806; }
body:not(.light-mode) .acct-proof-card-open .acct-proof-reason { color: #FAEEDA; }
.acct-proof-by { font-size: 11.5px; color: var(--rk-faint); margin-top: 2px; }
.acct-proof-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.acct-proof-pair > div { text-align: center; }
.acct-proof-pair img, .acct-proof-noimg { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #fff; border: 1px solid var(--rk-line); border-radius: 8px; }
.acct-proof-after img { border: 2px solid var(--rk-cyan); }
.acct-proof-pair span {
    /* Centred under each image. These two words are the whole explanation of
       what the customer is looking at, so they belong under their own picture,
       not floating at its left edge. */
    display: block; text-align: center; font-weight: 600;
    font-size: 12px; color: var(--rk-muted); margin-top: 5px; line-height: 1.3;
}
.acct-proof-after span { color: var(--rk-cyan-deep); font-weight: 600; }
.acct-proof-item-name { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--rk-muted); }
.acct-proof-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.acct-proof-actions .btn, .acct-proof-change .btn { width: auto !important; margin: 0 !important; min-height: 40px; }
.acct-btn-ok, #contentPane .btn.acct-btn-ok { background: #1D9E75 !important; border-color: #1D9E75 !important; color: #fff !important; font-weight: 600; }
.acct-proof-change { margin-top: 8px; display: grid; gap: 8px; }
.acct-proof-change textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; padding: 10px 12px; border: 1px solid var(--rk-line); border-radius: 10px; background: var(--rk-surface); color: var(--rk-ink); resize: vertical; }
.acct-proof-yousaid { font-size: 13px; color: var(--rk-muted); border-left: 2px solid var(--rk-line); padding-left: 8px; }
.acct-proof-err { color: #A32D2D; font-size: 12.5px; margin: 6px 0 0; }
@media (max-width: 860px) { .acct-proof-actions { grid-template-columns: 1fr; } }

/* ───────────────────────────── account section ────────────────────────── */
.acct-subcard { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rk-line); }
.acct-subcard h3 { margin-top: 0; }

/* focus visibility for keyboard users, across the additions */
.acct-send:focus-visible, .acct-ov-design:focus-visible, .acct-ov-order:focus-visible,
#sideMenu .acct-nav .menu-item:focus-visible { outline: 2px solid var(--rk-cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .acct-ov-order { transition: none; } }


/* ── BUSY STATE ─────────────────────────────────────────────────────────────
   A spinner, not a static word. Approving a proof or sending a question is one
   network round trip, which on mobile data is long enough to look frozen - and
   a second press sends a second response to a proof that is no longer waiting,
   or emails the workshop the same question twice. The spinner is the only part
   that says "still working" rather than "hung". */
.acct-spin {
    display: inline-block; width: 12px; height: 12px; margin-right: 7px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; vertical-align: -2px; opacity: .75;
    animation: acctSpin .7s linear infinite;
}
@keyframes acctSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .acct-spin { animation-duration: 2.4s; } }
button[data-busy="1"], .acct-proof-card [disabled] { cursor: progress; }


/* ── ITEM-LEVEL PROOF RECORD ────────────────────────────────────────────────
   On the item row itself, so a plate whose artwork was changed and re-approved
   does not look identical to one nobody touched. Months later this is the only
   answer to "why does mine not match what I drew". */
.acct-item-proof {
    display: inline-block; margin-left: 8px; vertical-align: middle;
    font-size: 10px; font-weight: 700; letter-spacing: .03em;
    padding: 2px 7px; border-radius: 4px; white-space: nowrap;
}
.acct-item-proof.ok   { background: rgba(15,118,110,.12); color: #0F6E56; }
.acct-item-proof.wait { background: rgba(180,83,9,.14);   color: #B45309; }
.acct-item-proof.no   { background: rgba(185,28,28,.12);  color: #A32D2D; }
.acct-proof-ok {
    background: rgba(15,118,110,.08); border-color: rgba(15,118,110,.35); color: var(--rk-ink);
}
body:not(.light-mode) .acct-proof-ok { background: rgba(15,118,110,.14); border-color: #0f766e; }


/* ── PROOF VERSIONS ─────────────────────────────────────────────────────────
   Same compact shape as the team's job card: version, thumbnail, what and who,
   state on the right. Answered versions COLLAPSE - three full-size image
   comparisons stacked down the card pushed the order number, the total and the
   items off the screen, so the first thing a customer saw on their own order
   was a change log. The artwork is one click away.
   The version still awaiting an answer stays open; it needs the buttons. */
.acct-proofs { margin: 6px 0 14px; }
.acct-proofs h4 { margin: 0 0 8px; }
.acct-pv { border: 1px solid var(--rk-line); border-radius: 10px; margin-bottom: 6px; background: var(--rk-surface); }
.acct-pv-head {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; cursor: pointer; list-style: none;
}
.acct-pv-head::-webkit-details-marker { display: none; }
.acct-pv-done > summary:hover { background: var(--rk-surface2); border-radius: 10px; }
.acct-pv-v {
    font-family: var(--rk-mono); font-size: 12.5px; font-weight: 700;
    color: var(--rk-cyan-deep); flex: none; min-width: 2.2em;
}
.acct-pv-thumb {
    width: 44px; height: 32px; object-fit: contain; flex: none;
    background: #fff; border: 1px solid var(--rk-line); border-radius: 4px;
}
.acct-pv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-pv-main strong { font-size: 13px; }
.acct-pv-meta { font-size: 11.5px; color: var(--rk-muted); }
.acct-pv-said { font-size: 12px; color: var(--rk-muted); border-left: 2px solid var(--rk-line); padding-left: 7px; margin-top: 2px; }
.acct-pv-state { font-size: 11.5px; font-weight: 600; white-space: nowrap; flex: none; text-align: right; }
.acct-pv-state.ok     { color: #0F6E56; }
.acct-pv-state.no     { color: #A32D2D; }
.acct-pv-state.wait   { color: #B45309; }
.acct-pv-state.muted  { color: var(--rk-faint); }
.acct-pv-note { font-size: 13px; margin: 0 12px 8px; line-height: 1.45; }
.acct-pv-body { padding: 0 12px 12px; }
.acct-pv-open { border-color: #FAC775; background: #FAEEDA; cursor: default; }
body:not(.light-mode) .acct-pv-open { border-color: #854F0B; background: #2b1a04; }
.acct-pv-open .acct-pv-head { cursor: default; }
.acct-pv-open .acct-proof-pair,
.acct-pv-open .acct-proof-actions,
.acct-pv-open .acct-proof-change { margin-left: 12px; margin-right: 12px; }


/* Selectors are doubled - `.modal-buttons .btn.acct-modal-cancel` as well as
   the bare class - because account.css already styles `.modal-buttons .btn`
   (0-2-0) and a lone class (0-1-0) loses to it. Specificity, not !important,
   so the next person can still override this normally.
   ── CONFIRM MODAL BUTTONS ──────────────────────────────────────────────────
   ⚠ NOT var(--panel). A stylesheet later in account.html - <style
   id="etchly-dark-fix"> - redefines --panel to #10151c on :root itself, NOT
   under body.dark-mode. So var(--panel) is DARK on every page including light
   mode, and the Cancel button rendered as a black slab with dark text on a
   white card. On a delete prompt that is the one button that has to stay
   readable.

   Explicit colours here, and they live in the stylesheet rather than as inline
   styles so they can actually be overridden later. */
.modal-buttons .btn.acct-modal-cancel,
.acct-modal-cancel {
    background: #f0f2f5;
    border: 1px solid #d8dee4;
    color: #10151c;
    font-weight: 600;
}
.modal-buttons .btn.acct-modal-cancel:hover,
.acct-modal-cancel:hover { border-color: var(--rk-cyan, #00a9e0); color: var(--rk-cyan, #00a9e0); }
.modal-buttons .btn.acct-modal-confirm,
.acct-modal-confirm {
    background: #E8620F;
    border: 1px solid #E8620F;
    color: #fff;
    font-weight: 600;
}
.acct-modal-confirm:hover { filter: brightness(1.08); }
/* A delete gets red, not the same orange as an ordinary confirm - the colour
   should say which way the action goes. */
.modal-buttons .btn.acct-modal-confirm.is-danger,
.acct-modal-confirm.is-danger { background: #A32D2D; border-color: #A32D2D; }
body:not(.light-mode) .modal-buttons .btn.acct-modal-cancel,
body:not(.light-mode) .acct-modal-cancel { background: #0b0e12; border-color: #3c4656; color: #f7fbff; }