/* ============================================================================
   Nescio ID — design system  ·  "cryptographic / infrastructure"
   Dark, engineered, mono-accented. One signal color (electric cyan) on near-black.
   Shared across nescio.dev, dashboard.nescio.dev, admin.nescio.dev.
   Canonical source: design/nescio.css — copied verbatim into each app's public/.
   ============================================================================ */

/* TOKENS:START — generated from design/tokens.json by design/build.mjs; edit tokens there, then run `node design/build.mjs` */
:root {
  color-scheme: dark;
  --bg: #0c0a0e;
  --surface: #16131b;
  --surface-2: #1e1a25;
  --surface-3: #272130;
  --line: #2a2333;
  --line-2: #3a3145;
  --ink: #f1ece7;
  --ink-soft: #cbc1c6;
  --muted: #a89ba2;
  --faint: #6f6470;
  --signal: #ff8a6b;
  --signal-2: #ffb59c;
  --signal-deep: #e0613f;
  --signal-dim: rgba(255,138,107,0.14);
  --signal-line: rgba(255,138,107,0.34);
  --players: #ff8a6b;
  --blocked: #1fa5c4;
  --blocked-ui: #f2a65a;
  --good: #7bd6a0;
  --danger: #f0685f;
  --danger-dim: rgba(240,104,95,0.12);
  --r1: 4px;
  --r2: 7px;
  --r3: 12px;
  --gap: 20px;
  --maxw: 72rem;
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --display: "Fraunces", "Hanken Grotesk", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "JetBrains Mono", monospace;
}
/* TOKENS:END */

* { box-sizing: border-box; }

body {
  margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg);
  background-image:
    radial-gradient(1200px 480px at 50% -10%, rgba(51,198,240,.06), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  -webkit-font-smoothing: antialiased; line-height: 1.55;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 40%, var(--bg) 92%); }
body > * { position: relative; z-index: 1; }

a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--signal-2); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1rem; color: var(--ink-soft); }

.eyebrow, .label { font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.eyebrow .tick { color: var(--signal); }
.mono { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.brand .mark { width: 1.7rem; height: 1.7rem; border-radius: 6px; font-size: 0; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffb59c'/%3E%3Cstop offset='1' stop-color='%23e0613f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='8' fill='url(%23g)'/%3E%3Cpath d='M12.07 25.74A10.5 10.5 0 1 1 19.93 25.74' fill='none' stroke='%232a1109' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M13.38 22.49A7 7 0 1 1 18.62 22.49' fill='none' stroke='%232a1109' stroke-width='2.2' stroke-linecap='round'/%3E%3Crect x='12.9' y='14.85' width='6.2' height='2.3' rx='1.15' fill='%232a1109'/%3E%3C/svg%3E") center/contain no-repeat; box-shadow: 0 0 0 1px var(--signal-line), 0 4px 16px rgba(51,198,240,.35); }
.brand .sub { color: var(--muted); font-weight: 500; }

.tag { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal-2); background: var(--signal-dim); border: 1px solid var(--signal-line); border-radius: 999px; padding: .22rem .6rem; }
.badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .75rem; font-weight: 600; padding: .16rem .5rem; border-radius: var(--r1); border: 1px solid var(--line-2); color: var(--ink-soft); }
.badge.good { color: var(--good); border-color: rgba(53,192,138,.4); background: rgba(53,192,138,.1); }
.badge.warn { color: var(--blocked-ui); border-color: rgba(229,161,68,.4); background: rgba(229,161,68,.1); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--sans); font-size: .92rem; font-weight: 600; cursor: pointer;
  padding: .62rem 1.05rem; border-radius: var(--r2); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); text-decoration: none; transition: .14s ease; }
.btn:hover { border-color: var(--signal-line); color: var(--ink); background: var(--surface-3); }
.btn-primary { background: linear-gradient(150deg, var(--signal-2), var(--signal-deep)); color: #041318; border: none; box-shadow: 0 0 0 1px var(--signal-line), 0 6px 20px rgba(51,198,240,.28); }
.btn-primary:hover { color: #041318; filter: brightness(1.07); }
.btn-ghost { background: transparent; }
.btn-sm { padding: .4rem .7rem; font-size: .84rem; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); }
.card-h h2, .card-h h3 { font-family: var(--display); }
.card-b { padding: 1.3rem; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 820px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: 1.1rem 1.2rem 1.2rem; overflow: hidden; }
.tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--signal-line), transparent); }
.tile .label { display: block; margin-bottom: .55rem; }
.tile .stat { font-family: var(--mono); font-size: 2.05rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.tile .stat.players { color: var(--signal-2); }
.tile .stat.blocked { color: var(--blocked-ui); }
.tile .foot { margin-top: .35rem; font-size: .8rem; color: var(--muted); }

table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th, table.data td { text-align: left; padding: .72rem 1.3rem; border-bottom: 1px solid var(--line); }
table.data th { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.owner { font-family: var(--mono); font-size: .8rem; color: var(--ink-soft); }
.c-players { color: var(--signal-2); font-weight: 600; }
.c-blocked { color: var(--blocked-ui); font-weight: 600; }

label.field { display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .45rem; }
input.inp { width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink); padding: .72rem .85rem; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r2); }
input.inp::placeholder { color: var(--faint); }
input.inp:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-dim); }

.code { font-family: var(--mono); font-size: .84rem; color: var(--signal-2); background: #05080d; border: 1px solid var(--line-2); border-radius: var(--r2); padding: .85rem 1rem; word-break: break-all; position: relative; }
.code .k { color: var(--ink-soft); }

header.nav { position: sticky; top: 0; z-index: 20; background: rgba(8,10,15,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
header.nav .nav-in { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.nav-actions { display: flex; align-items: center; gap: .7rem; }
.who { font-family: var(--mono); font-size: .82rem; color: var(--ink-soft); }

.rule { display: flex; align-items: center; gap: .8rem; color: var(--faint); margin: 1.4rem 0; }
.rule::before, .rule::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.rule span { font-family: var(--mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2.2rem 0 1.4rem; }
.pagehead h1 { font-size: 1.7rem; }

.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .axis { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }

.center-card { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(30rem, 94vw); }

/* ── mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  /* the header can't fit brand tags + email + actions on one phone row: hide the
     email (non-essential on mobile) and let the row wrap instead of overflowing. */
  header.nav .nav-in { height: auto; min-height: 56px; padding: .45rem 0; flex-wrap: wrap; gap: .45rem .6rem; }
  .who { display: none; }
  .pagehead { margin: 1.6rem 0 1.1rem; }
  /* let card headers + inline field rows wrap instead of clipping controls */
  .card-h { flex-wrap: wrap; }
  .field-row { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  /* wide data tables scroll horizontally within their card rather than pushing
     the whole page sideways. */
  table.data { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

.fonts { }


/* ── Browser surfaces the design system owns (craft + a11y) ── */
::selection { background: rgba(51,198,240,.28); color: var(--ink); }
input:focus, textarea:focus, select:focus { caret-color: var(--signal); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a4759; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ── Loading shimmer for stat values ── */
@keyframes nesc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton { color: transparent !important; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 200% 100%; animation: nesc-shimmer 1.4s ease-in-out infinite; border-radius: var(--r1); }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }