/*
 * The 2027 look for account and administration at id (look.css is the shared part).
 * Account and administration (4.11.2026): access/preferences, access/operators, access/audit, and the error pages (errors/*, components/error-page).
 * One session owns this sheet; other areas have their own (components/look-sheets).
 *
 * The states here, on the look's four colours:
 *   - blue: fine - two-factor on, a wrong turn or an update on its way (the error page's calm bar);
 *   - orange: needs you - two-factor not set up yet, an audit event that failed or was refused, an error page that
 *     asks something of you (sign in, ask an owner, send again, wait): only ever a dot, a mark or a bar;
 *   - red (--neg): destroying or broken - an audit event that removed or ended something, a fault on our side;
 *   - black: the frame and the one dark panel of a page (Preferences' Save bar, Operators' figures, an error's code).
 * Words always say the state too; the colour only lets the eye find it. No green.
 */

/* ── [states] badges on these pages: outlined, the glyph in the state's colour, the words in ink ─────────────────── */
:is(.acct-table, .acct-split) .badge { border-color: var(--line-2); background: var(--surface); color: var(--ink-2); }
:is(.acct-table, .acct-split) .badge-pos .glyph { color: var(--blue); }
:is(.acct-table, .acct-split) .badge-caut .glyph { color: var(--orange); }
:is(.acct-table, .acct-split) .badge-neg .glyph { color: var(--neg); }
:is(.acct-table, .acct-split) .badge-caut { color: var(--ink); }

/* ── [preferences] calm two-column settings rows ───────────────────────────────────────────────────────────────────
   Each sheet a split: its heading and what it is for on the left, its rows on the right with a hairline between,
   each row what it is on the left and its control on the right; one column on a narrower page. */
.acct-split { border-radius: 16px; }
.acct-split > .card-head { margin: 0; padding: var(--s-5) var(--s-5) var(--s-4); }
.acct-split > .card-head h2 { font-size: 1.0625rem; letter-spacing: -0.01em; }
.acct-split > .card-head p { max-width: 34rem; margin-top: 6px; line-height: 1.55; }
.acct-split .pref-row { padding: 18px var(--s-5); }
.acct-split .pref-text { gap: 4px; }
.acct-split .pref-text > p { line-height: 1.5; }
.acct-split .pref-control > select { max-width: 24rem; }
.acct-split .pill { height: 26px; padding: 0 10px; }
/* The chosen segment: a white sheet lifted off the grey well (look.css' switches), for radios as for links. */
.acct-split .segmented label:has(input:checked) { background: light-dark(#ffffff, #2c313b); box-shadow: 0 1px 2px rgb(11 13 18 / 0.12); color: var(--ink); font-weight: 600; }
@container page (min-width: 980px) {
    .acct-split { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); }
    .acct-split > .card-head { grid-column: 1; grid-row: 1 / span 12; flex-direction: column; align-items: flex-start; align-self: stretch; padding: var(--s-5); border-right: 1px solid var(--line); }
    .acct-split > .card-head > div:first-child { flex: none; }
    .acct-split > :not(.card-head) { grid-column: 2; min-width: 0; }
    .acct-split > .card-head + .pref-row { border-top: 0; }
}

/* The Save bar is the page's one dark panel: black (a lifted near-black in dark), its words light, Save a white
   button on it (blue in dark, as the main action). Still sticky, still the kit's .form-bar. */
.form-bar.acct-bar { border-color: var(--lk-panel-edge); border-radius: 14px; background: var(--lk-panel); color: #c7cbd3; box-shadow: 0 10px 30px rgb(11 13 18 / 0.18); }
.form-bar.acct-bar .muted { color: #9aa0ab; }
.form-bar.acct-bar .btn-primary { min-width: 6.5rem; border-color: var(--lk-on-dark); background: var(--lk-on-dark); color: var(--lk-on-dark-ink); font-weight: 600; }
.form-bar.acct-bar .btn-primary:hover { border-color: var(--lk-on-dark-hover); background: var(--lk-on-dark-hover); color: var(--lk-on-dark-ink); }
.form-bar.acct-bar :focus-visible { outline-color: var(--blue-on-black); }

/* ── [tables] Operators and the Audit log: who, what, when ──────────────────────────────────────────────────────
   A head row on the sheet's second tone, small and spaced; rows with room, a faint wash under the pointer. */
.acct-table thead th { padding-block: 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.acct-table tbody td { padding-block: 14px; }
.acct-table thead + tbody > tr:first-child > td { border-top: 0; }
.acct-table tbody tr:not(.day-row):hover > td { background: var(--surface-2); }
.acct-table .person-name { font-weight: 600; }
/* Cells sit closer, the sheet's edge keeps its room: the first and last cells only. */
.acct-table :is(th, td) { padding-inline: var(--s-3); }
.acct-table :is(th, td):first-child { padding-left: var(--s-5); }
.acct-table :is(th, td):last-child { padding-right: var(--s-5); }

/* Operators: the page's one dark panel says it at a glance; an orange dot on the figure that needs someone. */
.acct-now { display: grid; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--lk-panel-edge); border-radius: 20px; background: var(--lk-panel); color: #f2f3f5; }
.acct-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--lk-panel-line); border-radius: 14px; overflow: hidden; }
.acct-fig { display: grid; gap: 4px; margin: 0; padding: var(--s-4) var(--s-5); border-left: 1px solid var(--lk-panel-line); }
.acct-fig:first-child { border-left: 0; }
.acct-fig dt { display: inline-flex; align-items: center; gap: 8px; color: #9aa0ab; font-size: var(--fs-caption); font-weight: 500; }
.acct-fig dd { margin: 0; color: #ffffff; font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.acct-fig.is-problem dt::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.acct-now-how { color: #9aa0ab; font-size: var(--fs-caption); }
.acct-now-how code { display: inline-block; white-space: nowrap; padding: 2px 8px; border: 1px solid var(--lk-panel-line); border-radius: 6px; background: var(--lk-bar-2); color: #e8eaee; font-size: 12px; }
@container page (max-width: 608px) {
    .acct-now { padding: var(--s-4); border-radius: 16px; }
    .acct-fig { padding: var(--s-3) var(--s-4); }
    .acct-fig dd { font-size: 1.5rem; }
}
@container page (max-width: 608px) {
    /* The kit stacks the people's table; its cells keep the kit's close lines there. */
    .acct-table.stack-on-phone tbody td { padding-block: 4px; }
    .acct-table.stack-on-phone tbody tr:hover > td { background: none; }
    .acct-operators td.acct-when { grid-column: 1 / -1; }
    .acct-operators .acct-when time { color: var(--ink-3); font-size: var(--fs-caption); font-weight: 400; }
    .acct-operators .acct-when time::before { content: 'Last sign-in '; }
}
@container page (max-width: 420px) {
    .acct-figs { grid-template-columns: minmax(0, 1fr); }
    .acct-fig { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; border-left: 0; border-top: 1px solid var(--lk-panel-line); }
    .acct-fig:first-child { border-top: 0; }
}
/* An owner runs this app: the chosen black pill (a raised tone in dark); an operator the quiet outline. */
.acct-table .pill.acct-owner { border-color: var(--lk-sel-edge); background: var(--lk-sel); color: var(--lk-sel-ink); }
.acct-when time { color: var(--ink); font-weight: 500; }
.acct-when time > span { margin-left: 4px; color: var(--ink-3); font-weight: 400; }

/* The audit log: a day a heading in small capitals, its events under it by the time of day. */
.audit.acct-table .day-row th { padding: var(--s-4) var(--s-5) 6px; border-top: 1px solid var(--line); background: none; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.audit.acct-table .day-row th > span { margin-left: 6px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.02em; }
.audit.acct-table tbody > tr.day-row:first-child th { border-top: 0; }
.audit.acct-table tr.day-row + tr > td { border-top: 0; }
.audit.acct-table tbody td { padding-block: 10px; }
.acct-time { width: 5.5rem; white-space: nowrap; }
.acct-time time { color: var(--ink); font-weight: 600; }
.acct-time time > span { color: var(--ink-3); font-weight: 400; }
.audit-what { white-space: nowrap; }
.audit.acct-table .person-name { white-space: nowrap; }
/* A mark before what happened: orange when it failed or was refused, red when it removed or ended something. */
/* It hangs in the cell's left room, so every event's words start at one line. */
.acct-mark { display: inline-block; width: 8px; height: 8px; margin: 0 6px 1px -14px; border-radius: 50%; vertical-align: middle; }
.audit-what.is-failed .acct-mark { background: var(--orange); }
.audit-what.is-removed .acct-mark { border-radius: 2px; background: var(--neg); }
.audit-what.is-removed { color: var(--neg-ink); }
.acct-subject { color: var(--ink-3); font-size: var(--fs-caption); white-space: nowrap; }
.acct-subject code { margin-left: 2px; color: var(--ink-2); font-size: 12px; }
.acct-from { color: var(--ink-3); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.acct-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-4); }
.acct-key { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: var(--fs-caption); }
.acct-key::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.acct-key.is-failed::before { background: var(--orange); }
.acct-key.is-removed::before { border-radius: 2px; background: var(--neg); }
/* On a phone an event is two lines: what and when, then who, product, subject and address. */
@container page (max-width: 608px) {
    .audit.acct-table thead { display: none; }
    .audit.acct-table, .audit.acct-table tbody { display: block; }
    .audit.acct-table tr.day-row { display: block; }
    .audit.acct-table .day-row th { display: block; padding-inline: var(--s-4); }
    .audit.acct-table tr:not(.day-row) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); padding: 12px var(--s-4); border-top: 1px solid var(--line); }
    .audit.acct-table tr.day-row + tr { border-top: 0; }
    .audit.acct-table tr:not(.day-row) > td { padding: 0; border: 0; background: none; }
    .audit.acct-table .audit-what { order: 1; flex: 1 1 0; min-width: 0; white-space: normal; }
    .audit.acct-table .acct-mark { margin-left: 0; }
    .audit.acct-table .acct-time { order: 2; width: auto; text-align: right; }
    .audit.acct-table tr:not(.day-row) > td:nth-child(2) { order: 3; flex-basis: 100%; }
    .audit.acct-table tr:not(.day-row) > td:nth-child(n + 4) { order: 4; color: var(--ink-3); font-size: var(--fs-caption); }
    .audit.acct-table tr:not(.day-row) > td:nth-child(n + 4):empty { display: none; }
    .audit-filter { width: 100%; }
    .audit-filter select { flex: 1 1 9rem; }
}

/* ── [errors] the error pages: a page of their own ──────────────────────────────────────────────────────────────
   The frame's black bar with the mark; one sheet on the grey ground: the code large on a dark panel with a bar in
   the state's colour under it, then the words, the one way on (and back), and the other doors in a quiet row. */
.errp-body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; min-height: 100dvh; background: var(--canvas); }
.errp-bar { display: flex; align-items: center; gap: var(--s-3); height: 52px; padding: 0 var(--s-5); background: var(--lk-bar); box-shadow: inset 0 -1px 0 light-dark(var(--lk-bar), #1c1f26); }
.errp-mark { display: inline-flex; align-items: center; gap: 10px; color: #ffffff; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.errp-mark:hover { color: #ffffff; }
.errp-mark svg { width: 22px; height: 22px; }
.errp-mark svg circle { fill: var(--lk-bar); }
.errp-mark:focus-visible { outline-color: var(--blue-on-black); }
.errp-env { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid #3a3f4a; border-radius: 999px; color: var(--lk-bar-ink-2); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; }
.errp { display: grid; place-items: center; padding: var(--s-7) var(--s-5); }
.errp-sheet { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); width: 100%; max-width: 52rem; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px var(--shade-1), 0 18px 48px light-dark(rgb(11 13 18 / 0.06), rgb(0 0 0 / 0.35)); overflow: hidden; }
.errp-code { position: relative; display: grid; align-content: end; padding: var(--s-6) var(--s-5); background: var(--lk-panel); color: #ffffff; }
.errp-code > span { font-size: 5.5rem; font-weight: 600; line-height: 0.9; letter-spacing: -0.05em; }
/* The state's bar: blue when calm, orange when it needs you, red when it is broken. */
.errp-code::after { content: ''; position: absolute; left: var(--s-5); bottom: var(--s-5); width: 48px; height: 4px; border-radius: 2px; background: var(--blue-on-black); }
.errp-code > span { margin-bottom: var(--s-5); }
.errp-sheet.is-needs .errp-code::after { background: var(--orange); }
.errp-sheet.is-broken .errp-code::after { background: var(--neg); }
.errp-words { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-6); }
.errp-eyebrow { color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.errp-words h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -0.025em; }
.errp-text { max-width: 32rem; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.55; }
.errp-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.errp-help { color: var(--ink-3); font-size: var(--fs-caption); }
.errp-doors { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-caption); }
.errp-doors a { color: var(--accent-ink); font-weight: 500; text-decoration: none; }
.errp-doors a:hover { text-decoration: underline; }
.errp-foot { justify-content: center; gap: var(--s-1) var(--s-3); padding: var(--s-4) var(--s-5) var(--s-5); text-align: center; }
.errp-foot a { color: var(--ink-3); text-decoration: none; }
.errp-foot a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 640px) {
    .errp { align-items: start; padding: var(--s-5) var(--s-4); }
    .errp-sheet { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
    .errp-code { padding: var(--s-5) var(--s-5) var(--s-5); }
    .errp-code > span { margin-bottom: var(--s-4); font-size: 4rem; }
    .errp-words { padding: var(--s-5); }
    .errp-words h1 { font-size: 1.625rem; }
    .errp-actions .btn { flex: 1 1 auto; }
}