:root {
  color-scheme: light;
  --bg: #e9edf1;
  --surface: #ffffff;
  --sunken: #f3f5f8;
  --ink: #18202b;
  --muted: #5a6675;
  --line: #cbd3dc;
  --token: #1f5fbf;
  --token-ink: #ffffff;
  --anon: #c98a12;
  --anon-ink: #7a5000;
  --ok: #1e7a46;
  --err: #b3261e;
  --focus: #1f5fbf;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", ui-monospace, Consolas, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #12171d;
    --surface: #1a2129;
    --sunken: #141a20;
    --ink: #e4e9ef;
    --muted: #98a3b0;
    --line: #2d3743;
    --token: #4f8ae6;
    --token-ink: #0c1420;
    --anon: #e0a73a;
    --anon-ink: #f0c26a;
    --ok: #5bc48a;
    --err: #f2867d;
    --focus: #7fb0ff;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
}

/* Buttons */

.btn {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.6; cursor: progress; }

.btn-primary { width: 100%; background: var(--ink); color: var(--surface); }
.btn-token { background: var(--token); color: var(--token-ink); }
/* Outlined on purpose: this request carries no credentials */
.btn-anon { background: transparent; color: var(--anon-ink); border: 2px dashed var(--anon); padding: calc(0.6rem - 1px) calc(1.15rem - 1px); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--muted); }

/* Loading and sign-in screens */

.screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.loading { color: var(--muted); }

.signin-box {
  width: min(100%, 26rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2.25rem 2rem 2rem;
}
.signin-box h1 { margin: 0 0 0.5rem; font-size: 1.5rem; line-height: 1.25; font-weight: 600; }
.signin-box p { margin: 0 0 1.5rem; color: var(--muted); }

.error {
  margin: 1rem 0 0;
  color: var(--err);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* App */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.75rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 600; }
.who { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--muted); }
.roles { display: flex; gap: 0.35rem; }
.role {
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--token);
  border-radius: 999px;
  color: var(--ink);
}

.workspace {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  display: grid;
  gap: 1.75rem;
}

.request label { display: block; margin-bottom: 0.4rem; font-weight: 600; }

.request-row {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.request-row:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

.base {
  max-width: 50%;
  padding: 0.6rem 0.75rem;
  background: var(--sunken);
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#path {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.9rem;
}
#path:focus { outline: none; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.9rem; }

/* Results */

.results { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) {
  .results { grid-template-columns: 1fr 1fr; }
}

.result {
  min-width: 0;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.result[data-mode="token"] { border-top: 4px solid var(--token); }
.result[data-mode="anon"] { border-top: 4px dashed var(--anon); }

.result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.result h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }

.status {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }

.meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.9rem;
  margin: 0.9rem 0;
  font-size: 0.875rem;
}
.meta dt { color: var(--muted); }
.meta dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }

pre.body {
  margin: 0;
  max-height: 26rem;
  overflow: auto;
  padding: 0.85rem 1rem;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre;
}
pre.body:empty { display: none; }

/* Token details */

.claims {
  padding: 0.9rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.claims summary { cursor: pointer; font-weight: 600; }
.claims summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.claims-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.9rem 0; }
#copy-status { color: var(--muted); font-size: 0.875rem; }

@media (max-width: 30rem) {
  .topbar, .workspace { padding-left: 1rem; padding-right: 1rem; }
  .base { display: none; }
}