:root {
  color-scheme: light dark;
  --ink: #16181d;
  --ink-quiet: #5b6270;
  --ground: #f6f6f4;
  --surface: #ffffff;
  --line: #dcdcd7;
  --accent: #1c4fd8;
  --accent-ink: #ffffff;
  --danger: #a3261f;
  --radius: 10px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceef2;
    --ink-quiet: #a0a7b4;
    --ground: #101216;
    --surface: #191c22;
    --line: #2c313a;
    --accent: #8fb0ff;
    --accent-ink: #0d1016;
    --danger: #f1857c;
  }
}

* { box-sizing: border-box; }

/* A class selector outranks the browser's own rule for the attribute, so the
   attribute is restated here. Without it a form marked hidden stays on screen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: calc(3rem + env(safe-area-inset-top, 0px)) 1rem
           calc(3rem + env(safe-area-inset-bottom, 0px));
  background: var(--ground);
  color: var(--ink);
  font: 100%/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.panel {
  margin: 0 auto;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

h1 {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 640;
}

h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  font-weight: 620;
}

.lede { margin: 0; color: var(--ink-quiet); }

.note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--ink-quiet);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.field { display: flex; flex-direction: column; gap: 0.375rem; }

.label { font-size: 0.8125rem; font-weight: 560; letter-spacing: 0.005em; }

.input {
  width: 100%;
  min-height: 44px;
  padding: 0 0.75rem;
  font: inherit;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.input-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
  text-align: center;
}

/* A code shown for reading, as the review inbox lists them. */
.code {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
}

.input:focus-visible,
.button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.button {
  min-height: 44px;
  padding: 0 1rem;
  font: inherit;
  font-weight: 560;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.button-primary { color: var(--accent-ink); background: var(--accent); }

.button-quiet {
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
}

html[data-input="pointer"] .button {
  transition: transform 100ms var(--ease-out), background-color 120ms ease;
}

html[data-input="pointer"] .button:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 160ms, 120ms;
}

/* A disabled fieldset disables the buttons in it without an attribute of their own. */
.button:disabled { cursor: progress; opacity: 0.6; }

.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-quiet);
  font-size: 0.8125rem;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }

.list li { line-height: 1.45; }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

/* What a row says may break anywhere rather than push the page wider than the screen: an address,
   or the first characters of a key, is one long word, and at the largest text size so is a date. */
.row > span { min-width: 0; overflow-wrap: anywhere; }

/* An entry's words take what its control leaves, and the control goes below them only when they
   would be squeezed to less than ten rems, which is the largest text size on a phone. */
.entry .row > span:first-child { flex: 1 1 10rem; }

.list-plain { padding-left: 0; list-style: none; gap: 0.875rem; }

/* How much of an allowance is gone. The figure beside it is the same fact in
   words, so the bar adds emphasis rather than carrying meaning on its own. */
.meter {
  height: 0.375rem;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.meter > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.meter[data-tone="warn"] > span { background: var(--danger); }

.badge {
  align-self: flex-start;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 560;
  letter-spacing: 0.005em;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
}

.button-danger { color: var(--accent-ink); background: var(--danger); }

/* A link that does what a button does, such as signing in again, looks like one. */
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* The console's lists: a fieldset for holding their controls, laid out as the page is. */
.lists { margin: 0; padding: 0; border: 0; min-width: 0; }

.lists > .card + .card { margin-top: 1rem; }

/* One passkey, installation or collection: its row, and a place below it for a step. */
.entry { display: flex; flex-direction: column; gap: 0.625rem; }

.entry-title { font-weight: 560; }

/* The page moves focus to these after the thing a person acted on has changed, or when the
   control that had it has gone. */
.entry-title:focus,
.offering:focus,
h1:focus,
h2:focus { outline: none; }

.entry-title:focus-visible,
.offering:focus-visible,
h1:focus-visible,
h2:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* An offering's entry is a block of words, so its ring sits clear of them, in the space between
   the entries and inside the card's edge. */
.offering:focus-visible { outline-offset: 6px; }

/* A question asked before a change that cannot be taken back, or the sign-in a change needs,
   in the place the change was asked for. */
.step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.step p { margin: 0; font-size: 0.875rem; line-height: 1.45; }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Each answer keeps its words on one line; a narrow screen puts the second below the first, and
   an answer wider than the screen itself, at the largest text size, wraps inside its own button. */
.actions > .button { flex: 1 1 auto; max-width: 100%; overflow-wrap: anywhere; }

.badge-quiet {
  color: var(--ink-quiet);
  background: transparent;
  border: 1px solid var(--line);
}

/* A step arrives from the row that asked for it: for pointer input only, as a press is. */
html[data-input="pointer"] .step {
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}

@starting-style {
  html[data-input="pointer"] .step { opacity: 0; transform: translateY(-4px); }
}

.status { margin: 0; min-height: 1.5rem; font-size: 0.875rem; }

.status[data-tone="error"] { color: var(--danger); }

a { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html[data-input="pointer"] .button,
  html[data-input="pointer"] .button:active:not(:disabled) {
    transition: background-color 120ms ease;
    transform: none;
  }

  html[data-input="pointer"] .step { transition: none; }
}