/* ─────────────────────────────────────────────────────────────
   Citely — App Design System
   Extends marketing site tokens; adds app-specific components
   ───────────────────────────────────────────────────────────── */

/* ── Numeric display token ──────────────────────────────────────
   Rule: Garamond is for editorial headings. Numbers are product.
   All stat values, scores, counts, countdowns use Inter with
   tabular numerals so digits are crisp, fixed-width, and sharp.
   ─────────────────────────────────────────────────────────────── */
.plx .num {
  font-family: var(--font-body);          /* Inter — not Garamond */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.02em;
}

@keyframes plx-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* PIN shake — wrong entry */
@keyframes plx-shake {
  0%, 100% { transform: translateX(0); }
  18%      { transform: translateX(-9px); }
  36%      { transform: translateX(9px); }
  54%      { transform: translateX(-6px); }
  72%      { transform: translateX(6px); }
  90%      { transform: translateX(-2px); }
}

/* Carousel (big-wheel) entrance — used for muster→onboarding transition */
@keyframes plx-carousel-in {
  from { transform: translateY(-100vh); }
  to   { transform: translateY(0); }
}

/* Step-to-step transition inside onboarding — softer drop from above */
@keyframes plx-step-in {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

:root {
  /* Brand */
  --brand: #0F766E;
  --brand-hover: #0A5E57;
  --brand-deep: #064E47;
  --brand-light: #F0FAF9;
  --gold: #B8943A;
  --gold-light: #F5EAD4;

  /* Surfaces */
  --bg: #F9F7F4;
  --bg-alt: #F2EFE9;
  --surface: #FFFFFF;
  --ink: #0F0E0C;
  --ink-alt: #1A1815;

  /* Text */
  --body: #4A4640;
  --muted: #6B6460;
  --hairline: #E5E0D8;
  --hairline-strong: #D4CEC2;

  /* Status */
  --success: #15803D;
  --success-light: #E7F4EC;
  --alert: #B45309;
  --alert-light: #FBF1E3;
  --critical: #B91C1C;
  --critical-light: #FBEAEA;

  /* Type */
  --font-display: system-ui, -apple-system, "Inter", sans-serif;
  --font-body: system-ui, -apple-system, "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(15, 14, 12, 0.04), 0 1px 1px rgba(15, 14, 12, 0.03);
  --shadow-md: 0 4px 12px rgba(15, 14, 12, 0.06), 0 1px 3px rgba(15, 14, 12, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 14, 12, 0.10), 0 4px 12px rgba(15, 14, 12, 0.06);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --accent: #0F766E;
}

/* ───────────────────── Base ───────────────────── */

.plx, .plx * { box-sizing: border-box; }
.plx {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
  background:
    radial-gradient(ellipse 80% 65% at 50% 45%, rgba(15,118,110,0.14) 0%, transparent 100%),
    var(--bg);
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.plx h1, .plx h2, .plx h3, .plx h4 { font-family: var(--font-body); color: var(--ink); font-weight: 600; letter-spacing: -0.03em; margin: 0; line-height: 1.15; }
.plx p { margin: 0; }
.plx button { font-family: inherit; cursor: pointer; }

/* ───────────────────── Mono label ───────────────────── */

.plx .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.plx .label-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: plx-pulse 2s ease-in-out infinite;
}
@keyframes plx-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ───────────────────── Badges ───────────────────── */

.plx .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plx .badge-alpha { background: #FBEAEA; color: #9B0E22; }
.plx .badge-beta  { background: #E8EDF7; color: #003087; }
.plx .badge-gamma { background: #E0F4FB; color: #0078A8; }
.plx .badge-success  { background: var(--success-light); color: var(--success); }
.plx .badge-alert    { background: var(--alert-light); color: var(--alert); }
.plx .badge-critical { background: var(--critical-light); color: var(--critical); }
.plx .badge-neutral  { background: var(--bg-alt); color: var(--body); }
.plx .badge-tier { background: var(--gold); color: var(--ink); }

.plx .glyph {
  font-family: var(--font-mono);
  font-style: normal;
}

/* ───────────────────── Buttons ───────────────────── */

.plx .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  cursor: pointer;
}
.plx .btn-primary { background: var(--brand); color: #fff; }
.plx .btn-primary:hover { background: var(--brand-hover); }
.plx .btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.plx .btn-outline:hover { background: var(--brand-light); }
.plx .btn-ghost { background: transparent; color: var(--body); }
.plx .btn-ghost:hover { background: var(--bg-alt); }
.plx .btn-critical { background: var(--critical); color: #fff; }
.plx .btn-critical-outline { background: transparent; color: var(--critical); border-color: var(--critical); }
.plx .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 6px; }
.plx .btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
.plx .btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ───────────────────── Cards ───────────────────── */

.plx .card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.plx .card-pad { padding: 24px; }
.plx .card-dark {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
}

/* ───────────────────── Form fields ───────────────────── */

.plx .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plx .field-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.plx .input {
  height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.plx .input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,118,110,0.15); }
.plx .input-dark {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}
.plx .input-dark::placeholder { color: rgba(255,255,255,0.45); }
.plx textarea.input { height: auto; padding: 12px 14px; min-height: 80px; font-family: inherit; line-height: 1.5; resize: vertical; }
.plx select.input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%236B6460' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }

/* Chrome autofill — prevent the browser's blue/yellow tinted overlay */
.plx .input:-webkit-autofill,
.plx .input:-webkit-autofill:hover,
.plx .input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--ink);
  transition: background-color 5000s ease-in-out 0s;
}

/* Dark inputs (.input-dark) also match .input above, so the white inset would
   paint them solid white on dark forms (e.g. onboarding). Override to keep them
   dark with light text. Must follow the rule above (equal specificity, later wins). */
.plx .input-dark:-webkit-autofill,
.plx .input-dark:-webkit-autofill:hover,
.plx .input-dark:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--ink-alt) inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}

/* ───────────────────── Sigil ───────────────────── */

.plx .sigil {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Hexagon sigil component is rendered as SVG inline (see logo.jsx) */

/* ───────────────────── Sidebar nav ───────────────────── */

.plx .app-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100%;
}
.plx .sidebar {
  background: var(--ink);
  color: rgba(255,255,255,0.92);
  display: flex;
  flex-direction: column;
  padding: 22px 0;
  position: relative;
  overflow: hidden;
}
.plx .sidebar::before {
  /* subtle texture */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(15,118,110,0.12), transparent 50%);
  pointer-events: none;
}
.plx .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 24px;
  position: relative;
}
.plx .sidebar-brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: #fff;
  letter-spacing: -0.01em;
}
.plx .sidebar-section {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 12px 20px 8px;
  position: relative;
}
.plx .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; position: relative; }
.plx .sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 12px;
  border-radius: 7px;
  color: rgba(255,255,255,0.80);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
  position: relative;
}
.plx .sidebar-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.plx .sidebar-item.active { background: rgba(15,118,110,0.22); color: #fff; }
.plx .sidebar-item.active::before {
  content: "";
  position: absolute;
  left: -10px; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--brand);
  border-radius: 0 2px 2px 0;
}
.plx .sidebar-item svg { flex-shrink: 0; opacity: 0.9; }
.plx .sidebar-foot {
  margin-top: auto;
  padding: 0 16px;
  position: relative;
}
.plx .vault-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9px;
  padding: 12px 14px;
}
.plx .vault-card-row { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 500; }
.plx .vault-card-row svg { color: var(--brand); }
.plx .vault-card-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); margin-top: 4px; text-transform: uppercase; }
.plx .vault-tier { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; background: var(--gold); color: var(--ink); font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; margin-top: 8px; }
.plx .sidebar-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  height: 36px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent;
  color: rgba(255,255,255,0.80);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.plx .sidebar-lock:hover { background: rgba(185,28,28,0.18); color: #fff; border-color: rgba(185,28,28,0.4); }

/* ───────────────────── Top header ───────────────────── */

.plx .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.plx .topbar {
  height: 64px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 16px;
  flex-shrink: 0;
}
.plx .topbar-title { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.03em; font-size: 22px; color: var(--ink); }
.plx .topbar-spacer { flex: 1; }
.plx .topbar-actions { display: flex; align-items: center; gap: 10px; }
.plx .topbar-iconbtn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: transparent; border: 1px solid var(--hairline);
  color: var(--body); cursor: pointer;
  position: relative;
}
.plx .topbar-iconbtn:hover { background: var(--bg-alt); }
.plx .topbar-iconbtn .bell-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; background: var(--critical); border-radius: 50%; border: 2px solid var(--surface); }
.plx .topbar-vault {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--body);
}
.plx .topbar-vault svg { color: var(--brand); }

.plx .content {
  flex: 1;
  overflow: auto;
  padding: 32px 40px 48px;
  min-height: 0;
}

/* ───────────────────── Section heading ───────────────────── */

.plx .section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.plx .section-head h2 { font-size: 22px; }
.plx .section-head .label { font-size: 10.5px; }

/* ───────────────────── Tabs ───────────────────── */

.plx .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); padding: 0; margin-bottom: 20px; }
.plx .tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: transparent; border: 0;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.plx .tab:hover { color: var(--body); }
.plx .tab.active { color: var(--ink); border-bottom-color: var(--brand); }
.plx .tab .count { background: var(--bg-alt); color: var(--body); padding: 1px 7px; border-radius: 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.plx .tab.active .count { background: var(--brand-light); color: var(--brand); }

/* ───────────────────── Misc utilities ───────────────────── */

.plx .row { display: flex; align-items: center; gap: 12px; }
.plx .col { display: flex; flex-direction: column; gap: 12px; }
.plx .between { display: flex; align-items: center; justify-content: space-between; }
.plx .grow { flex: 1; }
.plx .muted { color: var(--muted); }
.plx .mono { font-family: var(--font-mono); }
.plx .display { font-family: var(--font-display); }
.plx .center { display: flex; align-items: center; justify-content: center; }

.plx .divider { height: 1px; background: var(--hairline); margin: 20px 0; }
.plx .divider-v { width: 1px; align-self: stretch; background: var(--hairline); }

/* Severity bar */
.plx .severity {
  display: inline-flex; align-items: center; gap: 8px;
}
.plx .severity-bar {
  width: 48px; height: 5px; border-radius: 3px;
  background: var(--bg-alt);
  position: relative; overflow: hidden;
}
.plx .severity-bar::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--sev, 50%);
  background: var(--sev-color, var(--brand));
  border-radius: 3px;
}
.plx .severity-text { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

/* ───────────────────── Vault auth screens (dark) ───────────────────── */

.plx-vault {
  height: 100%; width: 100%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  position: relative;
  overflow: hidden;
}
.plx-vault::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(15,118,110,0.18), transparent 50%),
    radial-gradient(circle at 15% 85%, rgba(184,148,58,0.10), transparent 45%);
  pointer-events: none;
}
.plx-vault::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.plx-vault-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }
.plx-vault-head { padding: 28px 36px; display: flex; align-items: center; justify-content: space-between; }
.plx-vault-brand { display: flex; align-items: center; gap: 10px; }
.plx-vault-brand-name { font-family: var(--font-display); font-size: 22px; color: #fff; }
.plx-vault-link { color: rgba(255,255,255,0.65); font-size: 13px; text-decoration: none; }
.plx-vault-link:hover { color: #fff; }
.plx-vault-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 36px 60px; }
.plx-vault-foot { padding: 20px 36px; display: flex; justify-content: space-between; align-items: center; }
.plx-vault-foot-text { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.plx-vault h1 { color: #fff; font-family: var(--font-display); }
.plx-vault .vault-text-primary { color: rgba(255,255,255,1); }
.plx-vault .vault-text-secondary { color: rgba(255,255,255,0.80); }
.plx-vault .vault-text-muted { color: rgba(255,255,255,0.60); }

.plx-vault .vault-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  padding: 40px;
  width: 100%;
  max-width: 460px;
}

/* Vault-scoped button overrides — dark background requires ghost contrast fix */
.plx-vault .btn-ghost { color: rgba(255,255,255,0.85) !important; }
.plx-vault .btn-ghost:hover { background: rgba(255,255,255,0.08) !important; }

/* Vault-scoped primary button — must override absent .plx scope (BL-003) */
.plx-vault .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.plx-vault .btn-primary { background: var(--brand); color: #fff; }
.plx-vault .btn-primary:hover { background: var(--brand-hover); }
.plx-vault .btn[disabled] { opacity: 0.4; pointer-events: none; }

/* Vault inputs — style the browser default inputs on dark background */
.plx-vault input[type="email"],
.plx-vault input[type="password"],
.plx-vault input[type="text"] {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 8px;
  padding: 0 12px;
  height: 42px;
  width: 100%;
  font-size: 14px;
  color: #1a1a1a;
  outline: none;
  box-sizing: border-box;
}
.plx-vault input[type="email"]:focus,
.plx-vault input[type="password"]:focus,
.plx-vault input[type="text"]:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.20);
}

/* ───────────────────── Console feed (dark) ───────────────────── */

.console {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  padding: 16px 0;
  font-family: var(--font-mono);
  font-size: 12px;
}
.console-row {
  display: grid;
  grid-template-columns: 88px 88px 1fr;
  gap: 12px;
  padding: 6px 18px;
  align-items: center;
}
.console-time { color: rgba(255,255,255,0.60); font-size: 11px; letter-spacing: 0.04em; }
.console-tag {
  display: inline-block;
  padding: 1px 7px;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 3px;
  text-align: center;
  font-weight: 500;
}
.console-tag.t-alpha { background: rgba(15,118,110,0.35); color: #62D9CB; }
.console-tag.t-beta  { background: rgba(184,148,58,0.30); color: #E5C77A; }
.console-tag.t-gamma { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85); }
.console-tag.t-lex   { background: rgba(255,255,255,0.10); color: #fff; }
.console-msg { color: rgba(255,255,255,0.90); font-size: 11.5px; }

/* ───────────────────── Scrollbar (just inside content) ───────────────────── */
.plx .content::-webkit-scrollbar { width: 8px; }
.plx .content::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 4px; }
.plx .content::-webkit-scrollbar-track { background: transparent; }