[hidden] { display: none !important; } /* an element hidden by attribute stays hidden whatever else styles it */
:root {
  --paper: #f6f4ef; --card: #ffffff; --ink: #14212e; --ink-dim: #52606d; --rule: #d9d4c7;
  --maple: #935d0e; /* 5.5:1 on the card, 5.0:1 on the page: the pending label is small text */ --line: #1f6f9c; --ok: #1d7a44; --whistle: #b3261e; --focus: #1f6f9c;
  --face: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #13202e; --card: #1c2e40; --ink: #e8eef2; --ink-dim: #a9b8c4; --rule: #2c445c; --maple: #e8b25a; --line: #8fc3e6; --ok: #7fd49a; --whistle: #f26b5b; --focus: #ffe08a; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--face); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.narrow { max-width: 30rem; margin-top: 10vh; }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
p { max-width: 70ch; }
.bar { display: flex; gap: 1rem; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.bar #who { margin-left: auto; color: var(--ink-dim); }
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 16px; margin-top: 16px; }
form { display: grid; gap: .5rem; }
.grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem 1rem; align-items: end; }
.grid .wide { grid-column: 1 / -1; }
.grid > * { min-width: 0; }
.grid input, .grid select { width: 100%; }
.grid fieldset input { width: auto; }
label { display: grid; gap: 4px; color: var(--ink-dim); font-size: .9rem; }
label.check { display: flex; align-items: center; gap: .5rem; color: var(--ink); }
input, select, button { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: .5rem .7rem; min-height: 44px; }
button { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; cursor: pointer; }
button.quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
button:disabled { opacity: .4; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
fieldset { border: 1px solid var(--rule); border-radius: 8px; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
fieldset label { display: flex; align-items: center; gap: .4rem; color: var(--ink); font-size: 1rem; }
fieldset input { min-height: auto; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; }
.hint { color: var(--ink-dim); font-size: .9rem; margin: 0; }
.error { color: var(--whistle); }
.outcome { min-height: 1.5em; margin: 12px 0 0; }
.outcome[data-status="failed"] { color: var(--whistle); font-weight: 600; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.list li { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; padding: .75rem; border: 1px solid var(--rule); border-radius: 8px; }
.list .meta { color: var(--ink-dim); font-size: .9rem; }
.state { font-weight: 600; font-size: .9rem; }
.state[data-state="approved"] { color: var(--ok); }
.state[data-state="pending_approval"] { color: var(--maple); }
.state[data-state="rejected"], .state[data-state="revoked"] { color: var(--whistle); }
table.status { width: 100%; border-collapse: collapse; }
.status th { text-align: left; color: var(--ink-dim); font-weight: 400; font-size: .9rem; border-bottom: 1px solid var(--rule); padding: .4rem; }
.status td { padding: .5rem .4rem; border-bottom: 1px solid var(--rule); }
.sync-no { color: var(--whistle); font-weight: 600; }
@media (max-width: 700px) { .list li { grid-template-columns: 1fr; } table.status { font-size: .9rem; } }
.code { font-size: 2rem; font-weight: 700; letter-spacing: .08em; margin: .75rem 0 0; font-variant-numeric: tabular-nums; }
a.button { display: inline-block; background: var(--ink); color: var(--paper); border-radius: 8px; padding: .65rem 1rem; font-weight: 600; text-decoration: none; }