/* 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;
}
* { 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); }
button.link.accent { color: var(--saffron-text); }
a.button {
  display: block; padding: 0.7rem 1rem; text-align: center; text-decoration: none; font-weight: 500;
  color: var(--on-button); background: var(--button); border-radius: 6px;
}
a.button:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.signed-in { display: grid; gap: 0.6rem; }
.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; gap: 1rem; margin-bottom: 2.5rem; }

/* Members' home: the profile button and its menu. */
.profile { position: relative; }
.profile summary {
  display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.25rem;
  list-style: none; cursor: pointer; font-size: 0.9rem; font-weight: 500; border-radius: 6px;
}
.profile summary::-webkit-details-marker { display: none; }
.profile summary:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.avatar {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  font: 400 1.05rem/1 var(--serif); color: var(--paper); background: var(--indigo);
}
.profile-menu {
  position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 1; width: 15rem; padding: 0.35rem;
  display: grid; background: #fbf8f1; border: 1px solid var(--line); border-radius: 8px;
}
.profile-email { margin: 0; padding: 0.55rem 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; color: var(--dusk); border-bottom: 1px solid var(--line); }
.profile-menu button { margin-top: 0.35rem; padding: 0.6rem 0.75rem; text-align: left; font-size: 0.9rem; font-weight: 400; color: var(--indigo); background: none; }
.profile-menu button:hover { background: var(--paper); }
.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; }
.copyable { margin-top: 1.25rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 8px; }
.copyable-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dusk); }
.copyable-head .link { text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--saffron-text); }
.copyable pre { margin: 0; white-space: pre-wrap; font: 0.875rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.copyable form.inline { margin-top: 0; }
.copyable .token { margin: 0; border: 0; padding: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.05em; }

/* Invites: the invite page and the invite form, written as sentences. */
.quote { margin: 0.5rem 0 0; padding-left: 0.75rem; border-left: 2px solid var(--saffron); font: italic 400 1.2rem/1.4 var(--serif); }
.small { margin: 0; font-size: 0.875rem; }
a.accent, .accent { color: var(--saffron-text); }
.sentence { margin: 0; font: 400 1.35rem/2.1 var(--serif); }
.sentence input {
  width: auto; display: inline-block; padding: 0 0.2rem; font: 1rem/1.4 var(--sans); vertical-align: baseline;
  border: 0; border-bottom: 1px solid var(--indigo); border-radius: 0;
}
.sentence input[name="name"], .sentence input[name="label"] { width: 9.5rem; }
.sentence input[type="email"] { width: 12rem; }
.sentence input[type="number"] { width: 4rem; }
.sentence input[type="date"] { width: 9.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0; padding: 0; border: 0; }
.chips label { padding: 0.2rem 0.75rem; font-size: 0.875rem; color: var(--dusk); border: 1px solid var(--line); border-radius: 99px; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips input:checked + span { color: var(--indigo); }
.chips label:has(input:checked) { border-color: var(--indigo); color: var(--indigo); }
.chips label:has(input:focus-visible) { outline: 2px solid var(--saffron); outline-offset: 2px; }
textarea {
  width: 100%; min-height: 4.5rem; padding: 0.7rem 0.85rem; font: inherit; color: var(--indigo); background: transparent;
  border: 1px solid var(--line); border-radius: 6px; resize: vertical;
}
textarea::placeholder { color: var(--dusk); }
textarea:focus { outline: none; border-color: var(--indigo); }
.said { margin: 0; color: var(--indigo); }

/* A register: one line per person or link, name in the serif, details in small caps. */
.register { margin: 1rem 0 0; padding: 0; list-style: none; }
.register li { display: grid; gap: 0.1rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.register .name { font: 400 1.25rem/1.2 var(--serif); }
.register button.name { padding: 0; text-align: left; color: var(--indigo); background: none; font-weight: 400; }
.register .meta { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dusk); }
.register .meta button { padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--saffron-text); background: none; }
.register .register { margin: 0.4rem 0 0 1rem; }
.register .register .name { font-size: 1.05rem; }

[hidden] { display: none !important; }