/* ===== ontology.css — entity-browser visual for the memory section ===== */

/* Industry tabs above the browser */
.ont-tabs {
  display: flex;
  gap: 32px;
  margin-top: 52px;
  max-width: 1040px;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.ont-tabs::-webkit-scrollbar {
  display: none;
}
.ont-tab {
  appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 4px 2px 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: 0.01em;
  color: var(--ink-mute);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.ont-tab:hover,
.ont-tab.active {
  color: var(--ink);
}
.ont-tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.ont-tab.active .ont-tab-bar {
  transform: scaleX(1);
}

/* Negative margins + matching padding keep the card aligned with the
   container while giving the scroll clip room for the drop shadow and the
   row-entrance offset (otherwise a scrollbar flashes during the swap). */
.ont-browser-wrap {
  margin: 32px -32px -90px;
  padding: 0 32px 90px;
  overflow-x: auto;
}
.ont-browser {
  display: grid;
  grid-template-columns: 256px 1fr;
  min-width: 720px;
  max-width: 1040px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow:
    0 2px 4px rgba(20, 22, 28, 0.05),
    0 30px 70px rgba(20, 22, 28, 0.18);
}

/* Left rail: entity types with counts */
.ont-rail {
  border-right: 1px solid var(--rule-soft);
  background: var(--bg);
  padding: 0 0 16px;
  border-radius: 4px 0 0 4px;
}
.ont-rail-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 22px;
  font-size: 15px;
  color: var(--ink-soft);
}
.ont-rail-item > span:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ont-rail-item .ont-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ont-dot-program { background: #1f4e8a; }
.ont-dot-antenna { background: #7a4ea0; }
.ont-dot-part { background: #3f7ea6; }
.ont-dot-drawing { background: #3a3b3f; }
.ont-dot-test { background: #1f8a4f; }
.ont-dot-process { background: #b0563a; }
.ont-dot-supplier { background: #b98a1c; }
.ont-rail-item .ont-count {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ink-mute);
  background: var(--bg-alt);
  border-radius: 999px;
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}
.ont-rail-item.active {
  background: var(--paper);
  border-left: 3px solid var(--accent);
  padding-left: 19px;
  font-weight: 600;
  color: var(--ink);
}
.ont-rail-item.active .ont-count {
  background: var(--accent);
  color: #ffffff;
}

/* Main pane: search row + entity table */
.ont-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 26px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14.5px;
  color: var(--ink-mute);
}
.ont-search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ink-mute);
}

/* Faint vertical rules between the three columns */
.ont-table {
  position: relative;
}
.ont-table::before,
.ont-table::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule-soft);
  pointer-events: none;
}
.ont-table::before {
  right: 256px; /* boundary between name and first metric column */
}
.ont-table::after {
  right: 130px; /* boundary between the two metric columns */
}

.ont-row {
  display: grid;
  grid-template-columns: 1fr 126px 104px;
  align-items: center;
  padding: 15px 26px;
  border-bottom: 1px solid var(--rule-soft);
}
.ont-row > :nth-child(1) {
  padding-right: 18px;
}
.ont-row > :nth-child(2),
.ont-row > :nth-child(3) {
  padding-left: 16px;
}
.ont-row:last-of-type {
  border-bottom: none;
}
.ont-row:not(.ont-head):hover {
  background: #fbfbfa;
}
.ont-row.ont-head {
  padding-top: 12px;
  padding-bottom: 10px;
  background: var(--bg);
}
.ont-col {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.ont-name {
  font-size: 15.5px;
  font-weight: 550;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ont-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--ink-mute);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ont-prog {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--accent);
  white-space: nowrap;
}
.ont-row.dim {
  opacity: 0.45;
}

/* Caption under the browser: one-line use case per industry */
.ont-caption {
  margin: 24px 0 0;
  max-width: 1040px;
  font-size: 16.5px;
  color: var(--ink-mute);
}
.ont-caption-text {
  display: inline-block;
  transition: opacity 0.22s ease;
}
.ont-caption-text.ont-fading {
  opacity: 0;
}
.ont-caption a {
  color: var(--accent);
  font-weight: 550;
  text-decoration: underline;
  text-decoration-color: rgba(31, 78, 138, 0.3);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}
.ont-caption a:hover {
  text-decoration-color: var(--accent);
}

/* Industry swap: fade out, then stagger the new rows in */
.ont-browser .ont-rail,
.ont-browser .ont-main {
  transition: opacity 0.22s ease;
}
.ont-browser.ont-fading .ont-rail,
.ont-browser.ont-fading .ont-main {
  opacity: 0;
}
/* No `to` block: each row animates back to its own underlying opacity, so
   the dimmed last row fades in at 0.45 instead of hitting 1 and popping. */
@keyframes ont-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.ont-browser.ont-entering .ont-row:not(.ont-head),
.ont-browser.ont-entering .ont-rail-item {
  animation: ont-in 0.35s ease backwards;
}
.ont-browser.ont-entering .ont-row:nth-child(3),
.ont-browser.ont-entering .ont-rail-item:nth-child(2) { animation-delay: 0.04s; }
.ont-browser.ont-entering .ont-row:nth-child(4),
.ont-browser.ont-entering .ont-rail-item:nth-child(3) { animation-delay: 0.08s; }
.ont-browser.ont-entering .ont-row:nth-child(5),
.ont-browser.ont-entering .ont-rail-item:nth-child(4) { animation-delay: 0.12s; }
.ont-browser.ont-entering .ont-row:nth-child(6),
.ont-browser.ont-entering .ont-rail-item:nth-child(5) { animation-delay: 0.16s; }
.ont-browser.ont-entering .ont-rail-item:nth-child(6) { animation-delay: 0.2s; }
.ont-browser.ont-entering .ont-rail-item:nth-child(7) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .ont-browser.ont-entering .ont-row,
  .ont-browser.ont-entering .ont-rail-item {
    animation: none;
  }
  .ont-tab-bar {
    transition: none !important;
  }
}

@media (max-width: 800px) {
  .ont-tabs {
    margin-top: 40px;
    gap: 24px;
  }
  .ont-tab {
    font-size: 14px;
    padding-bottom: 12px;
  }
  /* The horizontal scrollbar draws at the bottom of the scroll clip, so the
     desktop 90px of shadow room would park it on top of the caption text.
     Trade the big shadow for a tighter one and keep the clip snug. */
  .ont-browser-wrap {
    margin: 26px -32px -20px;
    padding: 0 32px 20px;
  }
  .ont-browser {
    grid-template-columns: 210px 1fr;
    box-shadow:
      0 2px 4px rgba(20, 22, 28, 0.05),
      0 10px 24px rgba(20, 22, 28, 0.14);
  }
  .ont-rail-item {
    padding: 10px 18px;
    font-size: 14px;
  }
  .ont-rail-item.active {
    padding-left: 15px;
  }
  .ont-caption {
    font-size: 15.5px;
  }
}