/* Theorem's subtle panel. Inter is self-hosted; its notice is /static/fonts/OFL.txt. */
@font-face {
  font-family: Inter;
  src: url('/static/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --bg: #f7f7f5;
  --surface: #fff;
  --ink: #37352f;
  --muted: #72716b;
  --line: #deddd9;
  --panel-shadow: 0 3px 16px rgb(0 0 0 / .06);
  --hover: #f5f5f2;
  --accent: #2076cb;
  --error: #b42318;
  --ok: #267044;
  --duration: 120ms;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #171717; --surface: #1e1e1d; --ink: #ececea; --muted: #a7a6a0; --line: #42423e; --panel-shadow: 0 4px 20px rgb(0 0 0 / .2); --hover: #292927; --accent: #79b8e3; --error: #ff958a; --ok: #8bce9e; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 32px; background: var(--bg); color: var(--ink); font: 13px/1.6 Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; }
.site-header { flex-shrink: 0; width: min(600px, calc(100% - 32px)); margin: 0 auto 28px; text-align: center; }
main { flex-shrink: 0; width: min(520px, calc(100% - 32px)); margin: 0 auto; padding: 28px; border-radius: 8px; background: var(--surface); box-shadow: var(--panel-shadow); }
main:has(.signin) { width: min(390px, calc(100% - 32px)); }
main:has(.account) { width: min(540px, calc(100% - 32px)); }
main:has(.approval) { width: min(600px, calc(100% - 32px)); }
/* Approval disclosures grow downwards without recentering the page or shifting its width. */
html:has(.approval) { scrollbar-gutter: stable; }
body:has(.approval) { justify-content: flex-start; }
h1 { font-size: 24px; line-height: 1.25; letter-spacing: -.6px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
h2 { font-size: 13px; margin: 28px 0 12px; font-weight: 600; }
p { margin: 0 0 16px; overflow-wrap: anywhere; }
section { margin-block-end: 24px; }
section:last-child { margin-block-end: 0; }
label { display: block; margin-block-end: 16px; font-size: 12px; font-weight: 500; }
input, textarea, select { display: block; width: 100%; margin-block-start: 6px; padding: 8px 10px; min-height: 36px; font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); }
input[type=checkbox], input[type=radio] { display: inline-block; width: auto; min-height: auto; margin-inline-end: 6px; }
button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 7px 12px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; margin: 0; margin-inline-end: 8px; margin-block-end: 8px; transition: background var(--duration) cubic-bezier(.2,0,0,1); }
button:hover:not(:disabled) { background: var(--hover); }
button.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 88%, var(--bg)); }
button:disabled { opacity: .5; cursor: default; }
.signin button { width: 100%; margin: 0; }
.signin p { font-size: 12px; margin-block-end: 10px; }
.signin a { color: var(--muted); }
summary { cursor: pointer; color: var(--muted); font-size: 12px; }
summary:hover { color: var(--ink); }
.password-option, .signin-help { text-align: center; margin-block-start: 16px; }
.password-option summary, .signin-help summary { list-style: none; display: inline-block; }
.password-option summary::-webkit-details-marker, .signin-help summary::-webkit-details-marker { display: none; }
.password-option form { margin-block-start: 20px; text-align: start; }
.signin-help { margin-block-start: 28px; }
.signin-help p { margin: 12px 0 0; }
.signin .error { margin-block-start: 16px; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 6px 8px; margin: 0 -8px; border-radius: 5px; transition: background var(--duration); }
.account-row:hover { background: var(--hover); }
.account-row strong { font-weight: 400; overflow-wrap: anywhere; min-width: 0; }
.account-row button { flex-shrink: 0; min-height: 32px; padding: 5px 10px; margin: 0; font-size: 12px; }
/* What waits for the person's decision, above their account. */
.waiting { margin: 0 0 20px; padding-block-end: 16px; border-block-end: 1px solid var(--line); }
.waiting h2 { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.waiting-list { list-style: none; margin: 0; padding: 0; }
.waiting-list li { padding-block: 10px; }
.waiting-list li + li { border-block-start: 1px solid var(--line); }
.waiting-list a { display: block; color: var(--ink); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.waiting-list a:hover { text-decoration: underline; }
.waiting-list .muted { display: block; font-size: 12px; margin-block-start: 2px; }
.request-summary { font-size: 22px; font-weight: 600; line-height: 1.35; letter-spacing: -.4px; margin: 0; overflow-wrap: anywhere; text-align: start; }
/* A request reads top to bottom: who asks, what happens, its scope, whether it can be undone, their
   reason, then the decision, with why and the time left under it. The exact plan waits folded. */
.request-asker { margin: 0 0 6px; color: var(--muted); }
.request-details { margin: 14px 0 0; padding: 0; list-style: none; }
.request-details li { padding-block: 1px; overflow-wrap: anywhere; }
.request-outcome { margin: 14px 0 0; font-weight: 500; }
blockquote.request-reason { margin: 16px 0 0; padding-inline-start: 12px; border-inline-start: 2px solid var(--line); color: var(--muted); white-space: pre-wrap; }
.request-needs { margin: 16px 0 0; }
.approval > .approval-actions, .approval > .request-receipt { margin-block-start: 24px; }
.request-receipt { padding: 12px 14px; border-radius: 5px; background: var(--hover); }
.request-receipt p { margin: 0; }
.request-receipt p + p { margin-block-start: 4px; font-size: 13px; }
.request-receipt.is-approved > p:first-child { color: var(--ok); font-weight: 500; }
.request-receipt.is-denied > p:first-child { font-weight: 500; }
.request-foot { margin: 10px 0 0; font-size: 12px; }
.plan-details { margin-block: 28px 0; padding-block-start: 16px; border-block-start: 1px solid var(--line); }
.plan-details dl { margin-block: 16px 0; }
.plan-details pre { max-height: 420px; overflow: auto; padding: 12px; background: var(--hover); border-radius: 5px; }
.approval-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.approval-actions form { margin: 0; }
.approval-actions button { margin: 0; }
.approval .error { margin-block-start: 16px; }
.approval summary {
  display: block;
  min-height: 30px;
  padding-block: 5px;
  list-style: none;
  line-height: 20px;
  border-radius: 3px;
  transition: color 140ms ease;
}
.approval .summary-end { white-space: nowrap; }
.approval summary::-webkit-details-marker { display: none; }
.approval summary::marker { content: ""; }
.approval .summary-end::after {
  content: "";
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-inline-start: 8px;
  vertical-align: 2px;
  border-right: 1.25px solid currentColor;
  border-bottom: 1.25px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  transition: transform 180ms cubic-bezier(.2, 0, 0, 1);
}
.approval details[open] > summary .summary-end::after { transform: rotate(45deg); }
.approval details { overflow-anchor: none; }

/* Animate the disclosure's actual height; no fades or delayed page recentering. */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  .approval details::details-content {
    interpolate-size: allow-keywords;
    block-size: 0;
    overflow: clip;
    transition: block-size 180ms cubic-bezier(.2, 0, 0, 1),
                content-visibility 180ms allow-discrete;
  }
  .approval details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .approval summary, .approval .summary-end::after,
  .approval details::details-content { transition: none; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
dl { display: grid; grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); column-gap: 24px; row-gap: 12px; margin-block: 24px; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
ul, ol { padding-inline-start: 20px; }
li { margin-block: 8px; overflow-wrap: anywhere; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; }
.error { color: var(--error); }
.ok { color: var(--ok); }
.muted { color: var(--muted); font-size: 12px; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
@media (max-width: 420px) {
  body { padding-block: 24px; }
  .site-header { margin-block-end: 24px; }
  h1 { font-size: 22px; }
  main { padding: 24px 20px; }
  .profile-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  dl { grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; }
  .approval-actions button { padding-inline: 10px; }
  .request-summary { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { :root { --duration: 0ms; } }

/* The authenticator key as a QR code, under the step that names it. */
.qr { margin: 0.75rem 0 0.25rem; }
.qr svg { display: block; width: 200px; height: 200px; }