/* navigator.nw — design system v1 (mockup)

   R14: hex ONLY in :root. All else references --ds-* tokens.

   Dark default. Light theme via html[data-theme="light"]. Size via html[data-size="sm|md|lg"].

*/



:root {

  /* Surfaces */

  --ds-bg:            #0a0e14;

  --ds-bg-raised:     #111a26;

  --ds-bg-sunken:     #06090f;

  --ds-bg-elevated:   #172235;



  /* Borders */

  --ds-border:        #1e2937;

  --ds-border-strong: #3a4a62;

  --ds-border-accent: #8a6433;



  /* Text */

  --ds-t1: #e8ecf2;

  --ds-t2: #8a96a7;

  --ds-t3: #5a6576;

  --ds-t-inverse: #0a0e14;



  /* Brand */

  --ds-accent:        #c68e4c;

  --ds-accent-bright: #d9a05e;

  --ds-accent-glow:   rgba(198, 142, 76, 0.18);

  --ds-accent-sunk:   rgba(198, 142, 76, 0.06);



  /* Semantic */

  --ds-green: #4a9970;

  --ds-green-dim: #2d5a43;

  --ds-gold:  #d4a24c;

  --ds-copper: #c4744a;

  --ds-danger: #d6605a;



  /* Privacy grades */

  --ds-grade-s: #6fd69b;

  --ds-grade-a: #9fe3a8;

  --ds-grade-b: #d4d968;

  --ds-grade-c: #e8b36a;

  --ds-grade-d: #e08a5a;

  --ds-grade-f: #d6605a;



  /* Radii / spacing scale */

  --ds-r-sm: 4px;

  --ds-r-md: 8px;

  --ds-r-lg: 14px;

  --ds-r-xl: 20px;



  /* Typography scale — overridden by [data-size] */

  --ds-fs-base: 16px;

  --ds-fs-display: 2.6rem;

  --ds-fs-h1: 2rem;

  --ds-fs-h2: 1.35rem;

  --ds-fs-h3: 1.1rem;

  --ds-fs-body: 1rem;

  --ds-fs-small: 0.875rem;

  --ds-fs-micro: 0.75rem;



  /* Shadows */

  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);

  --ds-shadow-md: 0 6px 24px rgba(0,0,0,0.4);

  --ds-shadow-lg: 0 20px 60px rgba(0,0,0,0.55);

  --ds-shadow-glow: 0 0 0 3px var(--ds-accent-glow);


  /* HC-2 cleanup 2026-04-27 — saved-searches & pill-hover tokens */

  --ds-copper-dark:        #6e3d23;

  --ds-gold-dark:          #8a651a;

  --ds-accent-warm:        #c9a87c;

  --ds-accent-warm-bright: #d6b890;

  --ds-bg-modal:           #1a1815;

  --ds-danger-soft:        #e88a7c;


}



html[data-theme="light"] {

  --ds-bg:            #fbf9f4;

  --ds-bg-raised:     #ffffff;

  --ds-bg-sunken:     #f2ede2;

  --ds-bg-elevated:   #fff8ec;



  --ds-border:        #d8cfbb;

  --ds-border-strong: #a89878;

  --ds-border-accent: #8a5a20;



  --ds-t1: #1a1814;

  --ds-t2: #5a5240;

  --ds-t3: #8a8270;

  --ds-t-inverse: #fbf9f4;



  --ds-accent:        #8a5a20;

  --ds-accent-bright: #a8703a;

  --ds-accent-glow:   rgba(138, 90, 32, 0.14);

  --ds-accent-sunk:   rgba(138, 90, 32, 0.05);



  --ds-green: #2a6a48;

  --ds-green-dim: #8ab89e;

  --ds-gold:  #8a6418;

  --ds-copper: #9a4418;

  --ds-danger: #a02820;



  --ds-grade-s: #2a6a48;

  --ds-grade-a: #4a8a58;

  --ds-grade-b: #8a7a18;

  --ds-grade-c: #a85a18;

  --ds-grade-d: #8a3a18;

  --ds-grade-f: #7a1a18;



  --ds-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);

  --ds-shadow-md: 0 6px 20px rgba(0,0,0,0.12);

  --ds-shadow-lg: 0 20px 50px rgba(0,0,0,0.15);


  /* HC-2 cleanup 2026-04-27 — light-theme equivalents */

  --ds-copper-dark:        #5a2a18;

  --ds-gold-dark:          #5a4010;

  --ds-accent-warm:        #8a6418;

  --ds-accent-warm-bright: #a8703a;

  --ds-bg-modal:           #fff8ec;

  --ds-danger-soft:        #c44a40;


}



html[data-size="md"]  { --ds-fs-base: 16px; }
html[data-size="lg"]  { --ds-fs-base: 18px; }
html[data-size="xl"]  { --ds-fs-base: 20px; }
html[data-size="xxl"] { --ds-fs-base: 22px; }
/* Reset */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { font-size: var(--ds-fs-base); scroll-behavior: smooth; }

body {

  background: var(--ds-bg);

  color: var(--ds-t1);

  font-family: var(--ds-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);

  font-size: var(--ds-fs-body);

  line-height: 1.55;

  -webkit-font-smoothing: antialiased;

  min-height: 100vh;

}

a { color: var(--ds-accent-bright); text-decoration: none; }

a:hover { color: var(--ds-accent); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

button { font: inherit; cursor: pointer; }



.nav-serif {

  font-family: var(--ds-font-display, 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif);

  font-weight: 500;

  letter-spacing: -0.01em;

}



/* ─────────────────────────────────────

   SHELL — top bar + footer (visitor shell)

   ───────────────────────────────────── */

.nav-shell { min-height: 100vh; display: flex; flex-direction: column; }



.nav-topbar {

  position: sticky; top: 0; z-index: 40;

  display: flex; align-items: center; gap: 1.25rem;

  padding: 0.75rem 1.5rem;

  background: color-mix(in srgb, var(--ds-bg) 88%, transparent);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--ds-border);

}

.nav-brand {

  display: flex; align-items: baseline; gap: 0.35rem;

  color: var(--ds-t1); text-decoration: none;

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: 1.1rem; font-weight: 600;

  letter-spacing: -0.01em;

}

.nav-brand:hover { text-decoration: none; color: var(--ds-t1); }

.nav-brand-dot {

  display: inline-block; width: 6px; height: 6px; border-radius: 50%;

  background: var(--ds-accent); margin: 0 0.1rem 0.2rem 0.1rem;

}

.nav-brand-tld { color: var(--ds-t2); font-weight: 400; font-size: 0.9em; }



.nav-topbar-search { display: none !important;

  flex: 1; max-width: 520px;

  display: flex; align-items: center; gap: 0.5rem;

  background: var(--ds-bg-sunken);

  border: 1px solid var(--ds-border);

  border-radius: 999px;

  padding: 0.45rem 0.9rem;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;

}

.nav-topbar-search:focus-within {

  border-color: var(--ds-border-accent);

  box-shadow: var(--ds-shadow-glow);

}

.nav-topbar-search svg { flex-shrink: 0; color: var(--ds-t3); }

.nav-topbar-search input {

  flex: 1; background: transparent; border: 0; outline: 0;

  color: var(--ds-t1); font-size: 0.9rem;

}

.nav-topbar-search input::placeholder { color: var(--ds-t3); }



.nav-corner { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }

.nav-corner-btn {

  display: inline-flex; align-items: center; justify-content: center;

  width: 36px; height: 36px; border-radius: 50%;

  background: transparent; border: 1px solid transparent;

  color: var(--ds-t2);

  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;

}

.nav-corner-btn:hover {

  background: var(--ds-bg-raised);

  border-color: var(--ds-border);

  color: var(--ds-t1);

}

.nav-corner-btn svg { width: 18px; height: 18px; }



.nav-corner-signin {

  padding: 0.45rem 0.95rem;

  border: 1px solid var(--ds-border-strong);

  border-radius: 999px;

  background: transparent;

  color: var(--ds-t1);

  font-size: 0.875rem; font-weight: 500;

  text-decoration: none;

  transition: all 0.15s ease;

}

.nav-corner-signin:hover {

  background: var(--ds-accent);

  border-color: var(--ds-accent);

  color: var(--ds-t-inverse);

  text-decoration: none;

}



.nav-corner-user {

  display: flex; align-items: center; gap: 0.5rem;

  padding: 0.3rem 0.55rem 0.3rem 0.35rem;

  border-radius: 999px;

  background: var(--ds-bg-raised);

  border: 1px solid var(--ds-border);

  color: var(--ds-t1);

  text-decoration: none;

  font-size: 0.875rem;

}

.nav-corner-user:hover { border-color: var(--ds-border-strong); text-decoration: none; }

.nav-corner-avatar {

  width: 26px; height: 26px; border-radius: 50%;

  background: var(--ds-accent);

  color: var(--ds-t-inverse);

  display: flex; align-items: center; justify-content: center;

  font-size: 0.75rem; font-weight: 700;

}



/* Footer */

.nav-footer {

  margin-top: auto;

  padding: 3rem 1.5rem 2rem;

  border-top: 1px solid var(--ds-border);

  background: var(--ds-bg-sunken);

  color: var(--ds-t3);

  font-size: 0.875rem;

}

.nav-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 1rem; }

.nav-footer-line-1 { color: var(--ds-t2); font-family: var(--ds-font-display, Georgia, serif); font-size: 0.95rem; }

.nav-footer-line-2 { color: var(--ds-t3); }

.nav-footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 0.5rem; }

.nav-footer-links a { color: var(--ds-t2); font-size: 0.825rem; }



/* ─────────────────────────────────────

   HOME — hero search + discovery surface

   ───────────────────────────────────── */

.nav-home { flex: 1; }



.nav-hero {

  max-width: 780px; margin: 0 auto; padding: 4rem 1.5rem 2rem;

  text-align: center;

}

.nav-hero-eyebrow {

  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;

  color: var(--ds-accent); margin-bottom: 1rem;

}

.nav-hero-title {

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: clamp(2rem, 5vw, 3.25rem);

  line-height: 1.1; margin: 0 0 1rem;

  color: var(--ds-t1); letter-spacing: -0.02em;

  font-weight: 500;

}

.nav-hero-sub {

  font-size: 1.05rem; color: var(--ds-t2);

  max-width: 560px; margin: 0 auto 2.5rem;

  line-height: 1.55;

}

.nav-hero-sub strong { color: var(--ds-t1); font-weight: 500; }



.nav-search-hero {

  position: relative; max-width: 680px; margin: 0 auto;

}

.nav-search-hero-input {

  width: 100%;

  padding: 1.1rem 1.25rem 1.1rem 3.5rem;

  background: var(--ds-bg-raised);

  border: 1px solid var(--ds-border-strong);

  border-radius: var(--ds-r-lg);

  color: var(--ds-t1);

  font-size: 1.05rem;

  outline: 0;

  transition: border-color 0.15s, box-shadow 0.15s;

}

.nav-search-hero-input::placeholder { color: var(--ds-t3); }

.nav-search-hero-input:focus {

  border-color: var(--ds-accent);

  box-shadow: var(--ds-shadow-glow);

}

.nav-search-hero-icon {

  position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%);

  color: var(--ds-t3); pointer-events: none;

}

.nav-search-hero-icon svg { width: 20px; height: 20px; }



.nav-search-results {

  display: none;

  margin-top: 0.5rem;

  background: var(--ds-bg-raised);

  border: 1px solid var(--ds-border-strong);

  border-radius: var(--ds-r-lg);

  overflow: hidden;

  box-shadow: var(--ds-shadow-lg);

}

.nav-search-results.open { display: block; }

.nav-result {

  display: flex; align-items: center; gap: 1rem;

  padding: 0.9rem 1.1rem;

  border-bottom: 1px solid var(--ds-border);

  color: var(--ds-t1); text-decoration: none;

  transition: background 0.1s;

}

.nav-result:last-child { border-bottom: 0; }

.nav-result:hover, .nav-result.nav-active {

  background: var(--ds-bg-elevated);

  text-decoration: none;

}

.nav-result-icon {

  width: 36px; height: 36px; border-radius: 8px;

  background: var(--ds-bg-sunken);

  display: flex; align-items: center; justify-content: center;

  color: var(--ds-t2); flex-shrink: 0;

}

.nav-result-body { flex: 1; min-width: 0; }

.nav-result-title {

  font-weight: 500; color: var(--ds-t1);

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.nav-result-meta {

  font-size: 0.825rem; color: var(--ds-t3);

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.nav-result-chip {

  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;

  padding: 0.15rem 0.5rem; border-radius: 4px;

  background: var(--ds-accent-sunk); color: var(--ds-accent);

  flex-shrink: 0;

}

.nav-result-category {

  padding: 0.8rem 1.1rem;

  background: var(--ds-bg-sunken);

  color: var(--ds-t3);

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  border-bottom: 1px solid var(--ds-border);

}



/* Discovery surface */

.nav-discover { max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem 4rem; }

.nav-discover-row { margin-top: 3rem; }

.nav-discover-row-header {

  display: flex; align-items: baseline; justify-content: space-between;

  margin-bottom: 1rem;

  padding-bottom: 0.75rem;

  border-bottom: 1px solid var(--ds-border);

}

.nav-discover-row-title {

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: 1.4rem; color: var(--ds-t1);

  margin: 0; font-weight: 500;

}

.nav-discover-row-sub {

  font-size: 0.825rem; color: var(--ds-t3);

  text-transform: uppercase; letter-spacing: 0.1em;

}



.nav-covenant {

  margin-top: 3rem; padding: 2rem;

  border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-lg);

  background: var(--ds-bg-sunken);

  text-align: center;

}

.nav-covenant-title {

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: 1.15rem; color: var(--ds-accent);

  margin: 0 0 0.75rem; font-weight: 500;

  text-transform: uppercase; letter-spacing: 0.12em;

}

.nav-covenant-body {

  color: var(--ds-t2); font-size: 0.95rem;

  max-width: 640px; margin: 0 auto; line-height: 1.65;

}

.nav-covenant-body strong { color: var(--ds-t1); font-weight: 500; }



/* Recent claims — newspaper ticker style */

.nav-recent-list {

  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 1px;

  background: var(--ds-border);

  border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-md);

  overflow: hidden;

}

.nav-recent-item {

  padding: 1rem 1.1rem;

  background: var(--ds-bg-raised);

  color: var(--ds-t1); text-decoration: none;

  transition: background 0.15s;

}

.nav-recent-item:hover { background: var(--ds-bg-elevated); text-decoration: none; }

.nav-recent-date {

  font-size: 0.75rem; color: var(--ds-t3);

  text-transform: uppercase; letter-spacing: 0.08em;

  margin-bottom: 0.25rem;

}

.nav-recent-name {

  font-weight: 500; color: var(--ds-t1);

  margin-bottom: 0.15rem;

}

.nav-recent-une { font-size: 0.825rem; color: var(--ds-accent); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

.nav-recent-loc { font-size: 0.825rem; color: var(--ds-t3); margin-top: 0.35rem; }



/* Coliseum standings */

.nav-coliseums { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }

.nav-coliseum {

  border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-lg);

  background: var(--ds-bg-raised);

  overflow: hidden;

}

.nav-coliseum-head {

  padding: 1rem 1.1rem;

  border-bottom: 1px solid var(--ds-border);

  background: var(--ds-bg-elevated);

}

.nav-coliseum-title {

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: 1.05rem; color: var(--ds-t1); margin: 0;

  font-weight: 500;

}

.nav-coliseum-meta { font-size: 0.75rem; color: var(--ds-t3); margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.08em; }

.nav-coliseum-ranks { padding: 0.25rem 0; }

.nav-coliseum-rank {

  display: flex; align-items: center; gap: 0.75rem;

  padding: 0.6rem 1.1rem;

  color: var(--ds-t1); text-decoration: none;

  font-size: 0.925rem;

  transition: background 0.1s;

}

.nav-coliseum-rank:hover { background: var(--ds-bg-elevated); text-decoration: none; }

.nav-coliseum-rank-num {

  width: 24px; height: 24px; border-radius: 50%;

  background: var(--ds-bg-sunken); border: 1px solid var(--ds-border);

  display: flex; align-items: center; justify-content: center;

  font-size: 0.75rem; font-weight: 600; color: var(--ds-t2);

  flex-shrink: 0;

}

.nav-coliseum-rank-num.nav-rank-1 { background: var(--ds-gold); color: var(--ds-t-inverse); border-color: var(--ds-gold); }

.nav-coliseum-rank-num.nav-rank-2 { background: var(--ds-border-strong); color: var(--ds-t1); }

.nav-coliseum-rank-num.nav-rank-3 { background: var(--ds-copper); color: var(--ds-t-inverse); border-color: var(--ds-copper); }

.nav-coliseum-rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



/* Spotlight — cathedral stained-glass moment */

.nav-spotlight {

  display: grid; grid-template-columns: 1fr 1.3fr;

  gap: 0; overflow: hidden;

  border: 1px solid var(--ds-border-strong);

  border-radius: var(--ds-r-xl);

  background: var(--ds-bg-raised);

  box-shadow: var(--ds-shadow-md);

}

.nav-spotlight-img {

  background: linear-gradient(135deg, var(--ds-accent-sunk), var(--ds-bg-sunken));

  min-height: 320px;

  display: flex; align-items: center; justify-content: center;

  color: var(--ds-accent); font-size: 4rem;

  font-family: var(--ds-font-display, Georgia, serif);

}

.nav-spotlight-body { padding: 2rem; }

.nav-spotlight-eyebrow {

  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;

  color: var(--ds-accent); margin-bottom: 0.75rem;

}

.nav-spotlight-name {

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: 1.85rem; color: var(--ds-t1); margin: 0 0 0.5rem;

  line-height: 1.15; font-weight: 500;

}

.nav-spotlight-une { font-family: ui-monospace, monospace; color: var(--ds-accent); font-size: 0.95rem; margin-bottom: 1rem; }

.nav-spotlight-desc { color: var(--ds-t2); line-height: 1.6; margin-bottom: 1.25rem; }

.nav-spotlight-facts {

  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem;

  padding: 1rem 0; margin-bottom: 1.25rem;

  border-top: 1px solid var(--ds-border);

  border-bottom: 1px solid var(--ds-border);

}

.nav-spotlight-fact-label { font-size: 0.7rem; color: var(--ds-t3); text-transform: uppercase; letter-spacing: 0.1em; }

.nav-spotlight-fact-value { color: var(--ds-t1); margin-top: 0.2rem; font-weight: 500; }



/* Categories */

.nav-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.5rem; }

.nav-category {

  padding: 1rem 1.1rem;

  background: var(--ds-bg-raised);

  border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-md);

  color: var(--ds-t1); text-decoration: none;

  display: flex; align-items: center; gap: 0.75rem;

  transition: all 0.15s;

}

.nav-category:hover {

  border-color: var(--ds-border-accent);

  background: var(--ds-bg-elevated);

  text-decoration: none;

}

.nav-category-icon { color: var(--ds-accent); }

.nav-category-icon svg { width: 18px; height: 18px; }

.nav-category-name { font-size: 0.925rem; }



/* ─────────────────────────────────────

   ENTITY — enrichment view

   ───────────────────────────────────── */

.nav-entity { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }



.nav-entity-header {

  display: grid; grid-template-columns: 1.5fr 1fr;

  gap: 3rem;

  padding-bottom: 2rem;

  border-bottom: 1px solid var(--ds-border);

  margin-bottom: 2rem;

}

.nav-entity-eyebrow {

  display: flex; align-items: center; gap: 0.75rem;

  font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;

  color: var(--ds-accent); margin-bottom: 1rem;

}

.nav-entity-eyebrow-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.nav-entity-name {

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: clamp(1.8rem, 4vw, 2.75rem);

  line-height: 1.1; color: var(--ds-t1); margin: 0 0 0.5rem;

  font-weight: 500; letter-spacing: -0.01em;

}

.nav-entity-une {

  font-family: ui-monospace, monospace; color: var(--ds-accent);

  font-size: 1.05rem; margin-bottom: 1rem;

}

.nav-entity-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }

.nav-entity-badge {

  display: inline-flex; align-items: center; gap: 0.35rem;

  padding: 0.3rem 0.7rem;

  background: var(--ds-bg-raised);

  border: 1px solid var(--ds-border);

  border-radius: 4px;

  font-size: 0.75rem;

  color: var(--ds-t2);

}

.nav-entity-badge svg { width: 12px; height: 12px; }

.nav-entity-badge-verified { border-color: var(--ds-green); color: var(--ds-green); }

.nav-entity-badge-claimed { border-color: var(--ds-accent); color: var(--ds-accent); }

.nav-entity-desc { color: var(--ds-t2); line-height: 1.6; font-size: 1rem; }



.nav-entity-hero {

  background: linear-gradient(135deg, var(--ds-accent-sunk), var(--ds-bg-elevated));

  border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-lg);

  min-height: 280px;

  display: flex; flex-direction: column;

  padding: 1.5rem;

  justify-content: flex-end;

}

.nav-entity-hero-privacy {

  align-self: flex-start;

  display: inline-flex; align-items: center; gap: 0.5rem;

  padding: 0.4rem 0.75rem;

  background: var(--ds-bg-raised);

  border: 1px solid var(--ds-border);

  border-radius: 999px;

  font-size: 0.8rem;

}

.nav-entity-hero-grade {

  width: 28px; height: 28px; border-radius: 4px;

  display: flex; align-items: center; justify-content: center;

  font-family: var(--ds-font-display, Georgia, serif);

  font-weight: 700; font-size: 0.95rem;

  color: var(--ds-t-inverse);

}



.nav-entity-grid {

  display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem;

}



/* Core facts */

.nav-facts {

  display: grid; grid-template-columns: 1fr 1fr; gap: 0;

  border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-lg);

  overflow: hidden;

  background: var(--ds-bg-raised);

}

.nav-fact {

  padding: 1rem 1.25rem;

  border-right: 1px solid var(--ds-border);

  border-bottom: 1px solid var(--ds-border);

}

.nav-fact:nth-child(2n) { border-right: 0; }

.nav-fact:nth-last-child(-n+2) { border-bottom: 0; }

.nav-fact-label { font-size: 0.7rem; color: var(--ds-t3); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.35rem; }

.nav-fact-value { color: var(--ds-t1); font-size: 0.95rem; }

.nav-fact-value a { color: var(--ds-t1); }

.nav-fact-value.nav-fact-mono { font-family: ui-monospace, monospace; font-size: 0.875rem; }



/* Section headers inside entity */

.nav-section { margin-top: 3rem; }

.nav-section-title {

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: 1.35rem; color: var(--ds-t1);

  margin: 0 0 1rem; font-weight: 500;

  padding-bottom: 0.75rem;

  border-bottom: 1px solid var(--ds-border);

}



/* Timeline — the permanence backbone */

.nav-timeline { border-left: 2px solid var(--ds-border); padding-left: 1.5rem; margin-left: 0.5rem; }

.nav-timeline-event { position: relative; padding: 0.5rem 0 1.5rem; }

.nav-timeline-event::before {

  content: ''; position: absolute; left: -2rem; top: 1rem;

  width: 11px; height: 11px; border-radius: 50%;

  background: var(--ds-bg);

  border: 2px solid var(--ds-accent);

}

.nav-timeline-event.nav-timeline-current::before { background: var(--ds-accent); }

.nav-timeline-date {

  font-size: 0.75rem; color: var(--ds-t3);

  text-transform: uppercase; letter-spacing: 0.08em;

  margin-bottom: 0.2rem;

}

.nav-timeline-title { color: var(--ds-t1); font-weight: 500; margin-bottom: 0.2rem; }

.nav-timeline-body { color: var(--ds-t2); font-size: 0.925rem; }

.nav-timeline-source { font-size: 0.75rem; color: var(--ds-t3); margin-top: 0.35rem; font-style: italic; }



/* Vouches */

.nav-vouches-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }

.nav-vouches-count {

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: 2.5rem; color: var(--ds-accent);

  line-height: 1; font-weight: 500;

}

.nav-vouches-label { color: var(--ds-t2); font-size: 0.875rem; }

.nav-vouches-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.nav-vouch {

  display: inline-flex; align-items: center; gap: 0.5rem;

  padding: 0.4rem 0.75rem;

  background: var(--ds-bg-raised);

  border: 1px solid var(--ds-border);

  border-radius: 999px;

  font-size: 0.825rem;

}

.nav-vouch-avatar {

  width: 20px; height: 20px; border-radius: 50%;

  background: var(--ds-accent); color: var(--ds-t-inverse);

  display: flex; align-items: center; justify-content: center;

  font-size: 0.65rem; font-weight: 700;

}



/* Sidebar */

.nav-entity-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }

.nav-sidebar-card {

  background: var(--ds-bg-raised);

  border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-lg);

  padding: 1.25rem;

}

.nav-sidebar-title {

  font-size: 0.75rem; color: var(--ds-t3);

  text-transform: uppercase; letter-spacing: 0.12em;

  margin: 0 0 0.75rem;

}

.nav-sidebar-action {

  display: block; width: 100%;

  padding: 0.75rem 1rem;

  background: var(--ds-accent); color: var(--ds-t-inverse);

  border: 0; border-radius: var(--ds-r-md);

  font-weight: 500; font-size: 0.925rem;

  text-align: center; text-decoration: none;

  margin-bottom: 0.5rem;

  transition: background 0.15s;

}

.nav-sidebar-action:hover { background: var(--ds-accent-bright); color: var(--ds-t-inverse); text-decoration: none; }

.nav-sidebar-action.nav-sidebar-action-ghost {

  background: transparent; color: var(--ds-t1);

  border: 1px solid var(--ds-border-strong);

}

.nav-sidebar-action.nav-sidebar-action-ghost:hover { background: var(--ds-bg-elevated); }



.nav-privacy-breakdown { margin-top: 0.5rem; }

.nav-privacy-line {

  display: flex; justify-content: space-between; align-items: center;

  padding: 0.5rem 0;

  border-bottom: 1px solid var(--ds-border);

  font-size: 0.875rem;

}

.nav-privacy-line:last-child { border-bottom: 0; }

.nav-privacy-line-label { color: var(--ds-t2); }

.nav-privacy-line-val { color: var(--ds-t1); font-weight: 500; }

.nav-privacy-line-val.nav-good { color: var(--ds-green); }

.nav-privacy-line-val.nav-bad { color: var(--ds-danger); }



/* Coliseum list (sidebar) */

.nav-entity-coliseum-list { display: flex; flex-direction: column; gap: 0.5rem; }

.nav-entity-coliseum-item {

  display: flex; justify-content: space-between; align-items: center;

  padding: 0.65rem 0.85rem;

  background: var(--ds-bg);

  border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-md);

  color: var(--ds-t1); text-decoration: none;

  font-size: 0.875rem;

  transition: border-color 0.15s;

}

.nav-entity-coliseum-item:hover { border-color: var(--ds-border-accent); text-decoration: none; }

.nav-entity-coliseum-rank {

  font-family: var(--ds-font-display, Georgia, serif);

  font-weight: 500; color: var(--ds-accent);

}



/* ─────────────────────────────────────

   PRIVACY — grade gallery

   ───────────────────────────────────── */

.nav-privacy-page { max-width: 1200px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }



.nav-privacy-hero { text-align: center; max-width: 720px; margin: 0 auto 4rem; }

.nav-privacy-hero-title {

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: clamp(2rem, 4.5vw, 3rem);

  color: var(--ds-t1); margin: 0 0 1rem; font-weight: 500;

  letter-spacing: -0.01em;

}

.nav-privacy-hero-sub { color: var(--ds-t2); font-size: 1.05rem; line-height: 1.6; }



/* Grade scale */

.nav-scale {

  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;

  border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-lg);

  overflow: hidden;

  margin-bottom: 3rem;

  background: var(--ds-bg-raised);

}

.nav-scale-item {

  padding: 1.5rem 1rem;

  text-align: center;

  border-right: 1px solid var(--ds-border);

}

.nav-scale-item:last-child { border-right: 0; }

.nav-scale-letter {

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: 3rem; font-weight: 700;

  line-height: 1; margin-bottom: 0.5rem;

}

.nav-scale-label { font-size: 0.8rem; color: var(--ds-t2); }

.nav-scale-s .nav-scale-letter { color: var(--ds-grade-s); }

.nav-scale-a .nav-scale-letter { color: var(--ds-grade-a); }

.nav-scale-b .nav-scale-letter { color: var(--ds-grade-b); }

.nav-scale-c .nav-scale-letter { color: var(--ds-grade-c); }

.nav-scale-d .nav-scale-letter { color: var(--ds-grade-d); }

.nav-scale-f .nav-scale-letter { color: var(--ds-grade-f); }



/* Grade badge (reusable) */

.nav-grade {

  display: inline-flex; align-items: center; justify-content: center;

  width: 40px; height: 40px; border-radius: 6px;

  font-family: var(--ds-font-display, Georgia, serif);

  font-weight: 700; font-size: 1.2rem;

  color: var(--ds-t-inverse);

  flex-shrink: 0;

}

.nav-grade-size-sm { width: 28px; height: 28px; font-size: 0.95rem; border-radius: 4px; }

.nav-grade-size-lg { width: 56px; height: 56px; font-size: 1.75rem; border-radius: 8px; }

.nav-grade.nav-grade-s { background: var(--ds-grade-s); }

.nav-grade.nav-grade-a { background: var(--ds-grade-a); }

.nav-grade.nav-grade-b { background: var(--ds-grade-b); color: #1a1814; }

.nav-grade.nav-grade-c { background: var(--ds-grade-c); color: #1a1814; }

.nav-grade.nav-grade-d { background: var(--ds-grade-d); }

.nav-grade.nav-grade-f { background: var(--ds-grade-f); }



/* Criteria cards */

.nav-criteria { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 3rem; }

.nav-criterion {

  padding: 1.25rem;

  background: var(--ds-bg-raised);

  border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-lg);

}

.nav-criterion-icon {

  width: 36px; height: 36px; border-radius: 8px;

  background: var(--ds-accent-sunk); color: var(--ds-accent);

  display: flex; align-items: center; justify-content: center;

  margin-bottom: 0.75rem;

}

.nav-criterion-icon svg { width: 18px; height: 18px; }

.nav-criterion-title {

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: 1.05rem; color: var(--ds-t1);

  margin: 0 0 0.4rem; font-weight: 500;

}

.nav-criterion-body { color: var(--ds-t2); font-size: 0.875rem; line-height: 1.55; }



/* Top / worst tables */

.nav-leaderboard {

  background: var(--ds-bg-raised);

  border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-lg);

  overflow: hidden;

}

.nav-leaderboard-row {

  display: grid; grid-template-columns: 50px 1fr auto auto;

  gap: 1rem; align-items: center;

  padding: 1rem 1.25rem;

  border-bottom: 1px solid var(--ds-border);

  color: var(--ds-t1); text-decoration: none;

  transition: background 0.1s;

}

.nav-leaderboard-row:last-child { border-bottom: 0; }

.nav-leaderboard-row:hover { background: var(--ds-bg-elevated); text-decoration: none; }

.nav-leaderboard-rank {

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: 1.25rem; color: var(--ds-t3); font-weight: 500;

}

.nav-leaderboard-body { min-width: 0; }

.nav-leaderboard-name {

  color: var(--ds-t1); font-weight: 500;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.nav-leaderboard-meta { font-size: 0.8rem; color: var(--ds-t3); margin-top: 0.15rem; }

.nav-leaderboard-score { color: var(--ds-t2); font-size: 0.875rem; text-align: right; }



/* Utility */

.nav-sr-only {

  position: absolute; width: 1px; height: 1px;

  padding: 0; margin: -1px; overflow: hidden;

  clip: rect(0,0,0,0); white-space: nowrap; border: 0;

}



/* Legacy holding (kept) */

.nav-coming { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4rem 1.5rem; }

.nav-coming-inner { text-align: center; max-width: 640px; }

.nav-coming-mark { color: var(--ds-accent); font-family: ui-monospace, monospace; letter-spacing: 0.2em; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 1.5rem; }

.nav-coming-headline { font-family: var(--ds-font-display, Georgia, serif); font-size: clamp(3rem, 8vw, 5rem); color: var(--ds-t1); margin: 0 0 1.5rem; line-height: 1; font-weight: 500; }

.nav-coming-sub { color: var(--ds-t2); font-size: 1.05rem; line-height: 1.6; margin-bottom: 2rem; }

.nav-coming-foot { color: var(--ds-t3); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3rem; }

.nav-coming-link { color: var(--ds-accent); }



/* Responsive */

@media (max-width: 960px) {

  .nav-entity-header { grid-template-columns: 1fr; gap: 1.5rem; }

  .nav-entity-grid { grid-template-columns: 1fr; gap: 2rem; }

  .nav-spotlight { grid-template-columns: 1fr; }

  .nav-spotlight-img { min-height: 180px; }

  .nav-scale { grid-template-columns: repeat(3, 1fr); }

  .nav-scale-item:nth-child(3) { border-right: 0; }

  .nav-scale-item:nth-child(-n+3) { border-bottom: 1px solid var(--ds-border); }

}

@media (max-width: 640px) {

  .nav-topbar { padding: 0.6rem 1rem; gap: 0.75rem; }

  .nav-topbar-search { display: none !important; display: none; }

  .nav-hero { padding: 2.5rem 1rem 1.5rem; }

  .nav-facts { grid-template-columns: 1fr; }

  .nav-fact { border-right: 0; }

}




/* ─────────────────────────────────────

   LIVE SEARCH RESULTS — web + NeuraWeb

   ───────────────────────────────────── */



.nav-results-loading {

  padding: 1.5rem;

  text-align: center;

  color: var(--ds-t3);

  font-size: 0.9rem;

}



.nav-results-empty {

  padding: 1.5rem 1.25rem;

  text-align: center;

}

.nav-results-empty-title {

  color: var(--ds-t1);

  font-family: var(--ds-font-display, Georgia, serif);

  font-size: 1.05rem;

  margin-bottom: 0.4rem;

}

.nav-results-empty-body {

  color: var(--ds-t3);

  font-size: 0.875rem;

}



.nav-results-foot {

  padding: 0.75rem 1.1rem;

  background: var(--ds-bg-sunken);

  color: var(--ds-t3);

  font-size: 0.75rem;

  text-align: center;

  border-top: 1px solid var(--ds-border);

}



/* Web results */





.nav-web-result:last-child { border-bottom: 0; }

.nav-web-result:hover { background: var(--ds-bg-elevated); }













.nav-web-title:hover { color: var(--ds-accent); text-decoration: underline; }













.nav-chip code {

  font-family: ui-monospace, 'SF Mono', Menlo, monospace;

  color: var(--ds-accent);

  font-size: 0.72rem;

}




.nav-chip-claimed code { color: var(--ds-green); }













.nav-web-claim-cta:hover {

  background: var(--ds-accent);

  color: var(--ds-t-inverse);

  text-decoration: none;

}



/* NeuraWeb results (from neuranav_index) */

.nav-nw-result {

  display: flex;

  align-items: center;

  gap: 0.85rem;

  padding: 0.75rem 1.15rem;

  border-bottom: 1px solid var(--ds-border);

  color: var(--ds-t1);

  text-decoration: none;

  transition: background 0.1s;

}

.nav-nw-result:hover {

  background: var(--ds-bg-elevated);

  text-decoration: none;

}



.nav-nw-icon {

  width: 28px;

  height: 28px;

  border-radius: 6px;

  background: var(--ds-accent);

  color: var(--ds-t-inverse);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.7rem;

  flex-shrink: 0;

}



.nav-nw-body { flex: 1; min-width: 0; }

.nav-nw-name {

  color: var(--ds-t1);

  font-weight: 500;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.nav-nw-une {

  font-size: 0.8rem;

  color: var(--ds-t3);

  margin-top: 0.15rem;

}

.nav-nw-une code {

  font-family: ui-monospace, Menlo, monospace;

  color: var(--ds-accent);

}







/* ════════════════════════════════════════════════════════════

   Navigator topbar redesign — 2026-04-23

   ════════════════════════════════════════════════════════════ */



.nav-brand-block {

  display: flex; flex-direction: column; align-items: flex-start;

  text-decoration: none; color: var(--ds-t1);

  line-height: 1.1; gap: 0.15rem;

}

.nav-brand-block:hover { text-decoration: none; color: var(--ds-t1); }

.nav-brand-line { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }

.nav-brand-tld-dot { color: var(--ds-accent); }

.nav-brand-tld { color: var(--ds-accent); font-weight: 600; }

.nav-brand-sub {

  font-size: 0.7rem; color: var(--ds-t3);

  letter-spacing: 0.02em; font-weight: 400;

}



.nav-topnav { display: flex; gap: 0.25rem; margin-left: 1.5rem; align-items: center; }

.nav-topnav-link {

  color: var(--ds-t2); text-decoration: none; font-size: 0.9rem;

  padding: 0.45rem 0.7rem; border-radius: var(--ds-r-sm);

  transition: color 0.2s, background 0.2s;

}

.nav-topnav-link:hover {

  color: var(--ds-t1); background: var(--ds-bg-elevated); text-decoration: none;

}

.nav-topnav-link.active { color: var(--ds-accent); }



.nav-corner { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }



.nav-size-group {

  display: inline-flex; gap: 1px; align-items: baseline;

  padding: 0 0.35rem;

}

.nav-size-btn {

  background: transparent; border: 1px solid transparent; color: var(--ds-t3);

  cursor: pointer; padding: 0.25rem 0.4rem;

  border-radius: var(--ds-r-sm); transition: color 0.15s, border-color 0.15s;

  line-height: 1; font-weight: 700; font-family: inherit;

}

.nav-size-btn:hover { color: var(--ds-t1); }

.nav-size-btn.active { color: var(--ds-accent); }

.nav-size-btn.nav-size-md  { font-size: 0.75rem; }

.nav-size-btn.nav-size-lg  { font-size: 0.9rem; }

.nav-size-btn.nav-size-xl  { font-size: 1.05rem; }

.nav-size-btn.nav-size-xxl { font-size: 1.25rem; }



.nav-user-wrap { position: relative; }

.nav-user-pill {

  display: inline-flex; align-items: center; gap: 0.55rem;

  background: var(--ds-bg-elevated); border: 1px solid var(--ds-border);

  color: var(--ds-t1); padding: 0.3rem 0.85rem 0.3rem 0.3rem;

  border-radius: 100px; cursor: pointer;

  font-size: 0.85rem; font-family: inherit;

  transition: border-color 0.2s;

}

.nav-user-pill:hover { border-color: var(--ds-border-strong); }

.nav-user-avatar {

  width: 28px; height: 28px; border-radius: 50%;

  background: var(--ds-accent); color: var(--ds-t-inverse);

  display: inline-flex; align-items: center; justify-content: center;

  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.02em;

  flex-shrink: 0;

}

.nav-user-name {

  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

}



.nav-user-dropdown {

  position: absolute; top: calc(100% + 0.5rem); right: 0;

  min-width: 240px;

  background: var(--ds-bg-raised); border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-md); box-shadow: var(--ds-shadow-md);

  padding: 0.4rem; opacity: 0; pointer-events: none;

  transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s;

  z-index: 100;

}

.nav-user-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.nav-user-dropdown-head {

  padding: 0.7rem 0.75rem 0.6rem;

  border-bottom: 1px solid var(--ds-border); margin-bottom: 0.3rem;

}

.nav-user-dropdown-name { font-size: 0.95rem; font-weight: 600; color: var(--ds-t1); }

.nav-user-dropdown-une {

  font-size: 0.78rem; color: var(--ds-t3); margin-top: 0.15rem;

  font-family: var(--ds-font-mono, ui-monospace, Menlo, Consolas, monospace);

}

.nav-user-dropdown-link {

  display: block; padding: 0.55rem 0.75rem; color: var(--ds-t1);

  text-decoration: none; font-size: 0.85rem;

  border-radius: var(--ds-r-sm); transition: background 0.15s;

}

.nav-user-dropdown-link:hover {

  background: var(--ds-bg-elevated); text-decoration: none; color: var(--ds-t1);

}

.nav-user-dropdown-link-danger {

  color: var(--ds-danger);

  border-top: 1px solid var(--ds-border);

  margin-top: 0.3rem; padding-top: 0.7rem;

}

.nav-user-dropdown-link-danger:hover {

  background: var(--ds-accent-sunk); color: var(--ds-danger);

}



body.is-fullscreen .nav-footer { display: none; }



@media (max-width: 880px) {

  .nav-topnav { display: none; }

  .nav-user-name { display: none; }

  .nav-brand-sub { display: none; }

}





/* ════════════════════════════════════════════════════════════

   Navigator search-engine UX — 2026-04-23

   Hero compact mode, two-column results, mobile drawer

   ════════════════════════════════════════════════════════════ */



/* Hamburger — hidden desktop, shown mobile */

.nav-hamburger {

  display: none;

  background: transparent; border: none; color: var(--ds-t1);

  cursor: pointer; padding: 0.4rem; margin-right: 0.25rem;

  border-radius: var(--ds-r-sm);

}

.nav-hamburger:hover { background: var(--ds-bg-elevated); }

.nav-hamburger svg { width: 22px; height: 22px; }



/* Mobile drawer */

.nav-drawer {

  position: fixed; top: 0; left: 0; bottom: 0;

  width: 280px; max-width: 80vw;

  background: var(--ds-bg-raised); border-right: 1px solid var(--ds-border);

  z-index: 200; transform: translateX(-100%);

  transition: transform 0.25s ease;

  display: flex; flex-direction: column;

  padding: 1.25rem 1rem; gap: 1rem; overflow-y: auto;

}

.nav-drawer.open { transform: translateX(0); }

.nav-drawer-scrim {

  position: fixed; inset: 0; background: rgba(0,0,0,0.4);

  z-index: 150; opacity: 0; pointer-events: none;

  transition: opacity 0.25s;

}

.nav-drawer-scrim.open { opacity: 1; pointer-events: auto; }

.nav-drawer-nav { display: flex; flex-direction: column; gap: 0.25rem; }

.nav-drawer-link {

  display: block; padding: 0.7rem 0.75rem;

  color: var(--ds-t1); text-decoration: none; font-size: 1rem;

  border-radius: var(--ds-r-sm); transition: background 0.15s;

}

.nav-drawer-link:hover { background: var(--ds-bg-elevated); text-decoration: none; color: var(--ds-t1); }

.nav-drawer-controls {

  border-top: 1px solid var(--ds-border); padding-top: 1rem;

  display: flex; flex-direction: column; gap: 0.6rem;

}

.nav-drawer-row-label {

  font-size: 0.7rem; color: var(--ds-t3); text-transform: uppercase;

  letter-spacing: 0.06em; font-weight: 600;

}

.nav-drawer-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.nav-drawer-btn {

  flex: 1; background: var(--ds-bg-elevated); border: 1px solid var(--ds-border);

  color: var(--ds-t1); padding: 0.55rem 0.75rem; border-radius: var(--ds-r-sm);

  font-size: 0.85rem; cursor: pointer; font-family: inherit;

}

.nav-drawer-btn:hover { border-color: var(--ds-border-strong); }



/* ── Hero compact mode ── */

.nav-hero { transition: padding 0.3s ease; }

.nav-hero.compact { padding-top: 1.25rem; padding-bottom: 1rem; }

.nav-hero.compact .nav-hero-content { display: none; }

.nav-hero.compact .nav-search-hero { margin-top: 0; }



/* Search clear button */

.nav-search-hero { position: relative; }

.nav-search-clear {

  position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%);

  background: transparent; border: none; color: var(--ds-t3); cursor: pointer;

  padding: 0.3rem; border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

}

.nav-search-clear:hover { color: var(--ds-t1); background: var(--ds-bg-elevated); }



/* ── Results layout ── */

.nav-results { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem 4rem; }



.nav-results-meta {

  font-size: 0.8rem; color: var(--ds-t3);

  padding-bottom: 0.85rem; margin-bottom: 1rem;

  border-bottom: 1px solid var(--ds-border);

}

.nav-results-meta-count { color: var(--ds-t2); font-weight: 600; }



.nav-results-grid {

  display: grid;

  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);

  gap: 2.5rem;

  align-items: start;

}

.nav-results-col { min-width: 0; }

.nav-results-col-nw {

  background: var(--ds-bg-raised);

  border: 1px solid var(--ds-border);

  border-radius: var(--ds-r-md);

  padding: 1.25rem;

  position: sticky; top: 1rem;

}



.nav-col-label {

  font-size: 0.7rem; color: var(--ds-t3);

  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;

  margin-bottom: 1rem; padding-bottom: 0.5rem;

  border-bottom: 1px solid var(--ds-border);

}

.nav-col-empty {

  color: var(--ds-t3); font-size: 0.875rem;

  padding: 1.5rem 0; text-align: center;

}



/* Web result cards (left col) */


.nav-web-result:last-child { border-bottom: none; }



.nav-web-title:hover { text-decoration: underline; color: var(--ds-accent-bright); }




.nav-web-claim-cta:hover { background: var(--ds-accent-glow); text-decoration: none; }



/* NeuraWeb cards (right col) */

.nav-nw-result {

  display: flex; gap: 0.75rem; align-items: flex-start;

  padding: 0.7rem; margin-bottom: 0.5rem;

  text-decoration: none; color: inherit;

  border-radius: var(--ds-r-sm);

  transition: background 0.15s;

}

.nav-nw-result:hover { background: var(--ds-bg-elevated); text-decoration: none; color: inherit; }

.nav-nw-icon {

  width: 36px; height: 36px; flex-shrink: 0;

  background: var(--ds-accent-sunk); color: var(--ds-accent);

  border-radius: var(--ds-r-sm);

  display: flex; align-items: center; justify-content: center;

  font-size: 1.1rem;

}

.nav-nw-body { min-width: 0; flex: 1; }

.nav-nw-name {

  font-size: 0.9rem; font-weight: 600; color: var(--ds-t1);

  margin-bottom: 0.1rem;

}

.nav-nw-une {

  font-size: 0.78rem; color: var(--ds-t3);

  font-family: var(--ds-font-mono, ui-monospace, Menlo, Consolas, monospace);

}

.nav-nw-meta {

  font-size: 0.72rem; color: var(--ds-t3); margin-top: 0.15rem;

}



/* Loading + empty + error */

.nav-results-loading {

  padding: 2rem 0; text-align: center; color: var(--ds-t3);

  font-size: 0.875rem;

}

.nav-results-empty { padding: 2.5rem 0; text-align: center; }

.nav-results-empty-title {

  color: var(--ds-t1); font-size: 1.05rem; font-weight: 600;

  margin-bottom: 0.4rem;

}

.nav-results-empty-body {

  color: var(--ds-t3); font-size: 0.875rem;

  max-width: 480px; margin: 0 auto;

}



/* Load more */

.nav-results-loadmore-wrap {

  display: flex; justify-content: center;

  padding-top: 1.5rem;

}

.nav-load-more {

  background: var(--ds-bg-raised); border: 1px solid var(--ds-border);

  color: var(--ds-t1); padding: 0.7rem 2rem;

  border-radius: var(--ds-r-md);

  font-size: 0.9rem; font-weight: 600; cursor: pointer;

  font-family: inherit; transition: all 0.15s;

}

.nav-load-more:hover { border-color: var(--ds-accent); color: var(--ds-accent); }



/* Hide the old floating dropdown if it still has the open class */

.nav-search-results { display: none !important; }



/* ── Mobile breakpoints ── */

@media (max-width: 880px) {

  .nav-hamburger { display: inline-flex; align-items: center; justify-content: center; }

  .nav-topnav { display: none; }

  .nav-corner .nav-size-group { display: none; }

  .nav-corner #nav-fullscreen-toggle { display: none; }

  .nav-user-name { display: none; }

  .nav-brand-sub { display: none; }

  .nav-results { padding: 0.5rem 1rem 3rem; }

  .nav-results-grid {

    grid-template-columns: 1fr;

    gap: 1.5rem;

  }

  .nav-results-col-nw {

    position: static;

    order: 2;

  }

  .nav-results-col-web { order: 1; }

}





/* ════════════════════════════════════════════════════════════

   Navigator web-result card v2 — stacked, monogram icon, bottom chips

   2026-04-23 — strips/overrides any prior flex layout from v1

   ════════════════════════════════════════════════════════════ */



.nav-web-result {

  display: block !important;

  padding: 1.4rem 0 !important;

  border-bottom: 1px solid var(--ds-border) !important;

  margin: 0 !important;

  gap: 0 !important;

  flex-direction: unset !important;

  align-items: unset !important;

}

.nav-web-result:last-child { border-bottom: none !important; }









.nav-web-url {

  font-size: 0.85rem;

  color: var(--ds-t2);

  font-family: var(--ds-font-mono, ui-monospace, Menlo, Consolas, monospace);

  margin: 0;

  flex: 1;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.nav-web-title {

  display: block !important;

  color: var(--ds-accent);

  text-decoration: none;

  font-size: 1.15rem;

  font-weight: 600;

  line-height: 1.35;

  margin: 0 0 0.45rem 0;

  width: auto !important;

}

.nav-web-title:hover {

  text-decoration: underline;

  color: var(--ds-accent-bright);

}



.nav-web-desc {

  display: block;

  color: var(--ds-t2);

  font-size: 0.9rem;

  line-height: 1.55;

  margin: 0 0 0.7rem 0;

  width: auto !important;

}



.nav-web-chips {

  display: flex !important;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin: 0.5rem 0 0 0;

  width: auto !important;

}



.nav-web-claim-cta {

  display: inline-block !important;

  margin: 0.7rem 0 0 0;

  padding: 0.5rem 0.95rem;

  background: var(--ds-accent-sunk);

  color: var(--ds-accent);

  border: 1px solid var(--ds-border-accent);

  border-radius: var(--ds-r-sm);

  font-size: 0.825rem;

  font-weight: 600;

  text-decoration: none;

  width: auto !important;

}

.nav-web-claim-cta:hover {

  background: var(--ds-accent-glow);

  text-decoration: none;

  color: var(--ds-accent-bright);

}





/* ════════════════════════════════════════════════════════════

   Navigator pill system v3 — uniform shape, color-coded

   Icon: og_image preferred, monogram fallback

   2026-04-23

   ════════════════════════════════════════════════════════════ */



/* Icon block — wraps either an <img> or the monogram <div> */





/* Pills — one shape, color decides meaning */





.nav-pill {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  padding: 0.42rem 0.85rem;

  border-radius: 999px;

  font-size: 0.78rem;

  font-weight: 600;

  line-height: 1.2;

  border: 1px solid transparent;

  text-decoration: none;

  white-space: nowrap;

}

.nav-pill code {

  font-family: var(--ds-font-mono, ui-monospace, Menlo, Consolas, monospace);

  font-size: 0.78rem;

  font-weight: 700;

  background: transparent;

  padding: 0;

}



/* Status pills — soft tinted backgrounds */

.nav-pill-claimed {

  background: rgba(74, 153, 112, 0.13);

  color: var(--ds-green);

  border-color: rgba(74, 153, 112, 0.35);

}

.nav-pill-reserved {

  background: rgba(196, 116, 74, 0.12);

  color: var(--ds-copper);

  border-color: rgba(196, 116, 74, 0.4);

}

.nav-pill-available {

  background: rgba(212, 162, 76, 0.13);

  color: var(--ds-gold);

  border-color: rgba(212, 162, 76, 0.4);

}



/* CTA pills — solid versions of the same colors */










/* Privacy / antibot — neutral right-side pill */

.nav-pill-antibot {

  background: var(--ds-bg-elevated);

  color: var(--ds-t2);

  border-color: var(--ds-border);

}



/* Sticky search on results page so user can re-search without going home */

body.nav-results-mode .nav-hero.compact {

  position: sticky;

  top: 0;

  z-index: 50;

  background: var(--ds-bg);

  border-bottom: 1px solid var(--ds-border);

  padding-top: 1rem;

  padding-bottom: 1rem;

}





/* ════════════════════════════════════════════════════════════

   Navigator result layout v4 — monogram corner, right thumbnail,

   right-justified pills

   2026-04-23

   ════════════════════════════════════════════════════════════ */



.nav-web-main-row {

  display: flex;

  gap: 1.25rem;

  align-items: flex-start;

}



.nav-web-main {

  flex: 1;

  min-width: 0;

}



.nav-web-thumb {

  width: 130px;

  height: 85px;

  flex-shrink: 0;

  object-fit: cover;

  border-radius: var(--ds-r-sm);

  border: 1px solid var(--ds-border);

  background: var(--ds-bg-elevated);

  display: block;

}



.nav-web-head {

  display: flex;

  align-items: center;

  gap: 0.65rem;

  margin-bottom: 0.5rem;

}



.nav-web-mono {

  width: 32px; height: 32px;

  flex-shrink: 0;

  background: var(--ds-accent-sunk);

  color: var(--ds-accent);

  border: 1px solid var(--ds-border-accent);

  border-radius: var(--ds-r-sm);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  font-size: 0.95rem;

  font-family: var(--ds-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);

}



.nav-web-pills {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  justify-content: flex-end;

  align-items: center;

  margin: 0.85rem 0 0 0;

  width: 100%;

}



@media (max-width: 880px) {

  .nav-web-thumb { display: none; }

  .nav-web-pills { justify-content: flex-start; }

}





/* Real avatar image variant */

.nav-user-avatar-img {

  width: 28px; height: 28px;

  border-radius: 50%;

  object-fit: cover;

  display: block;

  border: 1px solid var(--ds-border);

}








/* ════════════════════════════════════════════════════════════

   Navigator CTA white-text — both states, both colors, always white

   2026-04-23

   ════════════════════════════════════════════════════════════ */



.nav-pill-cta {

  cursor: pointer;

  color: #ffffff !important;

  transition: background-color 0.15s ease, border-color 0.15s ease;

  text-decoration: none;

}

.nav-pill-cta:hover { text-decoration: none; color: #ffffff !important; }

.nav-pill-cta:active { transform: translateY(1px); }



/* RESERVED — copper, darker copper on hover, always white text */

.nav-pill-cta-reserved {

  background: var(--ds-copper);

  border-color: var(--ds-copper);

}

.nav-pill-cta-reserved:hover {

  background: var(--ds-copper-dark);

  border-color: var(--ds-copper-dark);

}



/* AVAILABLE — gold, darker gold on hover, always white text */

.nav-pill-cta-available {

  background: var(--ds-gold);

  border-color: var(--ds-gold);

}

.nav-pill-cta-available:hover {

  background: var(--ds-gold-dark);

  border-color: var(--ds-gold-dark);

}





/* ════════════════════════════════════════════════════════════

   Navigator results-mode fluid width — hero stays untouched

   Higher specificity (body.nav-results-mode .nav-results) wins

   over any earlier .nav-results rule without removing it.

   2026-04-23

   ════════════════════════════════════════════════════════════ */



body.nav-results-mode .nav-results {

  width: 100%;

  max-width: none;

  margin: 0 auto;

  padding-left: 1rem;

  padding-right: 1rem;

  box-sizing: border-box;

}



@media (min-width: 768px) {

  body.nav-results-mode .nav-results {

    padding-left: 2rem;

    padding-right: 2rem;

  }

}

@media (min-width: 1200px) {

  body.nav-results-mode .nav-results {

    padding-left: 3rem;

    padding-right: 3rem;

  }

}

@media (min-width: 1600px) {

  body.nav-results-mode .nav-results {

    padding-left: 4rem;

    padding-right: 4rem;

  }

}

@media (min-width: 1920px) {

  body.nav-results-mode .nav-results {

    padding-left: 6rem;

    padding-right: 6rem;

  }

}

@media (min-width: 2560px) {

  body.nav-results-mode .nav-results {

    max-width: 2400px;

    padding-left: 8rem;

    padding-right: 8rem;

  }

}





/* ════════════════ Results-mode top toolbar — added 2026-04-23 ════════════════ */

.nav-topbar-search { display: none !important;

  display: none;

  align-items: center;

  gap: 8px;

  flex: 1;

  max-width: 640px;

  margin: 0 16px;

  padding: 8px 14px;

  background: rgba(255,255,255,0.05);

  border: 1px solid rgba(255,255,255,0.12);

  border-radius: 999px;

  transition: border-color 120ms ease, background 120ms ease;

}

.nav-topbar-search:focus-within {

  border-color: var(--ds-accent-warm);

  background: rgba(255,255,255,0.08);

}

.nav-topbar-search svg { opacity: 0.55; flex-shrink: 0; }

.nav-topbar-search input {

  background: transparent;

  border: none;

  outline: none;

  color: inherit;

  font: inherit;

  font-size: 14px;

  width: 100%;

  padding: 0;

}



/* When in results mode: show the top search, hide visual clutter */






/* Light theme variant */

[data-theme="light"] .nav-topbar-search { display: none !important;

  background: rgba(0,0,0,0.04);

  border-color: rgba(0,0,0,0.12);

}

[data-theme="light"] .nav-topbar-search:focus-within {

  background: rgba(0,0,0,0.06);

}



/* Mobile: full width top search, no margin clobber */

@media (max-width: 720px) {

  body.nav-results-mode .nav-topbar-search { display: none !important; margin: 0 8px; max-width: none; }

  body.nav-results-mode .nav-brand-sub { display: none; }

}




/* Save this search button — appears in results mode only */

.nav-save-search-btn {

  display: none;

  align-items: center;

  gap: 6px;

  background: transparent;

  border: 1px solid rgba(255,255,255,0.18);

  color: inherit;

  padding: 6px 12px;

  border-radius: 999px;

  font: inherit;

  font-size: 13px;

  cursor: pointer;

  margin: 0 8px;

  opacity: 0.85;

}

.nav-save-search-btn:hover { opacity: 1; border-color: var(--ds-accent-warm); background: rgba(201,168,124,0.08); }

.nav-save-search-btn.saved { background: rgba(201,168,124,0.18); border-color: var(--ds-accent-warm); color: var(--ds-accent-warm); opacity: 1; }

.nav-save-search-btn svg { flex-shrink: 0; }

body.nav-results-mode .nav-save-search-btn { display: inline-flex; }

[data-theme="light"] .nav-save-search-btn { border-color: rgba(0,0,0,0.18); }

@media (max-width: 720px) {

  .nav-save-search-btn .nav-save-search-label { display: none; }

  .nav-save-search-btn { padding: 6px 10px; }

}




/* Save this search button IN THE STATS LINE */

.nav-results-meta {

  display: flex !important;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}

.nav-results-meta > #nav-save-search-btn {

  margin-left: auto;

}

#nav-save-search-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: transparent;

  border: 1px solid rgba(201,168,124,0.4);

  color: var(--ds-accent-warm);

  padding: 4px 12px;

  border-radius: 999px;

  font: inherit;

  font-size: 12px;

  cursor: pointer;

}

#nav-save-search-btn:hover { background: rgba(201,168,124,0.1); border-color: var(--ds-accent-warm); }

#nav-save-search-btn.saved { background: rgba(201,168,124,0.2); border-color: var(--ds-accent-warm); }

#nav-save-search-btn svg { flex-shrink: 0; }