/* Clave web app. One stylesheet, no build step, no framework — the whole
   surface is a handful of pages and this is smaller than the config a
   bundler would need.

   Same design as the landing page and deliberately so: ink on warm paper,
   Newsreader over Work Sans, rules doing the dividing that boxes and
   shadows usually do, mono for labels. The tokens below are the landing
   page's, and the faces come from internal/typeface, so the front door and
   the app cannot end up looking like two products.

   Where it differs, it differs because this is a utility surface rather
   than a shop window: the measure is narrow, the type scale is flat, and
   colour is allowed to carry meaning — status badges and the revoke button
   say something a monochrome page could not. */

:root {
  color-scheme: light dark;

  --paper: #faf9f6;
  --paper-sunk: #f3f1ea;
  --ink: #1b1a17;
  --ink-soft: #46443e;
  --muted: #6f6c64;
  --rule: #e2e0d8;
  --rule-strong: #cecabe;

  /* Functional colour only. Everything else on this surface is ink. */
  --error: #a4302a;
  --ok: #3f7a4f;
  --wait: #8a6512;

  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --text: 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --maxw: 36rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141310;
    --paper-sunk: #1c1b17;
    --ink: #f2f0ea;
    --ink-soft: #d0cdc4;
    --muted: #9b968c;
    --rule: #2f2c26;
    --rule-strong: #423e35;

    --error: #e08b84;
    --ok: #79b98a;
    --wait: #d7ae5c;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 380;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Header */

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.brand {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--ink);
}

.account {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.875rem;
}

.account .email { color: var(--muted); }

.account form { margin: 0; }

/* Layout */

main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.75rem 1.5rem 4rem;
}

.stack { display: grid; gap: 2.75rem; }

h1 {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.45rem;
  text-wrap: balance;
}

/* Section headings are the landing page's eyebrow: a label in the margin
   of the page's attention, not a second voice. */
h2 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

.lede { margin: 0; color: var(--ink-soft); text-wrap: pretty; }

/* The sign-in surfaces.

   Still a bounded thing rather than a bare column — these pages are one
   decision each and the border says where the decision is — but a hairline
   on the page's own ground, not a raised card. */

.card {
  padding: 2rem 0 0;
  border-top: 2px solid var(--ink);
}

.card h1 { margin-bottom: 0.55rem; }

/* Forms */

form { margin: 1.75rem 0 0; }

label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

input[type="email"], input[type="text"] {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

input::placeholder { color: var(--muted); opacity: 1; }

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

button[type="submit"], .button-link {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.7rem 1.35rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 120ms ease;
}

button[type="submit"]:hover, .button-link:hover { opacity: 0.82; }

/* Qualified with the element so it out-specifies button[type="submit"]
   above — sign-out is a form submit too, and would otherwise render as a
   second primary button in the header. */
button.linkish {
  margin: 0;
  padding: 0 0 2px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
}

button.linkish:hover { color: var(--ink); border-bottom-color: currentColor; opacity: 1; }

.error {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  color: var(--error);
}

.fineprint {
  margin: 1.35rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* Account panel — a ledger, not a box */

.panel { padding: 0; }

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}

.row:first-child { border-top: 1px solid var(--rule); }

.label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.value { font-variant-numeric: tabular-nums; }

/* Sites and tokens — rule-divided rows, the landing page's spec sheet */

.sites, .tokens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.sites li, .tokens li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

.sites li:last-child, .tokens li:last-child { border-bottom: 1px solid var(--rule); }

.site-main, .token-main { display: grid; gap: 0.2rem; min-width: 0; }

.site-name, .token-name {
  font-weight: 550;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}

.site-host, .token-meta {
  font-size: 0.875rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

a.site-host {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

a.site-host:hover { color: var(--ink); border-bottom-color: currentColor; }

.tokens form { margin: 0; }

.muted { color: var(--muted); }

/* Status reads as a label with a lit dot rather than a pill: the colour is
   the whole message, and a filled capsule spends more attention than the
   word deserves in a list you scan. */
.badge {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.badge::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  translate: 0 -0.1em;
  flex: none;
}

.badge-active { color: var(--ok); }
.badge-provisioning { color: var(--wait); }

.empty {
  margin: 0;
  padding: 1.25rem 0;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-wrap: pretty;
}

/* Grant screen */

/* The confirmation code is the whole defence of the agent flow, so it is
   the largest thing on the page — not a detail line under the fold. */
.code-check {
  margin-top: 1.85rem;
  padding: 1.35rem 1.25rem;
  text-align: center;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.code-check .label { display: block; }

.code {
  margin: 0.65rem 0 0.8rem;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.code-check .fineprint { margin-top: 0; }

.hint {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Refuse must be as reachable as Grant — same size and position, told
   apart by weight rather than by being tucked away as a text link. */
button.secondary {
  color: var(--ink);
  background: none;
  border-color: var(--rule-strong);
}

button.secondary:hover { border-color: var(--ink); opacity: 1; }

button.danger {
  flex: none;
  margin-top: 0;
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

button.danger:hover { color: var(--error); border-color: var(--error); opacity: 1; }

#tokens .error { margin-bottom: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}