/* ==========================================================================
   NameKept — mnexweb theme
   --------------------------------------------------------------------------
   The palette, surfaces and typographic rules are lifted from the studio site
   (KnexWallet/portfolio-site, app/live-code.css + app/globals.css): deep
   indigo ground lit by two radial sources, scanline film over the top, hard
   1px borders with no radius, and monospace for every label.

   Loaded LAST on every page. Each page still carries its own inline <style>
   from the previous theme, so this file re-points the shared custom
   properties and then overrides the component surfaces those pages build.
   ========================================================================== */

:root {
  /* ---- ground ---- */
  --nk-void: #08001c;
  --nk-ink: #050013;
  --nk-panel: rgba(8, 0, 31, .96);
  --nk-chrome: #100036;
  --nk-rule: #342279;
  --nk-edge: #6154ff;

  /* ---- light ---- */
  --nk-text: #dceeff;
  --nk-label: #c9bfff;
  --nk-dim: #9d8fe0;
  --nk-dimmer: #7768b4;
  --nk-faint: #584a8f;

  /* ---- accents ---- */
  --nk-cyan: #64c8ff;
  --nk-pink: #ff35b5;
  --nk-rose: #ff52c5;
  --nk-lemon: #fff46b;
  --nk-violet: #b273ff;
  --nk-ember: #ff5c3f;

  --nk-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --nk-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- repoint the legacy variables every page already consumes ---- */
  --bg: #08001c;
  --bg2: #100036;
  --accent: #7c5cff;
  --accent2: #64c8ff;
  --neon: #64ffb0;
  --yellow: #fff46b;
  --white: #dceeff;
  --muted: #9d8fe0;
  --dark: #050013;
  --red: #ff4d78;
  --card: rgba(8, 0, 31, .96);
  --cardborder: #6154ff;
}

/* ---------------------------------------------------------------- ground -- */
html { background: var(--nk-void); }

body {
  /* Two radial sources over near-black indigo — the studio site's signature. */
  background:
    radial-gradient(circle at 14% 18%, rgba(68, 35, 255, .42), transparent 30%),
    radial-gradient(circle at 85% 72%, rgba(255, 37, 177, .2), transparent 32%),
    var(--nk-void) !important;
  color: var(--nk-text);
  font-family: var(--nk-sans);
}

/* Scanline film. Fixed and inert so it sits over the ground but under content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255, 255, 255, .08) 4px);
}

body > * { position: relative; z-index: 1; }

/* The old three.js constellation belongs to the light theme. */
#bg3d { display: none !important; }

::selection { background: var(--nk-pink); color: #fff; }

/* ------------------------------------------------------------- nav bar --- */
/* Deliberately NOT called .topnav. auth.js and askai.js both look up
   `.topnav` to inject the account chip and the token meter, and both bail out
   when it is absent — so renaming the landmark is what retires the sign-in and
   subscription UI, with no dead click handlers and no edits to those files.

   The bar is a direct child of <body> on every page, never inside `.wrap`:
   that container is 1060px on some pages, 1180 and 1280 on others, so a nav
   nested inside it changed position page to page and the bar appeared to jump
   on navigation. Owning its own width is what makes it identical everywhere. */
.nk-nav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 28px;
  height: 74px;
  border-bottom: 1px solid var(--nk-rule);
  font-family: var(--nk-mono);
}

/* Every item is sized by its own content, so a link must never change width
   between states. Borders are always present (transparent when idle) and the
   active weight never changes — only colour and the inset rule move. */
.nk-nav__links a { font-weight: 400 !important; }

.nk-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
  text-decoration: none;
  white-space: nowrap;
}

/* rabbit.png is a black silhouette with a white eye on transparent ground.
   Inverting flips exactly those two: white body, black eye. Alpha is untouched
   by invert(), so the transparent background stays transparent. */
.nk-nav__brand img {
  height: 30px;
  width: auto;
  filter: invert(1);
}
.nk-nav__brand .d { color: var(--nk-cyan); }
.nk-nav__brand .m { color: #fff; }
.nk-nav__brand .tm { color: var(--nk-dim); font-size: .38em; vertical-align: super; font-weight: 700; }

.nk-nav__links { display: flex; align-items: center; gap: 4px; }

.nk-nav__links a {
  position: relative;
  padding: 9px 13px;
  color: var(--nk-label);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .18s, border-color .18s, background .18s;
}

.nk-nav__links a:hover {
  color: #fff;
  border-color: var(--nk-edge);
  background: rgba(97, 84, 255, .12);
}

/* Current page: a lit underline rather than a filled pill — the studio site
   marks state with a rule, not a shape. */
.nk-nav__links a.here {
  color: #fff;
  border-color: var(--nk-edge);
  background: rgba(97, 84, 255, .18);
  box-shadow: inset 0 -2px 0 var(--nk-pink);
}

@media (max-width: 900px) {
  .nk-nav {
    height: auto;
    padding: 12px 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .nk-nav__brand { margin-right: 0; }
  .nk-nav__links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nk-nav__links::-webkit-scrollbar { display: none; }
  .nk-nav__links a { flex: none; }
}

/* --------------------------------------------------------------- icons --- */
/* Emoji were replaced with inline Lucide (MIT) glyphs. They inherit colour and
   scale with their line, so an icon inside a ribbon, a button and a body line
   all sit correctly without per-site overrides. */
.nki {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -.14em;
  stroke-width: 2;
}

/* Wherever an icon leads a label, keep one consistent gap. */
.ribbon, .badge, .stateline, .big, .nomarkup, .trust span, .bwait {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}

.ribbon { display: flex; }

/* The favourite toggle is an icon button; the star should fill its box. */
.iconb .nki { width: 1.05em; height: 1.05em; vertical-align: -.16em; }
.iconb.on .nki { color: var(--nk-lemon); }

/* ------------------------------------------------------------ wordmark --- */
/* The previous theme painted the page light, so half the brand and every
   utility label was near-black. On the void those disappear entirely. `.d`,
   `.m` and `.tm` are the brand spans, used by both the nav lockup and the
   hero wordmark. */
.d { color: var(--nk-cyan) !important; -webkit-text-fill-color: var(--nk-cyan) !important; }
.m { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.tm { color: var(--nk-dim) !important; -webkit-text-fill-color: var(--nk-dim) !important; }

.nk-nav__brand { color: #fff; }
.nk-nav__brand .d { color: var(--nk-cyan) !important; }

/* Hero lockup: "Name" reads in the cyan/violet wash, "Kept" in solid white. */
.logo .d, .hero .d, h1 .d {
  background: linear-gradient(100deg, var(--nk-cyan), var(--nk-violet)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Utility strips that were authored black-on-white. */
.exlabel { color: var(--nk-label) !important; opacity: 1 !important; }

.trust, .trust span, .trust a { color: var(--nk-dim) !important; }
.trust b, .trust .g { color: #fff !important; }
.trust .ico, .trust svg { color: var(--nk-cyan) !important; }

/* Anything still riding the old near-black ink. */
[style*="color:#0a0a0f"], [style*="color: #0a0a0f"] { color: #fff !important; }

/* Every remaining run of body copy that was authored dark-on-white. Emphasis
   inside each goes to full white so the hierarchy the original design had —
   muted sentence, bright keyword — survives the inversion. */
.tagline, .rescount, .empty, .bhead, .bwait, .fine, .sub, .altsub, .chip.plus {
  color: var(--nk-dim) !important;
}

.tagline b, .rescount .ai, .empty b, .altsub b, .sub b, .fine b,
h1, h2, h3, .panel h1, .panel h2 {
  color: #fff !important;
}

/* Dark-on-bright chips are correct as authored and must stay dark: .bhead .kw
   sits on neon, and the ribbons sit on their own fills. */
.bhead .kw { color: #04210a !important; }

/* .kwn was dark green on a translucent black pill — that pill read as white on
   the old light page and reads as near-black here, so the count vanished. */
.kwn {
  background: rgba(97, 84, 255, .22) !important;
  border: 1px solid var(--nk-rule) !important;
  color: var(--nk-label) !important;
  border-radius: 0 !important;
}

/* The blend-result pills were white cards on a white page. */
.althit {
  background: rgba(16, 0, 54, .8) !important;
  border: 1px solid var(--nk-rule) !important;
  border-radius: 0 !important;
  color: var(--nk-text) !important;
}

.althit:hover { border-color: var(--nk-edge) !important; }

.ex.kwclear { border-color: var(--nk-rule) !important; opacity: 1 !important; color: var(--nk-dimmer) !important; }

/* ---------------------------------------------------------- typography --- */
.wrap, .page { position: relative; z-index: 1; }

h1, h2, h3 { letter-spacing: -.05em; }

.tagline, .sub, .lead {
  color: var(--nk-dim);
}

/* Small caps-y mono labels, the studio site's connective tissue. */
.eyebrow, .kicker, .meta, .nkc-page, .nkc-fig span, .metaline {
  font-family: var(--nk-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- surfaces -- */
/* Everything the old theme drew as a rounded translucent card becomes a hard
   panel: square, 1px indigo edge, inner glow, sitting on the void. */
.card,
.bsec,
.nkc-head,
.brow,
.w3sec,
.panel,
.box,
.result,
.tile {
  border-radius: 0 !important;
  background: var(--nk-panel) !important;
  border: 1px solid var(--nk-rule) !important;
  box-shadow: inset 0 0 60px rgba(84, 47, 255, .09) !important;
  color: var(--nk-text);
}

.card { box-shadow: 0 0 0 1px #170064, 0 28px 90px rgba(53, 0, 255, .28), inset 0 0 70px rgba(60, 23, 255, .1) !important; }

.brow {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--nk-rule) !important;
  box-shadow: none !important;
  background: transparent !important;
  transition: background .18s;
}

.brow:hover { background: rgba(97, 84, 255, .1) !important; }

.bsec { padding: 0 !important; }

/* Ribbons on the verdict card read as terminal tags, not stickers. */
.ribbon {
  border-radius: 0 !important;
  font-family: var(--nk-mono) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- type --- */
.name, .bn, .nkc-title { color: #fff; }
.tld { color: var(--nk-cyan) !important; }
.meta, .blurb, .nkc-id { color: var(--nk-dim) !important; }
.dm b { color: var(--nk-label) !important; }
.y { color: var(--nk-lemon) !important; }
.hot { color: var(--nk-rose) !important; }

.nkc-fig b { color: #fff; font-family: var(--nk-mono); }

/* --------------------------------------------------------------- badges -- */
.badge {
  border-radius: 0 !important;
  font-family: var(--nk-mono) !important;
  letter-spacing: .1em !important;
  border: 1px solid currentColor !important;
  background: transparent !important;
}

.badge.av { color: #64ffb0 !important; }
.badge.tk { color: var(--nk-rose) !important; }

/* -------------------------------------------------------------- controls-- */
.pbtn, .bcta, .go, .cta, .nk-main, button.solid {
  border-radius: 0 !important;
  font-family: var(--nk-mono) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}

.pbtn.buy, .bcta.claim, .nk-main {
  background: var(--nk-edge) !important;
  border: 1px solid var(--nk-edge) !important;
  color: #fff !important;
  box-shadow: 0 0 22px rgba(97, 84, 255, .38) !important;
}

.pbtn.buy:hover, .bcta.claim:hover, .nk-main:hover {
  background: var(--nk-pink) !important;
  border-color: var(--nk-pink) !important;
  box-shadow: 0 0 26px rgba(255, 53, 181, .45) !important;
}

.pbtn.lease, .bcta.back {
  background: transparent !important;
  border: 1px solid #64ffb0 !important;
  color: #64ffb0 !important;
}

.iconb {
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid var(--nk-rule) !important;
  color: var(--nk-dim) !important;
}

.iconb:hover, .iconb.on { border-color: var(--nk-lemon) !important; color: var(--nk-lemon) !important; }

/* --------------------------------------------------------------- search -- */
/* The search field is the page's primary instrument: keep it square, ruled and
   lit from the edge like the studio site's console. */
.searchbox, .searchbar, .sbar, form.search {
  border-radius: 0 !important;
  background: var(--nk-ink) !important;
  border: 1px solid var(--nk-edge) !important;
  box-shadow: 0 0 0 1px #170064, 0 18px 60px rgba(53, 0, 255, .3) !important;
}

.searchbox input, .searchbar input, .sbar input,
input[type="text"], input[type="search"], input[type="email"], textarea, select {
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--nk-text) !important;
  font-family: var(--nk-mono) !important;
}

/* Monospace is wider than the sans this field was sized for, so the longest
   placeholder clipped. Drop a step and tighten the tracking to fit it. */
.searchbox input {
  font-size: 15px !important;
  letter-spacing: -.01em !important;
  text-overflow: ellipsis;
}

input::placeholder, textarea::placeholder { color: var(--nk-faint) !important; }

.searchbox button, .searchbar button, .sbar button {
  border-radius: 0 !important;
  background: var(--nk-edge) !important;
  color: #fff !important;
  font-family: var(--nk-mono) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}

.searchbox button:hover, .searchbar button:hover, .sbar button:hover { background: var(--nk-pink) !important; }

/* ----------------------------------------------------------- suggestions -- */
.ex, .chip, .exq, .suggest button {
  border-radius: 0 !important;
  background: rgba(16, 0, 54, .8) !important;
  border: 1px solid var(--nk-rule) !important;
  color: var(--nk-label) !important;
  font-family: var(--nk-mono) !important;
  letter-spacing: .06em;
}

.ex:hover, .exq:hover, .suggest button:hover {
  border-color: var(--nk-edge) !important;
  color: #fff !important;
  background: rgba(97, 84, 255, .16) !important;
}

/* --------------------------------------------------------------- modal --- */
.nk-overlay { background: rgba(5, 0, 19, .86) !important; }

.nk-modal {
  border-radius: 0 !important;
  background: var(--nk-panel) !important;
  border: 1px solid var(--nk-edge) !important;
  box-shadow: 0 0 0 1px #170064, 0 28px 90px rgba(53, 0, 255, .4), inset 0 0 70px rgba(60, 23, 255, .1) !important;
}

.nk-modal h2 { letter-spacing: -.05em; }
.nk-modal .bf-amt { color: #fff; }
.nk-modal .bf-band { color: var(--nk-lemon); }
.nk-modal .bf-lbl b { color: var(--nk-cyan); }
.nk-modal .bf-steps b { color: #fff; }
.nk-modal .nk-note { color: var(--nk-dimmer); font-family: var(--nk-mono); }

/* --------------------------------------------------------------- footer -- */
.foot, footer {
  border-top: 1px solid var(--nk-rule);
  color: var(--nk-dimmer);
  font-family: var(--nk-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.foot a, footer a { color: var(--nk-label); }

/* ------------------------------------------------------------ scrollbar -- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--nk-ink); }
::-webkit-scrollbar-thumb { background: #2a1a63; border: 1px solid var(--nk-rule); }
::-webkit-scrollbar-thumb:hover { background: var(--nk-edge); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
}
