/* The console's styles. Colours and fonts are the light theme of
   docs/design/tokens.json (copied; the console has no build step). */
:root {
  --surface-ground: hsl(270, 8%, 88%);
  --surface-raised: hsl(270, 8%, 90%);
  --surface-sunken: hsl(270, 8%, 86%);
  --surface-edge: hsl(270, 8%, 78%);
  --ink: hsl(270, 16%, 20%);
  --ink-muted: hsl(270, 8%, 36%);
  --accent: #5b3596;
  --accent-ink: #ffffff;
  --accent-tint: hsla(264, 48%, 40%, 0.12);
  --status-good: #23693f;
  --status-warning: #9e3e09;
  --status-critical: #b42b2b;
  --status-good-tint: hsla(145, 50%, 40%, 0.14);
  --status-warning-tint: hsla(24, 80%, 45%, 0.14);
  --shadow-raised-sm: 4px 4px 8px hsla(270, 20%, 55%, 0.4), -4px -4px 8px hsla(0, 0%, 100%, 0.9);
  --radius-sm: 12px;
  --radius-md: 18px;
  --font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface-ground); color: var(--ink); font: 15px/1.45 var(--font); }
a { color: var(--accent); }
h1 { font-size: 24px; line-height: 30px; font-weight: 800; margin: 0 0 16px; }
h2 { font-size: 18px; font-weight: 800; margin: 24px 0 8px; }
.muted { color: var(--ink-muted); }
.top { display: flex; align-items: center; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--surface-edge); background: var(--surface-raised); flex-wrap: wrap; }
.brand { font-weight: 800; color: var(--ink); text-decoration: none; margin-inline-end: auto; }
.frame { display: flex; gap: 24px; padding: 24px; max-width: 1280px; margin: 0 auto; }
.frame.narrow { max-width: 480px; }
nav { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
nav a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 700; }
nav a[aria-current="page"] { background: var(--accent-tint); color: var(--accent); }
main { flex: 1; min-width: 0; }
.card { background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-raised-sm); padding: 16px 20px; margin: 0 0 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface-sunken); border: 1px solid var(--surface-edge); border-radius: var(--radius-sm); padding: 8px 12px; min-height: 40px; }
input:focus, select:focus, textarea:focus, button:focus, a:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
button, .button { font: inherit; font-weight: 700; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius-sm); padding: 8px 16px; min-height: 40px; cursor: pointer; text-decoration: none; display: inline-block; }
button.secondary { background: var(--surface-sunken); color: var(--ink); border: 1px solid var(--surface-edge); }
button.danger { background: var(--status-critical); }
button.link { background: none; color: var(--accent); padding: 0; min-height: 0; }
form.inline { display: inline; margin: 0; }
.flash { background: var(--status-good-tint); color: var(--status-good); padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 700; }
.error { background: var(--status-warning-tint); color: var(--status-critical); padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 700; }
.secret { font-size: 16px; letter-spacing: 0.08em; word-break: break-all; }
.qr { align-self: flex-start; background: #fff; padding: 8px; border-radius: var(--radius-sm); }
.tiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.tile { display: block; font-weight: 800; text-decoration: none; color: var(--ink); }
table { width: 100%; border-collapse: collapse; background: var(--surface-raised); border-radius: var(--radius-md); overflow: hidden; }
th, td { text-align: start; padding: 8px 12px; border-bottom: 1px solid var(--surface-edge); vertical-align: top; }
th { font-size: 13px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.table-wrap { overflow-x: auto; margin-bottom: 16px; }
.num { text-align: end; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--surface-sunken); font-size: 13px; font-weight: 700; }
.pill.premium { background: var(--accent-tint); color: var(--accent); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.facts dt { color: var(--ink-muted); }
dl.facts dd { margin: 0; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
@media (max-width: 720px) {
  .frame { flex-direction: column; padding: 16px; }
  nav { flex-direction: row; flex-wrap: wrap; }
}
nav.tabs { flex-direction: row; flex-wrap: wrap; margin-bottom: 16px; }
.button.secondary { background: var(--surface-sunken); color: var(--ink); border: 1px solid var(--surface-edge); }