/* === engram-specific additions on top of anthropic.css === */

/* ---- Language chooser (index.html) ---- */
.engram-chooser-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--anth-bg);
}

.engram-chooser-center {
  text-align: center;
  padding: var(--space-9) var(--space-6);
}

.engram-wordmark {
  display: inline-block;
  margin-bottom: var(--space-5);
}

.engram-chooser-tag {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--anth-text-secondary);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-7);
}

.engram-chooser-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-5);
}

.engram-chooser-btn {
  min-width: 140px;
  font-size: 16px;
  padding: 14px 32px;
}

.engram-chooser-hint {
  max-width: 480px;
  margin: 0 auto;
}

/* ---- Nav wordmark ---- */
.engram-nav-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--anth-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.engram-nav-links {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

.engram-nav-links a {
  margin-right: 0;
}

.engram-lang-toggle {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--anth-text-secondary);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--anth-light-gray);
  border-radius: var(--radius-pill);
  transition: background var(--duration-sm);
}

.engram-lang-toggle:hover {
  background: var(--anth-bg-subtle);
}

/* ---- 5-layer architecture stack ---- */
.engram-layer-stack {
  width: 100%;
  margin: var(--space-6) 0;
  overflow-x: auto;
}

/* ---- 2-axis scope viz ---- */
.engram-scope-axes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
  margin: var(--space-6) 0;
}

@media (max-width: 768px) {
  .engram-scope-axes {
    grid-template-columns: 1fr;
  }
}

/* ---- Differentiator matrix table ---- */
.engram-matrix-table {
  overflow-x: auto;
  margin: var(--space-6) 0;
}

.engram-matrix-table .anth-table th:nth-child(2) {
  background: rgba(217, 119, 87, 0.08);
  color: var(--anth-orange);
}

.engram-matrix-table .anth-table td:nth-child(2) {
  background: rgba(217, 119, 87, 0.04);
  font-weight: 600;
  color: var(--anth-text);
}

/* ---- Wisdom sparkline mini charts ---- */
.engram-sparkline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

@media (max-width: 768px) {
  .engram-sparkline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.engram-sparkline-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  text-align: center;
}

.engram-sparkline-label {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--anth-text-secondary);
  margin-top: var(--space-2);
}

/* ---- Conflict class tiles ---- */
.engram-conflict-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

@media (max-width: 768px) {
  .engram-conflict-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.engram-conflict-tile {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  text-align: center;
}

.engram-conflict-tile-name {
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--anth-text-secondary);
  margin-top: var(--space-2);
  word-break: break-all;
}

/* ---- Hero CTA group ---- */
.engram-hero-ctas {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* ---- Roadmap timeline ---- */
.engram-roadmap {
  display: flex;
  gap: 0;
  overflow-x: auto;
  margin: var(--space-6) 0;
  padding-bottom: var(--space-3);
}

.engram-roadmap-step {
  flex: 0 0 auto;
  min-width: 130px;
  text-align: center;
  position: relative;
}

.engram-roadmap-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  right: -1px;
  width: 100%;
  height: 2px;
  background: var(--anth-light-gray);
  z-index: 0;
}

.engram-roadmap-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--anth-light-gray);
  margin: 0 auto var(--space-3);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.engram-roadmap-dot--current {
  background: var(--anth-orange);
  color: #ffffff;
}

.engram-roadmap-dot--done {
  background: var(--anth-green);
  color: #ffffff;
}

.engram-roadmap-title {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  color: var(--anth-text);
  padding: 0 var(--space-2);
}

/* ---- Philosophy cards ---- */
.engram-philosophy-num {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: var(--anth-orange);
  opacity: 0.25;
  line-height: 1;
  margin-bottom: var(--space-2);
}

/* ---- Responsive nav ---- */
@media (max-width: 768px) {
  .engram-conflict-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .engram-sparkline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .engram-chooser-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* =============================================================
   Web UI mockup additions — docs/design/*.html
   ============================================================= */

/* ---- App shell layout ---- */
.engram-app-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  background: var(--anth-bg);
}

.engram-sidebar {
  grid-row: 2;
  grid-column: 1;
  background: #ffffff;
  border-right: 1px solid var(--anth-light-gray);
  padding: var(--space-5) 0;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.engram-sidebar-section {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-5);
}

.engram-sidebar-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--anth-text-secondary);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-2);
}

.engram-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--anth-text-secondary);
  text-decoration: none;
  transition: background var(--duration-sm), color var(--duration-sm);
  margin-bottom: 2px;
}

.engram-sidebar-link:hover {
  background: var(--anth-bg-subtle);
  color: var(--anth-text);
}

.engram-sidebar-link.is-active {
  background: rgba(217, 119, 87, 0.1);
  color: var(--anth-orange);
  font-weight: 500;
}

.engram-sidebar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--anth-orange);
  flex-shrink: 0;
}

.engram-main {
  grid-row: 2;
  grid-column: 2;
  padding: var(--space-6);
  overflow-y: auto;
}

.engram-topbar {
  grid-row: 1;
  grid-column: 1 / -1;
}

/* ---- Stat tiles ---- */
.engram-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.engram-stat-tile {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.engram-stat-num {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: var(--anth-text);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.engram-stat-label {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--anth-text-secondary);
}

.engram-stat-sub {
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--anth-orange);
  margin-top: var(--space-1);
}

/* ---- Section headings ---- */
.engram-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.engram-section-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--anth-text);
}

/* ---- Activity feed ---- */
.engram-feed {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.engram-feed-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--anth-light-gray);
  font-family: var(--font-heading);
  font-size: 13px;
}

.engram-feed-item:last-child {
  border-bottom: none;
}

.engram-feed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.engram-feed-time {
  font-size: 11px;
  color: var(--anth-text-secondary);
  margin-left: auto;
  flex-shrink: 0;
}

/* ---- Graph node legend ---- */
.engram-graph-legend {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.engram-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--anth-text-secondary);
}

.engram-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---- Detail panel ---- */
.engram-detail-panel {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.engram-detail-field {
  margin-bottom: var(--space-4);
}

.engram-detail-field-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--anth-text-secondary);
  margin-bottom: var(--space-1);
}

.engram-detail-field-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--anth-text);
}

/* ---- Split layout ---- */
.engram-split {
  display: grid;
  gap: var(--space-5);
}

.engram-split--2-1 {
  grid-template-columns: 2fr 1fr;
}

.engram-split--1-2 {
  grid-template-columns: 1fr 2fr;
}

.engram-split--3 {
  grid-template-columns: 240px 1fr 240px;
}

/* ---- Code editor pane ---- */
.engram-editor {
  background: var(--anth-bg-subtle);
  border: 1px solid var(--anth-light-gray);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  padding: var(--space-4);
  overflow-x: auto;
  white-space: pre;
  color: var(--anth-text);
  min-height: 200px;
}

/* ---- Candidate table in context-preview ---- */
.engram-candidate-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-heading);
  font-size: 12px;
}

.engram-candidate-table th {
  background: var(--anth-bg-subtle);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: 600;
  color: var(--anth-text-secondary);
  border-bottom: 1px solid var(--anth-light-gray);
}

.engram-candidate-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--anth-light-gray);
  color: var(--anth-text);
}

.engram-candidate-table tr:hover td {
  background: var(--anth-bg-subtle);
}

.engram-candidate-table tr.is-excluded td {
  opacity: 0.45;
}

.engram-candidate-table tr.is-boundary td {
  border-top: 2px solid var(--anth-orange);
}

/* ---- Message list (inbox) ---- */
.engram-msg-list {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.engram-msg-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--anth-light-gray);
  cursor: pointer;
  transition: background var(--duration-sm);
}

.engram-msg-item:last-child {
  border-bottom: none;
}

.engram-msg-item:hover,
.engram-msg-item.is-selected {
  background: var(--anth-bg-subtle);
}

.engram-msg-from {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--anth-text);
}

.engram-msg-preview {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--anth-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.engram-msg-time {
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--anth-text-secondary);
}

/* ---- Revision timeline ---- */
.engram-rev-timeline {
  display: flex;
  gap: 0;
  align-items: center;
  overflow-x: auto;
  padding: var(--space-4) 0;
  margin-bottom: var(--space-5);
}

.engram-rev-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.engram-rev-node:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  width: calc(100% - 4px);
  height: 2px;
  background: var(--anth-light-gray);
}

.engram-rev-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}

.engram-rev-badge--accept {
  background: var(--anth-green);
  color: #ffffff;
}

.engram-rev-badge--reject {
  background: var(--anth-mid-gray);
  color: #ffffff;
}

.engram-rev-badge--current {
  background: var(--anth-orange);
  color: #ffffff;
}

.engram-rev-label {
  font-family: var(--font-heading);
  font-size: 10px;
  color: var(--anth-text-secondary);
}

/* ---- Chart containers (SVG-backed) ---- */
.engram-chart-wrap {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.engram-chart-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--anth-text);
  margin-bottom: var(--space-4);
}

/* ---- Pool table ---- */
.engram-pool-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-heading);
  font-size: 13px;
}

.engram-pool-table th {
  background: var(--anth-bg-subtle);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  color: var(--anth-text-secondary);
  border-bottom: 1px solid var(--anth-light-gray);
}

.engram-pool-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--anth-light-gray);
  color: var(--anth-text);
  vertical-align: middle;
}

.engram-pool-table tr:hover td {
  background: var(--anth-bg-subtle);
}

/* ---- Status badges ---- */
.engram-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
}

.engram-status--ok {
  background: #dde8cc;
  color: #3a5020;
}

.engram-status--warn {
  background: #fde8e0;
  color: #7a3010;
}

.engram-status--err {
  background: #f5ddd9;
  color: #5e1a12;
}

.engram-status--running {
  background: #d4e5f4;
  color: #1a4a7a;
}

/* ---- Project cards ---- */
.engram-project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.engram-project-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  cursor: pointer;
  transition: box-shadow var(--duration-sm), border-color var(--duration-sm);
  border: 2px solid transparent;
}

.engram-project-card:hover {
  box-shadow: var(--shadow-pop);
}

.engram-project-card.is-selected {
  border-color: var(--anth-orange);
}

.engram-project-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--anth-text);
  margin-bottom: var(--space-2);
}

.engram-project-meta {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--anth-text-secondary);
  margin-bottom: var(--space-3);
}

/* ---- Health badge ---- */
.engram-health {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.engram-health--green { background: var(--anth-green); }
.engram-health--yellow { background: #c9a227; }
.engram-health--red { background: var(--anth-danger); }

/* ---- Breadcrumb in sub-pages ---- */
.engram-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--anth-text-secondary);
  margin-bottom: var(--space-5);
}

.engram-breadcrumb a {
  color: var(--anth-text-secondary);
  text-decoration: none;
}

.engram-breadcrumb a:hover {
  color: var(--anth-orange);
}

.engram-breadcrumb-sep {
  color: var(--anth-mid-gray);
  font-size: 11px;
}

/* ---- Action bar ---- */
.engram-action-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

/* ---- Quick action row ---- */
.engram-quick-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ---- Packed prompt display ---- */
.engram-packed-prompt {
  background: var(--anth-bg-subtle);
  border: 1px solid var(--anth-light-gray);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.8;
  padding: var(--space-4);
  overflow-y: auto;
  max-height: 360px;
  white-space: pre-wrap;
  color: var(--anth-text);
}

/* ---- Input panel (context-preview left) ---- */
.engram-input-panel {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

/* ---- Range slider ---- */
.engram-slider-wrap {
  margin: var(--space-3) 0;
}

.engram-slider-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--anth-text-secondary);
  margin-bottom: var(--space-2);
}

/* ---- Scope checkboxes (context-preview) ---- */
.engram-scope-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* ---- Diff viewer ---- */
.engram-diff {
  background: var(--anth-bg-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  padding: var(--space-4);
  overflow-x: auto;
}

.engram-diff-add {
  background: rgba(120, 140, 93, 0.18);
  display: block;
  padding: 0 var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
}

.engram-diff-del {
  background: rgba(161, 66, 56, 0.18);
  display: block;
  padding: 0 var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
}

.engram-diff-ctx {
  color: var(--anth-text-secondary);
}

/* ---- Wisdom chart header row ---- */
.engram-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

/* ---- Alert banner (wisdom regression) ---- */
.engram-alert-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(217, 119, 87, 0.1);
  border: 1px solid rgba(217, 119, 87, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--anth-text);
}

/* ---- Nav bar for mockup pages ---- */
.engram-nav-mock {
  background: #ffffff;
  border-bottom: 1px solid var(--anth-light-gray);
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-5);
}

.engram-nav-brand-mock {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--anth-text);
  text-decoration: none;
  letter-spacing: -0.02em;
  margin-right: var(--space-3);
}

.engram-nav-links-mock {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex: 1;
}

.engram-nav-links-mock a {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--anth-text-secondary);
  text-decoration: none;
  transition: color var(--duration-sm);
}

.engram-nav-links-mock a:hover,
.engram-nav-links-mock a.is-active {
  color: var(--anth-text);
}

.engram-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ---- Footer for mockup pages ---- */
.engram-footer-mock {
  border-top: 1px solid var(--anth-light-gray);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--anth-text-secondary);
  background: var(--anth-bg-subtle);
}

/* ---- Index page design hub ---- */
.engram-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.engram-hub-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--anth-text);
  transition: box-shadow var(--duration-sm), transform var(--duration-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.engram-hub-card:hover {
  box-shadow: var(--shadow-pop);
  transform: translateY(-2px);
}

.engram-hub-card-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--anth-text);
}

.engram-hub-card-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--anth-text-secondary);
  line-height: 1.55;
}

/* ---- Wisdom time range selector ---- */
.engram-time-range {
  display: flex;
  gap: var(--space-2);
}

.engram-time-btn {
  font-family: var(--font-heading);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--anth-light-gray);
  background: transparent;
  color: var(--anth-text-secondary);
  cursor: pointer;
  transition: background var(--duration-sm), color var(--duration-sm);
}

.engram-time-btn.is-active {
  background: var(--anth-orange);
  color: #ffffff;
  border-color: var(--anth-orange);
  font-weight: 600;
}

/* ---- Confidence gauge ---- */
.engram-gauge-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.engram-gauge-bar {
  flex: 1;
  height: 8px;
  background: var(--anth-light-gray);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.engram-gauge-fill {
  height: 100%;
  background: var(--anth-green);
  border-radius: var(--radius-pill);
}

.engram-gauge-num {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--anth-text);
  min-width: 36px;
  text-align: right;
}

/* ---- TOC nav (kb-article) ---- */
.engram-toc {
  position: sticky;
  top: 72px;
}

.engram-toc a {
  display: block;
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--anth-text-secondary);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-left: 2px solid var(--anth-light-gray);
  padding-left: var(--space-3);
  transition: color var(--duration-sm), border-color var(--duration-sm);
}

.engram-toc a:hover,
.engram-toc a.is-active {
  color: var(--anth-orange);
  border-left-color: var(--anth-orange);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .engram-app-shell {
    grid-template-columns: 1fr;
  }
  .engram-sidebar {
    display: none;
  }
  .engram-main {
    grid-column: 1;
  }
  .engram-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .engram-split--2-1,
  .engram-split--1-2,
  .engram-split--3 {
    grid-template-columns: 1fr;
  }
  .engram-hub-grid,
  .engram-project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .engram-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .engram-hub-grid,
  .engram-project-grid {
    grid-template-columns: 1fr;
  }
}