/* Accounts and admin pages. Additions only; tokens and base components live in site.css. */

.auth-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); max-width: 520px; }
.auth-form .field input { width: 100%; }

input[type="email"], input[type="password"], input[type="number"] {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; min-height: 40px; max-width: 100%;
}
.field.has-error input { border-color: var(--loss); }
.field-error { font-size: 14px; color: var(--ink); padding-left: var(--space-2); border-left: 3px solid var(--loss); }

.flash { margin-bottom: var(--space-6); }
.notice p + p { margin-top: var(--space-2); }
.one-time-secret { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; user-select: all; }

.account-facts { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; }
.account-facts:first-child { margin-top: 0; }
.account-facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.account-facts > div:first-child { border-top: 0; padding-top: 0; }
.account-facts dt { font-size: 14px; color: var(--ink-2); }
.account-facts dd { margin: 0; }
@media (min-width: 600px) { .account-facts > div { grid-template-columns: 220px minmax(0, 1fr); } }

/* nav: log out is a POST form, styled to sit with the links */
.nav-logout { display: inline; margin: 0; }
.nav-logout button {
  font: inherit; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer;
  vertical-align: baseline; /* a button's padding moves it, unlike an inline link's */
}
.nav-logout button:hover { color: var(--ink); text-decoration: underline; }

/* admin: people */
.people-list { list-style: none; margin: 0; padding: 0; }
.person { padding: var(--space-5) 0; border-top: 1px solid var(--hairline); }
.person:first-child { border-top: 0; padding-top: 0; }
.person:last-child { padding-bottom: 0; }
.person-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.person-name { margin: 0; }
.person-name .secondary { margin-left: var(--space-1); }
.person > .small { margin: var(--space-1) 0 0; }
.person-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-4) var(--space-5); margin-top: var(--space-4); font-size: 15px; }
.control-group { min-width: 0; }
.control-group > * + * { margin-top: var(--space-2); }
.control-label { margin: 0; font-size: 14px; color: var(--ink-2); }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.flag-form { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); margin: 0; }
.limits-form { display: grid; grid-template-columns: minmax(0, 1fr) 80px; gap: var(--space-2) var(--space-3); align-items: center; margin: 0; }
.limits-form label { font-size: 14px; color: var(--ink-2); }
.limits-form input { width: 100%; min-height: 34px; padding: 4px 8px; }
.limits-form .button-quiet { grid-column: 1 / -1; justify-self: start; }
.account-actions form { margin: 0; }
.button-small { font-size: 14px; padding: 6px 12px; }
.button-danger { color: var(--loss); }
.badge-waiting { border-color: color-mix(in srgb, var(--watch) 55%, transparent); color: var(--ink); }
.badge-off { border-color: color-mix(in srgb, var(--loss) 45%, transparent); color: var(--ink); }

/* admin: tapes and audit tables */
.admin-table, .audit-table { font-size: 14px; }
.admin-table td, .admin-table tbody th { vertical-align: top; }
.audit-table td.num { text-align: left; }