/* Delve tokens (tokens.json, version 1), transcribed by hand for the portal
   (openspec change add-player-portal, design D9). The light set is the
   default; the dark set applies when the user agent prefers it and no theme
   has been chosen, and again when the page's script sets data-theme="dark".
   Values are the kit's; change them there first. */

:root {
  --surface: #f5f5f5;
  --surface-raised: #ffffff;
  --ink: #141414;
  --ink-muted: #5c5c5c;
  --line: #d9d9d9;
  --control-border: #767676;
  --rubric: #a11c1c;
  --on-rubric: #ffffff;
  --danger: var(--rubric);
  --focus-ring: var(--rubric);
  --map-blue: #1f4e8c;
  --gold: #7a5c12;
  --green: #2f6b2f;

  --font-serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #141414;
    --surface-raised: #1e1e1e;
    --ink: #ededed;
    --ink-muted: #a3a3a3;
    --line: #2e2e2e;
    --control-border: #8a8a8a;
    --rubric: #e06c6c;
    --on-rubric: #141414;
    --map-blue: #7fa6dc;
    --gold: #d1a83a;
    --green: #7fc27f;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface: #141414;
  --surface-raised: #1e1e1e;
  --ink: #ededed;
  --ink-muted: #a3a3a3;
  --line: #2e2e2e;
  --control-border: #8a8a8a;
  --rubric: #e06c6c;
  --on-rubric: #141414;
  --map-blue: #7fa6dc;
  --gold: #d1a83a;
  --green: #7fc27f;
  color-scheme: dark;
}

/* Delve - the Labyrinth player portal's one stylesheet.
   Served from the accounts service as /portal.css. Depends only on the
   custom properties in tokens.css (colours, spacing, radii, font families).
   No JavaScript, no external requests, nothing beyond default-src 'self'. */

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

html { background: var(--surface); color: var(--ink); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-serif); margin: 0; color: var(--ink); }
h1 { font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 22px; line-height: 28px; font-weight: 700; }
p  { margin: 0; }
p + p { margin-top: var(--space-4); }

a { color: var(--rubric); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.muted { color: var(--ink-muted); }
.small { font-size: 14px; line-height: 20px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Shell ------------------------------------------------------------- */

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.shell-header {
  display: flex; align-items: baseline; gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 28px;
  color: var(--ink); text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
.nav { display: flex; align-items: baseline; gap: var(--space-4); margin-left: auto; flex-wrap: wrap; }
.nav a { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.nav form { display: inline; }
.nav .btn-link {
  padding: 0; border: 0;
  font-size: 14px; line-height: 20px; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.nav .btn-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: auto; }
.shell-main {
  flex: 1; width: 100%; max-width: 480px; margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}
.shell-main.wide { max-width: 720px; }
.shell-main > * + * { margin-top: var(--space-8); }
.shell-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line);
  font-size: 14px; line-height: 20px; color: var(--ink-muted);
}

/* Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  font: inherit; font-weight: 600; line-height: 24px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--control-border);
  background: var(--surface-raised); color: var(--ink);
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--rubric); border-color: var(--rubric); color: var(--on-rubric); }
.btn-primary:hover { border-color: var(--ink); }
.btn-danger { background: var(--surface-raised); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--rubric); color: var(--on-rubric); border-color: var(--rubric); }
.btn-link {
  background: none; border-color: transparent; padding-left: 0; padding-right: 0;
  color: var(--rubric); text-decoration: underline; text-underline-offset: 2px; font-weight: 400;
}
.btn-link:hover { border-color: transparent; text-decoration-thickness: 2px; }
.btn-block { display: block; width: 100%; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.actions.end { justify-content: flex-end; }

/* Switch ------------------------------------------------------------- */

.switch {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 400;
  padding: var(--space-1) 0; margin: calc(var(--space-1) * -1) 0;
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--ink-muted);
  cursor: pointer; white-space: nowrap;
}
.switch[hidden] { display: none; }
.switch-label { display: inline-grid; }
.switch-label::after {
  content: attr(data-label); font-weight: 600;
  height: 0; overflow: hidden; visibility: hidden;
}
.switch[aria-checked="false"] .switch-label:first-child,
.switch[aria-checked="true"] .switch-label:last-child { color: var(--ink); font-weight: 600; }
.switch-track {
  flex: none; width: var(--space-8); height: var(--space-4);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.switch:hover .switch-track { border-color: var(--ink); }
.switch-thumb {
  display: block; width: 50%; height: 100%;
  background: var(--ink);
  transition: transform 120ms ease-out;
}
.switch[aria-checked="true"] .switch-thumb { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) { .switch-thumb { transition: none; } }
@media (forced-colors: active) { .switch-thumb { background: ButtonText; } }
.shell-footer .switch { margin-left: var(--space-4); }

/* Fields ------------------------------------------------------------- */

.form > * + * { margin-top: var(--space-4); }
.form .actions { margin-top: var(--space-6); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset > * + * { margin-top: var(--space-4); }
legend { padding: 0; font-weight: 600; font-size: 14px; line-height: 20px; margin-bottom: var(--space-2); }

.field > * + * { margin-top: var(--space-1); }
.label { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.hint  { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-top: var(--space-2); }
.error { font-size: 14px; line-height: 20px; color: var(--danger); font-weight: 600; margin-top: var(--space-2); }

.input, .select {
  display: block; width: 100%;
  font: inherit; line-height: 24px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--ink);
}
.input::placeholder { color: var(--ink-muted); }
.input:hover, .select:hover { border-color: var(--ink); }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); }
.input.code { font-family: var(--font-mono); font-size: 24px; line-height: 32px; letter-spacing: 0.08em; text-align: center; }
.select { appearance: none; -webkit-appearance: none; padding-right: var(--space-8); background-image: none; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: var(--space-4); top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); pointer-events: none;
}
.check { display: flex; gap: var(--space-2); align-items: flex-start; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--rubric); }

/* Notices ------------------------------------------------------------ */

.notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--ink);
}
.notice > b, .notice > strong { font-weight: 600; }
.notice-info    { border-color: var(--map-blue); }
.notice-info > b    { color: var(--map-blue); }
.notice-success { border-color: var(--green); }
.notice-success > b { color: var(--green); }
.notice-warning { border-color: var(--gold); }
.notice-warning > b { color: var(--gold); }
.notice-danger  { border-color: var(--danger); }
.notice-danger > b  { color: var(--danger); }

/* Tables ------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  text-align: left; vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.table th { font-size: 14px; line-height: 20px; font-weight: 600; }
.table thead th { border-bottom: 1px solid var(--control-border); }
.table td.muted, .table td .muted { color: var(--ink-muted); }
.table td.actions-cell { text-align: right; white-space: nowrap; }
.table .btn-link { padding-top: 0; padding-bottom: 0; line-height: 24px; }

/* Key-value ---------------------------------------------------------- */

.card {
  padding: var(--space-6);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.kv { margin: 0; display: grid; grid-template-columns: max-content 1fr; column-gap: var(--space-6); row-gap: var(--space-3); }
.kv dt { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); padding-top: 2px; }
.kv dd { margin: 0; }
.kv dd .btn-link { padding: 0; line-height: 24px; }

/* Code --------------------------------------------------------------- */

.code-block {
  font-family: var(--font-mono); font-size: 15px; line-height: 22px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--ink);
  word-break: break-all; user-select: all;
}
.code-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2);
  margin: 0; padding: 0; list-style: none;
}
.code-grid li {
  font-family: var(--font-mono); font-size: 15px; line-height: 22px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised); text-align: center;
}
.qr {
  display: block; width: 200px; height: 200px;
  padding: var(--space-3);
  border: 1px solid var(--control-border);
  background: #ffffff; color: #141414; /* a QR code is always black on white, in both themes */
}

/* Status pages ------------------------------------------------------- */

.status { text-align: left; }
.status > * + * { margin-top: var(--space-4); }
.status .kicker { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Portal addition (openspec change add-player-portal, design D9): hides an
   element until Alpine has initialised it. The one rule not in Delve. */
[x-cloak] { display: none !important; }