/* An account's page (D107; Phase 4, section 8.8): its header, its tabs and
   Overview. Loaded on every page after inventory.css. Every class here
   starts with acct-; the rest of the page is the admin's own components
   (card, menu, badge, btn, copy-text, ghost-bar, list-icon, tabs) and the
   area's (inv-title, inv-mark, inv-num, inv-warn), and the markup of every
   piece is in admin_app/views/README.md, "An account's page (D107)".

   The look is the agreed mock's, docs/mockups/account-page.html: black,
   white and grey, colour only where it means something (the status's
   tone, the drawings of Add event in the tones of what they record, the
   warning's text where an account shares across models), nothing that
   moves, the same page on a phone and a desktop, phone first. The parts
   narrow with the page or the record panel, a container (acct).

   The pieces (.acct-header, .acct-setup, .acct-link, .acct-profile and
   .acct-notes name the parts, with no rule of their own):
     .acct-status (.is-success, .is-warning, .is-danger, .is-neutral,
     .is-outline), .acct-status-dot
                         the header's status pill: Change status with
                         accounts.lifecycle, else the pill alone
     .acct-actions, .acct-add, .acct-add-menu, .acct-event (.is-status,
     .is-bio, .is-verification)
                         Edit and Add event, a <details> (data-row-menu)
                         with the admin's .menu, each item with its drawing
     .acct-page          a tab's content under the header, the container
     .acct-alert (.is-warning, .is-danger), .acct-alert-icon,
     .acct-alert-text, .acct-alert-title, .acct-alert-line, .acct-alert-more,
     .acct-alert-action  the status's alert while it is not fine
     .acct-pinned, .acct-pinned-row, .acct-pinned-icon, .acct-unpin
                         the pinned notes, each with its X
     .acct-note-open, .acct-note-body, .acct-note-meta
                         a note's text, which opens its window, and its
                         line "Loris · 20 Oct"
     .acct-cells, .acct-cell, .acct-cell-main, .acct-cell-label,
     .acct-cell-go, .acct-cell-value (.is-empty), .acct-cell-sub,
     .acct-cell-also (.is-warning), .acct-cell-marks, .acct-cell-copy
                         Setup: a card of cells, each the way into its
                         window, the marks of the other accounts on a
                         phone, the email's copy button
     .acct-link-grid, .acct-link-main, .acct-card-head, .acct-more,
     .acct-more-menu, .acct-menu-danger
                         the link card: the link on the left, the page on
                         the right from 720 pixels; its menu
     .acct-address, .acct-address-text, .acct-address-domain,
     .acct-address-slug, .acct-link-line, .acct-link-hint
                         the address in the face of the text, its domain
                         quiet and its slug in ink; Live since; what is
                         wrong with its page or its domain
     .acct-facts, .acct-fact, .acct-fact-sub, .acct-quiet-link
                         In the bio and OnlyFans, a label and its value
     .acct-link-ghost, .acct-link-ghost-shape, .acct-ghost-title,
     .acct-ghost-text    no link yet: its ghost, the words and its step
     .acct-preview, .acct-phone, .acct-phone-screen, .acct-preview-link,
     .acct-preview-name, .acct-preview-line
                         the link page as fans see it, the editor's own
                         preview in a phone, the whole a link to its editor
     .acct-profile-address, .acct-leads, .acct-leads-title, .acct-lead,
     .acct-lead-text, .acct-lead-name, .acct-lead-sub, .acct-leads-none
                         a fan account's Profile: its address and the
                         accounts that lead here
     .acct-note-list, .acct-note-row, .acct-note-pin, .acct-notes-more,
     .acct-notes-empty (.is-quiet), .acct-notes-ghost, .acct-notes-title,
     .acct-notes-text, .acct-pen
                         Notes: the notes not pinned, each with its pin;
                         the ghost before the first; the pen
     .acct-look          the tab Needs a look, its card of rows
     .acct-bio-link, .acct-bio-address, .acct-bio-copy
                         the window Link set in the bio: its link, fixed */

/* --- The header -------------------------------------------------------- */

/* The status is the control that changes it: its dot in its tone, a
   chevron where it opens Change status. */
.acct-status {
    --acct-dot: var(--color-success-solid);
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

a.acct-status {
    padding-right: 8px;
}

a.acct-status .icon {
    width: 14px;
    height: 14px;
    color: var(--color-text-subtle);
}

@media (hover: hover) {
    a.acct-status:hover {
        border-color: var(--color-border-strong);
    }
}

a.acct-status:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.acct-status.is-warning {
    --acct-dot: var(--color-warning-text);
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.acct-status.is-danger {
    --acct-dot: var(--color-danger-solid);
    border-color: var(--color-danger-border);
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.acct-status.is-warning .icon,
.acct-status.is-danger .icon {
    color: currentColor;
}

.acct-status.is-neutral {
    --acct-dot: var(--color-text-subtle);
}

.acct-status-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--acct-dot);
}

/* Warming up has no tone: an empty ring. */
.acct-status.is-outline .acct-status-dot {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--color-text-subtle);
}

.acct-add > summary {
    gap: 6px;
    list-style: none;
}

.acct-add > summary::-webkit-details-marker {
    display: none;
}

.acct-add-menu.menu {
    width: 320px;
}

.acct-add-menu .menu-item {
    gap: var(--space-3);
    padding: 10px var(--space-3);
}

.acct-add-menu .menu-item-name {
    font-weight: var(--weight-medium);
}

/* The drawings of Add event, in the tone of what each records, no box. */
.acct-event {
    display: flex;
    flex: none;
}

.acct-event .icon {
    width: 20px;
    height: 20px;
}

.acct-event.is-status {
    color: var(--color-event-status);
}

.acct-event.is-bio {
    color: var(--color-event-link);
}

.acct-event.is-verification {
    color: var(--color-event-verification);
}

/* On a phone Edit and Add event share the row, Add event the wider. */
@media (max-width: 639px) {
    .acct-actions {
        flex-wrap: nowrap;
        width: 100%;
    }

    .acct-actions > .btn {
        flex: 1 1 0;
    }

    .acct-add {
        flex: 1.4 1 0;
    }

    .acct-add > summary {
        width: 100%;
    }
}

/* --- A tab's page ------------------------------------------------------ */

.acct-page {
    container: acct / inline-size;
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

/* --- The status's alert ------------------------------------------------ */

.acct-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 2px var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.acct-alert.is-warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
}

.acct-alert.is-danger {
    border-color: var(--color-danger-border);
    background: var(--color-danger-bg);
}

.acct-alert-icon {
    display: flex;
    padding-top: 2px;
}

.acct-alert-icon .icon {
    width: 18px;
    height: 18px;
}

.acct-alert.is-warning .acct-alert-icon {
    color: var(--color-warning-text);
}

.acct-alert.is-danger .acct-alert-icon {
    color: var(--color-danger-text);
}

.acct-alert-title {
    margin: 0;
    font-weight: var(--weight-semibold);
}

.acct-alert-line {
    margin: 2px 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.acct-alert-more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.acct-alert-more .icon {
    width: 14px;
    height: 14px;
}

@media (hover: hover) {
    .acct-alert-more:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

.acct-alert-action.btn {
    grid-column: 2;
    justify-self: start;
    margin-top: var(--space-2);
    background: var(--color-surface);
}

@container acct (min-width: 640px) {
    .acct-alert {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .acct-alert-action.btn {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        margin-top: 0;
    }
}

/* --- Notes: pinned on top, the others in their card --------------------- */

.acct-pinned {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.acct-pinned-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
}

.acct-pinned-row + .acct-pinned-row {
    border-top: 1px solid var(--color-border);
}

.acct-pinned-icon {
    display: flex;
    flex: none;
    color: var(--color-text-subtle);
}

.acct-pinned-icon .icon {
    width: 16px;
    height: 16px;
}

.acct-pinned-row > form {
    display: contents;
}

/* Unpin: a small X in the row's top right corner. */
.acct-unpin.btn {
    flex: none;
    align-self: flex-start;
    margin: -4px -4px 0 0;
    color: var(--color-text-subtle);
}

.acct-unpin .icon {
    width: 15px;
    height: 15px;
}

/* A note's text opens its window; without that right, it is text. */
.acct-note-open {
    display: block;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.acct-note-open:focus-visible {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

@media (hover: hover) {
    a.acct-note-open:hover .acct-note-body {
        text-decoration: underline;
        text-decoration-color: var(--color-border-strong);
        text-underline-offset: 3px;
    }
}

.acct-note-body {
    display: block;
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.acct-pinned .acct-note-body {
    font-size: var(--text-base);
}

.acct-note-meta {
    display: block;
    margin-top: 2px;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

/* --- Setup: a card of cells --------------------------------------------- */

/* A hairline between the cells: one under the other, side by side from
   640 pixels of the page. The cells are the card: no title. */
.acct-cells {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    background: var(--color-border);
}

@container acct (min-width: 640px) {
    .acct-cells {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }
}

.acct-cell {
    position: relative;
    min-width: 0;
    background: var(--color-surface);
}

.acct-cell-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: var(--space-3) var(--space-4) var(--space-4);
    color: inherit;
    text-decoration: none;
}

@container acct (min-width: 640px) {
    .acct-cell-main {
        padding: var(--space-4) var(--space-5) var(--space-5);
    }
}

a.acct-cell-main:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

@media (hover: hover) {
    a.acct-cell-main:hover {
        background: var(--color-surface-hover);
    }

    a.acct-cell-main:hover .acct-cell-go {
        opacity: 1;
        transform: translateX(2px);
    }
}

.acct-cell-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.acct-cell-label .icon {
    width: 14px;
    height: 14px;
}

.acct-cell-go {
    display: flex;
    margin-left: auto;
    opacity: 0.45;
}

.acct-cell-value {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.acct-cell-value.is-empty {
    color: var(--color-text-subtle);
    font-weight: var(--weight-medium);
}

.acct-cell-value .badge {
    margin-left: var(--space-1);
    vertical-align: 2px;
}

.acct-cell-sub {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

/* What the account shares there, the cell's last lines. */
.acct-cell-also {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-2);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

.acct-cell-also.is-warning {
    color: var(--color-warning-text);
}

.acct-cell-also + .acct-cell-also {
    margin-top: 2px;
}

.acct-cell-marks {
    display: flex;
    gap: 4px;
    margin-right: 4px;
}

/* The marks of the other accounts on its phone, small. */
.acct-cell-marks > .inv-mark {
    width: 20px;
    height: 20px;
    border-radius: 6px;
}

.acct-cell-marks > .inv-mark .glyph,
.acct-cell-marks > .inv-mark .icon {
    width: 11px;
    height: 11px;
}

/* The email's copy button sits on the value's line, inside the cell. */
.acct-cell:has(.acct-cell-copy) .acct-cell-value {
    padding-right: 34px;
}

.acct-cell-copy.btn {
    position: absolute;
    top: 34px;
    right: var(--space-2);
    color: var(--color-text-subtle);
}

@container acct (min-width: 640px) {
    .acct-cell-copy.btn {
        top: 40px;
        right: var(--space-3);
    }
}

.acct-cell-copy .icon {
    width: 16px;
    height: 16px;
}

/* --- The link card ------------------------------------------------------ */

/* The link on the left, its page on the right from 720 pixels; on a
   narrow screen the page under the link. Without the page the link spans
   the card. */
.acct-link-grid {
    display: grid;
}

@container acct (min-width: 720px) {
    .acct-link-grid:has(.acct-preview) {
        grid-template-columns: minmax(0, 1fr) 280px;
    }
}

.acct-link-main {
    min-width: 0;
    padding-bottom: var(--space-2);
}

.acct-card-head {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 32px;
}

.acct-card-head .btn-icon .icon {
    width: 18px;
    height: 18px;
}

.acct-more {
    flex: none;
    margin: -6px -6px -6px 0;
}

.acct-more > summary {
    list-style: none;
}

.acct-more > summary::-webkit-details-marker {
    display: none;
}

.acct-more[open] > summary {
    background: var(--color-surface-selected);
    color: var(--color-text);
}

.acct-more-menu.menu {
    width: 260px;
}

.acct-more-menu form {
    display: contents;
}

.acct-menu-danger .menu-item-name {
    color: var(--color-danger-text);
}

/* The address in the face of the text, its domain quiet and its slug, the
   part that is the account's, in ink. */
.acct-address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4) var(--space-5) 0;
}

.acct-address-text {
    min-width: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.acct-address-domain {
    color: var(--color-text-subtle);
    font-weight: var(--weight-medium);
}

.acct-address-slug {
    color: var(--color-text);
}

.acct-address .btn-secondary {
    background: var(--color-surface);
}

.acct-address .btn-icon {
    color: var(--color-text-subtle);
}

.acct-link-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: var(--space-2) 0 0;
    padding: 0 var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.acct-link-hint {
    margin: var(--space-1) 0 0;
    padding: 0 var(--space-5);
    color: var(--color-warning-text);
    font-size: var(--text-sm);
}

/* In the bio and OnlyFans: a label small and grey, its value beside it. */
.acct-facts {
    margin: var(--space-4) 0 0;
    padding: 0 var(--space-5);
}

.acct-fact {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

@container acct (min-width: 640px) {
    .acct-fact {
        grid-template-columns: 112px minmax(0, 1fr);
    }
}

.acct-fact dt {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

.acct-fact dd {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    overflow-wrap: anywhere;
}

.acct-fact dd a {
    color: inherit;
}

.acct-fact-sub {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
}

.acct-quiet-link {
    color: var(--color-text-muted);
    text-decoration: underline;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 2px;
}

@media (hover: hover) {
    .acct-quiet-link:hover {
        color: var(--color-text);
    }
}

.acct-quiet-link:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* No link yet (D77, D80): what is missing and its one step. */
.acct-link-ghost {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.acct-link-ghost-shape {
    display: grid;
    gap: 8px;
    width: 100%;
    margin-bottom: var(--space-2);
    padding: var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
}

.acct-link-ghost-shape .ghost-bar {
    width: 46%;
}

.acct-link-ghost-shape .ghost-bar-sm {
    width: 28%;
}

.acct-ghost-title {
    margin: 0;
    font-weight: var(--weight-semibold);
}

.acct-ghost-text {
    margin: 0 0 var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* The page its link shows, small, as fans see it: the editor's own preview
   in a phone, the same in both themes as the page itself is. A link over
   the whole leads to its editor; the frame takes no pointer and no focus. */
.acct-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-muted);
}

@container acct (min-width: 720px) {
    .acct-preview {
        border-top: 0;
        border-left: 1px solid var(--color-border);
    }
}

.acct-phone {
    display: block;
    width: 136px;
    height: 272px;
    padding: 5px;
    border-radius: 26px;
    background: var(--tour-phone-frame);
    box-shadow: 0 0 0 1px var(--color-border-strong), var(--tour-phone-shadow);
}

.acct-phone-screen {
    display: block;
    width: 126px;
    height: 262px;
    overflow: hidden;
    border-radius: 21px;
    background: var(--tour-phone-screen);
}

/* The page at a phone's width of 390 pixels, scaled into the screen. */
.acct-phone-screen iframe {
    display: block;
    width: 390px;
    height: 811px;
    border: 0;
    transform: scale(0.3231);
    transform-origin: 0 0;
    pointer-events: none;
}

.acct-preview-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: inherit;
    text-decoration: none;
}

.acct-preview-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.acct-preview-link:focus-visible {
    outline: none;
}

.acct-preview-link:focus-visible::after {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

.acct-preview-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.acct-preview-line {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.acct-preview-line .icon {
    width: 12px;
    height: 12px;
}

@media (hover: hover) {
    .acct-preview:hover .acct-preview-line {
        color: var(--color-text);
    }
}

/* --- A fan account's Profile -------------------------------------------- */

.acct-profile-address {
    padding-bottom: var(--space-2);
}

.acct-leads {
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.acct-leads-title {
    margin: 0;
    padding: var(--space-4) var(--space-5) var(--space-1);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.acct-leads > ul {
    margin: 0;
    padding: 0 0 var(--space-2);
    list-style: none;
}

.acct-leads > ul > li + li .acct-lead {
    border-top: 1px solid var(--color-border);
}

.acct-lead {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .acct-lead:hover {
        background: var(--color-surface-hover);
    }
}

.acct-lead:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

.acct-lead > .icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-text-subtle);
}

.acct-lead-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.acct-lead-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    overflow-wrap: anywhere;
}

.acct-lead-sub {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

.acct-leads-none {
    margin: 0;
    padding: var(--space-4) var(--space-5) var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* --- Notes on Overview --------------------------------------------------- */

.acct-pen .icon {
    width: 16px;
    height: 16px;
}

.acct-note-list {
    margin: var(--space-3) 0 0;
    padding: 0 0 var(--space-2);
    list-style: none;
}

.acct-note-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 var(--space-5);
    padding: var(--space-3) 0;
}

.acct-note-row + .acct-note-row {
    border-top: 1px solid var(--color-border);
}

.acct-note-row > form {
    display: contents;
}

/* Pin on top: shown on hover and on focus where a pointer hovers, always
   under a finger. */
.acct-note-pin.btn {
    flex: none;
    color: var(--color-text-subtle);
}

.acct-note-pin .icon {
    width: 15px;
    height: 15px;
}

@media (hover: hover) {
    .acct-note-pin.btn {
        opacity: 0;
    }

    .acct-note-row:hover .acct-note-pin.btn,
    .acct-note-pin.btn:focus-visible {
        opacity: 1;
    }
}

.acct-notes-more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 var(--space-5) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.acct-notes-more .icon {
    width: 14px;
    height: 14px;
}

@media (hover: hover) {
    .acct-notes-more:hover {
        color: var(--color-text);
    }
}

/* No notes yet: the shape of a note in the ghost greys, what is missing
   and its one step (D77). With pinned notes alone, a quiet line. */
.acct-notes-empty {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: var(--space-4) var(--space-5) var(--space-6);
    text-align: center;
}

.acct-notes-ghost {
    display: grid;
    justify-items: start;
    gap: 8px;
    width: min(360px, 100%);
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
}

.acct-notes-ghost .ghost-bar {
    width: 64%;
}

.acct-notes-ghost .ghost-bar-sm {
    width: 22%;
}

.acct-notes-title {
    margin: 0;
    font-weight: var(--weight-semibold);
}

.acct-notes-text {
    max-width: 44ch;
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.acct-notes-empty .btn .icon {
    width: 15px;
    height: 15px;
}

.acct-notes-empty.is-quiet {
    justify-items: start;
    gap: 2px;
    padding-top: var(--space-2);
    text-align: left;
}

.acct-notes-empty.is-quiet .acct-notes-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.acct-notes-empty.is-quiet .acct-notes-text {
    margin: 0;
}

/* --- Needs a look and Add event's windows (D107, points 2 and 6) ------- */

/* No head above the rows, so the first draws no line under the card's own
   edge. */
.acct-look .inv-look-row:first-child {
    border-top: 0;
}

/* The link the window records, fixed: a quiet box the height of a field,
   the address in the face of the text at the text's size, its badge
   beside it and the copy icon at its end. */
.acct-bio-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height-md);
    padding: 0 4px 0 12px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.acct-bio-address {
    min-width: 0;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.acct-bio-copy {
    margin-left: auto;
    color: var(--color-text-subtle);
}

/* A person's page in Team (D118; Phase 1, section 13, "A person's page"):
   the account page's frame for a person, built on the classes above and on
   the admin's components. A new class only where nothing fits, each
   starting with person-; the markup is in admin_app/views/README.md, "A
   person's page (D118)". */

/* -- The header, Overview and their windows -- */

/* The header is an account's (.acct-header, .acct-status .is-success for
   Active and .is-neutral for Deactivated, .acct-actions), its picture
   .inv-face-link; Overview's alert .acct-alert, plain but for a paused
   sign-in's .is-warning; Sign-in .acct-setup's cells; Recent activity's
   "All activity" .acct-notes-more in the card's head; Devices the rows of
   Settings, Security (.set-group, .set-row). The green dot is the shared
   .live-dot of components.css; settings.css places it in a row's hint.
   What is its own:
     .person-status      the form of Change status, data-current the
                         status now: the foot shows only while the choice
                         differs from it
     .person-then        Change status: what happens at once, its title,
                         its list, a phone still held in the warning's tone */

/* "All activity" in Recent activity's head, where the card's line ends,
   on one line however narrow the card. */
.acct-card-head > .acct-notes-more {
    flex-shrink: 0;
    margin: 0 calc(var(--space-1) * -1) 0 0;
    white-space: nowrap;
}

/* The green dot before the words of the Devices cell. */
.acct-cell-sub > .live-dot {
    margin-right: 6px;
    vertical-align: 1px;
}

/* Change status: with the current status chosen nothing is to be done, so
   the foot and its one button, which says what it does, show only for the
   other one, and for Deactivated what happens at once. The window's foot
   lies outside the form, so the window reads the choice; without script
   the form's own .form-actions. Without :has() both show, and the server
   reads the choice. */
.dialog:has(.person-status[data-current="active"] input[value="active"]:checked) .dialog-foot,
.dialog:has(.person-status[data-current="inactive"] input[value="inactive"]:checked) .dialog-foot,
.person-status[data-current="active"]:has(input[value="active"]:checked) .form-actions,
.person-status[data-current="inactive"]:has(input[value="inactive"]:checked) .form-actions {
    display: none;
}

.person-status:has(input[value="active"]:checked) .person-then {
    display: none;
}

.person-then {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.person-then > p {
    margin: 0 0 var(--space-2);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.person-then > ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    list-style: none;
}

.person-then li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.person-then li .icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--color-text-subtle);
}

.person-then li.is-warning,
.person-then li.is-warning .icon {
    color: var(--color-warning-text);
}

/* -- Access and its windows -- */

/* The pieces of Access (users/access.php, the windows users/role.php,
   models.php and exception.php, and partials/permission-areas.php, which
   the Roles overview shares), each where no component fits:
     .person-faces-value, .person-faces
                         the Models cell's value: up to three faces of the
                         models, overlapping, before its words (the spec's)
     .person-areas, .person-area, .person-area-head, .person-area-name,
     .person-area-sum, .person-area-ex
                         an area a row, a <details> whose summary is its
                         icon, its name and what is held of it; " · 1
                         exception" from 480 pixels (the spec's)
     .person-perms, .person-perm (.is-on, .is-exception), .person-perm-text,
     .person-ex-line     an area's permissions as sentences, held in ink
                         with a check, not held grey with a dash, and an
                         exception's line (the spec's)
     .person-ex-tag      the badge Exception: the small badge without its
                         dot, which would read as a status
     .person-ex-remove   its X at 24 pixels, inside the sentence's line,
                         where btn-icon's 32 would push the rows apart
     .person-tiles-one   Change role's tiles in one column at every width:
                         choice-tiles go two by two from 560 pixels, and a
                         role's description needs the width
     .person-model-choices, .person-model-list, .person-model
                         Models: the models as rows of a window, each its
                         face, its name and its check, the whole row the
                         label, hidden while All models is on; .list-item
                         is a card's flush row, inset for a card's edges
     .person-for-grant, .person-for-deny
                         Add exception: what belongs to Allow or to Take
                         away, the other one's hidden while one is chosen */

.person-faces-value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.person-faces {
    display: inline-flex;
    flex: none;
}

.person-faces .inv-avatar {
    box-shadow: 0 0 0 2px var(--color-surface);
}

.person-faces .inv-avatar + .inv-avatar {
    margin-left: -6px;
}

.person-area + .person-area {
    border-top: 1px solid var(--color-border);
}

/* The head stands as far in as the card's head over it: 20 pixels, 24
   from 640. */
.person-area-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    list-style: none;
}

.person-area-head::-webkit-details-marker {
    display: none;
}

@media (hover: hover) {
    .person-area-head:hover {
        background: var(--color-surface-hover);
    }
}

.person-area-head:focus-visible {
    outline-offset: -2px;
}

.person-area-head .list-icon {
    width: 32px;
    height: 32px;
}

.person-area-head .list-icon .icon {
    width: 1rem;
    height: 1rem;
}

.person-area-name {
    flex: 1;
    min-width: 0;
    font-weight: var(--weight-medium);
}

.person-area-sum {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.person-area-head > .icon:last-child {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-text-subtle);
}

.person-area[open] > .person-area-head > .icon:last-child {
    transform: rotate(180deg);
}

/* The sentences stand under the area's name, past its icon. */
.person-perms {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0 var(--space-5) var(--space-4) calc(var(--space-5) + 32px + var(--space-3));
    list-style: none;
}

.person-perm {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 5px 0;
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

.person-perm > .icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--color-ghost-line);
}

.person-perm.is-on,
.person-perm.is-on > .icon {
    color: var(--color-text);
}

.person-perm-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.person-ex-line {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.person-ex-tag {
    flex: none;
    margin-top: 1px;
}

.person-ex-tag::before {
    display: none;
}

.person-ex-remove.btn {
    width: 24px;
    height: 24px;
    min-height: 24px;
    margin: -1px -4px 0 0;
    color: var(--color-text-subtle);
}

.person-ex-remove .icon {
    width: 14px;
    height: 14px;
}

@media (min-width: 640px) {
    .person-area-head {
        padding-inline: var(--space-6);
    }

    .person-perms {
        padding: 0 var(--space-6) var(--space-4) calc(var(--space-6) + 32px + var(--space-3));
    }
}

@media (max-width: 479px) {
    .person-perms {
        padding-left: var(--space-5);
    }

    .person-area-ex {
        display: none;
    }
}

.person-tiles-one .choice-tiles {
    grid-template-columns: minmax(0, 1fr);
}

/* Models: while All models is on, the list is not asked for. */
.form:has(> .field .switch:checked) > .person-model-choices {
    display: none;
}

.person-model-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.person-model-list > li + li {
    border-top: 1px solid var(--color-border);
}

.person-model {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    cursor: pointer;
}

/* Add exception: the chosen side's form and button. As a page and in a
   window alike, where the buttons stand in the window's foot. */
:where(.dialog, .form-card):has(input[name="effect"][value="deny"]:checked) .person-for-grant,
:where(.dialog, .form-card):has(input[name="effect"][value="grant"]:checked) .person-for-deny {
    display: none;
}

/* -- Activity -- */

/* Activity and Recent activity are History's timeline (inv-timeline,
   inv-tl, its marks and dots, inventory.css) of the person's audit lines
   (partials/user/timeline.php). What is its own:
     .person-tl          on .inv-timeline, a person's lines: a note's
                         bubble under its line, as wide as its text
     .person-days, .person-day, .person-day-title
                         Activity by day: a small title per day ("Today",
                         "Tuesday, 27 Oct"), the day's lines under it
     .person-quiet       on .inv-tl, a sign-in: its text muted and regular
     .person-activity-newest
                         Newest, at the top of an older page
     .person-activity-end
                         the card's foot, "In the audit log" */

.person-days {
    display: grid;
    gap: var(--space-6);
}

/* In the text's face (D102), small and quiet over its lines. */
.person-day-title {
    margin-bottom: var(--space-3);
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

/* Each day's list fills its first dot; only the newest line of all keeps
   it filled. */
.person-day + .person-day .inv-tl:first-child .inv-tl-dot {
    border-color: var(--color-text-subtle);
    background: var(--color-surface);
}

.inv-tl.person-quiet .inv-tl-text {
    color: var(--color-text-muted);
    font-weight: var(--weight-normal);
}

.person-tl .inv-tl-bubble {
    width: fit-content;
    max-width: 100%;
    margin-top: var(--space-1);
}

.person-activity-newest {
    margin-bottom: var(--space-4);
}

.person-activity-end {
    display: flex;
    justify-content: center;
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.person-activity-newest .icon,
.person-activity-end .icon {
    width: 14px;
    height: 14px;
}