/*
 * Page furniture: top bar, cards, tiles, tables, charts, toasts.
 *
 * The old nav was `position: fixed` with a hand-tuned `margin-top: 80px` on the
 * content -- redeclared at three breakpoints, and duplicated verbatim in both
 * header.ejs and bills.ejs. It is a sticky flex row now and the content just
 * follows it.
 */

/* ------------------------------------------------------------------ topbar */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .625rem clamp(.875rem, 3vw, 1.75rem);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    text-decoration: none;
}

.brand__mark { color: var(--accent-solid); font-size: .875rem; }
.brand__name { font-size: 1.0625rem; }

.tabs { display: flex; gap: .25rem; }

.tab {
    padding: .4375rem .8125rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 999px;
    transition: background .15s, color .15s;
}

.tab:hover { background: var(--surface-raised); color: var(--text); }

.tab.is-current {
    color: var(--on-accent);
    background: var(--accent);
}

.topbar__end {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-left: auto;
}

/* connection pill */

.conn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .625rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.conn__dot {
    width: .4375rem; height: .4375rem;
    border-radius: 50%;
    background: var(--text-faint);
}

.conn[data-state="live"] .conn__dot { background: var(--ok); }
.conn[data-state="live"] { color: var(--ok); }
.conn[data-state="down"] .conn__dot { background: var(--bad); }
.conn[data-state="down"] { color: var(--bad); }
.conn[data-state="connecting"] .conn__dot { animation: pulse 1.2s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: .25; } }

@media (max-width: 34rem) {
    .conn__text { display: none; }
    .conn { padding: .375rem; }
}

/* theme menu */

.theme-menu { position: relative; }

.theme-menu__btn {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .375rem .625rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
}

.theme-menu__btn:hover { color: var(--text); border-color: var(--accent-solid); }

.theme-menu__swatch {
    width: .875rem; height: .875rem;
    border-radius: 4px;
    background: var(--accent);
    border: 1px solid var(--line);
}

.theme-menu__list {
    position: absolute;
    top: calc(100% + .375rem);
    right: 0;
    z-index: 60;
    width: 13rem;
    max-height: 21rem;
    overflow-y: auto;
    padding: .375rem;
    background: var(--surface-solid);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
}

.theme-menu__list[hidden] { display: none; }

.theme-menu__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .4375rem .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
}

.theme-menu__item:hover,
.theme-menu__item.is-active { background: var(--hover); }
.theme-menu__item[aria-selected="true"] { color: var(--accent-solid); }

.theme-menu__chip {
    width: 1rem; height: 1rem;
    flex: none;
    border-radius: 4px;
    border: 1px solid rgba(128,128,128,.3);
}

@media (max-width: 34rem) {
    .theme-menu__name { display: none; }
}

/*
 * Narrow screens: the bar wraps instead of pushing the page sideways.
 *
 * Brand and controls keep the first row; the tabs drop to a second row of
 * their own and scroll there if they still do not fit. Before this the bar was
 * one unwrappable flex row, so on a phone it forced the whole document about
 * 30-60px wider than the viewport and every page scrolled horizontally.
 */
@media (max-width: 34rem) {
    .topbar { flex-wrap: wrap; gap: .5rem; }
    .brand__name { font-size: .9375rem; }

    .tabs {
        order: 3;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: .125rem;
    }

    .tabs::-webkit-scrollbar { display: none; }
    .tab { flex: 0 0 auto; }
}

/* -------------------------------------------------------------------- page */

.page {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    max-width: 82rem;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 1.75rem) clamp(.875rem, 3vw, 1.75rem) 5rem;
}

/* ------------------------------------------------------------------- tiles */

.tiles {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.tile {
    display: grid;
    gap: .1875rem;
    padding: 1rem 1.125rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    border-left: 3px solid var(--line);
}

.tile--debt { border-left-color: var(--bad); }
.tile--assets { border-left-color: var(--ok); }
.tile--paid { border-left-color: var(--accent-solid); }
.tile--earned { border-left-color: var(--warn); }
.tile--net { border-left-color: var(--accent-solid); }
.tile--flow { border-left-color: var(--warn); }

.tile__label {
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.tile__value {
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tile__note { font-size: .75rem; color: var(--text-faint); }

/* ------------------------------------------------------------------- cards */

.card {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2.5vw, 1.375rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.card__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem 1rem;
}

.card__title {
    font-size: 1.0625rem;
    font-weight: 680;
}

.card__meta {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-faint);
}

.card__bar .card__meta:last-child { margin-left: auto; }

.card--actions { gap: 1.125rem; }

.actions-layout {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 60rem) {
    .actions-layout { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
    .action-picker { position: sticky; top: 4.5rem; }
}

/* ---------------------------------------------------------------- segments */

.seg {
    display: inline-flex;
    padding: .1875rem;
    gap: .1875rem;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 999px;
    margin-left: auto;
}

.seg__btn {
    padding: .3125rem .75rem;
    font-size: .8125rem;
    font-weight: 620;
    color: var(--text-muted);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.seg__btn:hover { color: var(--text); }
.seg__btn.is-on { color: var(--on-accent); background: var(--accent); }

/* ---------------------------------------------------------------- accounts */

.account-sections { display: grid; gap: 1.25rem; }

.account-group { display: grid; gap: .5rem; }

.account-group__head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding-bottom: .3125rem;
    border-bottom: 1px solid var(--line-soft);
}

.account-group__name {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.account-group__sum {
    margin-left: auto;
    font-size: .8125rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}

/* ------------------------------------------------------------------ tables */

.table-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

thead th {
    position: sticky;
    top: 0;
    padding: .5rem .625rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
    color: var(--text-faint);
    background: var(--surface-solid);
    white-space: nowrap;
}

tbody td {
    padding: .5625rem .625rem;
    border-top: 1px solid var(--line-soft);
    vertical-align: middle;
}

tbody tr:hover td { background: var(--surface-raised); }

th.right, td.right { text-align: right; }
th.center, td.center { text-align: center; }

td.money {
    font-variant-numeric: tabular-nums;
    font-weight: 620;
    text-align: right;
    white-space: nowrap;
}

.acct-name { font-weight: 640; }

/* Owner is encoded as a colour bar as well as text, so it reads at a glance. */
.owner {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    font-weight: 600;
}

.owner::before {
    content: '';
    width: .5rem; height: .5rem;
    border-radius: 50%;
    background: currentColor;
}

/*
 * Owner colours.
 *
 * Six slots, assigned by hashing the owner's name (see format.js ownerClass).
 * The design this follows had two people it could name in CSS; this app is
 * multi-tenant, so the palette has to work for whoever an account happens to
 * have without anyone configuring it. Six is enough for a household and the
 * hues stay distinguishable in every theme.
 */
.owner--0 { color: var(--richard); }
.owner--1 { color: var(--myriam); }
.owner--2 { color: var(--ok); }
.owner--3 { color: var(--warn); }
.owner--4 { color: var(--accent-solid); }
.owner--5 { color: color-mix(in srgb, var(--bad) 80%, var(--text)); }

/* status pills */

.pill {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .1875rem .5rem;
    font-size: .75rem;
    font-weight: 650;
    border-radius: 999px;
    white-space: nowrap;
}

.pill--paid { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.pill--due { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.pill--late { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.pill--muted { color: var(--text-faint); background: var(--surface-raised); }

.due-soon { color: var(--warn); font-weight: 650; }
.due-now { color: var(--bad); font-weight: 700; }

/* Marks an APR that is compounded onto the balance monthly, as opposed to one
   held purely for reference. */
.accrues {
    color: var(--warn);
    font-weight: 700;
    cursor: help;
}

/* ----------------------------------------------------------- subscriptions */

.source-groups { display: grid; gap: .5rem; }

.source-row {
    display: grid;
    gap: .25rem;
    padding: .75rem .875rem;
    background: var(--surface-raised);
    border-radius: var(--r);
    border-left: 3px solid var(--accent-solid);
}

.source-row__top {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.source-row__name { font-weight: 650; }

.source-row__amount {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.source-row__items { font-size: .8125rem; color: var(--text-faint); }

.sub-grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.sub-card {
    display: grid;
    gap: .3125rem;
    padding: .75rem .875rem;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.sub-card[data-inactive="true"] { opacity: .55; }

.sub-card__top { display: flex; align-items: baseline; gap: .5rem; }
.sub-card__name { font-weight: 650; }
.sub-card__amount { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.sub-card__meta { font-size: .8125rem; color: var(--text-faint); }

.badge {
    padding: .125rem .4375rem;
    font-size: .6875rem;
    font-weight: 700;
    border-radius: 999px;
    color: var(--on-accent);
    background: var(--accent);
}

.badge--soon { background: var(--warn); color: #201a00; }

/* ------------------------------------------------------------------ import */

.dropzone {
    display: grid;
    place-items: center;
    gap: .375rem;
    padding: 1.75rem 1rem;
    text-align: center;
    background: var(--surface-raised);
    border: 2px dashed var(--line);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.dropzone:hover,
.dropzone[data-state="over"] {
    border-color: var(--accent-solid);
    background: var(--hover);
}

.dropzone[data-state="loaded"] {
    border-style: solid;
    border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
}

.dropzone:focus-within { box-shadow: var(--ring); }

.dropzone__icon { font-size: 1.5rem; }
.dropzone__text { font-size: .9375rem; }
.dropzone__hint { font-size: .75rem; color: var(--text-faint); }

.import-summary {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    padding: .875rem;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: .75rem;
}

.import-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0 .5rem;
}

.import-toolbar__count {
    margin-left: auto;
    font-size: .8125rem;
    color: var(--text-muted);
}

/* Long statements scroll inside the panel rather than stretching the page. */
.import-table {
    max-height: 26rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.import-table input[type="checkbox"] {
    width: 1.0625rem;
    height: 1.0625rem;
    accent-color: var(--accent-solid);
    cursor: pointer;
}

/* Rows we think you already have: visibly demoted, but still selectable. */
.import-table tr[data-dupe="true"] { opacity: .55; }
.import-table tr[data-dupe="true"]:hover { opacity: 1; }

.import-dupe,
.import-effect {
    font-size: .6875rem;
    color: var(--text-faint);
    margin-top: .125rem;
}

.import-dupe { color: var(--warn); }

.import-problem {
    padding: 1rem;
    font-size: .875rem;
    background: color-mix(in srgb, var(--bad) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line));
    border-radius: var(--r);
}

.import-problem__detail {
    margin-top: .375rem;
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--text-muted);
    word-break: break-word;
}

/* ------------------------------------------------------------------- tools */

.tools {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: start;
}

.tool {
    display: grid;
    gap: .5rem;
    padding: .875rem;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.tool__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.tool__title {
    font-size: .9375rem;
    font-weight: 660;
}

.tool__note {
    font-size: .75rem;
    color: var(--text-faint);
}

.tool__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .5rem;
}

.tool__ctl { display: grid; gap: .1875rem; min-width: 0; }

.tool__ctl-label {
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.tool__ctl--rate { width: 5.5rem; }
.tool__ctl--rate .input { padding: .3125rem .5rem; font-size: .8125rem; }

.select--slim {
    width: auto;
    min-width: 13rem;
    max-width: 100%;
    padding: .3125rem 1.75rem .3125rem .5rem;
    font-size: .8125rem;
}

.btn--slim { padding: .3125rem .6875rem; font-size: .8125rem; }

/* The gadgets paint their own dark surface, so give them a neutral bed rather
   than letting a light theme show through around the edges. */
.tool__frame {
    display: block;
    border: 0;
    border-radius: var(--r-sm);
    background: #1d1e18;
    max-width: 100%;
}

@media (max-width: 46rem) {
    .tools { flex-direction: column; }
    .tool { width: 100%; }
    .tool__frame { width: 100%; }
}

/* ------------------------------------------------------------------ charts */

.chart-grid {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.chart { position: relative; height: 16rem; }
.chart--tall { height: 22rem; }

/* ---------------------------------------------------------------- report */

.report-preview {
    display: grid;
    gap: .875rem;
    padding: 1rem;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.report-preview[hidden] { display: none; }

.report-figures {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.figure { display: grid; gap: .125rem; }
.figure__label { font-size: .75rem; color: var(--text-faint); }
.figure__value { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.bars { display: grid; gap: .375rem; }

.bar-row {
    display: grid;
    grid-template-columns: minmax(6rem, 12rem) 1fr auto;
    gap: .625rem;
    align-items: center;
    font-size: .8125rem;
}

.bar-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }

.bar-row__track {
    height: .5rem;
    background: var(--surface);
    border-radius: 999px;
    overflow: hidden;
}

.bar-row__fill { height: 100%; background: var(--accent); border-radius: 999px; }
.bar-row__value { font-variant-numeric: tabular-nums; font-weight: 620; }

/* ------------------------------------------------------------------ toasts */

.toasts {
    position: fixed;
    right: clamp(.75rem, 3vw, 1.5rem);
    bottom: clamp(.75rem, 3vw, 1.5rem);
    z-index: 100;
    display: grid;
    gap: .5rem;
    justify-items: end;
    max-width: min(26rem, calc(100vw - 1.5rem));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .875rem;
    background: var(--surface-solid);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-solid);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    font-size: .875rem;
    pointer-events: auto;
    animation: toast-in .2s cubic-bezier(.2, .9, .3, 1);
}

.toast[data-kind="ok"] { border-left-color: var(--ok); }
.toast[data-kind="bad"] { border-left-color: var(--bad); }
.toast[data-kind="undo"] { border-left-color: var(--warn); }

.toast.is-leaving { animation: toast-out .18s ease-in forwards; }

.toast__text { flex: 1 1 auto; }

.toast__action {
    flex: none;
    padding: .3125rem .6875rem;
    font-size: .8125rem;
    font-weight: 680;
    color: var(--on-accent);
    background: var(--accent);
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
}

.toast__action:hover { filter: brightness(1.1); }

.toast__close {
    flex: none;
    padding: 0 .25rem;
    color: var(--text-faint);
    background: none;
    border: 0;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.toast__close:hover { color: var(--text); }

@keyframes toast-in { from { opacity: 0; transform: translateY(.5rem); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(.25rem); } }

/* ------------------------------------------------------------ account menu */

/*
 * The account menu is this app's own -- the design it is modelled on serves a
 * single household and has nobody to name. Here the header has to say whose
 * records are on screen and offer the way out, so it mirrors the theme menu's
 * shape rather than inventing a second vocabulary.
 */

.account-menu { position: relative; }

.account-menu__btn {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .3125rem .5rem .3125rem .3125rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
}

.account-menu__btn:hover { color: var(--text); border-color: var(--accent-solid); }

.account-menu__avatar {
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .6875rem;
    font-weight: 700;
}

/* The name is the first thing to go when the header runs out of room. */
.account-menu__name {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu__list {
    position: absolute;
    top: calc(100% + .375rem);
    right: 0;
    z-index: 40;
    min-width: 12rem;
    padding: .3125rem;
    background: var(--surface-solid);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
}

.account-menu__meta {
    display: block;
    padding: .375rem .5rem .5rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: .75rem;
    color: var(--text-faint);
    word-break: break-word;
}

.account-menu__item {
    display: block;
    width: 100%;
    padding: .4375rem .5rem;
    font-size: .8125rem;
    font-weight: 600;
    text-align: left;
    color: var(--text-muted);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
}

.account-menu__item:hover { background: var(--hover); color: var(--text); }
.account-menu__item--danger:hover { color: var(--bad); }
.account-menu__form { margin: 0; }

@media (max-width: 640px) {
    .account-menu__name { display: none; }
}

/*
 * Empty charts.
 *
 * A chart with no data draws an empty box that reads as a bug. The renderer
 * swaps in a message instead; this centres it in the space the canvas would
 * have occupied so the grid does not jump.
 */
.chart__empty {
    display: grid;
    place-content: center;
    height: 100%;
    margin: 0;
}

/* --------------------------------------------------------------- auth pages */

/*
 * Sign-in, sign-up and the magic-link confirm. No nav -- there is nothing to
 * navigate to until you are in -- so these get a centred card instead of the
 * page grid. Same tokens as everything else, so they follow the theme.
 */

.auth {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.auth__card {
    width: 100%;
    max-width: 26rem;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
}

.auth__brand span:first-child { color: var(--accent-solid); }

.auth__title {
    margin-bottom: .375rem;
    font-size: 1.375rem;
    text-align: center;
}

.auth__lead {
    margin-bottom: 1.5rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
    text-wrap: pretty;
}

.auth__who {
    display: block;
    padding: .625rem .875rem;
    margin: 0 0 1.5rem;
    text-align: center;
    font-weight: 600;
    word-break: break-all;
    background: var(--surface-raised);
    border-radius: var(--r);
}

.auth .btn { width: 100%; justify-content: center; }

.auth__note {
    margin-top: 1.25rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--text-faint);
    text-align: center;
    text-wrap: pretty;
}

.auth__foot {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
    font-size: .875rem;
    color: var(--text-muted);
    text-align: center;
}

/* Inline status messages, shown in place of a toast on a page with no socket. */
.auth__msg {
    padding: .75rem .875rem;
    margin-bottom: 1.25rem;
    font-size: .875rem;
    line-height: 1.45;
    border-radius: var(--r);
    text-wrap: pretty;
}

.auth__msg--bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.auth__msg--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }