/* ==========================================================================
   components.css  —  reusable parts (buttons, badges, cards, nav, demo)
   ========================================================================== */

/* ---------- Sticky top nav ---------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topnav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; max-width: var(--col-max); margin: 0 auto; padding: 0 var(--gap-5);
}
.brand { display: flex; align-items: center; gap: var(--gap-3); font-weight: 700; color: var(--ink); }
.brand .logo { width: 28px; height: 28px; }
.brand .name { font-size: var(--fs-15); letter-spacing: -0.01em; }
.brand .name em { font-style: normal; color: var(--muted); font-weight: 500; }

.phase-ribbon { display: flex; gap: var(--gap-1); align-items: center; }
.phase-ribbon button {
  display: flex; align-items: center; gap: var(--gap-2);
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-13); color: var(--muted); font-weight: 500;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.phase-ribbon button:hover { background: var(--surface); color: var(--ink); }
.phase-ribbon button.active { background: var(--ink); color: var(--paper); }
.phase-ribbon .num { font-family: var(--font-mono); font-size: 11px; opacity: .7; }
@media (max-width: 980px) { .phase-ribbon { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: var(--gap-2);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: var(--fs-14); font-weight: 600;
  transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--indigo); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border-2); }
.btn-ghost:hover { background: var(--surface); }
.btn .icon { width: 16px; height: 16px; }

/* ---------- Hero ---------- */
.hero { padding: var(--gap-9) 0 var(--gap-8); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(60rem 30rem at 80% 0%, rgba(79,70,229,.08), transparent 70%),
    radial-gradient(40rem 20rem at 10% 90%, rgba(6,182,212,.06), transparent 70%);
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--gap-7); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: var(--gap-6); } }

.hero h1 .grad {
  background: linear-gradient(90deg, var(--ink) 0%, var(--indigo) 60%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { font-size: var(--fs-18); color: var(--muted); max-width: 520px; margin-top: var(--gap-4); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--gap-2); margin-top: var(--gap-5); }
.tag {
  display: inline-flex; align-items: center; gap: var(--gap-2);
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-soft);
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
.tag.cyan .dot { background: var(--cyan); }
.tag.violet .dot { background: var(--violet); }

/* ---------- Demo pane ---------- */
.demo {
  background: var(--ink); color: var(--paper); border-radius: var(--r-4);
  box-shadow: var(--sh-3); overflow: hidden; position: relative;
  font-family: var(--font-mono); font-size: var(--fs-13);
}
.demo-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08);
}
.demo-head .lights { display: flex; gap: 6px; }
.demo-head .lights span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.demo-head .lights span:first-child { background: #ef4444; }
.demo-head .lights span:nth-child(2) { background: #f59e0b; }
.demo-head .lights span:nth-child(3) { background: #10b981; }
.demo-head .label { color: var(--muted-soft); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.demo-controls { display: flex; gap: 6px; }
.demo-controls button {
  width: 28px; height: 28px; border-radius: var(--r-2);
  display: grid; place-items: center;
  color: var(--muted-soft); transition: background var(--motion-fast), color var(--motion-fast);
}
.demo-controls button:hover { background: rgba(255,255,255,.08); color: var(--paper); }
.demo-controls .icon { width: 14px; height: 14px; }

.demo-body { padding: 16px 18px 8px; min-height: 360px; }
.demo-line { display: flex; gap: 10px; margin-bottom: 10px; line-height: 1.55; }
.demo-line .gutter { color: var(--cyan); width: 18px; flex: none; }
.demo-line .body { flex: 1; min-width: 0; word-break: break-word; }
.demo-line .body em { color: var(--muted-soft); font-style: normal; }
.demo-line.user .body { color: var(--paper); }
.demo-line.user .gutter { color: #fbbf24; }
.demo-line.stage .body { color: var(--muted-soft); }
.demo-line.stage .stage-name { color: var(--cyan); font-weight: 600; }
.demo-line.answer .body { color: #c7d2fe; }
.demo-line.answer .body strong { color: #fff; font-weight: 600; }
.demo-line.cite { color: var(--cyan); cursor: pointer; transition: color var(--motion-fast); }
.demo-line.cite:hover { color: var(--paper); }

.demo-cite {
  display: inline-block; padding: 1px 6px; border-radius: var(--r-1);
  background: rgba(6,182,212,.15); color: #67e8f9; cursor: pointer;
  border: 1px solid rgba(6,182,212,.3); font-size: 0.92em;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.demo-cite:hover { background: var(--cyan); color: var(--ink); }

.demo-pipe {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
  font-size: 11px; color: var(--muted-soft); padding-left: 28px;
}
.demo-pipe .step {
  padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.demo-pipe .step.active { background: var(--indigo); color: var(--paper); border-color: transparent; }
.demo-pipe .step.done { background: rgba(6,182,212,.12); color: var(--cyan); border-color: rgba(6,182,212,.3); }
.demo-pipe .arrow { opacity: .4; }

.demo-foot {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 16px 16px; background: rgba(255,255,255,.02); border-top: 1px solid rgba(255,255,255,.06);
}
.demo-foot .label { font-size: 11px; color: var(--muted-soft); margin-right: 4px; align-self: center; }
.chip {
  font-family: var(--font-mono); font-size: 11px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); color: var(--paper);
  border: 1px solid rgba(255,255,255,.1);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.chip:hover { background: var(--indigo); border-color: var(--indigo); }

.cursor::after {
  content: ""; display: inline-block; width: 7px; height: 1em; background: var(--cyan);
  vertical-align: text-bottom; animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Proof strip — three numbers ---------- */
.proof { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.proof-cell { padding: var(--gap-7) var(--gap-5); text-align: center; border-left: 1px solid var(--border); }
.proof-cell:first-child { border-left: 0; }
.proof-cell .num {
  font-family: var(--font-mono); font-size: var(--fs-44); font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1;
}
.proof-cell .num em { color: var(--indigo); font-style: normal; }
.proof-cell .lbl { margin-top: var(--gap-3); color: var(--muted); font-size: var(--fs-13); }
.proof-cell .sub { margin-top: 4px; font-size: var(--fs-12); color: var(--muted-soft); }
@media (max-width: 720px) { .proof { grid-template-columns: 1fr; } .proof-cell { border-left: 0; border-top: 1px solid var(--border); } .proof-cell:first-child { border-top: 0; } }

/* ---------- Section header ---------- */
.section-head { max-width: 760px; margin-bottom: var(--gap-7); }
.section-head .eyebrow + h2 { margin-top: var(--gap-3); }
.section-head h2 + p { margin-top: var(--gap-3); color: var(--muted); font-size: var(--fs-16); }

/* ---------- Head matrix (Extract layer) ---------- */
.matrix-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap-7); align-items: start; }
@media (max-width: 980px) { .matrix-wrap { grid-template-columns: 1fr; } }

.matrix {
  display: grid;
  grid-template-columns: 28px repeat(12, 1fr);
  grid-template-rows: 28px repeat(12, 1fr);
  gap: 3px; aspect-ratio: 1.05/1; min-height: 360px;
  padding: var(--gap-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
}
.matrix .axis-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); display: grid; place-items: center;
}
.matrix .cell {
  background: var(--heat-0); border-radius: 3px; cursor: pointer;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
  position: relative;
}
.matrix .cell:hover { transform: scale(1.18); z-index: 5; box-shadow: var(--sh-glow); }
.matrix .cell.selected { box-shadow: 0 0 0 2px var(--ink); transform: scale(1.18); z-index: 6; }
.matrix .cell.ref { outline: 2px solid var(--cyan); outline-offset: -1px; }

.legend { display: flex; align-items: center; gap: var(--gap-3); margin-top: var(--gap-4); font-size: var(--fs-12); color: var(--muted); }
.legend-bar { width: 140px; height: 8px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--heat-0), var(--heat-2), var(--heat-4), var(--heat-5)); }

/* ---------- MU side panel ---------- */
.panel { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-4); padding: var(--gap-5); }
.panel.empty { display: grid; place-items: center; min-height: 320px; color: var(--muted); text-align: center; }
.panel .head-id {
  font-family: var(--font-mono); font-size: var(--fs-24); font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 4px;
}
.panel .head-fn { color: var(--muted); font-size: var(--fs-13); margin-bottom: var(--gap-4); }
.fields-grid { display: grid; grid-template-columns: 32px 1fr; gap: 10px var(--gap-3); }
.fields-grid .f-key {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-15);
  background: var(--indigo-l); color: var(--indigo-d);
  border-radius: var(--r-1); display: grid; place-items: center;
}
.fields-grid .f-val { font-size: var(--fs-13); color: var(--ink-soft); }
.fields-grid .f-val .mono { color: var(--ink); }
.fields-grid .f-val .small { display: block; color: var(--muted); margin-top: 2px; font-size: var(--fs-12); }

/* ---------- ESRDGT badges (used in matrix side panel + storage) ---------- */
.esrdgt { display: flex; gap: 6px; margin: var(--gap-3) 0; flex-wrap: wrap; }
.esrdgt span {
  font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 600;
  width: 30px; height: 30px; border-radius: var(--r-2);
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.esrdgt span.lit { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.esrdgt span.necessary { background: var(--indigo); color: var(--paper); border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-l); }
.esrdgt span.interfere { background: #fef2f2; color: var(--bad); border-color: #fecaca; }

/* ---------- Storage doc-card stack ---------- */
.docstack { position: relative; height: 280px; perspective: 1200px; }
.doccard {
  position: absolute; inset: 0; padding: var(--gap-4);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-3);
  box-shadow: var(--sh-1);
  font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-soft);
  transform-origin: bottom left;
}
.doccard .hd { display: flex; justify-content: space-between; margin-bottom: var(--gap-2); }
.doccard .hd .id { color: var(--ink); font-weight: 600; }
.doccard .hd .typ { color: var(--cyan); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Two-rail retrieve ---------- */
.rails { display: grid; gap: var(--gap-2); padding: var(--gap-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); }
.rail {
  display: grid; grid-template-columns: 110px 1fr 110px; gap: var(--gap-3); align-items: center;
  padding: var(--gap-3) var(--gap-4); background: var(--paper); border-radius: var(--r-3); border: 1px solid var(--border);
}
.rail .tag-rail {
  font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); text-align: center;
}
.rail.semantic .tag-rail { background: var(--cyan); }
.rail .flow {
  height: 4px; background: var(--surface-2); border-radius: var(--r-pill); position: relative; overflow: hidden;
}
.rail .flow::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--indigo), var(--cyan));
  animation: railflow 3s ease-in-out infinite;
}
.rail.semantic .flow::after { background: linear-gradient(90deg, var(--cyan), var(--indigo)); }
.rail .out { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: right; }
@keyframes railflow {
  0% { width: 0%; opacity: 1; }
  60% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}
.rail-merge {
  display: grid; grid-template-columns: 110px 1fr 110px; gap: var(--gap-3); align-items: center;
  padding: var(--gap-3) var(--gap-4);
  background: linear-gradient(90deg, var(--indigo) 0%, var(--cyan) 100%);
  border-radius: var(--r-3); color: var(--paper);
}
.rail-merge .tag-rail { background: rgba(255,255,255,.18); }
.rail-merge .out { color: rgba(255,255,255,.85); font-size: 11px; font-family: var(--font-mono); text-align: right; }

/* ---------- Evaluate dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap-5); }
@media (max-width: 980px) { .dash-grid { grid-template-columns: 1fr; } }
.card {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-4); padding: var(--gap-5);
}
.card h4 { margin-bottom: var(--gap-2); }
.card .card-sub { color: var(--muted); font-size: var(--fs-13); margin-bottom: var(--gap-4); }

.bar-row { display: grid; grid-template-columns: 36px 1fr 56px; gap: var(--gap-3); align-items: center; padding: 6px 0; font-family: var(--font-mono); font-size: var(--fs-12); }
.bar-row .lyr { color: var(--muted); }
.bar-row .bar { background: var(--surface-2); border-radius: var(--r-pill); height: 14px; position: relative; overflow: hidden; }
.bar-row .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--indigo), var(--cyan)); border-radius: var(--r-pill); transition: width var(--motion-slow); }
.bar-row.hot .bar .fill { background: linear-gradient(90deg, var(--violet), var(--bad)); }
.bar-row .pct { color: var(--ink); text-align: right; }
.bar-row.hot .pct { color: var(--bad); font-weight: 700; }
.bar-row.hot .lyr { color: var(--bad); font-weight: 700; }

.fields-mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: var(--gap-3) 0; }
.fields-mini .fm {
  text-align: center; padding: var(--gap-3) 0; border-radius: var(--r-2); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--fs-12); color: var(--muted); background: var(--surface);
}
.fields-mini .fm.necessary { background: var(--indigo); color: var(--paper); border-color: var(--indigo); }
.fields-mini .fm.redundant { background: var(--cyan-l); color: var(--cyan-d); border-color: var(--cyan); }
.fields-mini .fm.interfere { background: #fef2f2; color: var(--bad); border-color: #fecaca; }
.fields-mini .fm strong { display: block; font-size: var(--fs-15); color: inherit; }
.fields-mini .fm em { font-style: normal; font-size: 10px; }

.behaviour-row { display: grid; grid-template-columns: 1fr 80px 80px; gap: var(--gap-3); padding: var(--gap-3) 0; border-top: 1px solid var(--border); align-items: center; font-size: var(--fs-13); }
.behaviour-row:first-of-type { border-top: 0; }
.behaviour-row .ttl { color: var(--ink); }
.behaviour-row .ttl small { color: var(--muted); display: block; font-family: var(--font-mono); font-size: 11px; }
.behaviour-row .k { color: var(--muted); font-family: var(--font-mono); text-align: right; }
.behaviour-row .lift { font-family: var(--font-mono); font-weight: 700; color: var(--ink); text-align: right; }
.behaviour-row .lift::after { content: "x"; font-weight: 400; color: var(--muted); margin-left: 2px; }

.heat-6 { display: grid; grid-template-columns: 28px repeat(6, 1fr); grid-template-rows: 28px repeat(6, 1fr); gap: 2px; aspect-ratio: 1; max-width: 280px; margin: 0 auto; }
.heat-6 .lbl { font-family: var(--font-mono); font-size: 11px; color: var(--muted); display: grid; place-items: center; }
.heat-6 .cell6 { border-radius: 3px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; color: rgba(0,0,0,.45); }
.heat-6 .cell6.neg { color: rgba(255,255,255,.92); }

/* ---------- Limitations band ---------- */
.limits {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4);
  padding: var(--gap-5); margin-top: var(--gap-7);
}
.limits summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.limits summary::-webkit-details-marker { display: none; }
.limits summary h4 { color: var(--ink); }
.limits summary .sigil { color: var(--muted); transition: transform var(--motion-fast); width: 16px; height: 16px; }
.limits[open] summary .sigil { transform: rotate(180deg); }
.limits .body { margin-top: var(--gap-4); }
.limits ul { padding-left: var(--gap-4); }
.limits li { margin: var(--gap-2) 0; color: var(--ink-soft); font-size: var(--fs-14); }

/* ---------- Footer ---------- */
.foot {
  border-top: 1px solid var(--border); padding: var(--gap-6) 0;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: var(--fs-13); flex-wrap: wrap; gap: var(--gap-3);
}
.foot .mono { color: var(--ink); }

/* ---------- Slide-in MU panel (mobile-friendly) ---------- */
.sheet-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity var(--motion-base);
}
.sheet-overlay.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100%);
  background: var(--paper); box-shadow: -8px 0 32px rgba(15,23,42,.12);
  z-index: 101; padding: var(--gap-5); overflow-y: auto;
  transform: translateX(100%); transition: transform var(--motion-base);
}
.sheet.open { transform: translateX(0); }
.sheet .close-btn { position: absolute; top: var(--gap-3); right: var(--gap-3); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: background var(--motion-fast); }
.sheet .close-btn:hover { background: var(--surface); color: var(--ink); }

/* ---------- Tooltip ---------- */
.tooltip {
  position: fixed; z-index: 1000; pointer-events: none;
  background: var(--ink); color: var(--paper);
  padding: 8px 12px; border-radius: var(--r-2); font-size: var(--fs-12);
  box-shadow: var(--sh-3); max-width: 240px;
  opacity: 0; transform: translateY(4px); transition: opacity var(--motion-fast), transform var(--motion-fast);
}
.tooltip.show { opacity: 1; transform: translateY(0); }
.tooltip .id { font-family: var(--font-mono); font-weight: 700; }
.tooltip .lbl { color: var(--muted-soft); font-size: 11px; margin-top: 2px; }

/* ---------- Concept icons (for the four functional concepts) ---------- */
.concepts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-3); margin-top: var(--gap-5); }
@media (max-width: 720px) { .concepts { grid-template-columns: repeat(2, 1fr); } }
.concept {
  padding: var(--gap-4); border: 1px solid var(--border); border-radius: var(--r-3); background: var(--paper);
}
.concept .glyph { width: 44px; height: 44px; border-radius: var(--r-2); background: var(--indigo-l); display: grid; place-items: center; color: var(--indigo); margin-bottom: var(--gap-3); }
.concept h5 { font-size: var(--fs-14); font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.concept p { font-size: var(--fs-12); color: var(--muted); line-height: 1.5; }

/* ---- 6×6 panel toggle (A: cosine, B: Spearman ρ, C: Jaccard) ---- */
.heat6-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  flex-shrink: 1; flex-wrap: wrap;
  max-width: 100%;
}
.h6t-pill {
  padding: 5px 10px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--muted);
  transition: background var(--motion-fast), color var(--motion-fast);
  white-space: nowrap;
}
.h6t-pill:hover { color: var(--ink); }
.h6t-pill.active { background: var(--ink); color: var(--paper); }