/* ============================================================
   Accounts: sign in, sign up, password reset (standalone pages),
   and the Profile and Settings pages inside the app shell.
   ============================================================ */

/* ---- shared form pieces ---- */

.acct-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.acct-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.acct-label {
    color: var(--vandy-navy-800, var(--text-default));
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}

.acct-control {
    display: flex;
    align-items: center;
    height: 48px;
    border: 1px solid var(--ss-mw-5);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    transition:
        background 150ms ease,
        border-color 150ms ease;
}

.acct-control:hover {
    border-color: var(--ss-mw-4);
}

.acct-control:focus-within {
    border-color: var(--button-primary);
    background: var(--surface-page);
}

.acct-field.has-error .acct-control {
    border-color: var(--danger-600);
}

.acct-control input,
.acct-control select {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    outline: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--text-default);
    font-family: inherit;
    font-size: 15px;
}

.acct-control input::placeholder {
    color: var(--text-soft);
}

/* Inside the app the fields are the New report card's: its border,
   type size and focus colour (pages.css, .rcp-control). */
.acct-page .acct-control {
    border-color: var(--border-default);
}

.acct-page .acct-control:hover {
    border-color: var(--ss-mw-5);
}

.acct-page .acct-control:focus-within {
    border-color: var(--nlp-term-accent);
    background: var(--surface-page);
}

.acct-page .acct-control input,
.acct-page .acct-control select {
    color: var(--text-default);
    font-size: 13px;
}

.acct-control select {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2f55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    cursor: pointer;
}

.acct-error {
    margin: 0;
    color: var(--danger-600);
    font-size: 12px;
    line-height: 1.4;
}

.acct-error--form {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--danger-100, #fbe8e6);
    font-size: 13px;
}

/* The shared button sizes (tokens.css): a field's height, 16px either
   side of the words and as wide as they are. */
.acct-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    box-sizing: border-box;
    height: var(--control-height);
    padding: 0 var(--button-pad-x);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--button-primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--button-weight);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease;
}

.acct-button:hover {
    background: var(--button-primary-hover);
}

.acct-button:focus-visible {
    outline: 2px solid var(--ss-mw-4);
    outline-offset: 2px;
}

/* In a column of fields a button keeps its own width. */
.acct-form > .acct-button,
.ws-form > .acct-button,
.acct-button--inline {
    align-self: flex-start;
}

.acct-button--danger {
    background: var(--danger-600);
}

.acct-button--danger:hover {
    background: #8f1c13;
}

.acct-inline-link {
    margin: -4px 0 0;
    font-size: 13px;
}

.acct-inline-link a,
.acct-auth-foot a,
.acct-help a {
    color: var(--button-primary);
    font-weight: 600;
    text-decoration: none;
}

.acct-inline-link a:hover,
.acct-auth-foot a:hover,
.acct-help a:hover {
    text-decoration: underline;
}


/* ---- standalone pages: sign in, sign up, reset ---- */

.acct-auth {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--nav-surface);
    color: var(--text-default);
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.acct-auth *,
.acct-auth *::before,
.acct-auth *::after {
    box-sizing: border-box;
}

.acct-auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 40px 16px;
}

/* The same lockup as the topbar: the mark and the name on one line,
   with BETA tucked under the end of the name. */
.acct-auth-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
}

.acct-auth-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.acct-auth-logo {
    height: 38px;
    width: auto;
}

.acct-auth-beta {
    margin-top: -10px;
    opacity: 0.8;
    font-size: 7px;
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1;
}

.acct-auth-card {
    width: min(420px, 100%);
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

/* On the sign-in and sign-up cards the buttons run the card's full
   width: Continue with Google, Continue, Create account, Sign in. */
.acct-auth-card .acct-button {
    width: 100%;
    align-self: stretch;
}

.acct-auth-title {
    margin: 0 0 6px;
    color: var(--text-strong, var(--text-default));
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.acct-auth-lede {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.5;
}

/* One line each, the way Render's sign-in page has them: "Need an
   account? Sign up", "Forgot your password? Reset it". */
.acct-auth-foot {
    margin: 0;
    color: var(--nav-label);
    font-size: 13px;
    line-height: 2;
    text-align: center;
}

.acct-auth-foot a {
    color: #ffffff;
}


/* ---- Profile and Settings, inside the app shell ---- */

/* clip rather than hidden: a box that is only hidden is still a
   scroll box, so a jump to #section can slide the whole shell up and
   leave it there with no scrollbar to put it back. A clipped box
   cannot be scrolled at all. */
body.account-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overflow: clip;
    background: var(--vandy-navy-900);
}

body.account-page .app-shell {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.account-page .topbar {
    flex: 0 0 auto;
}

body.account-page .topbar-inner {
    padding-top: var(--app-frame);
}

body.account-page .topbar-search {
    top: calc(50% + var(--app-frame) / 2);
}

body.account-page .page {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--app-frame);
    overflow: hidden;
    overflow: clip;
}

/* The same panel as the Content Writer home (.home-main): one pale,
   rounded panel on the dark canvas that scrolls on its own, with no
   scrollbar drawn and no border inside it. */
.acct-page {
    display: flex;
    height: 100%;
    border-radius: var(--radius-lg);
    background: var(--surface-page);
    box-shadow: var(--shadow-menu);
    overflow: hidden;
    overflow: clip;
}

.acct-page-card {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

.acct-page-card::-webkit-scrollbar {
    display: none;
}

.acct-page-inner {
    /* One ink for the words on these pages: the labels'. */
    color: var(--text-default);
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 32px 16px 72px;
}

.acct-page-header h1 {
    margin: 0 0 4px;
    color: var(--vandy-navy-800, var(--text-default));
    font-size: 26px;
    font-weight: 800;
}

.acct-page-header p {
    margin: 0 0 8px;
    font-size: var(--acct-body-size);
    line-height: 1.5;
}

.acct-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 24px;
    padding: 24px;
    /* Room above a section the card has just scrolled to. */
    scroll-margin-top: 16px;
    border: 1px solid var(--ss-mw-5);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.acct-card--soon {
    grid-template-columns: minmax(0, 1fr);
}

.acct-card-text h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--text-strong, var(--text-default));
    font-size: 16px;
    font-weight: 700;
}

.acct-card-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.acct-card--danger {
    border-color: #f1c4bf;
}

.acct-card--danger h2 {
    color: var(--danger-600);
}

.acct-soon {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-page);
    color: var(--text-default);
    font-size: 11px;
    font-weight: 600;
}

/* Reports used against the month's allowance. */
.acct-meter {
    height: 8px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-page);
    box-shadow: inset 0 0 0 1px var(--ss-mw-5);
}

.acct-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--button-primary);
}

.acct-meter.is-full span {
    background: var(--danger-600);
}

.acct-note {
    margin-top: 12px !important;
}

.acct-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.acct-message {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--ss-mw-5);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    /* The report card's title type: body ink, 14px bold. */
    color: var(--text-default);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.acct-message svg circle {
    fill: var(--button-primary);
}

.acct-message svg path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 720px) {
    .acct-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}


/* ---- avatar menu (header) ---- */

.account-menu {
    position: relative;
}

.account-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    width: 260px;
    padding: 6px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: 0 16px 40px rgba(7, 23, 42, 0.2);
}

.account-menu-dropdown[hidden] {
    display: none;
}

.account-menu-who {
    padding: 10px 10px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle, var(--ss-mw-6));
}

.account-menu-name {
    display: block;
    overflow: hidden;
    color: var(--text-default);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-email {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-default);
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-default);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
    background: var(--surface-page);
    outline: none;
}

.account-menu-item svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-menu-form {
    margin: 4px 0 0;
    padding-top: 4px;
    border-top: 1px solid var(--border-subtle, var(--ss-mw-6));
}

.topbar-avatar-btn,
a.topbar-icon-btn {
    cursor: pointer;
    text-decoration: none;
}


/* ---- settings pieces ---- */

.acct-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.acct-divider {
    height: 1px;
    background: var(--ss-mw-6);
}

/* The same type as the text beside each form. */
.acct-help {
    margin: 0;
    color: var(--text-default);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.acct-control--textarea {
    height: auto;
}

.acct-control textarea {
    width: 100%;
    min-height: 96px;
    padding: 12px 16px;
    border: 0;
    outline: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--text-default);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

.acct-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.acct-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--button-primary);
    cursor: pointer;
}

.acct-list {
    display: flex;
    flex-direction: column;
    margin: -6px 0 0;
    padding: 0;
    list-style: none;
}

.acct-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ss-mw-6);
}

.acct-list-row form {
    margin: 0 0 0 auto;
}

.acct-favicon {
    flex: 0 0 16px;
    border-radius: 3px;
}

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

.acct-list-title {
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct-list-note {
    font-size: 12px;
}

.acct-empty {
    margin: -6px 0 0;
    font-size: 13px;
}

/* Every text link on these pages: Remove, Change email, Role
   permissions, Leave, Move to Trash. */
.acct-link-button,
.ws-permissions summary {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--button-primary);
    font-family: inherit;
    font-size: var(--acct-body-size);
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
}

.acct-link-button:hover {
    text-decoration: underline;
}

/* Cancel and Remove on a list row are light, like Back on the New
   report card, so they sit quietly beside the role badge. */
.ws-member form .acct-link-button {
    font-weight: 400;
}

.acct-button--quiet {
    border: 1px solid var(--ss-mw-5);
    background: var(--surface-card);
    color: var(--text-default);
}

.acct-button--quiet:hover {
    background: var(--surface-page);
}

.acct-button:disabled,
.acct-button:disabled:hover {
    border-color: var(--button-disabled-bg);
    background: var(--button-disabled-bg);
    color: var(--button-disabled-text);
    cursor: not-allowed;
}

.acct-autocomplete {
    position: relative;
}

.acct-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    padding: 4px;
    border: 1px solid var(--ss-mw-5);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: 0 12px 30px rgba(7, 23, 42, 0.16);
}

.acct-suggestions[hidden] {
    display: none;
}

.acct-suggestion {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-default);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.acct-suggestion:hover {
    background: var(--surface-page);
}


/* On/off settings as switches, the same shape as Highlight terms. */
.acct-form--switches {
    gap: 14px;
}

.acct-form--switches .acct-check {
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.acct-form--switches .acct-check span {
    order: -1;
}

.acct-form--switches .acct-check input[type="checkbox"] {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ss-mw-6);
    box-shadow: inset 0 0 0 1px var(--ss-mw-5);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background 150ms ease;
}

.acct-form--switches .acct-check input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(7, 23, 42, 0.25);
    transition: transform 150ms ease;
}

.acct-form--switches .acct-check input[type="checkbox"]:checked {
    background: var(--button-primary);
    box-shadow: none;
}

.acct-form--switches .acct-check input[type="checkbox"]:checked::before {
    transform: translateX(16px);
}

.acct-form--switches .acct-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ss-mw-4);
    outline-offset: 2px;
}


/* ---- tabs across the top of Settings ---- */

.acct-tabs {
    display: flex;
    gap: 24px;
    margin: 20px 0 4px;
    border-bottom: 1px solid var(--ss-mw-6);
}

.acct-tab {
    display: inline-flex;
    align-items: center;
    padding: 0 0 10px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.acct-tab:hover {
    color: var(--text-default);
}

.acct-tab.is-active {
    color: var(--text-link, var(--button-primary));
    border-bottom-color: var(--text-link, var(--button-primary));
}


/* ---- Trash ---- */

.trash-list {
    margin: 0;
}

.trash-row {
    gap: 12px;
    padding: 14px 0;
}

.trash-row:first-child {
    padding-top: 0;
}

.trash-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.trash-actions form {
    margin: 0;
}

.trash-delete {
    color: var(--danger-600);
}

.trash-empty-form {
    margin: 20px 0 0;
}

.acct-inline-anchor {
    color: var(--button-primary);
    font-weight: 600;
    text-decoration: none;
}

.acct-inline-anchor:hover {
    text-decoration: underline;
}

/* The two-factor setup key, spaced in fours so it can be typed. */
.acct-key {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--ss-mw-6);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.08em;
}

/* The two-factor QR code, drawn in the text colour on the card. */
.acct-qr {
    align-self: center;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-default);
    line-height: 0;
}

.acct-qr path {
    stroke: currentColor;
}

/* The code and its button side by side; the button keeps its own width. */
.acct-code-row {
    display: flex;
    gap: var(--space-3);
}

.acct-code-row .acct-control {
    flex: 1;
    min-width: 0;
}

/* "or" between Continue with Google and the email form. */
.acct-or {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.acct-or::before,
.acct-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ss-mw-6);
}

/* The sign-up form's trap field: there for bots, out of sight and
   out of reach for people (accounts/signup_guard.py). Moved off the
   page rather than display: none, which some bots skip. */
.acct-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* "Last used" on whichever way this browser signed in last. */
.acct-last-used {
    margin-left: var(--space-2);
}

/* Google's "G" beside "Continue with Google", the size Google's own
   button uses. */
.acct-google-g {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-right: var(--space-3);
}

/* Cloudflare's box on the sign-up form. Its frame is 65px tall; the
   space is kept while it loads so the button does not jump. */
.acct-turnstile {
    min-height: 65px;
}

.acct-link-button--danger {
    color: var(--danger-600);
}

/* The avatar menu's list of workspaces, when there is more than one. */
.account-menu-workspaces {
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle, var(--ss-mw-6));
}

.account-menu-heading {
    display: block;
    padding: 6px 10px 2px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
}

.account-menu-switch {
    margin: 0;
}

.account-menu-item.is-current {
    color: var(--button-primary);
}

/* Something that could not be done: the same card, in the danger colour. */
.acct-message--error {
    border-color: var(--danger-600);
}

.acct-message--error svg circle {
    fill: var(--danger-600);
}

.acct-message svg {
    flex: 0 0 16px;
}


/* ---- Workspace settings: two compact cards, helper text under the
   control it is about ---- */

.acct-card.ws-card {
    display: block;
}

.ws-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ws-row {
    display: flex;
    gap: 12px;
}

.ws-grow {
    flex: 1;
    min-width: 0;
}

/* Two kinds of words on these pages: body text, and the helper text
   under a field or a heading. Neither carries margins of its own; the
   card's gaps place them. */
.acct-page-inner,
.acct-dialog {
    --acct-body-size: var(--font-size-sm);
    --acct-help-size: var(--hint-size);
    /* An email under a name, a brand under a website, a count. */
    --acct-detail-size: 13px;
}

.ws-value {
    margin: 0;
    font-size: var(--acct-body-size);
    line-height: 1.5;
}

.ws-help {
    margin: 0;
    color: var(--hint-color);
    font-size: var(--acct-help-size);
    line-height: 1.5;
}

/* A heading's own description: 4px under the heading, 12px over
   what follows. */
.ws-card > .ws-title + .ws-help,
.ws-card > .ws-title + .ws-value {
    margin-bottom: 12px;
}

/* A card's description reads like the page lede, not a field hint. */
.ws-card > .ws-title + .ws-help {
    color: var(--text-default);
    font-size: var(--acct-body-size);
}

.ws-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 4px;
    color: var(--vandy-navy-800, var(--text-default));
    font-size: 18px;
    font-weight: 800;
}

.ws-count {
    font-size: var(--acct-detail-size);
    font-weight: 400;
}

.ws-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ws-member {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ss-mw-5);
}

.ws-person {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* A saved website: its favicon beside the domain and brand, like a
   report in the Trash. */
.ws-site {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ws-name {
    font-size: var(--acct-body-size);
    font-weight: 700;
}

.ws-you {
    font-weight: 400;
}

.ws-email {
    overflow-wrap: anywhere;
    color: var(--text-default);
    font-size: var(--acct-detail-size);
}

.ws-member--pending .ws-name {
    font-weight: 600;
}

.ws-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ws-actions form {
    margin: 0;
}

.ws-role-control {
    width: 128px;
    height: 40px;
}

.ws-role-control select {
    font-size: 14px;
}

.ui-badge.ws-role-badge {
    min-height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    background: var(--ss-mw-6-light);
    color: var(--text-default);
    font-size: 13px;
    font-weight: 500;
}

/* Email, role and the button on one row; stacked on a phone. */
.ws-invite {
    margin-top: 16px;
}

.ws-invite-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px auto;
    align-items: end;
    gap: 12px;
}

.ws-invite-email,
.ws-invite-role {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ws-permissions {
    margin-top: 16px;
    font-size: var(--acct-body-size);
}

.ws-permissions dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 16px;
    margin: 12px 0 0;
}

.ws-permissions dt {
    font-weight: 700;
}

.ws-permissions dd {
    margin: 0;
}

.ws-leave {
    margin-top: 12px;
}

@media (max-width: 720px) {
    .ws-invite-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .ws-actions {
        width: 100%;
    }
}


/* ---- Settings and Profile, in the same compact cards ---- */

/* Two fields side by side, each with its helper text under it. */
.ws-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin-top: 8px;
}

.ws-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Two fields and their button on one line, the way Website, Brand
   name and Add website sit: the button lines up with the fields, and
   each field's helper text runs under it. The fields share the row's
   lines (subgrid) so labels, fields and helpers stay level. */
.ws-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 8px 12px;
    margin-top: 8px;
}

.ws-inline > .ws-field {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 8px;
}

.ws-inline > .acct-button {
    grid-column: 3;
    grid-row: 2;
}

.ws-under {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Buttons that close a card, at its right. */
.ws-end {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

/* Words on the left, the thing to do on the right. */
.ws-between {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

/* A heading and its description beside an action: 4px apart. */
.ws-between > .ws-grow {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-width: 240px;
}

.ws-between > .ws-grow > * {
    margin: 0;
}

.ws-split {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ss-mw-5);
}

.ws-title--danger {
    color: var(--danger-600);
}

.ws-outline {
    border-color: var(--ss-mw-5);
    color: var(--button-primary);
}

.ws-outline--danger {
    border-color: #f1c4bf;
    color: var(--danger-600);
}

.ws-outline--danger:hover {
    background: #fdf3f2;
}

.acct-link-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: none;
}

.ws-meter {
    margin-top: 12px;
}

/* Saved websites: website, brand and the button on one row. */
.ws-website-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

/* Sign-in details: label, value and its Change link, with the form
   folding out underneath. */
.ws-setting {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding: 16px 0;
}

.ws-setting:last-child {
    border-bottom: 0;
}

.ws-setting-label {
    font-size: var(--acct-body-size);
    font-weight: 700;
}

.ws-setting-value {
    overflow-wrap: anywhere;
    font-size: var(--acct-body-size);
}

.ws-reveal {
    grid-column: 1 / -1;
    max-width: 480px;
    margin-top: 8px;
}

.ws-reveal[hidden] {
    display: none;
}

/* A confirmation in a dialog over the page. */
.acct-dialog {
    width: min(460px, calc(100% - 32px));
    padding: 24px;
    border: 1px solid var(--ss-mw-5);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-default);
    box-shadow: 0 16px 40px rgba(7, 23, 42, 0.2);
}

.acct-dialog::backdrop {
    background: rgba(7, 23, 42, 0.45);
}

@media (max-width: 720px) {
    .ws-grid,
    .ws-website-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ws-inline {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: 16px;
    }

    .ws-inline > .ws-field {
        display: flex;
        flex-direction: column;
        grid-row: auto;
    }

    .ws-inline > .acct-button {
        grid-column: auto;
        grid-row: auto;
    }

    .ws-setting {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ws-setting-value {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}