/* ═══════════════════════════════════════════════════════════════════
   xtracker.css — the shell around the modals, plus the few overrides the copied
   dev-modal needs now that its registry panel is gone.

   The modals bring their own complete stylesheets (dev-modal.css, dev-charts.css) with
   hard-coded colours and no CSS variables, so nothing here can leak into them. The
   palette below is picked to sit beside them rather than to restyle them: same black
   ground, same violet accent the X-modal already uses for its header and handle.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #08080a;
  --panel: #0d0d10;
  --panel2: #121216;
  --line: #1d1d23;
  --line2: #2a2a33;
  --txt: #fafafa;
  --txt2: #c9c9d1;
  --mut: #7a7a86;
  --mut2: #55555f;
  --violet: #a78bfa;
  --violet2: #d8b4fe;
  --violet-bd: #6d28d9;
  --violet-bg: #1a1330;
  --green: #22c55e;
  --cyan: #22d3ee;
}

* { box-sizing: border-box; }

/* [hidden] IS ONLY display:none IN THE UA STYLESHEET, so any rule of ours that sets a
   display wins over it by specificity and the element stays on screen. That is exactly
   what happened to the "recent" row: xtracker.js sets .hidden = true when the list is
   empty, and `.xt-recent { display: flex }` below quietly put it back — so the page shipped
   with an empty RECENT / CLEAR header floating under the search box. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(109, 40, 217, .17), transparent 62%),
    var(--bg);
  color: var(--txt);
  font: 14px/1.6 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.01em;
  min-height: 100vh;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #26262b; border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

/* ── header ─────────────────────────────────────────────────────────────── */
.xt-top {
  display: flex; align-items: center; gap: 14px;
  padding: 0 26px; height: 58px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 8, 10, .82);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 50;
}
/* The brand became an <a href="/"> when the shell gained routes, which handed it the
   UA's default link blue. Anything that is a link here states its own colour. */
.xt-brand {
  font-size: 17px; font-weight: 800; letter-spacing: -.03em;
  color: var(--txt); text-decoration: none;
}
.xt-brand:hover { color: var(--violet2); }
.xt-x { color: var(--violet2); font-family: ui-serif, Georgia, serif; margin-right: 1px; }
.xt-tagline { font-size: 12px; color: var(--mut); }
@media (max-width: 720px) { .xt-tagline { display: none; } }
.xt-spacer { flex: 1; }
.xt-toplink { font-size: 12px; color: var(--mut); text-decoration: none; }
.xt-toplink:hover { color: var(--violet2); }

/* ── main ───────────────────────────────────────────────────────────────── */
.xt-main { max-width: 1080px; margin: 0 auto; padding: 0 26px 80px; }

.xt-hero { padding: 68px 0 44px; text-align: center; }
.xt-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 5.2vw, 46px);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.08;
}
.xt-lede {
  max-width: 620px; margin: 0 auto 32px;
  color: var(--txt2); font-size: 15px; line-height: 1.65;
}
.xt-lede em { color: var(--violet2); font-style: normal; font-weight: 600; }

/* search */
.xt-searchwrap {
  display: flex; align-items: center; gap: 0;
  max-width: 640px; margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 5px 5px 5px 16px;
  transition: border-color .14s, box-shadow .14s;
}
.xt-searchwrap:focus-within {
  border-color: var(--violet-bd);
  box-shadow: 0 0 0 4px rgba(109, 40, 217, .13);
}
.xt-at { color: var(--mut2); font-size: 17px; font-weight: 600; margin-right: 8px; }
.xt-searchwrap:focus-within .xt-at { color: var(--violet); }
#xtInput {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: var(--txt); font: 15px 'Inter', sans-serif; padding: 11px 0;
}
#xtInput::placeholder { color: var(--mut2); }
.xt-searchwrap button {
  background: var(--violet-bg); color: var(--violet2);
  border: 1px solid var(--violet-bd); border-radius: 8px;
  padding: 10px 22px; cursor: pointer;
  font: 600 14px 'Inter', sans-serif;
  transition: background .14s, color .14s;
}
.xt-searchwrap button:hover { background: #2a1d45; color: #fff; }

.xt-hint { margin: 15px auto 0; font-size: 12.5px; color: var(--mut); max-width: 640px; }
.xt-hint.bad { color: #f87171; }
.xt-try {
  color: var(--violet); cursor: pointer; margin: 0 5px;
  border-bottom: 1px dashed rgba(167, 139, 250, .4);
}
.xt-try:hover { color: var(--violet2); border-bottom-color: var(--violet2); }

/* recent */
.xt-recent {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 7px; margin-top: 22px;
}
.xt-recent-lab, .xt-recent-clear {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--mut2);
}
.xt-recent-clear { cursor: pointer; }
.xt-recent-clear:hover { color: #f87171; }
#xtRecentList { display: inline-flex; flex-wrap: wrap; gap: 7px; }
.xt-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px;
  background: var(--panel2); border: 1px solid var(--line);
  color: var(--txt2); border-radius: 20px; padding: 4px 12px; cursor: pointer;
}
.xt-chip:hover { border-color: var(--violet-bd); color: var(--violet2); }

/* ── board ──────────────────────────────────────────────────────────────── */
.xt-board { margin-top: 26px; }
.xt-board-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 16px; padding-bottom: 11px; border-bottom: 1px solid var(--line);
}
.xt-board-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.xt-board-sub { font-size: 11.5px; color: var(--mut); }
@media (max-width: 640px) { .xt-board-sub { display: none; } }

.xt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; }
.xt-card {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 15px; cursor: pointer;
  font-family: 'Inter', sans-serif; color: var(--txt);
  transition: border-color .14s, background .14s, transform .14s;
}
.xt-card:hover {
  border-color: var(--violet-bd); background: #100c1c; transform: translateY(-1px);
}
.xt-card-h {
  font-size: 14px; font-weight: 600; color: var(--violet2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xt-card-ath {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 19px; font-weight: 500; color: var(--green); letter-spacing: -.02em;
}
.xt-card-meta {
  display: flex; flex-wrap: wrap; gap: 4px 9px;
  font-size: 11px; color: var(--mut);
}
.xt-card-meta .mig { color: var(--cyan); }
.xt-card-meta .ago { color: var(--mut2); }

.xt-empty, .xt-loading { grid-column: 1 / -1; padding: 26px; text-align: center; color: var(--mut2); font-size: 12.5px; }
.xt-loading { display: flex; justify-content: center; gap: 6px; }
.xt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet-bd); animation: xtb 1.1s infinite ease-in-out; }
.xt-dot:nth-child(2) { animation-delay: .16s; }
.xt-dot:nth-child(3) { animation-delay: .32s; }
@keyframes xtb { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* ── about ──────────────────────────────────────────────────────────────── */
.xt-about { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); }
.xt-about h2 { margin: 0 0 18px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.xt-about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 22px 30px; }
.xt-about-grid h3 { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--violet2); }
.xt-about-grid p { margin: 0; font-size: 13px; color: var(--mut); line-height: 1.62; }
.xt-about-grid b { color: var(--txt2); font-weight: 600; }
.xt-about-grid em { font-style: italic; color: var(--txt2); }

.xt-foot {
  border-top: 1px solid var(--line); padding: 20px 26px;
  text-align: center; font-size: 11.5px; color: var(--mut2);
}

/* ═══════════════════════════════════════════════════════════════════
   Overrides for the copied modals.
   The dev-modal's sidebar used to open with the ARM / TRACK / BENCH panel. With that
   removed it needs an identity block of its own — deliberately shaped like the
   X-modal's (.xm-identity), so the two panels read as the same object seen two ways.
   ═══════════════════════════════════════════════════════════════════ */
.xt-identity { display: flex; flex-direction: column; gap: 6px; }
.xt-addr {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px; font-weight: 500; color: #e9d5ff; word-break: break-all;
}
.xt-sub { font-size: 11px; color: #777; }
.xt-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.xt-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 10px;
  background: #1c1c22; color: #aaa; border: 1px solid #2a2a33;
}
.xt-badge.hot { color: #d8b4fe; border-color: #6d28d9; background: #1e1530; }
.xt-idlinks { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; }
.xt-idlinks a, .xt-copy { color: #888; text-decoration: none; cursor: pointer; }
.xt-idlinks a:hover, .xt-copy:hover { color: #d8b4fe; text-decoration: underline; }

/* An empty chart card explains itself (see dev-charts.js fillCard) — the retention
   message is information, not an error, so it must not read like one. */
.wp-card .msg.dcx-nobars {
  color: #6b6b75; font-size: 10.5px; text-align: center; line-height: 1.4; padding: 0 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE MODE — the panel, flattened into the page.

   Everything below is layout only. Not one colour, font or spacing rule of the panel's
   own stylesheet is touched, because the whole point of mounting the real x-modal /
   dev-modal instead of re-rendering is that they keep looking like themselves.

   What changes: the floating window becomes a block in the flow, and the furniture that
   only makes sense on a floating window (close button, drag grips, the modal's own
   back/forward and search) is hidden in favour of the page chrome and the browser's own
   back button. The rows|charts toggle stays, because dev-charts.js injects it into the
   modal header and it is the one control in there we still want.
   ═══════════════════════════════════════════════════════════════════ */
.xt-analysis { max-width: 1760px; margin: 0 auto; padding: 0 18px 70px; }

/* ════ THE PANEL IS NOT A WINDOW ANY MORE ════
   Upstream this is a floating card: its own dark fill, a border, a radius and a drop
   shadow, because it hovers over a page that is not its own. Here the page IS its own,
   so all of that is dropped and the site background shows straight through. What is left
   marking regions is the single hairline between the rail and the table. */
.dev-modal.xt-page {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  resize: none;
}
.dev-modal.xt-page .resize-handle,
.dev-modal.xt-page .dev-modal-close,
.dev-modal.xt-page .dm-nav-buttons,
.dev-modal.xt-page .dm-search-bar,
.dev-modal.xt-page .dm-header-left { display: none !important; }

/* The header survives only to carry the rows | charts toggle dev-charts.js injects. */
.dev-modal.xt-page .dev-modal-header {
  cursor: default;
  justify-content: flex-end;
  padding: 0 0 10px;
  background: transparent !important;
  border-bottom: 0 !important;
}
.dev-modal.xt-page .dcx-fs { display: none !important; }   /* the page is already full width */

/* ════ THE PAGE SCROLLS, NOT A BOX INSIDE IT ════
   The body was viewport-height with its own scrollbar, which is how a window behaves and
   not how a page does. It is in the flow now and the window scrollbar moves the whole
   thing.

   THE TRAP THAT MAKES THIS NON-OBVIOUS: dev-charts.js sizes its cards FROM this element.
   sizeGrid() reads body.clientHeight, divides it by how many cards should be in view and
   writes the result to --dcx-ch. The first attempt at a scrolling page gave the body
   `height:auto` and nothing else, so cards grew the body, the body's ResizeObserver
   remeasured, and the cards grew again — --dcx-ch reached 11,184,731px and the body
   33,554,432px, stopping only at Chrome's maximum element height.

   So the card height is pinned HERE, from the viewport, with !important — which beats the
   inline value sizeGrid writes. The feedback edge is cut at the source: content can no
   longer influence card height at all, whatever the body does. */
.dev-modal.xt-page .dev-modal-body {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.dev-modal.xt-page .dcx-grid { --dcx-ch: min(46vh, 340px) !important; }

.dev-modal.xt-page .dm-layout {
  height: auto !important;
  min-height: 0 !important;
  align-items: flex-start;
}
.dev-modal.xt-page .dm-main { overflow: visible !important; min-height: 0 !important; }
.dev-modal.xt-page .dm-table-container {
  overflow: visible !important;
  max-height: none !important;
}

/* The rail follows you down the page instead of scrolling away — filters and optimal
   entry are what you reach for while reading the table. */
/* ════ THE STICKY STACK ════
   Three things stick, in this order down the window: the site bar (58px, z 50), the
   chrome bar (measured into --xt-anbar-h by xpage.js, z 30), and then the rail and the
   table's column headers beneath both. Pinning the last two to a guessed offset put them
   BEHIND the chrome — the header row disappeared and the top of the rail was covered —
   so they stack against the measured height instead. */
.xt-analysis { --xt-anbar-h: 96px; }
.dev-modal.xt-page .dm-sidebar {
  position: sticky;
  top: calc(58px + var(--xt-anbar-h) + 10px);
  align-self: flex-start;
  max-height: calc(100vh - 58px - var(--xt-anbar-h) - 24px);
  background: transparent !important;
  border-right: 1px solid var(--line) !important;
  overflow-y: auto;
}
.dev-modal.xt-page .dm-table thead {
  top: calc(58px + var(--xt-anbar-h));
  z-index: 20;
}
.dev-modal.xt-page .dm-table th { background: #0a0a0c; }
/* the "Launches under @x (2000)" caption scrolls away — the column names are what you
   actually need pinned while reading a thousand rows */
.dev-modal.xt-page .dm-table-header { position: static; }

/* ── the chrome above the panel ─────────────────────────────────────────── */
.xt-anbar {
  position: sticky; top: 58px; z-index: 30;
  padding: 16px 2px 12px;
  background: var(--bg);
  box-shadow: 0 10px 18px -12px rgba(0,0,0,.9);
}
.xt-anbar-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.xt-back {
  font-size: 12px; color: var(--mut); text-decoration: none;
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 11px; white-space: nowrap;
}
.xt-back:hover { color: var(--violet2); border-color: var(--violet-bd); }

.xt-an-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.xt-an-icon { font-family: ui-serif, Georgia, serif; font-size: 19px; color: var(--violet2); }
.xt-an-title {
  font-size: 22px; font-weight: 700; letter-spacing: -.025em; color: var(--txt);
  font-family: 'JetBrains Mono', ui-monospace, monospace; word-break: break-all;
}
.xt-an-alias {
  font-size: 12.5px; color: var(--violet2); background: var(--violet-bg);
  border: 1px solid var(--violet-bd); border-radius: 20px; padding: 2px 10px;
}
.xt-an-ext, .xt-an-copy { font-size: 11.5px; color: var(--mut); text-decoration: none; cursor: pointer; }
.xt-an-ext:hover, .xt-an-copy:hover { color: var(--violet2); text-decoration: underline; }
.xt-an-spacer { flex: 1; }

.xt-an-search input {
  background: var(--panel); border: 1px solid var(--line2); border-radius: 8px;
  color: var(--txt); font: 12.5px 'Inter', sans-serif; padding: 8px 12px; width: 210px; outline: none;
}
.xt-an-search input:focus { border-color: var(--violet-bd); }

.xt-follow, .xt-notes-toggle {
  background: var(--panel); color: var(--txt2);
  border: 1px solid var(--line2); border-radius: 8px;
  padding: 8px 14px; cursor: pointer; font: 600 12.5px 'Inter', sans-serif; white-space: nowrap;
}
.xt-follow:hover, .xt-notes-toggle:hover { border-color: var(--violet-bd); color: var(--violet2); }
.xt-follow.on { background: var(--violet-bg); color: var(--violet2); border-color: var(--violet-bd); }
.xt-notes-toggle { padding: 8px 12px; }
.xt-notes-toggle.has { color: var(--violet2); border-color: var(--violet-bd); }

.xt-anbar-sub {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 10px; font-size: 12px; color: var(--mut);
}
.xt-an-count b { color: var(--txt2); font-weight: 600; }
.xt-an-count b.pos { color: var(--green); }
.xt-an-partial { color: #e0a030; }

/* venue chips — a DESCRIPTION of what is in the one list below, never a filter */
.xt-vchip {
  font-size: 10.5px; padding: 2px 9px; border-radius: 10px;
  border: 1px solid var(--line2); background: var(--panel2); color: var(--mut);
}
.xt-vchip.v-stonkfun { color: #7dd3fc; border-color: #0c4a6e; background: #0b1b26; }
.xt-vchip.v-launchlab { color: #fbbf24; border-color: #713f12; background: #231a07; }
.xt-vchip.v-bonk { color: #fb923c; border-color: #7c2d12; background: #241207; }

/* ── notepad ────────────────────────────────────────────────────────────── */
.xt-notepad {
  margin-top: 14px; padding: 15px 17px;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 10px;
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 2fr); gap: 14px;
}
@media (max-width: 760px) { .xt-notepad { grid-template-columns: 1fr; } }
.xt-notepad label { display: flex; flex-direction: column; gap: 5px; }
.xt-notepad label span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--mut2);
}
.xt-notepad input, .xt-notepad textarea {
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 7px;
  color: var(--txt); font: 13px 'Inter', sans-serif; padding: 9px 11px; outline: none;
  resize: vertical; width: 100%;
}
.xt-notepad input:focus, .xt-notepad textarea:focus { border-color: var(--violet-bd); }
.xt-notepad-foot {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--mut2);
}
.xt-notepad-foot .ok { color: var(--green); }
.xt-notepad-hint { margin-left: auto; }

/* ── following cards on the landing page ────────────────────────────────── */
.xt-badge-n {
  font-size: 11px; font-weight: 600; color: var(--violet2);
  background: var(--violet-bg); border: 1px solid var(--violet-bd);
  border-radius: 20px; padding: 1px 8px; margin-left: 4px;
}
.xt-ghost {
  background: transparent; color: var(--mut); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 11px; cursor: pointer; font: 11.5px 'Inter', sans-serif;
}
.xt-ghost:hover { color: var(--violet2); border-color: var(--violet-bd); }

.xt-fcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.xt-fcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .14s, background .14s;
}
.xt-fcard:hover { border-color: var(--violet-bd); background: #100c1c; }
.xt-fcard-head { display: flex; align-items: center; gap: 8px; }
.xt-fcard-icon { font-family: ui-serif, Georgia, serif; color: var(--violet2); font-size: 14px; }
.xt-fcard-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px;
  color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xt-fdrop { margin-left: auto; color: var(--mut2); font-size: 12px; padding: 0 4px; }
.xt-fdrop:hover { color: #f87171; }
.xt-fcard-name { font-size: 12px; color: var(--violet2); }
.xt-fcard-notes {
  font-size: 11.5px; color: var(--mut); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.xt-fcard-foot { font-size: 10px; color: var(--mut2); margin-top: auto; }

/* ── the venue tag on a table row ───────────────────────────────────────── */
/* pump.fun is the default and is never tagged — tagging 98% of rows with the same word
   is noise. Only the others get one, and it carries the quote token when the curve is
   not priced in SOL, because then every figure on that row is in those units. */
.xt-venue {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 9px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .02em; vertical-align: middle;
  border: 1px solid #2a2a33; background: #16161b; color: #9a9aa5;
}
.xt-venue.v-stonkfun { color: #7dd3fc; border-color: #0c4a6e; background: #0b1b26; }
.xt-venue.v-launchlab { color: #fbbf24; border-color: #713f12; background: #231a07; }
.xt-venue.v-bonk { color: #fb923c; border-color: #7c2d12; background: #241207; }

/* ── the credit ─────────────────────────────────────────────────────────── */
.xt-credit {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--mut); text-decoration: none;
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px;
  transition: color .14s, border-color .14s, background .14s;
  white-space: nowrap;
}
.xt-credit b { color: var(--txt2); font-weight: 600; }
.xt-credit:hover { color: var(--violet2); border-color: var(--violet-bd); background: var(--violet-bg); }
.xt-credit:hover b { color: var(--violet2); }
.xt-credit-x { font-family: ui-serif, Georgia, serif; font-size: 12px; color: var(--violet); }
.xt-credit:hover .xt-credit-x { color: var(--violet2); }
@media (max-width: 820px) { .xt-credit b { display: none; } }

/* the ticker beside the wordmark */
.xt-ticker {
  margin-left: 8px; padding: 2px 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  color: var(--violet2); background: var(--violet-bg);
  border: 1px solid var(--violet-bd); border-radius: 4px;
  vertical-align: 2px;
}

/* ── curated groups on the landing page ─────────────────────────────────── */
/* The two groups are editorial, not ranked, so they are visually distinct from the
   automatic leaderboard below them: a coloured rule on the heading and a tinted edge on
   the cards, one hue each, so "main guys" and "narrative finders" never read as one list
   that happens to have a gap in it. */
.xt-group .xt-board-head { border-bottom-color: var(--line2); }
.xt-group h2 { position: relative; padding-left: 12px; }
.xt-group h2::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 13px; border-radius: 2px;
}
.xt-group-n {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  color: var(--mut2); border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px;
}

.xt-group-main h2::before { background: var(--green); }
.xt-group-main .xt-featured { border-left: 2px solid rgba(34,197,94,.45); }
.xt-group-main .xt-featured:hover { border-color: var(--green); border-left-color: var(--green); }

.xt-group-narrative h2::before { background: #f0b429; }
.xt-group-narrative .xt-featured { border-left: 2px solid rgba(240,180,41,.45); }
.xt-group-narrative .xt-featured:hover { border-color: #f0b429; border-left-color: #f0b429; }

.xt-featured .xt-card-meta .wal { color: var(--violet); }
.xt-featured.unknown { opacity: .55; }
.xt-card-none {
  font-size: 11px; color: var(--mut2); font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   /docs — a reading page, so it is the one place that is NOT dense:
   a single measured column, generous line height, and headings that
   separate rather than decorate.
   ═══════════════════════════════════════════════════════════════════ */
.doc { max-width: 820px; margin: 0 auto; padding: 0 22px 90px; }

.doc-hero { padding: 54px 0 30px; }
.doc-eyebrow {
  font: 500 10px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .26em; color: var(--violet); margin-bottom: 14px;
}
.doc h1 { margin: 0 0 16px; font-size: clamp(28px, 4.6vw, 40px); font-weight: 800; letter-spacing: -.03em; }
.doc-lede { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--txt2); }
.doc-lede em { color: var(--violet2); font-style: normal; }

.doc-toc {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 16px 0 4px; margin-bottom: 20px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.doc-toc a {
  font: 11.5px 'JetBrains Mono', ui-monospace, monospace;
  color: var(--mut); text-decoration: none;
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px;
}
.doc-toc a:hover { color: var(--violet2); border-color: var(--violet-bd); background: var(--violet-bg); }

.doc section { padding: 34px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 74px; }
.doc h2 {
  margin: 0 0 14px; font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  padding-left: 13px; position: relative;
}
.doc h2::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; background: var(--violet); border-radius: 2px;
}
.doc h3 { margin: 26px 0 8px; font-size: 14px; font-weight: 700; color: var(--txt); }
.doc h4 { margin: 0 0 5px; font-size: 13px; font-weight: 700; color: var(--violet2); }
.doc p { margin: 0 0 13px; font-size: 14px; line-height: 1.72; color: var(--txt2); }
.doc p b, .doc li b { color: var(--txt); font-weight: 600; }
.doc a { color: var(--violet2); }
.doc code {
  font: 12px 'JetBrains Mono', ui-monospace, monospace;
  background: var(--panel2); border: 1px solid var(--line2);
  border-radius: 4px; padding: 1px 6px; color: var(--txt);
}
.doc kbd {
  font: 11px 'JetBrains Mono', ui-monospace, monospace;
  background: var(--elev, #16161b); border: 1px solid var(--line2);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; color: var(--txt2);
}
.doc-note {
  font-size: 12.5px !important; color: var(--mut) !important;
  border-left: 2px solid var(--line2); padding-left: 12px;
}
.doc .fine { font-size: 12.5px; color: var(--mut); }

.doc-list { margin: 0 0 13px; padding-left: 20px; }
.doc-list li { font-size: 14px; line-height: 1.68; color: var(--txt2); margin-bottom: 7px; }
.doc-list.numbered { counter-reset: n; list-style: none; padding-left: 0; }
.doc-list.numbered li { counter-increment: n; position: relative; padding-left: 30px; }
.doc-list.numbered li::before {
  content: counter(n); position: absolute; left: 0; top: 2px;
  width: 19px; height: 19px; display: grid; place-items: center;
  font: 600 10px 'JetBrains Mono', monospace; color: var(--violet2);
  background: var(--violet-bg); border: 1px solid var(--violet-bd); border-radius: 50%;
}

/* quick start */
.doc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.doc-step { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line); padding: 14px 15px; border-radius: 10px; }
.doc-step .n {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  font: 700 12px 'JetBrains Mono', monospace; color: #0a0a0a; background: var(--violet2);
  border-radius: 50%;
}
.doc-step p { margin: 0; font-size: 12.8px; color: var(--mut); }

/* the flow diagram */
.doc-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.fl-box {
  flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 3px;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 9px;
  padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--txt);
}
.fl-box span { font-size: 11px; font-weight: 400; color: var(--mut); }
.fl-arrow { color: var(--violet); font-size: 16px; }
@media (max-width: 640px) { .fl-arrow { display: none; } }

/* tables */
.doc-table { width: 100%; border-collapse: collapse; margin: 4px 0 14px; }
.doc-table th {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line2);
  font: 500 9.5px 'JetBrains Mono', monospace; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mut2);
}
.doc-table td {
  padding: 10px; border-bottom: 1px solid var(--line);
  font-size: 13.2px; line-height: 1.62; color: var(--txt2); vertical-align: top;
}
.doc-table td:first-child { width: 27%; color: var(--txt); }
.doc-table td.hl { border-left: 2px solid var(--violet-bd); }
.doc-table td.ok { color: #7ee2b8; }
.doc-table td.warn-c { color: #e0b070; }

/* callouts */
.doc-callout {
  background: var(--panel); border: 1px solid var(--line2);
  border-left: 3px solid var(--violet-bd); border-radius: 8px;
  padding: 14px 16px; margin: 16px 0;
}
.doc-callout.warn { border-left-color: #e0a030; }
.doc-callout.warn h4 { color: #e0b070; }
.doc-callout p:last-child { margin-bottom: 0; }
.doc-callout p { font-size: 13.2px; }

/* swatches */
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: 0; }
.sw.green { background: #00c853; }
.sw.gold { background: #f0b429; }
.sw.dot { background: var(--violet2); border-radius: 50%; }

/* privacy grid */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 22px; }
.doc-grid p { font-size: 12.8px; color: var(--mut); margin: 0; }

/* faq */
.doc-faq { border-bottom: 1px solid var(--line); }
.doc-faq summary {
  cursor: pointer; padding: 12px 0; font-size: 13.8px; font-weight: 600; color: var(--txt);
  list-style: none; display: flex; align-items: center; gap: 9px;
}
.doc-faq summary::-webkit-details-marker { display: none; }
.doc-faq summary::before { content: '+'; color: var(--violet); font-family: 'JetBrains Mono', monospace; }
.doc-faq[open] summary::before { content: '−'; }
.doc-faq summary:hover { color: var(--violet2); }
.doc-faq p { padding: 0 0 13px 18px; font-size: 13.2px; margin: 0; }

/* end */
.doc-end { padding: 38px 0 0; text-align: center; }
.doc-cta {
  display: inline-block; background: var(--violet-bg); color: var(--violet2);
  border: 1px solid var(--violet-bd); border-radius: 8px;
  padding: 12px 26px; font-size: 14px; font-weight: 600; text-decoration: none;
}
.doc-cta:hover { background: #2a1d45; color: #fff; text-decoration: none; }
.doc-end p { margin-top: 16px; font-size: 12.5px; color: var(--mut); }