/* The yigraf brand foundation, shared by every page this server hands to a human.
 *
 * Kept in one file on purpose: three pages each carrying their own copy of the palette is exactly how
 * a console drifts away from its own marketing site. Anything here is true of ALL of them — page-local
 * layout stays inline in the page. The source of truth for these values is landing/index.html, which
 * is what yigraf.app serves.
 *
 * There is no light mode, and that is a decision rather than an omission: the site has none, and the
 * void IS the brand. A light console would be a second identity nobody asked for. */

:root{
  /* ---- ground ---- */
  --void:#03060A;        /* the page */
  --void-2:#070C13;      /* inset: inputs, ledger cells */
  --panel:#0A121B;       /* raised: cards */
  --hair:#16232F;        /* every seam, 1px */

  /* ---- signal ---- */
  --cyan:#26D8ED;        /* the accent. glows. */
  --cyan-core:#A6F7FC;   /* the accent, lit from inside — hover and emphasis */
  --cyan-dim:#0E7A87;    /* the accent, receding */

  /* ---- text ---- */
  --bright:#EAF6FA;      /* headings, values that matter */
  --fog:#9DB2C6;         /* body */
  --fog-dim:#586A7C;     /* labels, metadata, the said-once */

  /* ---- states ---- */
  --amber:#F4B85A;       /* pay attention: a secret shown once, a thing you can't undo */
  --ok:#3BE8A5;          /* confirmed */
  --danger:#FF7A7A;      /* revoke, remove, failed */

  --display:"Space Grotesk", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-card:14px;
  --r-ctl:8px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--void);
  color:var(--fog);
  font-family:var(--body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}

/* ---- the ambient field ------------------------------------------------------------------------
 * One cyan glow and a whisper of grid — the site's signature. Two strengths: the default is the
 * landing's, for the single-card entry pages that are hero-shaped (login, invite, link). `body.app`
 * damps it and pulls it to the top, so it never sits behind a list of data. */

body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{
  background:
    radial-gradient(60% 55% at 72% 38%, rgba(38,216,237,0.10), transparent 70%),
    radial-gradient(50% 40% at 18% 92%, rgba(38,216,237,0.05), transparent 70%);
}
body::after{
  background-image:
    linear-gradient(rgba(150,190,210,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,190,210,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 40%, #000 30%, transparent 100%);
          mask-image:radial-gradient(75% 75% at 50% 40%, #000 30%, transparent 100%);
}
body.app::before{
  background:radial-gradient(70% 45% at 80% -5%, rgba(38,216,237,0.075), transparent 70%);
}
body.app::after{
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(#000, transparent 62%);
          mask-image:linear-gradient(#000, transparent 62%);
  opacity:.6;
}
body > *{position:relative;z-index:1}

/* ---- the mark ---------------------------------------------------------------------------------- */

.wordmark{display:flex;align-items:center;gap:11px;text-decoration:none}
.wordmark svg{width:24px;height:24px;flex:none;filter:drop-shadow(0 0 7px rgba(38,216,237,0.55))}
.wordmark b{
  font-family:var(--mono);
  font-weight:700;
  font-size:16px;
  letter-spacing:0.02em;
  color:var(--bright);
}
.wordmark .sub{color:var(--cyan)}

/* ---- type -------------------------------------------------------------------------------------- */

h1,h2,h3{font-family:var(--display);color:var(--bright);font-weight:500;letter-spacing:-0.01em}
h1{font-size:21px;margin:0 0 6px;font-weight:700}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--cyan-core)}
.mono{font-family:var(--mono)}
code{font-family:var(--mono)}

/* The site's eyebrow: mono, tracked out, uppercase, behind a short glowing rule. Every group header
 * in the console is one of these — it is the one label style the brand actually has. */
.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 10px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:500;
}
.eyebrow::before{content:"";width:20px;height:1px;flex:none;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.eyebrow .n{color:var(--fog-dim);letter-spacing:0.06em}

/* Metadata and machine facts. Everything a machine produced — slugs, ids, codes, roles, timestamps —
 * is mono; everything a person reads as a sentence is not. */
.meta{font-family:var(--mono);font-size:12px;color:var(--fog-dim);letter-spacing:0.01em}
.note{font-size:12.5px;color:var(--fog-dim);margin:8px 0 0;max-width:66ch}
.empty{font-family:var(--mono);font-size:12.5px;color:var(--fog-dim)}
.err{font-family:var(--mono);font-size:12.5px;color:var(--danger);min-height:17px;margin-top:10px}

/* ---- surfaces ---------------------------------------------------------------------------------- */

.card{
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-card);
  padding:20px 22px;
  margin-bottom:16px;
}
.card > h2{font-size:15px;margin:0 0 14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.card > h2 .sub{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:0.02em;
  color:var(--fog-dim);
}

/* The status pill from the site header, reused for every role and every short machine fact. */
.chip{
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.03em;
  color:var(--cyan-core);
  background:rgba(38,216,237,0.07);
  border:1px solid rgba(38,216,237,0.22);
  border-radius:100px;
  padding:2px 10px;
  white-space:nowrap;
}
.chip.quiet{color:var(--fog-dim);background:rgba(10,18,27,0.6);border-color:var(--hair)}

.dot{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}

/* ---- controls ---------------------------------------------------------------------------------- */

label{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--fog-dim);
  margin:0 0 6px;
}
input,select{
  width:100%;
  background:var(--void-2);
  border:1px solid var(--hair);
  border-radius:var(--r-ctl);
  color:var(--bright);
  font-family:var(--mono);
  font-size:13.5px;
  padding:10px 12px;
  transition:border-color .2s, box-shadow .2s;
}
input::placeholder{color:var(--fog-dim)}
input:focus,select:focus{
  outline:none;
  border-color:rgba(38,216,237,0.55);
  box-shadow:0 0 0 3px rgba(38,216,237,0.12);
}
input:disabled{color:var(--fog-dim);cursor:not-allowed}
select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--fog-dim) 50%),linear-gradient(135deg,var(--fog-dim) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:32px;
}

button{
  font-family:var(--mono);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.01em;
  cursor:pointer;
  border:0;
  border-radius:var(--r-ctl);
  padding:10px 18px;
  color:#04121A;
  background:var(--cyan);
  white-space:nowrap;
  transition:transform .12s ease, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
button:hover:not(:disabled){background:var(--cyan-core);box-shadow:0 0 22px rgba(38,216,237,0.45);transform:translateY(-1px)}
button:active:not(:disabled){transform:translateY(0)}
button:disabled{opacity:.45;cursor:default}

button.ghost{
  background:transparent;
  color:var(--fog);
  border:1px solid var(--hair);
  font-weight:500;
}
button.ghost:hover:not(:disabled){
  background:transparent;
  color:var(--cyan-core);
  border-color:rgba(38,216,237,0.45);
  box-shadow:none;
  transform:none;
}

/* Destructive, and deliberately the quietest thing on the row: revoking is one click from a list. */
button.link{
  background:none;
  color:var(--fog-dim);
  padding:3px 8px;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border:1px solid transparent;
}
button.link:hover:not(:disabled){
  background:rgba(255,122,122,0.08);
  border-color:rgba(255,122,122,0.3);
  color:var(--danger);
  box-shadow:none;
  transform:none;
}

/* ---- rows -------------------------------------------------------------------------------------- */

.item{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--hair)}
.item:first-child{border-top:0;padding-top:2px}
.item .grow{flex:1;min-width:0}
.item .name{font-size:14px;color:var(--bright)}
.item .meta{word-break:break-all;margin-top:2px}

/* ---- a secret, shown once ----------------------------------------------------------------------
 * Amber is the site's "genuine disagreement" colour — the one thing on the page you must not skim.
 * A value the server will never show again is the console's version of that. */
.codebox{
  display:flex;gap:10px;align-items:center;
  background:rgba(244,184,90,0.06);
  border:1px solid rgba(244,184,90,0.32);
  border-radius:var(--r-ctl);
  padding:11px 12px;
  margin-top:10px;
}
.codebox .val{
  flex:1;min-width:0;
  font-family:var(--mono);
  font-size:12.5px;
  color:#F7E7CB;
  word-break:break-all;
}
.codebox button.ghost{border-color:rgba(244,184,90,0.35);color:var(--amber)}
.codebox button.ghost:hover:not(:disabled){color:#FFD9A0;border-color:rgba(244,184,90,0.7)}

/* ---- misc -------------------------------------------------------------------------------------- */

[hidden],.hidden{display:none !important}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
input:focus-visible,select:focus-visible{outline:none}

@media (prefers-reduced-motion:reduce){
  .dot{animation:none}
  button:hover:not(:disabled){transform:none}
}