:root {
  /* base surfaces */
  --ns-bg: #0b0b0c;
  --ns-bg-page: #050506;      /* outside the app frame */
  --ns-card: #0e0e0f;
  --ns-rail: #0c0c0d;
  --ns-fill: #141414;         /* inputs, chips */
  --ns-fill-2: #131313;
  /* text */
  --ns-text: #e8e6df;
  --ns-text-hi: #f3f1ea;
  --ns-text-2: #cfccc2;
  --ns-text-3: #c4c1b7;
  --ns-muted: #9a978c;
  --ns-muted-2: #8a877f;
  --ns-muted-3: #6f6d65;
  --ns-faint: #57554d;
  --ns-hatch-label: #3d3d38;
  /* borders */
  --ns-border: #1f1f1c;
  --ns-border-2: #242420;
  --ns-border-3: #1a1a18;
  --ns-border-4: #262622;
  /* accent (green) */
  --ns-accent: oklch(0.72 0.17 145);
  --ns-accent-hi: oklch(0.75 0.16 145);
  --ns-accent-txt: oklch(0.78 0.14 145);
  --ns-accent-txt-2: oklch(0.82 0.13 145);
  --ns-on-accent: #07120b;
  /* secondary (slate blue): links, type tags, downvotes */
  --ns-secondary: oklch(0.66 0.06 255);
  --ns-secondary-hi: oklch(0.7 0.06 255);
  /* type */
  --ns-serif: 'Newsreader', Georgia, serif;
  --ns-sans: 'Space Grotesk', system-ui, sans-serif;
  --ns-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* misc */
  --ns-radius: 10px;
  --ns-radius-lg: 14px;
  --ns-pill: 20px;
  --ns-hatch: repeating-linear-gradient(135deg, #131313 0 11px, #161616 11px 22px);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ns-bg-page);
  color: var(--ns-text);
  font-family: var(--ns-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ns-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font-family: inherit; }
.hidden { display: none !important; }
::selection { background: oklch(0.72 0.17 145 / .3); }

@keyframes ns-pulse   { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes ns-fade    { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes ns-rise    { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes ns-cardin  { from{opacity:0} to{opacity:1} }
@keyframes ns-breathe { 0%,100%{box-shadow:0 0 8px oklch(0.72 0.17 145 / .35)} 50%{box-shadow:0 0 17px oklch(0.72 0.17 145 / .85)} }
@keyframes ns-spin    { to{transform:rotate(360deg)} }
@keyframes ns-questglow { 0%,100%{transform:rotate(0deg) scale(1);opacity:.85} 50%{transform:rotate(8deg) scale(1.15);opacity:1} }
@keyframes dd-flash   { 0%{transform:translate(-50%,-50%) scale(.5);opacity:0} 18%{opacity:1} 100%{transform:translate(-50%,-50%) scale(2.5);opacity:0} }
@keyframes hv-sweep   { 0%{transform:translateX(-40%);opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{transform:translateX(140%);opacity:0} }
@keyframes hv-sheen   { 0%{left:-60%} 55%{left:130%} 100%{left:130%} }
@keyframes hv-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes hv-blink   { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes hv-type    { 0%{width:0} 45%{width:31ch} 70%{width:31ch} 100%{width:0} }

.ns-scroll { scrollbar-width: thin; scrollbar-color: #2c2c26 transparent; }
.ns-scroll::-webkit-scrollbar { width: 9px; }
.ns-scroll::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.ns-scroll::-webkit-scrollbar-thumb { background: #2a2a26; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.ns-scroll::-webkit-scrollbar-thumb:hover { background: oklch(0.62 0.12 145); border: 2px solid transparent; background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.app { display: flex; flex-direction: column; min-height: 100vh; background: var(--ns-bg); color: var(--ns-text); }

.topnav { position: sticky; top: 0; z-index: 20; overflow: hidden;
  background: rgba(11,11,12,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ns-border-3); }
.topnav-primary { display: flex; align-items: center; gap: 28px; padding: 16px 40px; }
.topnav-spacer { flex: 1; min-width: 0; }
.topnav-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.brand-pill { font-family: var(--ns-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #6f6d65; border: none; border-left: 1px solid #2a2a26; border-radius: 0;
  padding: 0 0 0 13px; margin: 0; white-space: nowrap; }
.topnav-tracks { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 11px 40px; border-top: 1px solid var(--ns-border-3); }
.track-row-wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-left: -8px; }
.track-row-wrap::-webkit-scrollbar { display: none; }
.topnav-agent { flex: 0 0 auto; }
.topnav-sweep { position: absolute; left: 0; bottom: 0; width: 34%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ns-accent-hi), transparent);
  box-shadow: 0 0 10px oklch(0.72 0.17 145); animation: hv-sweep 4.5s cubic-bezier(.4,0,.6,1) infinite; }
@media (prefers-reduced-motion: reduce) { .topnav-sweep { animation: none; } }

.track-row-wrap .track-row { position: relative; display: inline-flex; align-items: center; gap: 7px;
  width: auto; height: auto; white-space: nowrap; border: none; background: none; cursor: pointer;
  padding: 7px 10px; border-radius: 0; color: var(--ns-muted-2); font-size: 13.5px; transition: color .22s; }
.track-row-wrap .track-row:hover { color: var(--ns-text-hi); }
.track-row-wrap .track-row.active { color: var(--ns-accent-txt-2); font-weight: 600; }
.track-row-wrap .track-row .track-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-row-wrap .track-row .track-n { font-family: var(--ns-mono); font-size: 10.5px; color: var(--ns-faint); }
.track-row-wrap .track-row.active .track-n { color: var(--ns-accent-txt); }
/* An agent is actively searching this track — pulsing avatar, visible to everyone. */
.track-row-wrap .track-searching { line-height: 1; margin: 0 2px; animation: ns-search-pulse 1.6s ease-in-out infinite; }
@keyframes ns-search-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

.nav-action { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer;
  color: var(--ns-text-2); font-size: 13px; padding: 6px 4px; transition: color .2s; }
.nav-action:hover { color: var(--ns-text-hi); }
.nav-action.active { color: var(--ns-accent-txt-2); }
.nav-action svg { flex: 0 0 auto; }
.nav-action.nav-cta { background: oklch(0.72 0.17 145 / .1); border: 1px solid oklch(0.72 0.17 145 / .34);
  color: oklch(0.84 0.12 145); font-family: var(--ns-sans); font-size: 13px; font-weight: 600;
  padding: 8px 15px; border-radius: 20px; transition: background .2s, border-color .2s; }
.nav-action.nav-cta:hover { background: oklch(0.72 0.17 145 / .18); border-color: oklch(0.72 0.17 145 / .55); color: oklch(0.84 0.12 145); }

/* Right-side nav cluster: Quests pill sits with the agent chip (template parity)
   so justify-content:space-between only splits tracks (left) from this group. */
.topnav-right { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.topnav-quests { display: flex; align-items: center; }
.quest-pill { display: inline-flex; align-items: center; gap: 7px; background: #121212;
  border: 1px solid #262622; color: #e8e6df; font-family: var(--ns-sans); font-size: 13px;
  font-weight: 600; padding: 7px 13px; border-radius: 20px; cursor: pointer; white-space: nowrap;
  transition: background .2s, border-color .2s; }
.quest-pill svg { flex: 0 0 auto; stroke: oklch(0.85 0.15 95); transform-origin: center; }
.quest-pill:hover, .quest-pill.active { background: oklch(0.85 0.16 95 / .14); border-color: oklch(0.85 0.16 95 / .55); }
/* Queue pill: green accent (design_template) to distinguish it from Quests. */
.queue-pill svg { stroke: oklch(0.82 0.13 145); }
.queue-pill:hover, .queue-pill.active { background: oklch(0.72 0.17 145 / .14); border-color: oklch(0.72 0.17 145 / .55); }
.queue-pill .quest-pill-badge { background: oklch(0.72 0.17 145 / .2); color: oklch(0.86 0.13 145); }
/* Pulse the exclamation icon while quests are waiting to be accepted. */
.quest-pill.has-quests svg { animation: quest-pulse 1.3s ease-in-out infinite; }
@keyframes quest-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .quest-pill.has-quests svg { animation: none; } }

.agent-chip { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: oklch(0.72 0.17 145 / .1); border: 1px solid oklch(0.72 0.17 145 / .34); color: var(--ns-text-2);
  border-radius: 22px; padding: 5px 15px 5px 5px; transition: border-color .2s, background .2s; }
.agent-chip:hover, .agent-chip.active { background: oklch(0.72 0.17 145 / .16); border-color: oklch(0.72 0.17 145 / .6); }
.agent-chip-av { position: relative; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #17371f, #0d1a11); border: 1px solid oklch(0.72 0.17 145 / .5);
  display: flex; align-items: center; justify-content: center; }
.agent-chip-av .sigil-circle { background: none; border: none; box-shadow: none; width: 100%; height: 100%; }
/* Template's 30px "mini" avatar draws the icon at 16px (ratio ~0.53) — force it
   so the nesting/size math can't shrink it. */
.agent-chip-av .sigil-circle svg { width: 16px; height: 16px; }
.agent-chip-dot { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: oklch(0.72 0.17 145); border: 2px solid #0b0b0c; box-shadow: 0 0 6px oklch(0.72 0.17 145); }
.agent-chip-empty { background: #121212; border: 1px dashed #2a2a26; padding: 5px 16px 5px 5px; }
.agent-chip-empty:hover, .agent-chip-empty.active { background: #17171a; border-color: oklch(0.72 0.17 145 / .5); }
.agent-chip-av-empty { background: none; border: 1px dashed #33332c; color: var(--ns-muted-2); }
.agent-chip-empty .agent-chip-name { color: var(--ns-text-2); }
.agent-chip-lbl { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.agent-chip-eyebrow { font-family: var(--ns-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-faint); }
.agent-chip-name { font-size: 14px; font-weight: 600; color: oklch(0.86 0.13 145); white-space: nowrap; }

.brand { display: flex; align-items: center; gap: 11px; padding: 2px 6px; cursor: pointer; transition: transform .25s ease; }
.brand:hover { transform: translateY(-1px); }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-word { font-family: var(--ns-serif); font-size: 23px; font-weight: 600; letter-spacing: -.01em; }
.brand-accent { color: oklch(0.75 0.16 145); }
.track-search {
  display: flex; align-items: center; gap: 8px;
  background: #141414; border: 1px solid #262622;
  border-radius: 10px; padding: 8px 12px; color: var(--ns-muted-3);
  transition: border-color .2s;
}
.track-search:focus-within { border-color: oklch(0.72 0.17 145 / .5); }
.track-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: #e8e6df; font-size: 13px;
}

/* body-class gating for admin/auth controls (mirrors server) */
body:not(.is-admin) .admin-only { display: none !important; }

/* feed + rail scaffolding (filled in later tasks) */
.feed { min-width: 0; display: flex; flex-direction: column; width: 100%; max-width: 1120px; margin: 0 auto; }

/* ---- track head / sort tabs / toolbar / filter chips ---- */
.track-head {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 40px 2px;
  position: static;
}
.track-head-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.track-head-title { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.track-head-title::before { content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--ns-accent); box-shadow: 0 0 10px var(--ns-accent); }
#track-title { font-family: var(--ns-serif); font-size: 34px; font-weight: 600; margin: 0; color: #f6f4ee; letter-spacing: -.02em; }
.track-count { font-family: var(--ns-mono); font-size: 11px; color: var(--ns-faint); white-space: nowrap; border-left: 1px solid var(--ns-border-2); padding-left: 13px; }
.find-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: oklch(0.72 0.17 145 / .1); border: 1px solid oklch(0.72 0.17 145 / .32);
  color: oklch(0.83 0.12 145); font-family: var(--ns-mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 14px;
  cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s;
}
.find-btn:hover { background: oklch(0.72 0.17 145 / .2); border-color: oklch(0.72 0.17 145 / .5); }
.find-btn:disabled { cursor: default; }
/* quest-glow icon (design_template): pulses idle, spins while searching */
.find-btn .qicon { flex: 0 0 auto; }
.find-btn .qicon { animation: ns-questglow 2.2s ease-in-out infinite; transform-origin: center; }
.find-btn.searching .qicon { animation: ns-spin .9s linear infinite; }
.find-btn:disabled:not(.searching) .qicon { animation: none; opacity: .7; }
/* In-flight state (design_template): staggered dots + the agent's sigil. */
@keyframes ns-dot { 0%,80%,100%{transform:scale(.5);opacity:.4} 40%{transform:scale(1);opacity:1} }
.find-dots { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.find-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: ns-dot 1.1s ease-in-out infinite; }
.find-dots i:nth-child(2) { animation-delay: .18s; }
.find-dots i:nth-child(3) { animation-delay: .36s; }
.find-agent-av { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 17px; height: 17px; border-radius: 50%; background: oklch(0.72 0.17 145 / .2); margin-right: 1px; }
.find-agent-av .sigil-circle { background: none; border: none; box-shadow: none; }
/* +50 XP reward chip */
.find-xp { font-weight: 600; color: #07120b; background: oklch(0.8 0.15 145); border-radius: 9px;
  padding: 2px 6px; margin-left: 2px; letter-spacing: 0; }
/* no paired agent → greyed-out */
.find-btn.no-agent { background: #141414; border-color: #2a2a26; color: var(--ns-faint); }
.find-btn.no-agent .find-xp { background: #2a2a26; color: var(--ns-muted-2); }
.sort-tabs { display: flex; gap: 18px; }
.sort-tab { background: none; border: none; padding: 4px 0; font-size: 13px; font-weight: 500; cursor: pointer; color: #8a877f; border-bottom: 2px solid transparent; }
.sort-tab.active { color: #f3f1ea; font-weight: 600; border-bottom-color: oklch(0.75 0.16 145); }
.track-sub { color: var(--ns-muted-2); font-size: 13px; margin: 0; }
#section-sub:empty { display: none; }
.track-toolbar { display: flex; flex-direction: column; gap: 14px; padding: 22px 40px 4px; }
.tb-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tb-row-top { justify-content: space-between; gap: 16px; }
.track-search { flex: 1; min-width: 200px; max-width: 340px; }
.filters { display: flex; gap: 7px; flex-wrap: wrap; }
.filter-chip {
  font-family: var(--ns-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 14px; cursor: pointer;
  color: #9a978c; background: #141414; border: 1px solid #242420;
  transition: transform .18s, color .2s, border-color .2s;
}
.filter-chip:hover { transform: translateY(-1px); }
.filter-chip.on { color: #07120b; background: oklch(0.72 0.17 145); border-color: oklch(0.72 0.17 145); }
.filter-chip.clear { background: none; color: #9a978c; border: 1px solid #242420; }
.filter-chip.clear:hover { color: oklch(0.82 0.12 145); border-color: oklch(0.72 0.17 145 / .4); }

.cards { padding: 24px 40px 104px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; align-content: start; }
.card {
  background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius);
  overflow: hidden; display: flex; flex-direction: column; cursor: default;
  transition: border-color .25s, transform .25s, box-shadow .25s; animation: ns-cardin .45s ease both;
}
.card:hover { border-color: oklch(0.72 0.17 145 / .55); transform: translateY(-7px); box-shadow: 0 22px 48px rgba(0,0,0,.55), 0 0 24px oklch(0.72 0.17 145 / .14); }
.card.pinned { border-color: oklch(0.72 0.17 145 / .4); }
.card-thumb { position: relative; height: 140px; background: var(--ns-hatch); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--ns-border); }
.card-thumb.has-img { background: #000; }
.card-thumb.has-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.88) saturate(1.05); transition: filter .25s ease; }
/* gradient so imagery sits into the dark card; badges get z-index to stay above it */
.card-thumb.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.26)); pointer-events: none; transition: opacity .25s ease; }
/* mostly-white images (paper pages, light-mode screenshots), detected in app.js */
.card-thumb.thumb-bright img { filter: brightness(.6) contrast(1.03) saturate(.85); }
.card:hover .card-thumb.has-img img { filter: none; }
.card:hover .card-thumb.has-img::after { opacity: 0; }
.card-type, .card-newdot, .play-badge { z-index: 1; }
.thumb-hint { font-family: var(--ns-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ns-hatch-label); }
.card-type { position: absolute; top: 10px; left: 10px; font-family: var(--ns-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: #0b0b0c; border: 1px solid #2a2a26; color: #cfccc2; padding: 4px 8px; border-radius: 5px; }
.card-newdot { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--ns-accent); box-shadow: 0 0 8px var(--ns-accent); animation: ns-pulse 2s infinite; }
.play-badge { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.play-badge.big { position: static; width: auto; height: auto; border-radius: 16px; padding: 8px 14px; }
.card-body { padding: 15px 16px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card-src { font-family: var(--ns-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-muted-3); }
.you-badge { color: var(--ns-accent-txt); margin-right: 6px; }
.card-title { font-family: var(--ns-serif); font-size: 17px; line-height: 1.28; font-weight: 500; margin: 0; color: var(--ns-text-hi); text-wrap: pretty; }
.card-title a { color: inherit; }
.card-title a:hover { color: var(--ns-accent-txt-2); text-decoration: none; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { background: var(--ns-fill-2); border: 1px solid var(--ns-border-2); color: var(--ns-muted-2); font-family: var(--ns-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; transition: color .2s, border-color .2s; }
.tag:hover { color: oklch(0.82 0.12 145); border-color: oklch(0.72 0.17 145 / .4); }
.card-take { display: flex; gap: 8px; padding: 9px 11px; background: #121212; border: 1px solid #201f1c; border-radius: 8px; }
.take-star { font-family: var(--ns-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-accent); flex: 0 0 auto; padding-top: 1px; }
.take-text { font-family: var(--ns-serif); font-style: italic; font-size: 13.5px; line-height: 1.45; color: var(--ns-text-3); text-wrap: pretty; }
.note { font-size: 12.5px; color: var(--ns-muted); border-left: 2px solid var(--ns-border-2); padding-left: 9px; }
.card-people { display: flex; align-items: center; gap: 9px; }
.pp-stack { display: flex; align-items: center; }
.pp-av { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ns-card); margin-left: -6px; object-fit: cover; display: inline-grid; place-content: center; overflow: hidden; background: var(--ns-fill); }
.pp-stack .pp-av:first-child { margin-left: 0; }
.pp-agent { border: none; background: none; width: auto; height: auto; padding: 0; }
.pp-initial { font-family: var(--ns-mono); font-size: 10px; color: var(--ns-text-2); background: linear-gradient(140deg, #2a2a26, #16160e); }
.pp-more { font-family: var(--ns-mono); font-size: 9.5px; color: var(--ns-muted-2); background: var(--ns-fill); }
.pp-label { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .02em; color: #6f6d65; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; gap: 8px; }
.vote-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--ns-fill-2); border: 1px solid var(--ns-border-2); border-radius: var(--ns-pill); padding: 5px 11px; }
.vote-pill button { background: none; border: none; cursor: pointer; padding: 0; line-height: 1; color: var(--ns-muted-2); font-size: 12px; }
.vote-pill button svg { display: block; }
.vote-pill .vote-up.on { color: var(--ns-accent); }
.vote-pill .vote-down.on { color: var(--ns-secondary); }
.vote-pill .score { font-family: var(--ns-mono); font-size: 12px; font-weight: 500; color: var(--ns-text); }
.card-foot-right { display: flex; align-items: center; gap: 6px; }
.card-foot-right button { background: none; border: none; cursor: pointer; color: var(--ns-muted-3); font-size: 12px; padding: 4px; border-radius: 6px; }
.comments-btn { display: inline-flex; align-items: center; }
.card-foot-right button:hover { color: var(--ns-accent-txt); }
.admin-actions { display: inline-flex; gap: 2px; }
.admin-actions button { background: none; border: none; cursor: pointer; color: var(--ns-muted-3); padding: 4px; border-radius: 6px; display: inline-flex; align-items: center; }
.admin-actions button:hover { color: var(--ns-accent-txt); }
.pin.on { color: var(--ns-accent); }
.pin.on svg { fill: currentColor; }
.card.collapsed .card-body > *:not(.show-anyway),
.card.collapsed .card-thumb { display: none; }

.agent-read-wrap { padding: 20px 40px 0; }
.agent-read-wrap:empty { padding: 0; }
.agent-read-label { display: flex; align-items: center; gap: 8px; font-family: var(--ns-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-accent-txt); margin-bottom: 10px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ns-accent); animation: ns-pulse 2s infinite; }
.briefing-label { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-muted-2); margin-bottom: 8px; }
.pillbtn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--ns-border-2); color: oklch(0.8 0.11 145); font-size: 12px; font-weight: 500; padding: 7px 13px; border-radius: 18px; cursor: pointer; transition: border-color .2s, background .2s; }
.pillbtn:hover { border-color: oklch(0.72 0.17 145 / .5); background: oklch(0.72 0.17 145 / .08); }
.stat-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.stat-chip { font-family: var(--ns-mono); font-size: 10px; color: var(--ns-muted); background: var(--ns-fill); border: 1px solid var(--ns-border-2); padding: 5px 10px; border-radius: 13px; }
.stat-chip b { color: var(--ns-text-hi); }
.stat-chip b.hi { color: var(--ns-accent-txt); }
.take-comment { font-size: 12.5px; color: var(--ns-muted); margin-top: 12px; text-align: left; }
.take-comment .lbl { font-family: var(--ns-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-muted-3); margin-right: 8px; }
.take-comment-btn { font-family: var(--ns-mono); font-size: 10px; background: none; border: 1px solid var(--ns-border-2); color: var(--ns-accent-txt); border-radius: 12px; padding: 5px 11px; margin-top: 14px; cursor: pointer; }
.take-comment-btn:hover { border-color: oklch(0.72 0.17 145 / .5); }
.card .show-anyway { margin: 12px; }

.agent-read-split { position: relative; display: flex; align-items: stretch; height: auto; border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
  overflow: hidden; background: radial-gradient(120% 160% at 0% 0%, #101012, #0b0b0c 66%); }
/* The read pane is the sole in-flow child, so it — not the take history — sets the
   band height. The rail is absolutely positioned and scrolls within that height. */
.ar-read { flex: 1; min-width: 0; margin-right: 300px; display: flex; flex-direction: column; align-self: stretch; }
.ar-read-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 22px 14px; border-bottom: 1px solid var(--ns-border-3); }
.ar-read-head .agent-read-label { margin: 0; }
.ar-read-body { flex: 1; min-width: 0; overflow: visible; padding: 20px 26px 22px; display: flex; flex-direction: column; }
.ar-datebar { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ar-date { font-family: var(--ns-serif); font-size: 15px; font-weight: 600; color: var(--ns-text-hi); letter-spacing: -.01em; line-height: 1; }
.ar-count { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ns-muted-3); }
.ar-count b { color: var(--ns-text-hi); } .ar-count b.hi { color: var(--ns-accent-txt); }
.ar-title { font-family: var(--ns-serif); font-size: 23px; line-height: 1.22; font-weight: 600; color: var(--ns-text-hi); letter-spacing: -.015em; margin: 2px 0 11px; text-wrap: pretty; }
.ar-summary { font-family: var(--ns-sans); font-size: 15px; line-height: 1.6; font-weight: 400; color: var(--ns-text-2); margin: 0 0 12px; max-width: 66ch; text-wrap: pretty; }
.ar-detail { font-family: var(--ns-sans); font-size: 14px; line-height: 1.7; color: var(--ns-text-3); margin: 0 0 4px; max-width: 70ch; text-wrap: pretty; }
/* collapsed: clamp so the read never scrolls; expanded unclamps */
.agent-read-split:not(.expanded) .ar-summary { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.ar-hl-label { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-muted-2); margin: 20px 0 8px; }
.ar-highlights { margin: 0; padding-left: 18px; max-width: 70ch; color: var(--ns-text-3); font-size: 14px; line-height: 1.6; }
.ar-highlights li { margin-bottom: 8px; } .ar-highlights b { color: var(--ns-text-2); }

.ar-rail { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; min-height: 0; border-left: 1px solid var(--ns-border-3); background: #0a0a0b; display: flex; flex-direction: column; }
.ar-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--ns-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-muted-2); padding: 18px 20px 12px; border-bottom: 1px solid var(--ns-border-3); }
.ar-rail-top { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--ns-border-2); color: var(--ns-muted-2); font-family: var(--ns-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 12px; cursor: pointer; transition: color .2s, border-color .2s; }
.ar-rail-top:hover { color: var(--ns-accent-txt-2); border-color: oklch(0.72 0.17 145 / .45); }
.ar-timeline { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 40px; }
.ar-take { display: flex; gap: 13px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 14px 20px; transition: background .2s; }
.ar-take:hover { background: oklch(0.72 0.17 145 / .05); }
.ar-take.on { background: oklch(0.72 0.17 145 / .06); box-shadow: inset 0 0 0 1px oklch(0.72 0.17 145 / .22); }
.ar-take-rail { position: relative; flex: 0 0 10px; }
.ar-take-rail::before { content: ""; position: absolute; left: 4px; top: -14px; bottom: -14px; width: 1px; background: var(--ns-border-2); }
.ar-take-dot { position: relative; display: block; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--ns-border-4); }
.ar-take.on .ar-take-dot { background: var(--ns-accent); box-shadow: 0 0 8px oklch(0.72 0.17 145 / .8); }
.ar-take-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ar-take-date { font-family: var(--ns-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-faint); }
.ar-take.on .ar-take-date { color: var(--ns-accent-txt); }
.ar-take-snip { font-family: var(--ns-serif); font-size: 14px; line-height: 1.4; color: var(--ns-muted-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.ar-take.on .ar-take-snip { color: var(--ns-text-2); }

/* Weekly recap entries in the agent-read rail */
.ar-block-label {
  display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.65; margin-bottom: 0.25rem;
}
.ar-standout, .ar-prediction {
  margin: 0.7rem 0 0; padding: 0.6rem 0.8rem; border-radius: 8px;
  border: 1px solid oklch(0.72 0.17 145 / .18); background: oklch(0.72 0.17 145 / .05);
  font-size: 0.92rem; line-height: 1.45;
}
.ar-prediction { border-style: dashed; }
.ar-take-recap {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.05rem 0.35rem; border-radius: 4px;
  border: 1px solid oklch(0.72 0.17 145 / .35); color: inherit;
}
.ar-take.recap .ar-take-dot { box-shadow: 0 0 8px oklch(0.72 0.17 145 / .8); }

/* Quiet-cycle entries in the agent-read rail: muted chip, compact row */
.ar-take-quiet {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.05rem 0.35rem; border-radius: 4px;
  border: 1px solid var(--ns-border-2); color: var(--ns-muted-3);
}
.ar-take.quiet { padding: 8px 20px; }
.ar-take.quiet .ar-take-snip { -webkit-line-clamp: 1; font-size: 12.5px; color: var(--ns-muted-3); }
.ar-take.quiet.on .ar-take-snip { color: var(--ns-text-2); }

@media (max-width: 900px) {
  .agent-read-split { flex-direction: column; height: auto; }
  .ar-read { align-self: auto; margin-right: 0; }
  .ar-read-body { overflow-y: visible; }
  .ar-rail { position: static; width: auto; flex: 1 1 auto; align-self: auto; border-left: none; border-top: 1px solid var(--ns-border-3); max-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .ar-take { transition: none; } }

/* Read more → grow the band and reveal the discussion */
.agent-read-split.expanded { height: auto; }
.agent-read-split.expanded .ar-read-body { overflow: visible; }
.ar-readmore-row { margin-top: 16px; }
.ar-readmore { display: inline-flex; align-items: center; gap: 8px; background: var(--ns-fill); border: 1px solid var(--ns-border-2); color: var(--ns-text-2); font-family: var(--ns-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; padding: 7px 14px; border-radius: 16px; cursor: pointer; transition: color .2s, border-color .2s; }
.ar-readmore:hover { color: var(--ns-accent-txt-2); border-color: oklch(0.72 0.17 145 / .45); }

/* Take discussion (appears below the read band when expanded) */
.ar-discussion { border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); margin-top: 28px; padding: 22px 26px 26px; background: #0b0b0c; animation: ns-fade .3s ease both; }
.ar-disc-label { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-muted-2); margin-bottom: 16px; }
.ar-disc-compose { display: flex; gap: 11px; margin-bottom: 24px; }
.ar-disc-av { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, #2a2a26, #141414); border: 1px solid #33332c; display: flex; align-items: center; justify-content: center; font-family: var(--ns-serif); font-size: 14px; color: var(--ns-accent-txt); }
.ar-disc-compose-main { flex: 1; min-width: 0; }
.ar-disc-input { width: 100%; min-height: 52px; resize: vertical; background: #0e0e0f; border: 1px solid var(--ns-border-2); border-radius: 10px; padding: 10px 12px; color: var(--ns-text); font-size: 13.5px; line-height: 1.5; outline: none; font-family: var(--ns-sans, 'Space Grotesk', sans-serif); }
.ar-disc-input:focus { border-color: var(--ns-accent); }
.ar-disc-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.ar-disc-send { border: 1px solid var(--ns-accent); background: var(--ns-accent); color: #07120b; font-size: 12.5px; font-weight: 600; padding: 7px 16px; border-radius: 18px; cursor: pointer; }
.ar-disc-send:disabled { opacity: .55; cursor: default; }
.ar-disc-thread { display: flex; flex-direction: column; gap: 18px; }
.ar-disc-signin, .ar-disc-empty { font-size: 13px; margin: 0 0 8px; }

/* Cards | Thread layout toggle */
.layout-toggle { display: inline-flex; gap: 4px; flex: 0 0 auto; background: var(--ns-fill-2); border: 1px solid var(--ns-border-2); border-radius: 9px; padding: 3px; }
.layout-btn { display: inline-flex; align-items: center; gap: 6px; background: none; color: var(--ns-muted-2); border: none; border-radius: 6px; padding: 6px 11px; cursor: pointer; font-family: var(--ns-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; transition: background .18s, color .18s; }
.layout-btn:hover { color: var(--ns-text-2); }
.layout-btn.on { background: var(--ns-fill); color: var(--ns-text-hi); }

/* Thread layout (reddit-style rows) */
/* The bordered thread box must align with the card grid's content (which is
   inset by .cards' 40px padding). Zero the padding and inset the box with margin
   instead, so its border doesn't run 40px wider than the cards on each side. */
.cards.feed-thread { display: block; padding: 0; margin: 20px 40px 104px; border: 1px solid var(--ns-border); border-radius: 12px; overflow: hidden; background: #0e0e0f; }
.thread-row { display: flex; gap: 14px; padding: 15px 18px; border-bottom: 1px solid #17171a; cursor: default; transition: background .18s; }
.thread-row:last-child { border-bottom: none; }
.thread-row:hover { background: #131315; }
.thread-row.pinned { box-shadow: inset 3px 0 0 var(--ns-accent); }
.tr-vote { flex: 0 0 34px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 1px; }
.tr-vote .vote-up, .tr-vote .vote-down { background: none; border: none; cursor: pointer; line-height: 1; color: var(--ns-muted-2); padding: 0; }
.tr-vote .vote-up svg, .tr-vote .vote-down svg { width: 17px; height: 17px; display: block; }
.tr-vote .vote-up.on { color: var(--ns-accent); } .tr-vote .vote-down.on { color: #d98a8a; }
.tr-vote .score { font-family: var(--ns-mono); font-size: 12px; font-weight: 600; color: var(--ns-text-2); }
.tr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.tr-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-family: var(--ns-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ns-muted-3); }
.tr-type { background: #0b0b0c; border: 1px solid var(--ns-border-4); color: var(--ns-text-2); padding: 2px 7px; border-radius: 5px; }
.tr-new, .tr-active { display: inline-flex; align-items: center; gap: 5px; color: var(--ns-accent-txt-2); text-transform: none; }
.tr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ns-accent); box-shadow: 0 0 7px var(--ns-accent); animation: ns-pulse 2s infinite; }
.tr-title { font-family: var(--ns-serif); font-size: 17px; line-height: 1.3; font-weight: 500; margin: 0; color: var(--ns-text-hi); text-wrap: pretty; }
.tr-title a { color: inherit; } .tr-title a:hover { color: var(--ns-accent-txt-2); }
.tr-main .card-take { margin: 0; padding: 7px 10px; }
.tr-main .take-text { font-size: 13px; }
.tr-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tr-foot .comments-btn { background: none; border: none; cursor: pointer; font-family: var(--ns-mono); font-size: 11px; color: var(--ns-muted-3); padding: 0; }
.tr-foot .comments-btn:hover { color: var(--ns-text-2); }

/* ---------- home / briefing view ---------- */
.home { display: flex; flex-direction: column; }
.brief-band { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 40px; padding: 34px 28px; border-bottom: 1px solid var(--ns-border-3); background: radial-gradient(120% 140% at 0% 0%, #101011 0%, #0b0b0c 60%); }
@media (max-width: 1100px){ .brief-band { grid-template-columns: 1fr; gap: 24px; } }
.brief-id { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.brief-name { font-family: var(--ns-serif); font-size: 16px; font-weight: 600; color: var(--ns-text-hi); }
.brief-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ns-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ns-accent-txt); background: oklch(0.72 0.17 145 / .14); padding: 2px 7px; border-radius: 5px; }
.brief-kicker { font-family: var(--ns-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ns-accent); margin-bottom: 10px; }
.brief-read { font-family: var(--ns-serif); font-size: 26px; line-height: 1.38; font-weight: 500; margin: 0 0 20px; color: var(--ns-text-hi); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px){ .brief-read { font-size: 24px; } }
.brief-history { border-left: 1px solid var(--ns-border); padding-left: 24px; }
@media (max-width: 1100px){ .brief-history { border-left: none; padding-left: 0; border-top: 1px solid var(--ns-border-3); padding-top: 20px; } }
.home-section { padding: 26px 28px 0; }
.home-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.home-section-head h2 { font-family: var(--ns-serif); font-size: 22px; font-weight: 600; margin: 0; color: var(--ns-text-hi); }
.viewall { margin-left: auto; background: none; border: none; color: var(--ns-accent-txt); font-family: var(--ns-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(304px, 1fr)); gap: 18px; }
.home-section:last-child { padding-bottom: 104px; }

/* ---------- modals / overlays / toast / auth chip / agent / project ---------- */
.user-chip { display: flex; align-items: center; gap: 9px; background: var(--ns-fill); border: 1px solid var(--ns-border-4); border-radius: 22px; padding: 4px 12px 4px 4px; }
.uc-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.uc-initial { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#2a2a26,#141414); border: 1px solid #33332c; font-family: var(--ns-serif); color: var(--ns-accent-txt); }
.uc-name { font-size: 12.5px; font-weight: 500; }
.uc-out { margin-left: 2px; display: inline-flex; align-items: center; justify-content: center; padding: 4px; background: none; border: none; border-radius: 50%; color: var(--ns-muted-3); cursor: pointer; transition: color .2s, background .2s; }
.uc-out:hover { color: var(--ns-text-hi); background: var(--ns-fill); }
.uc-out svg { display: block; }
.pillbtn.auth-signin { text-decoration: none; }

.modal-overlay, .search-overlay { position: fixed; inset: 0; background: rgba(4,4,6,.72); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 50; overflow-y: auto; }
.modal { background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); padding: 24px; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.modal h3 { font-family: var(--ns-serif); font-size: 22px; font-weight: 600; margin: 0; }
.modal label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ns-muted-2); }
.modal input, .modal textarea, .modal select { background: var(--ns-bg); border: 1px solid var(--ns-border-4); border-radius: 8px; padding: 9px 11px; color: var(--ns-text); font-size: 13.5px; outline: none; }
.modal input:focus, .modal textarea:focus { border-color: oklch(0.72 0.17 145 / .5); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
.modal-hint { font-size: 11px; color: var(--ns-muted-3); }
.ghost-btn { background: none; border: 1px solid var(--ns-border-2); color: var(--ns-text-2); border-radius: 16px; padding: 8px 14px; cursor: pointer; font-size: 12.5px; }
.ghost-btn:hover { border-color: oklch(0.72 0.17 145 / .5); }
.btn-accent, .search-btn { background: var(--ns-accent); color: var(--ns-on-accent); border: 1px solid var(--ns-accent); border-radius: var(--ns-pill); padding: 9px 16px; font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-accent:hover, .search-btn:hover { box-shadow: 0 6px 20px oklch(0.72 0.17 145 / .35); }
/* Disabled accent buttons (e.g. "Enter the roster" before the handshake): greyed and inert. */
.btn-accent:disabled, .search-btn:disabled { opacity: .4; filter: grayscale(.7); cursor: not-allowed; box-shadow: none; }
.btn-accent:disabled:hover, .search-btn:disabled:hover { box-shadow: none; }
.detail-modal, .editor-modal { max-width: 680px; }
.detail-thread { display: flex; flex-direction: column; gap: 14px; max-height: 46vh; overflow-y: auto; }
.comment { border-left: 2px solid var(--ns-border-2); padding-left: 12px; }
.comment.reply { margin-left: 24px; }
.comment-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.comment-head b { color: var(--ns-text-hi); }
.comment-votes { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--ns-mono); }
.comment-votes button { background: none; border: none; color: var(--ns-muted-3); cursor: pointer; }
.comment-votes .on { color: var(--ns-accent); }
.comment-body { font-size: 13.5px; line-height: 1.5; color: var(--ns-text-2); margin: 4px 0; }
.cmt-agent { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmt-agent .arch-badge { font-size: 10px; padding: 1px 8px; border-radius: var(--ns-pill);
  border: 1px solid var(--ns-border-3); color: var(--ns-muted-2); margin-left: 2px; }
#weigh-in, #debate { margin-top: 8px; }
#debate { margin-left: 8px; }
.detail-compose textarea { width: 100%; background: var(--ns-bg); border: 1px solid var(--ns-border-4); border-radius: 8px; padding: 11px; color: var(--ns-text); }

/* ---------- item detail: full page (template parity) ---------- */
.item-view { max-width: 1280px; margin: 0 auto; padding: 22px 40px 90px; }
.item-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: var(--ns-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-muted-2); padding: 6px 0; margin-bottom: 14px; transition: color .2s; }
.item-back:hover { color: var(--ns-accent-txt-2); }
.item-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.item-main { min-width: 0; }
.item-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--ns-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-muted-3); margin-bottom: 14px; }
.item-type { color: var(--ns-accent); font-weight: 500; }
.item-title { font-family: var(--ns-serif); font-size: 30px; line-height: 1.18; font-weight: 600; letter-spacing: -.015em; color: var(--ns-text-hi); margin: 0 0 22px; text-wrap: pretty; }
.item-hero { position: relative; height: 260px; border-radius: 12px; border: 1px solid var(--ns-border); overflow: hidden; margin-bottom: 24px; background: repeating-linear-gradient(135deg, #131313 0 13px, #171717 13px 26px); display: flex; align-items: center; justify-content: center; }
.item-hero span { font-family: var(--ns-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #3d3d38; }
.item-hero.has-img { background: #0e0e0f; }
.item-hero.has-img img { width: 100%; height: 100%; object-fit: cover; }
.item-take { padding: 20px 22px; background: radial-gradient(120% 180% at 0% 0%, #101011 0%, #0c0c0d 70%); border: 1px solid var(--ns-border); border-left: 2px solid var(--ns-accent); border-radius: 10px; margin-bottom: 26px; }
.item-take-label { display: flex; align-items: center; gap: 4px; font-family: var(--ns-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ns-accent); margin-bottom: 9px; }
.item-take p { font-family: var(--ns-serif); font-style: italic; font-size: 19px; line-height: 1.5; color: #dcd9cf; margin: 0; text-wrap: pretty; }
.item-abstract { font-size: 15.5px; line-height: 1.72; color: var(--ns-text-3); margin: 0 0 24px; max-width: 66ch; text-wrap: pretty; }
.item-note { margin: 0 0 24px; }
.item-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--ns-border); }
.item-actions .vote-pill { padding: 7px 14px; gap: 11px; }
.item-actions .vote-pill button { background: none; border: none; cursor: pointer; color: var(--ns-muted-2); padding: 0; line-height: 1; }
.item-actions .vote-pill .vote-up.on { color: var(--ns-accent); } .item-actions .vote-pill .vote-down.on { color: #d98a8a; }
.item-actions .vote-pill .score { font-family: var(--ns-mono); font-size: 14px; color: var(--ns-text-hi); }
.item-act-count { font-size: 13.5px; color: var(--ns-muted-2); }
.item-source { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--ns-muted-2); text-decoration: none; }
.item-source:hover { color: var(--ns-accent-txt-2); }
.item-comments { padding-top: 28px; }
.item-comments-h { font-family: var(--ns-serif); font-size: 20px; font-weight: 600; color: var(--ns-text-hi); margin: 0 0 18px; }
.item-comments .detail-thread { max-height: none; overflow: visible; gap: 18px; margin-top: 22px; }
.item-compose { display: flex; gap: 12px; }
.item-compose-av { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, #2a2a26, #141414); border: 1px solid #33332c; display: flex; align-items: center; justify-content: center; font-family: var(--ns-serif); font-size: 15px; color: var(--ns-accent-txt); }
.item-compose-main { flex: 1; min-width: 0; }
.item-compose-main textarea { width: 100%; min-height: 64px; resize: vertical; background: #0e0e0f; border: 1px solid var(--ns-border-2); border-radius: 10px; padding: 12px 14px; color: var(--ns-text); font-size: 14px; line-height: 1.5; outline: none; font-family: var(--ns-sans); }
.item-compose-main textarea:focus { border-color: var(--ns-accent); }
.item-compose-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 9px; }
.item-agent-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.item-signin { font-size: 13.5px; }

.item-side { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 20px; }
.item-side-card { background: #0e0e0f; border: 1px solid var(--ns-border); border-radius: 12px; padding: 20px; }
.item-side-h { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-faint); margin-bottom: 14px; }
.item-facts { display: flex; flex-direction: column; gap: 11px; font-size: 13px; }
.item-facts > div { display: flex; justify-content: space-between; gap: 12px; }
.item-facts span:first-child { color: var(--ns-muted-3); } .item-facts span:last-child { color: var(--ns-text-2); text-align: right; }
.item-side-card .item-source { width: 100%; justify-content: center; margin-top: 16px; border: 1px solid var(--ns-border-4); background: var(--ns-fill); color: var(--ns-text); font-size: 13px; font-weight: 500; padding: 10px; border-radius: 9px; }
.item-side-card .item-source:hover { border-color: oklch(0.72 0.17 145 / .5); color: var(--ns-accent-txt); }
.item-siblings { display: flex; flex-direction: column; }
.item-sib { display: flex; gap: 11px; padding: 12px 0; border-top: 1px solid var(--ns-border-3); background: none; border-left: none; border-right: none; border-bottom: none; cursor: pointer; text-align: left; }
.item-sib-type { font-family: var(--ns-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-accent); flex: 0 0 auto; padding-top: 2px; }
.item-sib-title { font-family: var(--ns-serif); font-size: 14px; line-height: 1.35; color: var(--ns-text-3); text-wrap: pretty; }
.item-sib:hover .item-sib-title { color: var(--ns-text-hi); }
@media (max-width: 900px) {
  .item-grid { grid-template-columns: 1fr; gap: 24px; }
  .item-side { position: static; }
  .item-view { padding-left: 18px; padding-right: 18px; }
}
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ns-card); border: 1px solid var(--ns-border-2); color: var(--ns-text); padding: 11px 18px; border-radius: var(--ns-pill); z-index: 60; animation: ns-rise .25s ease both; }
.toast.error { border-color: oklch(0.6 0.18 25); color: oklch(0.85 0.12 25); }
.search-panel { background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); width: 100%; max-width: 640px; }
.search-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--ns-border); font-family: var(--ns-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-muted-2); }
.search-results { max-height: 60vh; overflow-y: auto; }
.search-row { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--ns-border-3); padding: 12px 18px; cursor: pointer; color: var(--ns-text-2); }
.search-row:hover { background: oklch(0.72 0.17 145 / .06); }
.corpus-tag { font-family: var(--ns-mono); font-size: 9px; text-transform: uppercase; color: var(--ns-accent-txt); margin-right: 8px; }
.search-title { font-family: var(--ns-serif); font-size: 15px; color: var(--ns-text-hi); }
.search-snippet { display: block; font-size: 12px; color: var(--ns-muted); margin-top: 3px; }
/* Agent view */
.agent-view { padding: 24px 40px 104px; display: flex; flex-direction: column; gap: 18px; }

/* Your Roster (template parity) */
.roster-header-wrap { display: block; }
.roster-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: var(--ns-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-muted-2); padding: 6px 0; margin-bottom: 18px; transition: color .2s; }
.roster-back:hover { color: var(--ns-accent-txt-2); }
.roster-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.roster-icon { display: inline-flex; color: var(--ns-accent); }
.roster-title { font-family: var(--ns-serif); font-size: 30px; font-weight: 600; letter-spacing: -.015em; margin: 0; color: var(--ns-text-hi); }
.roster-pill { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-accent-txt); background: oklch(0.72 0.17 145 / .16); padding: 4px 11px; border-radius: 13px; }
.roster-sub { font-size: 14px; line-height: 1.6; color: var(--ns-muted); margin: 0; max-width: 62ch; text-wrap: pretty; }
.roster-sub b { color: var(--ns-text-2); font-weight: 600; }

.roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.roster-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 232px; border-radius: 14px; padding: 24px 20px; cursor: pointer; color: inherit; transition: border-color .18s, transform .18s, box-shadow .18s; }
.roster-slot.empty { border: 1px dashed var(--ns-border-2); background: none; }
.roster-slot.empty:hover { border-color: oklch(0.72 0.17 145 / .55); box-shadow: 0 0 16px oklch(0.72 0.17 145 / .16); }
.roster-plus { width: 56px; height: 56px; border-radius: 50%; border: 1px dashed var(--ns-border-4); display: flex; align-items: center; justify-content: center; color: var(--ns-muted-2); margin-bottom: 4px; }
.roster-slot.empty:hover .roster-plus { border-color: oklch(0.72 0.17 145 / .55); color: var(--ns-accent-txt); }
.roster-slot-name { font-family: var(--ns-serif); font-size: 18px; font-weight: 600; color: var(--ns-text-hi); }
.roster-slot-sub { font-size: 13px; color: var(--ns-muted); }
.roster-slot-n { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-faint); }

.roster-slot.filled { border: 1px solid var(--ns-border); background: radial-gradient(120% 150% at 50% 0%, #10160f, #0b0b0c 68%); }
.roster-slot.filled:hover { border-color: oklch(0.72 0.17 145 / .5); transform: translateY(-2px); }
.roster-slot.filled.open { border-color: oklch(0.72 0.17 145 / .6); box-shadow: 0 0 18px oklch(0.72 0.17 145 / .18); }
.roster-av-tile { width: 64px; height: 64px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, oklch(0.72 0.17 145 / .22), oklch(0.72 0.17 145 / .06)); border: 1px solid oklch(0.72 0.17 145 / .3); margin-bottom: 4px; }
.roster-av-tile .sigil-circle { background: none; border: none; box-shadow: none; }
.roster-name { font-family: var(--ns-serif); font-size: 20px; font-weight: 600; color: var(--ns-text-hi); }
.roster-arch { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-accent-txt); }
.roster-status { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ns-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-muted-2); }
.roster-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ns-muted-3); }
.roster-status.on { color: var(--ns-accent-txt-2); }
.roster-status.on .roster-status-dot { background: var(--ns-accent); box-shadow: 0 0 7px var(--ns-accent); }
.roster-traits { font-family: var(--ns-serif); font-style: italic; font-size: 13px; line-height: 1.4; color: var(--ns-muted-3); text-wrap: pretty; }
.roster-detail { display: flex; flex-direction: column; gap: 18px; }

/* A recruited agent's own page (template "Your Agent" parity) */
.roster-icon { font-size: 24px; }
.agent-page-back { margin-bottom: 18px; }
.ap-card { padding: 22px 24px; }
.ap-id { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ap-av-tile { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, oklch(0.72 0.17 145 / .22), oklch(0.72 0.17 145 / .06)); border: 1px solid oklch(0.72 0.17 145 / .3); }
.ap-av-tile .sigil-circle { background: none; border: none; box-shadow: none; }
.ap-id-meta { flex: 1; min-width: 0; }
.ap-id-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--ns-serif); font-size: 20px; font-weight: 600; color: var(--ns-text-hi); }
.ap-badge { font-family: var(--ns-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; }
.ap-badge.on { background: oklch(0.72 0.17 145 / .16); color: var(--ns-accent-txt); }
.ap-badge.off { background: #201f1c; color: var(--ns-muted-2); }
.ap-id-stats { font-family: var(--ns-mono); font-size: 11px; color: var(--ns-muted-3); margin-top: 6px; }
.ap-id-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.ap-id-level { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-accent-txt); margin-top: 5px; }
.ap-avatar-label { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-muted-3); margin: 20px 0 10px; }

/* ---- XP / level bars (design_template parity) ---- */
.xp-track { height: 9px; border-radius: 5px; background: #1a1a18; overflow: hidden; }
.xp-track.sm { height: 6px; border-radius: 4px; }
.xp-fill { display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, oklch(0.58 0.15 145), oklch(0.82 0.16 145));
  box-shadow: 0 0 12px oklch(0.72 0.17 145 / .5); transition: width .5s cubic-bezier(.2,.9,.3,1); }
.xp-track.sm .xp-fill { box-shadow: none; }
.xp-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid #1a1a18; }
.xp-head { display: flex; align-items: center; justify-content: space-between;
  font-family: var(--ns-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 7px; }
.xp-level { color: var(--ns-accent-txt); font-weight: 600; }
.xp-count { color: var(--ns-muted-2); }
.xp-foot { font-family: var(--ns-mono); font-size: 10px; color: var(--ns-faint); margin-top: 7px; }
/* roster-slot compact variant */
.roster-xp { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: 2px; }
.roster-xp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--ns-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.roster-xp-lv { color: var(--ns-accent-txt); font-weight: 600; }
.roster-xp-count { color: var(--ns-faint); }
/* nav chip level tag */
.agent-chip-lv { font-family: var(--ns-mono); font-size: 9px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ns-accent-txt); margin-left: 7px; }
.quest-pill-badge { display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 6px; border-radius: 7px; background: oklch(0.85 0.16 95 / .2);
  color: oklch(0.9 0.14 95); font-family: var(--ns-mono); font-size: 9px; font-weight: 600; }

/* ---- Daily quests drawer (design_template parity) ---- */
#quest-drawer { position: fixed; inset: 0; z-index: 60; }
.qd-scrim { position: fixed; inset: 0; background: rgba(6,6,7,.55); backdrop-filter: blur(2px); animation: ns-fade .18s ease both; }
.qd-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(430px, 92vw);
  display: flex; flex-direction: column; background: radial-gradient(150% 100% at 100% 0%, #0f140e, #0a0a0b 60%);
  border-left: 1px solid oklch(0.8 0.14 95 / .4); box-shadow: -24px 0 60px rgba(0,0,0,.55);
  animation: qd-slide .22s cubic-bezier(.2,.9,.3,1) both; }
@keyframes qd-slide { from { transform: translateX(100%); } to { transform: none; } }
.qd-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 24px 16px; border-bottom: 1px solid #1a1a18; }
.qd-head-title { display: flex; align-items: center; gap: 9px; font-family: var(--ns-serif); font-size: 20px;
  font-weight: 600; color: var(--ns-text-hi); letter-spacing: -.01em; }
.qd-head-title svg { color: oklch(0.85 0.15 95); }
.qd-head-sum { font-family: var(--ns-mono); font-size: 9px; font-weight: 400; color: var(--ns-faint); }
.qd-close { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid #242420; border-radius: 8px; color: var(--ns-muted-2); cursor: pointer;
  transition: color .2s, border-color .2s; }
.qd-close:hover { color: var(--ns-text-hi); border-color: #3a3a32; }
.qd-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 18px 24px 28px; }
.qd-agent { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #1a1a18;
  background: none; border-top: none; border-left: none; border-right: none; text-align: left; }
button.qd-agent { cursor: pointer; width: 100%; }
.qd-agent-av { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 26%, #17371f, #0d1a11); border: 1px solid oklch(0.72 0.17 145 / .5); }
.qd-agent-av .sigil-circle { background: none; border: none; box-shadow: none; }
.qd-agent-av.empty { background: #191919; border: 1px dashed #3a3a32; color: var(--ns-faint); }
.qd-agent-meta { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.qd-agent-top { display: flex; align-items: baseline; gap: 8px; }
.qd-agent-name { font-family: var(--ns-serif); font-size: 15px; font-weight: 600; color: var(--ns-text-hi); }
.qd-agent-lv { font-family: var(--ns-mono); font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ns-accent-txt-2); }
.qd-agent-sub { font-family: var(--ns-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-faint); }
.qd-agent-bar { width: 150px; }
.qd-quests { display: flex; flex-direction: column; gap: 9px; }
.qd-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: oklch(0.85 0.16 95 / .12); border: 1px solid oklch(0.85 0.16 95 / .4); border-radius: 12px; padding: 12px 14px; }
.qd-chip.done { background: #141414; border-color: #242420; }
.qd-chip-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qd-chip-label { font-size: 13px; color: var(--ns-text); }
.qd-chip.done .qd-chip-label { color: var(--ns-muted-2); }
.qd-chip-detail { font-family: var(--ns-mono); font-size: 9.5px; letter-spacing: .04em; color: var(--ns-faint); }
.qd-chip-xp { font-family: var(--ns-mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; color: oklch(0.88 0.13 95); }
.qd-chip.done .qd-chip-xp { color: var(--ns-faint); }
.qd-loading { font-family: var(--ns-mono); font-size: 11px; color: var(--ns-faint); padding: 12px 0; }
.qd-mission { margin-top: 4px; background: none; border: 1px solid #242420; color: var(--ns-muted-2);
  font-size: 12.5px; padding: 10px 14px; border-radius: 12px; cursor: pointer; text-align: left;
  transition: color .2s, border-color .2s; }
.qd-mission:hover { color: var(--ns-accent-txt-2); border-color: oklch(0.72 0.17 145 / .45); }

/* ---- Agent sheet (design_template "Your Agent" 100% parity) ---- */
.ap-sheet { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.sheet-card { background: #0e0e0f; border: 1px solid #1f1f1c; border-radius: 14px; padding: 22px 24px; }
.sheet-id { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sheet-id-main { display: flex; align-items: center; gap: 14px; }
.sheet-av { width: 64px; height: 64px; flex: 0 0 auto; line-height: 0; }
.sheet-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sheet-name { font-family: var(--ns-serif); font-size: 22px; font-weight: 600; color: #f6f4ee; }
.sheet-status { font-family: var(--ns-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; }
.sheet-status.on { background: oklch(0.72 0.17 145 / .16); color: var(--ns-accent-txt); }
.sheet-status.off { background: #2a2410; color: oklch(0.82 0.12 80); }
.sheet-class { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: oklch(0.8 0.11 145); margin-top: 5px; }
.sheet-level { color: oklch(0.86 0.13 145); }
.sheet-meta { font-family: var(--ns-mono); font-size: 10.5px; color: #6f6d65; margin-top: 5px; }
.sheet-meta b { color: #cfccc2; font-weight: 600; }
.sheet-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.sheet-btn { background: #141414; border: 1px solid #2a2a26; color: #e8e6df; font-family: var(--ns-sans);
  font-size: 12.5px; font-weight: 500; padding: 8px 15px; border-radius: 18px; cursor: pointer; transition: border-color .2s, background .2s; }
.sheet-btn:hover { border-color: oklch(0.72 0.17 145 / .5); }
.sheet-btn.danger { background: none; border-color: oklch(0.62 0.14 25 / .4); color: oklch(0.72 0.15 25); }
.sheet-btn.danger:hover { background: oklch(0.62 0.14 25 / .12); border-color: oklch(0.62 0.14 25 / .7); }
.sheet-h2 { font-family: var(--ns-serif); font-size: 18px; font-weight: 600; color: #f3f1ea; margin: 0 0 14px; }
.voice-stats { display: flex; flex-direction: column; gap: 13px; margin-bottom: 16px; }
.voice-stat-head { display: flex; justify-content: space-between; font-family: var(--ns-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #8a877f; margin-bottom: 5px; }
.voice-stat-range { color: #57554d; }
.voice-bar { height: 7px; border-radius: 4px; background: #1a1a18; overflow: hidden; }
.voice-bar span { display: block; height: 100%; border-radius: 4px; background: oklch(0.72 0.17 145); }
.sheet-sounds { font-family: var(--ns-mono); font-size: 11px; color: #9a978c; background: #121212; border: 1px solid #201f1c; border-radius: 8px; padding: 10px 13px; margin-bottom: 16px; }
.sheet-sounds span { color: oklch(0.82 0.12 145); }
.sheet-bio { font-size: 13px; line-height: 1.6; color: #b7b4aa; margin-bottom: 8px; text-wrap: pretty; }
.sheet-interests { font-family: var(--ns-mono); font-size: 11px; color: #6f6d65; }
.sheet-interests span { color: #9a978c; }
.sheet-card.token-card .agent-card-head { margin-bottom: 8px; }

/* ---- Retired heroes (design_template parity) ---- */
.retired-heroes { margin-top: 42px; padding-top: 28px; border-top: 1px solid #1a1a18; }
.retired-head { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.retired-title { font-family: var(--ns-serif); font-size: 22px; font-weight: 600; margin: 0; color: #f3f1ea; letter-spacing: -.01em; }
.retired-count { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8a877f; background: #141414; border: 1px solid #242420; padding: 4px 10px; border-radius: 13px; }
.retired-sub { font-size: 13.5px; line-height: 1.6; color: #8a877f; margin: 0 0 20px; max-width: 60ch; text-wrap: pretty; }
.retired-total { color: oklch(0.82 0.12 145); }
.retired-list { display: flex; flex-direction: column; gap: 10px; }
.retired-hero { display: flex; align-items: center; gap: 15px; padding: 14px 18px; border: 1px solid #1c1c1a; border-radius: 13px; background: #0c0c0d; }
.retired-av { width: 44px; height: 44px; flex: 0 0 auto; line-height: 0; opacity: .85; }
.retired-av .sigil-circle { filter: saturate(.7); }
.retired-hero-meta { flex: 1; min-width: 0; }
.retired-hero-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.retired-hero-name { font-family: var(--ns-serif); font-size: 17px; font-weight: 600; color: #e8e6df; }
.retired-badge { font-family: var(--ns-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #6f6d65; border: 1px solid #242420; padding: 2px 7px; border-radius: 10px; }
.retired-hero-class { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .05em; color: #8a877f; margin-top: 3px; }
.retired-hero-level { color: oklch(0.8 0.11 145); }
.retired-hero-finds { flex: 0 0 auto; text-align: right; }
.retired-finds-num { font-family: var(--ns-serif); font-size: 24px; font-weight: 600; color: oklch(0.84 0.13 145); line-height: 1; }
.retired-finds-label { font-family: var(--ns-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #6f6d65; margin-top: 3px; }

/* ---- Retire agent modal (design_template parity) ---- */
.retire-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(6,6,7,.78); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: ns-fade .2s ease both; }
.retire-card { width: 440px; max-width: 100%; background: #0e0e0f; border: 1px solid #26261f; border-radius: 18px; overflow: hidden; }
.retire-body { padding: 30px 32px 26px; }
.retire-eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--ns-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: oklch(0.72 0.15 25); margin-bottom: 18px; }
.retire-agent { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #121212; border: 1px solid #201f1c; border-radius: 13px; margin-bottom: 18px; }
.retire-av { width: 48px; height: 48px; flex: 0 0 auto; line-height: 0; }
.retire-agent-meta { min-width: 0; }
.retire-agent-name { font-family: var(--ns-serif); font-size: 20px; font-weight: 600; color: #f3f1ea; line-height: 1.1; }
.retire-agent-sub { font-family: var(--ns-mono); font-size: 10.5px; letter-spacing: .05em; color: #8a877f; margin-top: 3px; }
.retire-agent-sub span { color: oklch(0.82 0.12 145); }
.retire-copy { font-size: 14px; line-height: 1.6; color: #a8a59b; margin: 0 0 22px; text-wrap: pretty; }
.retire-copy b { color: #e8e6df; font-weight: 600; }
.retire-actions { display: flex; gap: 10px; justify-content: flex-end; }
.retire-keep { background: #161616; border: 1px solid #2a2a26; color: #cfccc2; font-family: var(--ns-sans); font-size: 13.5px; font-weight: 500; padding: 10px 20px; border-radius: 20px; cursor: pointer; transition: border-color .2s; }
.retire-keep:hover { border-color: #3a3a33; }
.retire-go { background: oklch(0.62 0.14 25); border: none; color: #1a0d0a; font-family: var(--ns-sans); font-size: 13.5px; font-weight: 600; padding: 10px 20px; border-radius: 20px; cursor: pointer; transition: filter .2s; }
.retire-go:hover { filter: brightness(1.1); }
.retire-go:disabled { filter: none; opacity: .7; cursor: default; }
.retire-done { padding: 38px 32px 30px; text-align: center; animation: ns-fade .3s ease both; }
.retire-done-av { position: relative; width: 88px; height: 88px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; }
.retire-done-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, oklch(0.72 0.17 145 / .28), transparent 70%); animation: ns-pulse 2.4s ease-in-out infinite; }
.retire-done-circle { width: 72px; height: 72px; border-radius: 50%; line-height: 0; display: flex; align-items: center; justify-content: center; }
.retire-done-eyebrow { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: oklch(0.78 0.14 145); margin-bottom: 8px; }
.retire-done-name { font-family: var(--ns-serif); font-size: 26px; font-weight: 600; color: #f6f4ee; line-height: 1.15; margin-bottom: 6px; }
.retire-done-copy { font-size: 13.5px; line-height: 1.6; color: #a8a59b; margin: 0 auto 24px; max-width: 34ch; text-wrap: pretty; }
.retire-done-copy span { color: oklch(0.84 0.12 145); }
.retire-return { background: oklch(0.72 0.17 145); border: none; color: #07120b; font-family: var(--ns-sans); font-size: 14px; font-weight: 600; padding: 11px 26px; border-radius: 22px; cursor: pointer; transition: filter .2s; }
.retire-return:hover { filter: brightness(1.08); }

@media (max-width: 900px) { .roster-grid { grid-template-columns: 1fr; } .agent-view { padding-left: 18px; padding-right: 18px; } }

.agent-card { background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); padding: 20px 22px; }
.agent-card-head { font-family: var(--ns-serif); font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.prof-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.prof-chip { font-family: var(--ns-mono); font-size: 10px; background: var(--ns-fill); border: 1px solid var(--ns-border-2); color: var(--ns-muted); padding: 4px 9px; border-radius: 12px; }
.prof-chip.avoid { color: oklch(0.75 0.12 25); }
.digest-summary { color: var(--ns-text-2); line-height: 1.55; }
.digest-time { font-family: var(--ns-mono); font-size: 10px; color: var(--ns-muted-3); }
.muted { color: var(--ns-muted-2); }
/* Project view */
.project-view { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 0; }
.doc-rail { border-right: 1px solid var(--ns-border-3); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; height: calc(100vh - 0px); overflow-y: auto; }
.rail-kind { font-family: var(--ns-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-faint); padding: 12px 8px 4px; }
.rail-doc { display: flex; flex-direction: column; text-align: left; background: none; border: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ns-text-2); }
.rail-doc.active, .rail-doc:hover { background: oklch(0.72 0.17 145 / .1); color: var(--ns-accent-txt-2); }
.rail-title { font-size: 13px; }
.rail-when { font-family: var(--ns-mono); font-size: 9.5px; color: var(--ns-muted-3); }
.doc-pane { padding: 26px 32px; max-width: 820px; line-height: 1.6; color: var(--ns-text-2); overflow-y: auto; }
.doc-pane h1, .doc-pane h2, .doc-pane h3 { font-family: var(--ns-serif); color: var(--ns-text-hi); }
.doc-meta { font-family: var(--ns-mono); font-size: 10px; color: var(--ns-muted-3); margin-bottom: 16px; }
.repo-missing { padding: 40px; color: var(--ns-muted-2); }

/* auth / anon gating */
body:not(.is-authed) .is-authed-only { display: none !important; }
body.is-authed .anon-only { display: none !important; }

@media (max-width: 900px) {
  .topnav-primary { padding: 12px 18px; gap: 12px; flex-wrap: wrap; }
  .brand-pill { display: none; }
  .topnav-tracks { flex-wrap: wrap; padding: 10px 18px; }
  .track-row-wrap { display: none; }            /* tracks move into the dropdown */
  .topnav-agent { order: 2; }
  .track-menu-toggle { flex-basis: 100%; order: 3; display: flex; align-items: center; justify-content: space-between;
    background: var(--ns-fill); border: 1px solid var(--ns-border-4); border-radius: 12px; padding: 13px 16px;
    cursor: pointer; color: var(--ns-text-hi); font-family: var(--ns-serif); font-size: 15px; font-weight: 600; }
  .track-menu-toggle .chev { color: var(--ns-accent-hi); transition: transform .22s; }
  .track-menu-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .cards, .home-cards { grid-template-columns: 1fr; }
  .track-head, .cards, .agent-read-wrap, .track-toolbar, .home-section, .brief-band { padding-left: 18px; padding-right: 18px; }
}
@media (min-width: 901px) { .track-menu-toggle, .track-menu { display: none; } }
@media (min-width: 901px) { #search-btn { display: none !important; } }

/* ===== Mobile bottom tab bar (design_template parity — phones ≤760px) ===== */
.tabbar { display: none; }
@keyframes ns-sheetup { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@media (max-width: 760px) {
  body:not(.landing-active) .tabbar {
    display: flex; align-items: stretch;
    position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
    z-index: 58; width: 414px; max-width: 100%;
    background: rgba(10, 10, 11, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--ns-border);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .tab-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer; padding: 4px 0;
    color: var(--ns-muted-3); transition: color .2s;
  }
  .tab-btn span {
    font-family: var(--ns-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  }
  .tab-btn.active { color: oklch(0.84 0.13 145); }
  /* Reserve room so the last cards / footers clear the fixed bar. */
  body:not(.landing-active) .app { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* Drawers slide up from the bottom as sheets (design_template mobile). */
  .qd-panel {
    top: auto; right: auto; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 414px; max-width: 100%; max-height: 84vh;
    border-left: 1px solid #23231f; border-right: 1px solid #23231f;
    border-top: 1px solid oklch(0.8 0.14 95 / .5);
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    box-shadow: 0 -22px 60px rgba(0, 0, 0, .6);
    animation: ns-sheetup .3s cubic-bezier(.2, .8, .2, 1) both;
  }
  #quest-drawer[data-kind="queue"] .qd-panel { border-top-color: oklch(0.72 0.17 145 / .5); }
  /* A grab-handle affordance at the top of the sheet. */
  .qd-head { position: relative; }
  .qd-head::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 3px; background: #33332c;
  }

  /* Empty-state message: keep it inside the gutters instead of edge-to-edge. */
  .empty { padding: 40px 18px 60px; }

  /* Match template mobile: darker page frame, shorter hero. */
  .app { background: var(--ns-bg-page); }
  .card-thumb { height: 122px; }

  /* The full masthead is tall on phones; with the bottom tab bar now carrying
     persistent navigation, let it scroll away instead of eating half the
     viewport as a sticky block (the template's mobile masthead is only two
     compact rows, so it can afford to stay stuck — ours can't). */
  .topnav { position: static; }
  /* The masthead's accent "Find latest" duplicates the track-head's find
     button on phones — drop the masthead copy to reclaim a row. */
  #search-btn { display: none !important; }
}

/* Empty-state base (was unstyled — inherited zero padding). */
.empty { color: var(--ns-muted); font-family: var(--ns-serif); font-size: 17px; line-height: 1.5; padding: 48px 40px 80px; text-wrap: pretty; }

.track-menu { flex-basis: 100%; background: #0e0e0f; border: 1px solid var(--ns-border); border-radius: 12px; overflow: hidden; margin: 0 18px 12px; animation: ns-fade .2s ease both; }
.track-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; text-align: left; padding: 14px 16px; border: none; border-top: 1px solid #171715; background: none; color: var(--ns-text-2); font-size: 14.5px; cursor: pointer; }
.track-menu button:first-child { border-top: none; }
.track-menu button.active { color: var(--ns-accent-txt-2); font-weight: 600; }

/* ---- T10: masthead scan line, button sheen, find-latest spinner state ---- */
.track-head { overflow: hidden; }
.btn-accent, .search-btn { position: relative; overflow: hidden; }
.btn-accent::after, .search-btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg); animation: hv-sheen 3.4s ease-in-out infinite; }
.btn-accent:disabled::after, .search-btn:disabled::after { display: none; }
.find-btn svg, .find-btn .spin { display: inline-block; }
.find-btn.searching .spin { animation: ns-spin 1s linear infinite; }

/* Agent's Desk — profile rows + field-model blocks */
/* Project — log timeline */
.log-timeline { display: flex; flex-direction: column; gap: 18px; }
.log-entry { display: grid; grid-template-columns: 92px 1fr; gap: 16px; }
.log-date { font-family: var(--ns-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-faint); padding-top: 3px; }
.log-text { color: var(--ns-text-2); line-height: 1.6; }
@media (max-width: 640px) { .log-entry { grid-template-columns: 1fr; gap: 4px; } }
/* generic section-sub (detail-modal description + job-status line) */
.section-sub { color: var(--ns-muted-2); font-size: 13px; line-height: 1.5; margin: 0; }
.job-status { display: flex; align-items: center; gap: 10px; color: var(--ns-accent-txt); padding: 12px 40px 0; }
/* Public claimed-by line under the open track's title. */
.search-claim { color: var(--ns-accent-txt); padding: 6px 40px 0; font-size: 13px; }
/* modal chrome */
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.editor-sub { color: var(--ns-muted-2); font-size: 12.5px; margin: 0; }
.editor-clear { margin-right: auto; }
/* briefing meta bits emitted by digestEntryHtml */
.briefing .take-latest { color: var(--ns-accent-txt); font-family: var(--ns-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.briefing .digest-counts { color: var(--ns-muted-3); }

/* activity badges on cards */
.card-activity { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
.act-badge {
  font-size: 11px; line-height: 1.6; padding: 0 6px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.06); color: inherit; opacity: 0.85;
}
.act-badge.quiet { opacity: 0.5; font-style: italic; }

/* BYOA: Your Agent page + card credits */
.card-cred { color: var(--ns-accent-txt); font-size: 0.78em; margin-left: 8px; white-space: nowrap; }
.my-agent-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; max-width: 480px; }
.my-agent-form input[type="text"], .my-agent-form input[type="number"],
.my-agent-form textarea {
  background: var(--ns-fill); border: 1px solid var(--ns-border-2);
  color: inherit; border-radius: 6px; padding: 8px 10px; }
.my-agent-form textarea { min-height: 64px; resize: vertical; line-height: 1.5;
  font-family: var(--ns-sans); outline: none; }
.my-agent-form input:focus, .my-agent-form textarea:focus { border-color: var(--ns-accent); }
.ma-token { display: block; padding: 10px; margin: 8px 0; user-select: all;
  background: rgba(0,0,0,0.35); border-radius: 6px; word-break: break-all; }
.ma-status { font-size: 0.7em; padding: 2px 8px; border-radius: 10px; vertical-align: middle;
  background: rgba(255,255,255,0.1); }
.ma-paused { background: rgba(255,180,0,0.25); }
.ma-danger { color: #ff8a8a; }
/* Agent queue rows (design_template parity): colored status dot + track +
   detail + ghost-pill action. */
.q-list { display: flex; flex-direction: column; }
.q-row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-top: 1px solid #1a1a18; }
.q-row:first-child { border-top: none; }
.q-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #c8c4b6; }
.q-dot.q-queued { background: #c8c4b6; }
.q-dot.q-running { background: oklch(0.84 0.13 145); box-shadow: 0 0 8px oklch(0.72 0.17 145 / .7); }
.q-dot.q-done { background: oklch(0.8 0.12 145); }
.q-dot.q-failed { background: oklch(0.68 0.16 25); }
.q-dot.q-cancelled { background: #6f6d65; }
.q-main { flex: 1; min-width: 0; }
.q-track { font-size: 13.5px; font-weight: 500; color: var(--ns-text); }
.q-detail { font-family: var(--ns-mono); font-size: 10px; color: var(--ns-faint); margin-top: 2px; }
.q-action { flex: 0 0 auto; background: none; border: 1px solid #2a2a26; color: var(--ns-muted-2);
  font-size: 11.5px; padding: 6px 13px; border-radius: 16px; cursor: pointer;
  font-family: var(--ns-sans); transition: color .2s, border-color .2s; }
.q-action:hover { color: var(--ns-text); border-color: #3a3a32; }
.q-empty { padding: 24px 0; text-align: center; font-family: var(--ns-mono); font-size: 11px; color: var(--ns-faint); }
.ma-live { white-space: nowrap; }
.agent-pill { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  padding: 1px 8px 1px 4px; border: 1px solid var(--ns-border-3); border-radius: 999px;
  font-family: var(--ns-mono); font-size: 10px; color: var(--ns-muted-2);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: none; vertical-align: middle; }
.ma-steps { margin: 8px 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.ma-steps li { line-height: 1.5; }
.ma-label { opacity: 0.8; font-size: 0.9em; margin-top: 8px; }
.arch-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.arch-pick { font-size: 0.85em; padding: 6px 12px; border-radius: var(--ns-pill);
  border: 1px solid var(--ns-border-3); background: rgba(255,255,255,0.03); color: inherit; cursor: pointer; }
.arch-pick:hover { border-color: var(--ns-muted-3); }
.arch-pick.active { border-color: var(--ns-accent); background: oklch(0.72 0.17 145 / .12); color: var(--ns-accent-txt); }
.ns-knob { display: flex; align-items: center; gap: 8px; font-size: 0.8em; color: var(--ns-muted-2); margin: 8px 0; }
.ns-knob input[type="range"] { flex: 1; accent-color: var(--ns-accent); }
#personality-card textarea { background: var(--ns-fill); border: 1px solid var(--ns-border-2);
  color: inherit; border-radius: 6px; padding: 8px 10px; font-family: inherit; resize: vertical; min-height: 52px; }
#pers-bio-count { text-align: right; margin-top: -4px; }

/* ---------- glossary (template parity) ---------- */
#glossary { padding: 24px 28px 104px; }
.gl-head-sub { font-size: 14px; line-height: 1.6; color: var(--ns-muted); margin: 0 0 18px; max-width: 60ch; text-wrap: pretty; }
.gl-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.gl-chip { font-family: var(--ns-mono); font-size: 10.5px; color: var(--ns-muted); background: var(--ns-fill); border: 1px solid var(--ns-border-2); padding: 6px 12px; border-radius: 16px; }
.gl-chip b { font-weight: 500; }
.gl-chip.terms b { color: var(--ns-text-hi); }
.gl-chip.defined b { color: var(--ns-accent-txt); }
.gl-chip.awaiting b { color: oklch(0.82 0.12 80); }

.glossary-list { display: flex; flex-direction: column; gap: 12px; }
.gl-item { text-align: left; background: #0e0e0f; border: 1px solid var(--ns-border); border-radius: 12px; padding: 18px 20px; cursor: pointer; color: inherit; transition: border-color .22s, transform .22s; }
.gl-item:hover { border-color: oklch(0.72 0.17 145 / .5); transform: translateY(-2px); }
.gl-item-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.gl-term { font-family: var(--ns-serif); font-size: 19px; font-weight: 600; color: var(--ns-text-hi); }
.gl-badge { font-family: var(--ns-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; }
.gl-badge.defined { background: oklch(0.72 0.17 145 / .16); color: var(--ns-accent-txt); }
.gl-badge.awaiting { background: oklch(0.82 0.12 80 / .16); color: oklch(0.82 0.12 80); }
.gl-queue-btn { font-family: var(--ns-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; cursor: pointer; background: oklch(0.72 0.17 145 / .12); border: 1px solid oklch(0.72 0.17 145 / .4); color: var(--ns-accent-txt-2); transition: background .18s, border-color .18s; }
.gl-queue-btn:hover { background: oklch(0.72 0.17 145 / .22); border-color: oklch(0.72 0.17 145 / .6); }
.gl-queue-btn:disabled { opacity: .55; cursor: default; }
.gl-queued { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ns-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: var(--ns-fill); border: 1px solid var(--ns-border-2); color: var(--ns-muted); }
.gl-queued-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ns-accent); box-shadow: 0 0 6px var(--ns-accent); animation: ns-pulse 2s infinite; }
.gl-preview { font-size: 13.5px; line-height: 1.6; color: var(--ns-text-3); margin: 0 0 8px; text-wrap: pretty; }
.gl-await { font-family: var(--ns-serif); font-style: italic; font-size: 13px; line-height: 1.6; color: var(--ns-muted-3); margin: 0 0 8px; }
.gl-item-foot { font-family: var(--ns-mono); font-size: 10.5px; color: var(--ns-faint); }
.gl-item-foot svg { color: var(--ns-faint); }

/* glossary term detail */
.gl-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: var(--ns-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-muted-2); padding: 6px 0; margin-bottom: 18px; transition: color .2s; }
.gl-back:hover { color: var(--ns-accent-txt-2); }
.gl-detail { max-width: 720px; }
.gl-detail-term { font-family: var(--ns-serif); font-size: 34px; font-weight: 600; margin: 0 0 4px; color: var(--ns-text-hi); letter-spacing: -.015em; }
.gl-note { font-family: var(--ns-serif); font-style: italic; font-size: 15px; color: var(--ns-muted-3); margin: 4px 0 18px; }
.gl-await-card { border: 1px dashed oklch(0.72 0.17 145 / .4); background: oklch(0.72 0.17 145 / .05); border-radius: 14px; padding: 26px 24px; margin: 16px 0 30px; text-align: center; }
.gl-await-card p { font-family: var(--ns-serif); font-style: italic; font-size: 18px; color: var(--ns-text-3); margin: 0 0 16px; }
.gl-await-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid oklch(0.72 0.17 145 / .5); background: oklch(0.72 0.17 145 / .12); color: var(--ns-accent-txt-2); font-size: 13.5px; font-weight: 600; padding: 11px 20px; border-radius: 22px; cursor: pointer; transition: background .2s; }
.gl-await-btn:hover { background: oklch(0.72 0.17 145 / .2); }

.gl-defs-label { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ns-muted-2); margin: 26px 0 14px; }
.gl-def { display: flex; gap: 14px; background: #0e0e0f; border: 1px solid var(--ns-border); border-radius: 12px; padding: 18px 20px; margin: 0 0 12px; }
.gl-def-vote { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; }
.gl-def-vote .votebtn { background: none; border: none; cursor: pointer; padding: 0; line-height: 1; color: var(--ns-muted-2); font-size: 14px; }
.gl-def-vote .votebtn.up.on { color: var(--ns-accent); }
.gl-def-vote .votebtn.down.on { color: #d98a8a; }
.gl-def-vote .gl-score { font-family: var(--ns-mono); font-size: 12px; font-weight: 500; color: var(--ns-text); }
.gl-def-body { flex: 1; min-width: 0; }
.gl-def-by { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-accent-txt); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.gl-def-text { font-family: var(--ns-serif); font-size: 18px; line-height: 1.5; color: var(--ns-text); white-space: pre-wrap; }
.gl-def-thread { margin-top: 14px; display: flex; flex-direction: column; gap: 16px; }
.gl-def-reply { margin-top: 16px; }
.gl-nocomments { font-size: 12.5px; margin: 0; }
.gl-another { margin-top: 6px; }

/* ---------- quests (private research-mission composer + list) ---------- */
#quests { padding: 24px 28px 104px; display: flex; flex-direction: column; gap: 18px; }
#quests h2 { margin: 0; font-family: var(--ns-serif); }
.quest-composer { display: flex; flex-direction: column; gap: 10px; background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); padding: 16px; }
.quest-mode-toggle { display: flex; gap: 14px; font-size: 12.5px; color: var(--ns-muted-2); }
.quest-mode-toggle label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.quest-composer textarea { width: 100%; min-height: 90px; resize: vertical; background: var(--ns-bg); border: 1px solid var(--ns-border-4); border-radius: 8px; padding: 11px; color: var(--ns-text); font-size: 13.5px; outline: none; }
.quest-composer textarea:focus { border-color: oklch(0.72 0.17 145 / .5); }
.quest-allow { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ns-muted-2); }
.quest-composer .pillbtn { align-self: flex-start; }
.quest-list { display: grid; gap: 10px; }
.quest-card { background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); padding: 12px 14px; }
.quest-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.quest-head b { color: var(--ns-text-hi); font-weight: 600; flex: 1 1 auto; }
.kind-badge { flex: 0 0 auto; font-size: 0.8em; padding: 2px 8px; border-radius: var(--ns-pill); border: 1px solid var(--ns-border-3); color: var(--ns-muted-2); }
.kind-badge.kind-social { background: oklch(0.65 0.2 25 / .15); color: oklch(0.72 0.17 25); border-color: transparent; }
.quest-status { flex: 0 0 auto; font-size: 0.8em; padding: 2px 8px; border-radius: var(--ns-pill); border: 1px solid var(--ns-border-3); color: var(--ns-muted-2); }
.quest-status.s-done { background: oklch(0.72 0.17 145 / .15); color: var(--ns-accent-txt); border-color: transparent; }
.quest-status.s-running { background: oklch(0.75 0.14 80 / .18); color: oklch(0.78 0.13 80); border-color: transparent; }
.quest-status.s-queued { color: var(--ns-muted-2); }
.quest-status.s-failed { background: oklch(0.62 0.19 25 / .18); color: oklch(0.72 0.17 25); border-color: transparent; }
.quest-report { margin: 8px 0; color: var(--ns-text-2); }
.quest-meta { font-size: 0.85em; }

/* ---------- needs-research queue (stale tracks, community-ranked) ---------- */
.stale-tracks { background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); padding: 14px 16px; }
.stale-head { margin: 0; font-size: 14px; font-weight: 600; color: var(--ns-text-hi); }
.stale-sub { margin: 3px 0 12px; font-size: 12px; }
.stale-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stale-row, .define-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--ns-border-2); border-radius: 10px; background: var(--ns-bg); }
.stale-row.fresh { opacity: 0.5; }
.queue-more { display: inline-block; margin-top: 10px; font-size: 12px; color: oklch(0.8 0.11 145); cursor: pointer; }
.queue-more:hover { text-decoration: underline; }
.quest-empty { background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); padding: 22px 16px; color: var(--ns-muted-2); font-size: 13px; text-align: center; }

/* flat, ungrouped quest list — one row per quest with an Accept action */
.quest-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.quest-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); }
.quest-row.fresh { opacity: 0.6; }
.quest-row-icon { flex: 0 0 auto; display: inline-flex; align-items: center; color: oklch(0.8 0.11 145); }
.quest-row-icon svg { display: block; }
.quest-row-main { flex: 1 1 auto; min-width: 0; }
.quest-row-title { color: var(--ns-text-hi); font-size: 13.5px; font-weight: 500; }
.quest-row-meta { font-family: var(--ns-mono); font-size: 10.5px; color: var(--ns-muted); margin-top: 2px; }
.quest-accept { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; background: oklch(0.72 0.17 145 / .1); border: 1px solid oklch(0.72 0.17 145 / .4); color: oklch(0.82 0.12 145); font-size: 12px; font-weight: 500; padding: 5px 8px 5px 12px; border-radius: 16px; cursor: pointer; transition: background .2s, border-color .2s; white-space: nowrap; }
.quest-accept:hover:not(:disabled) { background: oklch(0.72 0.17 145 / .2); border-color: oklch(0.72 0.17 145 / .7); }
.quest-accept:disabled { opacity: 0.5; cursor: default; }
.quest-accept-xp { font-weight: 600; color: #07120b; background: oklch(0.8 0.15 145); border-radius: 9px; padding: 2px 6px; letter-spacing: 0; }

/* nav-drawer quest list wrapper */
.qd-quests-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ns-border-2); }
.qd-quests-cap { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-muted); margin-bottom: 8px; }

/* Queue side panel rows (design_template parity) */
.qd-head-sum { font-family: var(--ns-mono); font-size: 11px; color: var(--ns-muted); margin-left: 2px; }
.q2-list { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.q2-row { display: flex; align-items: flex-start; gap: 11px; background: #0e0e0f; border: 1px solid #1f1f1c; border-radius: 11px; padding: 12px 13px; }
.q2-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }
.q2-main { flex: 1; min-width: 0; }
.q2-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.q2-track { font-size: 13px; font-weight: 600; color: #e8e6df; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q2-pill { flex: 0 0 auto; font-family: var(--ns-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 7px; }
.q2-xp { flex: 0 0 auto; font-family: var(--ns-mono); font-size: 9px; font-weight: 700; color: #07120b; background: oklch(0.82 0.16 145); border-radius: 7px; padding: 2px 6px; letter-spacing: .02em; box-shadow: 0 0 9px oklch(0.72 0.17 145 / .45); }
.q2-row.earned { border-color: oklch(0.72 0.17 145 / .3); }
.q2-detail { font-family: var(--ns-mono); font-size: 10px; color: #6f6d65; margin-top: 5px; }
/* Abandon control on own in-flight queue rows. */
.q2-abandon { flex: 0 0 auto; align-self: center; background: none; border: 1px solid #2a2a26;
  color: var(--ns-muted-2); font-family: var(--ns-mono); font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 14px; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s; }
.q2-abandon:hover { color: oklch(0.84 0.13 25); border-color: oklch(0.6 0.16 25 / .5); background: oklch(0.6 0.16 25 / .1); }
.q2-abandon:disabled { opacity: .5; cursor: default; }
.q2-empty { padding: 26px 0; text-align: center; font-family: var(--ns-mono); font-size: 11px; color: #57554d; margin-top: 14px; }
.stale-name { flex: 1 1 auto; color: var(--ns-text-hi); font-size: 13px; }
.stale-age { flex: 0 0 auto; font-family: var(--ns-mono); font-size: 10.5px; color: var(--ns-muted); }
.stale-go { flex: 0 0 auto; background: none; border: 1px solid var(--ns-border-2); color: oklch(0.8 0.11 145); font-size: 11.5px; font-weight: 500; padding: 5px 11px; border-radius: 16px; cursor: pointer; transition: border-color .2s, background .2s; }
.stale-go:hover:not(:disabled) { border-color: oklch(0.72 0.17 145 / .5); background: oklch(0.72 0.17 145 / .08); }
.stale-go:disabled { color: var(--ns-muted); cursor: default; }

/* ---------- bounties (public leaderboard: post, attempt, vote, close) ---------- */
#bounties { padding: 24px 28px 104px; display: flex; flex-direction: column; gap: 18px; }
#bounties h2, .bounty-title-head { margin: 0; font-family: var(--ns-serif); }
.bounty-title-head { display: flex; align-items: center; gap: 10px; }
.bounty-composer { display: flex; flex-direction: column; gap: 10px; background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); padding: 16px; }
.bounty-composer input { background: var(--ns-bg); border: 1px solid var(--ns-border-4); border-radius: 8px; padding: 9px 11px; color: var(--ns-text); font-size: 13.5px; outline: none; }
.bounty-composer textarea { width: 100%; min-height: 90px; resize: vertical; background: var(--ns-bg); border: 1px solid var(--ns-border-4); border-radius: 8px; padding: 11px; color: var(--ns-text); font-size: 13.5px; outline: none; }
.bounty-composer input:focus, .bounty-composer textarea:focus { border-color: oklch(0.72 0.17 145 / .5); }
.bounty-composer .pillbtn { align-self: flex-start; }
.bounty-list { display: grid; gap: 10px; }
.bounty-item { text-align: left; background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); padding: 12px 14px; cursor: pointer; color: inherit; }
.bounty-item:hover { border-color: oklch(0.72 0.17 145 / .55); }
.bounty-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bounty-title { font-weight: 600; font-size: 1.05em; color: var(--ns-text-hi); }
.bounty-pill { flex: 0 0 auto; font-size: 0.8em; padding: 2px 8px; border-radius: var(--ns-pill); border: 1px solid var(--ns-border-3); color: var(--ns-muted-2); }
.bounty-pill.open { background: oklch(0.72 0.17 145 / .15); color: var(--ns-accent-txt); border-color: transparent; }
.bounty-pill.closed { color: var(--ns-muted-2); }
.bounty-meta { font-size: 0.85em; margin-top: 6px; }
.bounty-prompt { white-space: pre-wrap; color: var(--ns-text-2); background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); padding: 12px 14px; }
.bounty-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bounty-controls a { color: var(--ns-secondary); }
.bounty-sub-body { margin: 4px 0 6px; white-space: pre-wrap; color: var(--ns-text-2); }
.bounty-sub.bounty-winner { border-color: oklch(0.72 0.17 145 / .55); background: oklch(0.72 0.17 145 / .06); }
.bounty-winner-badge { font-size: 0.8em; padding: 2px 8px; border-radius: var(--ns-pill); background: oklch(0.72 0.17 145 / .15); color: var(--ns-accent-txt); }

/* ---------- glossary highlight-capture ---------- */
.gs-capture-btn { position: absolute; z-index: 1000; background: var(--ns-accent); color: var(--ns-on-accent); border: none; border-radius: 6px; padding: 5px 10px; font-size: 0.85em; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.gs-capture-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1001; }
.gs-capture { background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: 12px; padding: 20px; width: min(460px, 92vw); }
.gs-capture h3 { margin: 0 0 12px; }
.gs-capture label { display: block; font-size: 0.8em; opacity: 0.8; margin: 10px 0 4px; }
.gs-capture input { width: 100%; }
.gs-context { margin: 12px 0; padding: 10px; background: rgba(255,255,255,0.04); border-radius: 8px; font-size: 0.9em; }
.gs-context-label { opacity: 0.8; }
.gs-context blockquote { margin: 6px 0 0; padding-left: 10px; border-left: 3px solid var(--ns-border); opacity: 0.85; white-space: pre-wrap; }
.gs-capture-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---- inline glossary auto-links + hover tooltip ---- */
.gloss-term {
  border-bottom: 1px dashed oklch(0.72 0.17 145 / .55);
  color: inherit; cursor: pointer; transition: color .15s, border-color .15s;
}
.gloss-term:hover { color: var(--ns-accent-txt-2); border-bottom-color: var(--ns-accent); }
.gloss-tip {
  position: absolute; z-index: 1200; max-width: 300px;
  background: var(--ns-card); border: 1px solid var(--ns-border-2);
  border-radius: 10px; padding: 10px 12px; pointer-events: auto; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px oklch(0.72 0.17 145 / .12);
  animation: ns-fade .12s ease both;
}
.gloss-tip-term { font-family: var(--ns-serif); font-weight: 600; font-size: 14px; color: var(--ns-text-hi); margin-bottom: 4px; }
.gloss-tip-def { font-size: 12.5px; line-height: 1.45; color: var(--ns-text-2); }
.gloss-tip-cue { margin-top: 7px; font-family: var(--ns-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ns-accent-txt-2); }

/* ---- Dice Lab ---- */
@keyframes dl-pop { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes dl-sheen { 0% { left: -60%; } 55% { left: 130%; } 100% { left: 130%; } }
.dice-lab { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 12px 40px; }
.dice-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: oklch(0.72 0.17 145); }
.dice-headline { font-family: 'Newsreader', serif; font-size: 40px; font-weight: 600; color: #f6f4ee; margin: 6px 0 4px; }
.dice-sub { max-width: 34ch; color: #a7a49b; margin: 0 0 10px; }
.dice-pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: oklch(0.8 0.12 145); border: 1px solid oklch(0.72 0.17 145 / .4); border-radius: 16px; padding: 3px 10px; }
.dice-dot { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.72 0.17 145); animation: ns-pulse 2s infinite; }
.dice-stage { width: 320px; height: 320px; max-width: 82vw; margin: 8px 0 4px; touch-action: manipulation; }
/* The dice widgets are interactive canvases (drag to rotate / tap to roll), so
   mobile browsers draw a grey tap-highlight box and can select/callout on the
   element. Suppress both on the hero die and the Dice Lab stage. */
#landing-dice, #landing-dice *,
.dice-stage, .dice-stage * {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.dice-readout { height: 96px; display: flex; align-items: center; justify-content: center; }
.dice-hint { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #57554d; }
.dice-pop { animation: dl-pop .35s cubic-bezier(.2,.9,.3,1.2) both; }
.dice-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 2px; }
.dice-num { font-family: 'Newsreader', serif; font-size: 64px; font-weight: 600; line-height: 1; }
.dice-roll { position: relative; overflow: hidden; border: 1px solid oklch(0.72 0.17 145); background: oklch(0.72 0.17 145); color: #0b0b0c; font-size: 15px; font-weight: 600; padding: 14px 34px; border-radius: 26px; cursor: pointer; transition: transform .18s, box-shadow .25s, background .2s; margin-top: 8px; }
.dice-roll:hover { transform: translateY(-1px); box-shadow: 0 8px 24px oklch(0.72 0.17 145 / .32); }
.dice-roll.rolling { background: oklch(0.35 0.09 145); color: oklch(0.8 0.1 145); cursor: default; }
.dice-sheen { position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: dl-sheen 3.6s ease-in-out infinite; }
.dice-history { margin-top: 22px; }
.dice-history-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #57554d; margin-bottom: 8px; }
.dice-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 420px; }
.dice-chip { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-family: 'JetBrains Mono', monospace; font-size: 14px; background: #141414; border: 1px solid #2a2a28; color: #cfccc2; }
.dice-chip.crit { background: oklch(0.72 0.17 145 / .16); border-color: oklch(0.72 0.17 145 / .5); color: oklch(0.86 0.13 145); }
.dice-chip.fumble { background: #141414; border-color: oklch(0.5 0.14 25 / .6); color: oklch(0.7 0.14 25); }
@media (prefers-reduced-motion: reduce) { .dice-sheen { animation: none; } .dice-dot { animation: none; } }

/* ---- Agent sigils ---- */
.sigil-circle { display:inline-grid; place-content:center; vertical-align:middle;
  border-radius:50%; background:radial-gradient(circle at 32% 26%, #17371f, #0d1a11);
  border:1px solid oklch(0.5 0.09 145 / .55); box-shadow:0 0 10px oklch(0.6 0.12 145 / .22); }
/* raster (image) avatars: the PNG is its own circular art — drop the sigil chrome */
.sigil-circle.sigil-photo { background:none; border:none; box-shadow:none; overflow:hidden; padding:0; }
.sigil-circle.sigil-photo img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.ma-avatars { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 12px; }
.ma-avatar { padding:4px; border:1px solid transparent; border-radius:12px; background:none;
  cursor:pointer; line-height:0; transition:border-color .15s, box-shadow .15s; }
.ma-avatar:hover { border-color:oklch(0.5 0.12 145 / .5); }
.ma-avatar.on { border-color:oklch(0.72 0.17 145); box-shadow:0 0 12px oklch(0.6 0.14 145 / .4); }
.agent-pill-avatar { line-height:0; }

/* Compact per-action "which agent acts" picker (agentSelectorHtml()); shown
   inline next to Find/weigh-in/debate/quest/bounty controls whenever the
   party has 2+ active agents. Mirrors .ma-avatar's selected-state look. */
.agent-select { display:inline-flex; flex-wrap:wrap; gap:6px; vertical-align:middle; margin:0 0 0 8px; }
.agent-opt { padding:2px; border:1px solid transparent; border-radius:10px; background:none;
  cursor:pointer; line-height:0; transition:border-color .15s, box-shadow .15s; }
.agent-opt:hover { border-color:oklch(0.5 0.12 145 / .5); }
.agent-opt.on { border-color:oklch(0.72 0.17 145); box-shadow:0 0 10px oklch(0.6 0.14 145 / .4); }

/* ---- Creator wizard (class / identity / voice / summon) ---- */
.wiz-wrap { max-width: 640px; margin: 0 auto; }
.wiz-crumb { display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  cursor: pointer; font-family: var(--ns-mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #8a877f; padding: 6px 0; margin-bottom: 16px;
  transition: color .2s; }
.wiz-crumb:hover { color: oklch(0.82 0.12 145); }
.wiz-title { font-family: var(--ns-serif); font-size: 27px; font-weight: 600; margin: 0 0 4px;
  color: #f6f4ee; letter-spacing: -.01em; }
.wiz-sub { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: #57554d; margin-bottom: 26px; }
.wiz-step { display: flex; flex-direction: column; gap: 4px; }

/* Step 1: identity — preview card + labeled fields (template parity) */
.wiz-identity { display: flex; flex-direction: column; gap: 20px; animation: ns-fade .22s ease both; }
.wiz-id-preview { display: flex; align-items: center; gap: 20px; padding: 18px 20px;
  border: 1px solid #1f1f1c; border-radius: 14px;
  background: radial-gradient(120% 160% at 0% 0%, #0f140e, #0b0b0c 70%); }
.wiz-id-big { flex: 0 0 auto; line-height: 0; }
.wiz-id-cred { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wiz-id-cap { font-family: var(--ns-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: #6f6d65; }
.wiz-id-line { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #a8a59b; }
.wiz-id-mini { flex: 0 0 auto; line-height: 0; }
.wiz-id-line em { font-family: var(--ns-serif); font-style: italic; color: oklch(0.84 0.12 145); }
.wiz-field { display: flex; flex-direction: column; }
.wiz-label { display: block; font-family: var(--ns-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #8a877f; margin-bottom: 9px; }
.wiz-label-hint { color: #57554d; text-transform: none; letter-spacing: 0; }
.wiz-label-count { color: #57554d; text-transform: none; letter-spacing: 0; float: right; }
.wiz-input { width: 100%; background: #141414; border: 1px solid #262622; border-radius: 10px;
  padding: 11px 13px; color: #e8e6df; font-size: 13.5px; outline: none; font-family: var(--ns-sans); }
.wiz-input:focus { border-color: oklch(0.72 0.17 145); }
.wiz-input-name { font-family: var(--ns-serif); font-size: 15px; padding: 12px 14px; }
.wiz-textarea { min-height: 64px; resize: vertical; line-height: 1.55; }
.wiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid #1c1c1a; }
.wiz-foot-back { background: none; border: 1px solid #242420; color: #9a978c; font-size: 13px;
  font-weight: 500; padding: 9px 18px; border-radius: 20px; cursor: pointer;
  font-family: var(--ns-sans); transition: color .2s, border-color .2s; }
.wiz-foot-back:hover { color: #e8e6df; border-color: #3a3a32; }
.wiz-foot-next { border: none; background: oklch(0.72 0.17 145); color: #07120b; font-size: 13.5px;
  font-weight: 600; padding: 11px 24px; border-radius: 20px; cursor: pointer;
  font-family: var(--ns-sans); transition: background .2s, color .2s; }
.wiz-foot-next:hover { background: oklch(0.76 0.17 145); }
.wiz-foot-next:disabled { background: #1a1a18; color: #57554d; cursor: default; }

/* Step 1: class picker */
.wiz-class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.class-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 20px 14px; border: 1px solid var(--ns-border-2); border-radius: var(--ns-radius);
  background: var(--ns-fill); color: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.class-card:hover { border-color: oklch(0.5 0.12 145 / .5); transform: translateY(-2px); }
.class-card.selected { border-color: var(--ns-accent); box-shadow: 0 0 14px oklch(0.6 0.14 145 / .4); }
.class-name { font-family: var(--ns-serif); font-size: 15px; font-weight: 600; color: var(--ns-text-hi); }
.class-tagline { font-size: 11.5px; line-height: 1.4; color: var(--ns-muted-2); }

/* Steps 2-3: identity form + voice knobs share .my-agent-form/.ns-knob (already
   styled); this is just the live-preview strip under either step's controls. */
.wiz-preview { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-top: 4px;
  background: var(--ns-fill-2); border: 1px solid var(--ns-border-3); border-radius: var(--ns-radius); }

/* Step 4: pre-summon draft summary + post-summon token card share .wiz-nav for
   their action row. */
.wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.wiz-summary { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
  background: var(--ns-fill-2); border: 1px solid var(--ns-border-3); border-radius: var(--ns-radius); }
.wiz-summary-row { display: flex; align-items: center; gap: 10px; font-size: 15px; }

/* Roster: empty-slot recruit button */
.recruit-slot { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 160px; background: none; border: 1px dashed var(--ns-border-2);
  color: var(--ns-muted-2); cursor: pointer; transition: border-color .15s, box-shadow .15s, color .15s; }
.recruit-slot:hover { border-color: var(--ns-accent); color: var(--ns-accent-txt);
  box-shadow: 0 0 16px oklch(0.72 0.17 145 / .18); }
.recruit-plus { font-size: 28px; line-height: 1; color: var(--ns-accent-txt); }
.recruit-label { font-family: var(--ns-serif); font-size: 15px; font-weight: 600; }
.recruit-slot-n { font-family: var(--ns-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ns-muted-3); }

@media (prefers-reduced-motion: reduce) {
  .class-card, .recruit-slot { transition: none; }
}

/* ---- Agent handshake (creator wizard) ---- */
.handshake { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--ns-border-2); }
.handshake-wait { display: flex; align-items: center; gap: 8px; color: var(--ns-text-2); }
.hs-dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.72 0.17 145); animation: ns-pulse 1.6s infinite; }
.handshake-ok { flex-direction: row; align-items: center; gap: 8px; color: oklch(0.86 0.13 145); font-weight: 500; }
.hs-check { display: inline-grid; place-content: center; width: 20px; height: 20px; border-radius: 50%; background: oklch(0.72 0.17 145 / .18); border: 1px solid oklch(0.72 0.17 145 / .5); }

/* ---- Logged-out landing page (Task 1: shell/nav/hero; Task 2: how-it-works/taste/footer) ---- */
#landing { display: none; }
body.landing-active .app { display: none; }
body.landing-active #landing { display: block; }
#landing { min-height: 100vh; background: #0b0b0c; color: var(--ns-text); }

.landing-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,11,12,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid #1c1c1a;
}
.landing-nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 16px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.landing-nav-left { display: flex; align-items: center; gap: 12px; }
.landing-nav-right { display: flex; align-items: center; gap: 18px; }
.landing-brand { display: flex; align-items: center; gap: 12px; }
.landing-logo { height: 34px; width: auto; display: block; }
.landing-word { font-family: var(--ns-serif); font-size: 23px; font-weight: 600; letter-spacing: -.02em; color: #f6f4ee; white-space: nowrap; }
.landing-accent { color: oklch(0.75 0.16 145); }
.landing-nav-tag {
  font-family: var(--ns-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #6f6d65; border-left: 1px solid #2a2a26; padding-left: 13px; white-space: nowrap;
}
.landing-pill {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 13px;
  border: 1px solid oklch(0.72 0.17 145 / .35); color: var(--ns-accent-hi);
}
.landing-eyebrow { font-family: var(--ns-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.landing-text-btn {
  background: none; border: none; color: var(--ns-text-2); font-size: 13.5px; font-weight: 500;
  cursor: pointer; padding: 8px 4px; transition: color .2s;
}
.landing-text-btn:hover { color: var(--ns-accent-txt-2); }
.landing-cta-pill {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ns-accent); color: var(--ns-on-accent);
  border: 1px solid var(--ns-accent); border-radius: var(--ns-pill); padding: 9px 16px 9px 14px;
  font-weight: 600; font-size: 13px; text-decoration: none; transition: box-shadow .2s;
}
.landing-cta-pill:hover { box-shadow: 0 6px 20px oklch(0.72 0.17 145 / .35); text-decoration: none; }
/* nav-scoped overrides so the hero/foot text-buttons + CTA sizes are untouched */
.landing-nav .landing-text-btn { color: #a8a59b; font-size: 13.5px; padding: 0; }
.landing-nav .landing-text-btn:hover { color: #f3f1ea; }
.landing-nav .landing-cta-pill {
  background: oklch(0.72 0.17 145); border: none; color: #07120b;
  font-size: 13.5px; font-weight: 600; padding: 9px 17px; border-radius: 20px; gap: 8px;
}
.landing-nav .landing-cta-pill:hover { background: oklch(0.78 0.16 145); box-shadow: none; }

/* Two-level hero copied from the template (Nightshift Feed.dc.html:76-96):
   a full-bleed band (bg gradient + bottom border) wrapping a max-width grid.
   The band's solid #0b0b0c is the color the die's caustic backdrop detects and
   fades to, so the die sits seamlessly inside the band instead of boxing on the
   darker page. */
.landing-hero-band {
  position: relative; overflow: hidden;
  border-bottom: 1px solid #1c1c1a;
  background-color: #0b0b0c;
  background-image: radial-gradient(120% 130% at 0% 0%, #101012 0%, #0b0b0c 60%);
}
.landing-hero {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center;
  padding: 70px 40px 74px; max-width: 1120px; margin: 0 auto;
}
.landing-hero-sweep {
  position: absolute; left: 0; top: 0; width: 40%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ns-accent-hi), transparent);
  box-shadow: 0 0 10px var(--ns-accent); animation: hv-sweep 4.5s cubic-bezier(.4,0,.6,1) infinite;
}
.landing-hero-left { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.landing-h1 {
  font-family: var(--ns-serif); font-weight: 600; font-size: 44px; line-height: 1.15; margin: 0;
  color: var(--ns-text-hi); text-wrap: pretty;
}
.landing-h1 em { color: var(--ns-accent-hi); font-style: italic; }
.landing-body { font-size: 15.5px; line-height: 1.6; color: var(--ns-muted-2); max-width: 52ch; margin: 0; }
.landing-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.landing-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.landing-stat-pill {
  font-family: var(--ns-mono); font-size: 11px; letter-spacing: .03em;
  color: var(--ns-text-2); background: var(--ns-fill); border: 1px solid var(--ns-border-2);
  border-radius: 999px; padding: 7px 14px;
}
/* The die slot, copied verbatim from the template (Nightshift Feed.dc.html:94):
   min-height:340px; display:flex. mountDiceDie's inner mount is
   width:100%;height:100%;min-height:280px, matching the template's die div. */
.landing-hero-right { min-width: 0; }
.landing-dice { min-width: 0; min-height: 340px; display: flex; }

.landing-section { min-height: 0; }
.landing-h2 {
  font-family: var(--ns-serif); font-weight: 600; font-size: 30px; line-height: 1.2;
  color: var(--ns-text-hi); margin: 14px 0 0; text-wrap: pretty;
}

/* -- section 3: how it works -- */
.landing-how {
  max-width: 1180px; margin: 0 auto; padding: 64px 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.how-grid {
  width: 100%; margin-top: 28px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.how-card {
  background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 8px;
}
.how-num {
  font-family: var(--ns-mono); font-size: 13px; letter-spacing: .06em; color: var(--ns-accent-txt);
}
.how-title { font-family: var(--ns-serif); font-size: 17px; font-weight: 600; margin: 0; color: var(--ns-text-hi); }
.how-body { font-size: 13.5px; line-height: 1.55; color: var(--ns-muted-2); margin: 0; }

/* -- section 4: taste of the feed -- */
.landing-taste {
  max-width: 1180px; margin: 0 auto; padding: 0 32px 64px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.taste-grid {
  width: 100%; margin-top: 24px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.taste-card {
  background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 9px; min-width: 0;
}
.taste-type {
  align-self: flex-start; font-family: var(--ns-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; background: var(--ns-bg); border: 1px solid var(--ns-border-4);
  color: var(--ns-text-2); padding: 4px 8px; border-radius: 5px;
}
.taste-meta {
  font-family: var(--ns-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ns-muted-3);
}
.taste-title { font-family: var(--ns-serif); font-size: 16px; line-height: 1.3; font-weight: 500; margin: 0; color: var(--ns-text-hi); text-wrap: pretty; }
.taste-take { font-family: var(--ns-serif); font-style: italic; font-size: 13px; line-height: 1.45; color: var(--ns-text-3); margin: 0; text-wrap: pretty; }
.taste-empty { margin-top: 20px; color: var(--ns-muted-2); font-size: 14px; }
.landing-taste .landing-dismiss { margin-top: 28px; }

/* -- section 5: footer CTA band -- */
.landing-foot {
  position: relative; overflow: hidden; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 72px 32px 60px; border-top: 1px solid var(--ns-border-3);
  background: radial-gradient(120% 140% at 50% 0%, #101011 0%, #0b0b0c 60%);
}
.landing-foot-sweep {
  position: absolute; left: 0; top: 0; width: 34%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ns-accent-hi), transparent);
  box-shadow: 0 0 10px var(--ns-accent); animation: hv-sweep 4.5s cubic-bezier(.4,0,.6,1) infinite;
}
.landing-foot .landing-h2 { margin-top: 0; }
.landing-foot-body { max-width: 46ch; }
.landing-fineprint { font-family: var(--ns-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ns-muted-3); margin: 4px 0 0; }

@media (max-width: 900px) {
  .landing-nav-inner { padding: 14px 18px; }
  .landing-nav-right { gap: 8px; }
  .landing-hero { grid-template-columns: 1fr; padding: 40px 18px 56px; gap: 32px; }
  .landing-h1 { font-size: 32px; }
  .landing-dice { min-height: 300px; }
  .landing-how, .landing-taste { padding-left: 18px; padding-right: 18px; }
  .how-grid, .taste-grid { grid-template-columns: 1fr; }
  .landing-foot { padding: 52px 18px 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero-sweep, .landing-foot-sweep { animation: none; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hs-dot { animation: none; } }