/* Colors, type and layout from brand/README.md. */
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Tiro Devanagari Hindi"; src: url("/fonts/tiro-devanagari.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0900-097F, U+200C-200D, U+25CC; }

:root {
  --paper: #f6f1e7;
  --indigo: #1f2160;
  --saffron: #c8621b;
  --saffron-text: #a8501a;
  --dusk: #77705f;
  --line: #ddd4c2;
  --button: var(--indigo);
  --on-button: var(--paper);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --deva: "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14163a;
    --indigo: #efe8da;
    --saffron: #e58a45;
    --saffron-text: #e58a45;
    --dusk: #a7a8c9;
    --line: #2c2f5c;
    --button: var(--saffron);
    --on-button: #14163a;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--indigo); font: 16px/1.6 var(--sans); }
main { width: 100%; max-width: 36rem; margin: 0 auto; padding: 3rem 1.25rem; }

/* The front door: one narrow column, low and to the left. */
body.door { display: grid; align-items: end; }
body.door main { max-width: 52rem; padding-bottom: min(18vh, 9rem); }
.door .stack { max-width: 21rem; display: grid; gap: 0.5rem; }

.rule { display: block; width: 2.5rem; height: 4px; border-radius: 2px; background: var(--saffron); }
.rule.small { width: 1.75rem; height: 3px; }
h1 { margin: 0.6rem 0 0; font: 400 2.75rem/1 var(--serif); letter-spacing: -0.01em; }
.deva { margin: 0; font: 400 0.9rem/1.4 var(--deva); color: var(--saffron-text); }
.lede { margin: 0.75rem 0 0; color: var(--indigo); }
.label { margin: 0 0 1rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dusk); }
.quiet { color: var(--dusk); }

form { display: grid; gap: 0.6rem; }
input {
  width: 100%; padding: 0.7rem 0.85rem; font: inherit; color: var(--indigo); background: transparent;
  border: 1px solid var(--line); border-radius: 6px;
}
input::placeholder { color: var(--dusk); }
input:focus { outline: none; border-color: var(--indigo); }
button {
  padding: 0.7rem 1rem; font: inherit; font-weight: 500; color: var(--on-button);
  background: var(--button); border: 0; border-radius: 6px; cursor: pointer;
}
button:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
button:disabled { opacity: 0.6; cursor: default; }
button.link { padding: 0; color: var(--dusk); background: none; font-weight: 400; }
button.link:hover { color: var(--indigo); }
.status { min-height: 1.6em; margin: 0.2rem 0 0; color: var(--dusk); font-size: 0.875rem; }

.bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Members' home: the agent token section. */
.section { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
h2 { margin: 0 0 0.5rem; font: 400 1.4rem/1.3 var(--serif); }
code { font-size: 0.9em; }
form.inline { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
form.inline input { flex: 1 1 12rem; }
.token { padding: 0.75rem; border: 1px solid var(--line); border-radius: 8px; word-break: break-all; font-size: 0.875rem; }
.list { padding: 0; list-style: none; color: var(--dusk); font-size: 0.9rem; }
.list li { padding: 0.4rem 0; }