/* optrenium.ai brand stylesheet — sage / cool-cream palette, orbital
   ambient animations, particle field, glass cards, sage-rule
   separators. Lifted verbatim from the live landing page so any
   visual change here also tracks the canonical source. */

html, body { background: #0a0c0a; }

/* force lowercase on all visible text — load-bearing brand element */
body { text-transform: lowercase; }

/* ---------- orbital rings ---------- */
@keyframes orbit {
  0% { transform: rotate(0deg) scaleY(0.3); }
  100% { transform: rotate(360deg) scaleY(0.3); }
}
@keyframes orbit2 {
  0% { transform: rotate(0deg) scaleY(0.25) scaleX(1.1); }
  100% { transform: rotate(-360deg) scaleY(0.25) scaleX(1.1); }
}
@keyframes orbit3 {
  0% { transform: rotate(30deg) scaleY(0.35); }
  100% { transform: rotate(390deg) scaleY(0.35); }
}

/* ---------- floating central orb ---------- */
@keyframes orbFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  33% { transform: translate(-48%, -52%) scale(1.05); }
  66% { transform: translate(-52%, -48%) scale(0.97); }
}
@keyframes orbGlow {
  0%, 100% { opacity: 0.15; box-shadow: 0 0 80px 40px rgba(184,196,162,0.08), 0 0 200px 80px rgba(122,148,96,0.04); }
  50% { opacity: 0.25; box-shadow: 0 0 120px 60px rgba(184,196,162,0.12), 0 0 300px 120px rgba(122,148,96,0.06); }
}

/* ---------- ambient glow pulses ---------- */
@keyframes glowPulse {
  0%, 100% { opacity: 0.08; filter: blur(80px); }
  50% { opacity: 0.18; filter: blur(120px); }
}
@keyframes glowPulse2 {
  0%, 100% { opacity: 0.05; filter: blur(100px); }
  50% { opacity: 0.12; filter: blur(140px); }
}

/* ---------- text shimmer on hero headline ---------- */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.text-shimmer {
  background: linear-gradient(
    90deg,
    #b8c4a2 0%, #d4ddc5 15%, #f0f4e8 30%, #d4ddc5 45%, #7a9460 60%, #b8c4a2 75%, #d4ddc5 90%, #b8c4a2 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 8s linear infinite;
  /* descender breathing room: with leading-[0.9] the line box is
     tighter than the glyph height, and descenders (g, p, q, j, y) can
     get clipped by the next line's box (or by overflow:hidden on a
     parent). padding-bottom in em units grows with the font size so
     the fix scales from the 5xl hero down to the smaller headings. */
  padding-bottom: 0.15em;
}

.text-gradient {
  background: linear-gradient(135deg, #b8c4a2 0%, #d4ddc5 40%, #7a9460 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-bottom: 0.15em;
}

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- grid background ---------- */
.grid-bg {
  background-image:
    linear-gradient(rgba(184,196,162,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,196,162,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ---------- animated dot grid ---------- */
@keyframes dotPulse {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.08; }
}
.dot-grid {
  background-image: radial-gradient(rgba(184,196,162,0.15) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: dotPulse 4s ease-in-out infinite;
}

.sage-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(184,196,162,0.25) 50%, transparent 100%);
}

/* ---------- card with glow on hover ---------- */
.card {
  background: linear-gradient(145deg, rgba(26,29,26,0.9) 0%, rgba(16,18,16,0.95) 100%);
  border: 1px solid rgba(184,196,162,0.06);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,196,162,0.0), transparent);
  transition: background 0.5s ease;
}
.card:hover {
  border-color: rgba(184,196,162,0.15);
  box-shadow: 0 0 60px rgba(184,196,162,0.06), 0 20px 60px rgba(0,0,0,0.3);
  transform: translateY(-4px);
}
.card:hover::before {
  background: linear-gradient(90deg, transparent, rgba(184,196,162,0.3), transparent);
}

.nav-blur {
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0a0c0a; }
::-webkit-scrollbar-thumb { background: rgba(184,196,162,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(184,196,162,0.3); }

/* ---------- particles ---------- */
@keyframes drift {
  0% { transform: translate(0,0) scale(1); opacity: 0; }
  10% { opacity: var(--peak-opacity); }
  90% { opacity: var(--peak-opacity); }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.5); opacity: 0; }
}
.particle {
  position: absolute;
  background: rgba(184,196,162,0.5);
  border-radius: 50%;
  animation: drift var(--duration) linear infinite;
  animation-delay: var(--delay);
}

/* ---------- scroll indicator bounce ---------- */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ---------- gradient border on tag ---------- */
@keyframes borderRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-border {
  background: linear-gradient(90deg, rgba(184,196,162,0.0), rgba(184,196,162,0.2), rgba(184,196,162,0.0), rgba(184,196,162,0.2));
  background-size: 300% 100%;
  animation: borderRotate 4s ease infinite;
  padding: 1px;
  border-radius: 9999px;
}
.animated-border-inner {
  background: rgba(10,12,10,0.9);
  border-radius: 9999px;
}

/* ---------- smooth parallax ---------- */
.hero-content {
  transition: transform 0.1s linear;
}

/* ---------- probity-specific additions (still on-brand) ---------- */

/* health badge — colored chip used on report cards */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.6rem; border-radius: 999px;
  font-family: "JetBrains Mono", monospace; font-size: 0.65rem;
  font-weight: 400; letter-spacing: 0.1em;
  border: 1px solid currentColor; background: rgba(0,0,0,0.2);
}
.badge.clean    { color: #7a9460; }
.badge.advisory { color: #c2a73a; }
.badge.caution  { color: #c97a3a; }
.badge.blocked  { color: #c44b4b; }
.badge.unscored { color: #6f7e6a; }
/* Legacy aliases — pre-readiness HealthBadge values; keep so we still
   render older audits cleanly when ReadinessTier isn't populated. */
.badge.high     { color: #c97a3a; }
.badge.critical { color: #c44b4b; }
.badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* fingerprint chip — monospaced + copy-on-click */
.fp-chip {
  font-family: "JetBrains Mono", monospace; font-size: 0.7rem;
  color: rgba(184,196,162,0.7);
  padding: 0.25rem 0.5rem; border-radius: 4px;
  background: rgba(184,196,162,0.05);
  border: 1px solid rgba(184,196,162,0.08);
  cursor: pointer; transition: all 0.3s;
  word-break: break-all;
}
.fp-chip:hover { color: rgba(184,196,162,1); border-color: rgba(184,196,162,0.25); }

/* severity colors for anomalies */
.sev.critical { color: #d97070; }
.sev.high     { color: #d49460; }
.sev.medium   { color: #c2a73a; }
.sev.low      { color: #7a8a6a; }

/* verdict colors for claims */
.vd.supported     { color: #7a9460; }
.vd.refuted       { color: #d97070; }
.vd.inconclusive  { color: #c2a73a; }
.vd.shifted       { color: #6090b0; }
.vd.stable        { color: #8a8a8a; }

/* probity tab navigation */
.tab-nav { display: flex; gap: 0.25rem; padding: 0.5rem 0; flex-wrap: wrap;
  border-bottom: 1px solid rgba(184,196,162,0.08); margin-bottom: 1.5rem;
  position: sticky; top: 4rem; z-index: 20;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: rgba(10,12,10,0.7);
}
.tab-nav a {
  padding: 0.4rem 0.85rem; border-radius: 6px; font-size: 0.78rem;
  color: rgba(184,196,162,0.5); font-weight: 300; letter-spacing: 0.04em;
  transition: all 0.25s; white-space: nowrap;
}
.tab-nav a:hover { background: rgba(184,196,162,0.05); color: rgba(184,196,162,0.9); }
.tab-nav a.active {
  background: rgba(184,196,162,0.1); color: #d4ddc5;
  box-shadow: inset 0 -2px 0 rgba(184,196,162,0.5);
}

/* heatmap cell tooltip */
.heat-tip {
  position: fixed; pointer-events: none;
  background: rgba(10,12,10,0.95); border: 1px solid rgba(184,196,162,0.3);
  padding: 0.5rem 0.75rem; border-radius: 4px;
  font-family: "JetBrains Mono", monospace; font-size: 0.7rem;
  color: #d4ddc5; opacity: 0; transition: opacity 0.1s;
  z-index: 100; max-width: 240px;
}
.heat-tip.show { opacity: 1; }

/* stat KPI grid */
.kpi { background: linear-gradient(145deg, rgba(26,29,26,0.7), rgba(16,18,16,0.9));
  border: 1px solid rgba(184,196,162,0.08); border-radius: 12px;
  padding: 1.25rem; transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
.kpi:hover { border-color: rgba(184,196,162,0.2); transform: translateY(-2px); }
.kpi-lbl { font-size: 0.65rem; font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.18em; color: rgba(184,196,162,0.5); margin-bottom: 0.5rem; }
.kpi-val { font-size: 1.75rem; font-weight: 200; color: #d4ddc5;
  font-family: "JetBrains Mono", monospace; line-height: 1; }
.kpi-sub { font-size: 0.75rem; color: rgba(184,196,162,0.5);
  font-weight: 300; margin-top: 0.5rem; }

/* report card — used on /probity list */
.report-card {
  background: linear-gradient(145deg, rgba(26,29,26,0.85), rgba(14,17,14,0.95));
  border: 1px solid rgba(184,196,162,0.06);
  border-radius: 16px; padding: 1.5rem 1.75rem;
  transition: all 0.6s cubic-bezier(0.16,1,0.3,1);
  position: relative; overflow: hidden; display: block;
}
.report-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,196,162,0), transparent);
  transition: background 0.6s;
}
.report-card:hover {
  border-color: rgba(184,196,162,0.18);
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5),
              0 0 80px -20px rgba(184,196,162,0.1);
}
.report-card:hover::before {
  background: linear-gradient(90deg, transparent, rgba(184,196,162,0.4), transparent);
}

/* ============== catalog toolbar (filter / sort / compare) ============== */

.catalog-toolbar {
  background: rgba(15, 18, 14, 0.6);
  border: 1px solid rgba(184, 196, 162, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
}
.catalog-toolbar-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
.catalog-search {
  flex: 1 1 280px;
  min-width: 0;
  padding: 8px 14px;
  background: rgba(10, 12, 10, 0.85);
  border: 1px solid rgba(184, 196, 162, 0.1);
  border-radius: 8px;
  color: #d4ddc5;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  transition: border-color 0.18s;
}
.catalog-search::placeholder { color: rgba(184, 196, 162, 0.3); }
.catalog-search:focus {
  outline: none;
  border-color: rgba(184, 196, 162, 0.4);
}
.catalog-select {
  padding: 8px 12px;
  background: rgba(10, 12, 10, 0.85);
  border: 1px solid rgba(184, 196, 162, 0.1);
  border-radius: 8px;
  color: #d4ddc5;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.18s;
}
.catalog-select:hover { border-color: rgba(184, 196, 162, 0.3); }
.catalog-toggle {
  padding: 8px 14px;
  background: rgba(10, 12, 10, 0.85);
  border: 1px solid rgba(184, 196, 162, 0.1);
  border-radius: 8px;
  color: rgba(184, 196, 162, 0.6);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.18s;
}
.catalog-toggle[data-on="true"] {
  border-color: rgba(122, 148, 96, 0.5);
  color: #b8c4a2;
  background: rgba(122, 148, 96, 0.08);
}

.catalog-facet {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px 8px 4px 0;
}
.catalog-facet-lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(184, 196, 162, 0.5);
  padding: 0 8px 0 4px;
}
.catalog-facet button {
  padding: 4px 10px;
  background: rgba(10, 12, 10, 0.5);
  border: 1px solid rgba(184, 196, 162, 0.08);
  border-radius: 6px;
  color: rgba(184, 196, 162, 0.55);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s;
}
.catalog-facet button:hover { border-color: rgba(184, 196, 162, 0.25); color: #b8c4a2; }
.catalog-facet button.active {
  background: rgba(122, 148, 96, 0.12);
  border-color: rgba(122, 148, 96, 0.5);
  color: #b8c4a2;
}

.catalog-cmp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: rgba(184, 196, 162, 0.6);
  cursor: pointer;
}
.catalog-cmp input { accent-color: #7a9460; }
.catalog-cmp-btn {
  padding: 6px 12px;
  background: rgba(122, 148, 96, 0.08);
  border: 1px solid rgba(122, 148, 96, 0.3);
  border-radius: 6px;
  color: #b8c4a2;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.18s;
}
.catalog-cmp-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.catalog-cmp-btn:not(:disabled):hover {
  background: rgba(122, 148, 96, 0.18);
  border-color: rgba(122, 148, 96, 0.55);
}
.catalog-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: rgba(184, 196, 162, 0.45);
}

.catalog-group-head {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(184, 196, 162, 0.5);
  padding: 16px 4px 8px;
  border-bottom: 1px solid rgba(184, 196, 162, 0.08);
  margin-top: 14px;
}
.catalog-group-head:first-child { margin-top: 0; }

/* Compare mode — cards behave as toggleable selections rather than
   navigation. Selected cards get an accent border. */
/* Clickable deduction rows on the overview card. Hover surfaces a
   subtle sage tint + an arrow chip so users see they're actionable. */
.deduction-row {
  border-radius: 6px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
  transition: background-color 0.12s;
}
.deduction-row:hover {
  background: rgba(122, 148, 96, 0.08);
}
.deduction-row:hover .text-\[10px\] {
  color: #b8c4a2 !important;
}

#catalog-list.compare-mode .catalog-card { cursor: pointer; }
.catalog-card.compare-sel {
  outline: 2px solid rgba(122, 148, 96, 0.7);
  outline-offset: 4px;
  border-radius: 14px;
}

/* ============== compare view ============== */

.cmp-section { margin-bottom: 36px; }
.cmp-section-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(184, 196, 162, 0.7);
  margin-bottom: 12px;
  padding: 10px 16px;
  background: rgba(184, 196, 162, 0.04);
  border-left: 2px solid rgba(122, 148, 96, 0.6);
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.cmp-table thead th {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 196, 162, 0.5);
  text-align: left;
  padding: 8px 14px;
  background: rgba(184, 196, 162, 0.02);
  border-bottom: 1px solid rgba(184, 196, 162, 0.08);
}
.cmp-table .cmp-th-lbl { width: 28%; }
.cmp-row td {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(184, 196, 162, 0.04);
}
.cmp-row.same .cmp-val { color: rgba(184, 196, 162, 0.45); }
.cmp-row.delta-small .cmp-val { color: #b8c4a2; }
.cmp-row.delta-large .cmp-val { color: #c2a73a; }
.cmp-row.delta-large { background: rgba(194, 167, 58, 0.04); }
.cmp-lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(184, 196, 162, 0.55);
  white-space: nowrap;
}
.cmp-val.mono {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  word-break: break-all;
}

/* tables */
.stbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.stbl th, .stbl td { padding: 0.55rem 0.75rem; text-align: left;
  border-bottom: 1px solid rgba(184,196,162,0.05); }
.stbl th { font-weight: 400; color: rgba(184,196,162,0.55);
  font-size: 0.62rem; letter-spacing: 0.15em;
  font-family: "JetBrains Mono", monospace;
  background: rgba(184,196,162,0.03); }
/* Numeric and mono cells: keep the monospace + dimmed-cream readout,
   but stay left-aligned with every other column so reviewers don't
   have to track a moving edge across the table. */
.stbl td.num { text-align: left; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; }
.stbl td.mono { text-align: left; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; color: #d4ddc5; }
.stbl th.num { text-align: left; }
.stbl tr:hover td { background: rgba(184,196,162,0.025); }

/* legend bar for heatmaps */
.legend-bar {
  width: 200px; height: 10px; border-radius: 2px;
  background: linear-gradient(to right, #0a0f1c 0%, #4a5a3a 33%, #b8c4a2 66%, #d4ddc5 100%);
}

/* ---------- ELI5 layer: info cards + term tooltips ----------------- */

/* sage-tinted "what is this?" panel that sits at the top of every
   probity tab. uses a distinct accent stripe on the left so it
   visually separates from data cards below. */
.info-card {
  background: linear-gradient(145deg, rgba(122,148,96,0.06) 0%, rgba(122,148,96,0.02) 100%);
  border: 1px solid rgba(184,196,162,0.15);
  border-left: 3px solid rgba(122,148,96,0.55);
  border-radius: 12px;
  padding: 1rem 1.25rem 1.1rem;
  margin-bottom: 2rem;
  position: relative;
}
.info-card .info-tag {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.625rem;
  color: rgba(184,196,162,0.6);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.info-card p {
  color: rgba(212,221,197,0.75);
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0 0 0.65rem;
}
.info-card p:last-child { margin-bottom: 0; }
.info-card strong, .info-card .accent {
  color: rgba(212,221,197,1);
  font-weight: 400;
}
.info-card ul {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.1rem;
  color: rgba(212,221,197,0.7);
  font-size: 0.84rem;
  line-height: 1.6;
}
.info-card li { margin-bottom: 0.25rem; }
.info-card code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: rgba(184,196,162,0.95);
  background: rgba(184,196,162,0.08);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
}

/* terms — dotted-underline triggers a tooltip on hover. JS attaches
   data-tip="..." to define the tooltip body; markup is just
   <span class="term" data-tip="...">phrase</span>. Definitions render
   in the bottom statusbar (.term-bar) rather than a floating popover
   so they never cover the data the user is reading. */
.term {
  border-bottom: 1px dotted rgba(184,196,162,0.45);
  cursor: help;
  transition: color 0.2s, border-bottom-color 0.2s;
}
.term:hover {
  border-bottom-color: rgba(212,221,197,1);
  color: rgba(212,221,197,1);
}

/* term statusbar — fixed at the bottom of the viewport, always
   visible, never covers content. Defaults to a dim "hover any term"
   hint; brightens + populates with definition on .term hover. */
body { padding-bottom: 48px; }
.term-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.55rem 1.5rem;
  min-height: 38px;
  background: rgba(10,12,10,0.92);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-top: 1px solid rgba(184,196,162,0.1);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.82rem; line-height: 1.45;
  color: rgba(212,221,197,0.8);
  transition: color 0.2s;
}
.term-bar.dim { color: rgba(184,196,162,0.35); }
.term-bar .tb-icon {
  font-family: "JetBrains Mono", monospace;
  color: rgba(184,196,162,0.55);
  flex-shrink: 0;
}
.term-bar .tb-term {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: rgba(184,196,162,1);
  flex-shrink: 0;
  padding: 0.12rem 0.5rem;
  background: rgba(184,196,162,0.08);
  border-radius: 4px;
}
.term-bar .tb-defn {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .term-bar { padding: 0.4rem 0.75rem; font-size: 0.7rem; }
  .term-bar .tb-defn { white-space: normal; max-height: 2.6em; overflow: hidden; }
  body { padding-bottom: 56px; }
}
@media (max-width: 480px) {
  /* on very small screens the statusbar gets in the way more than it
     helps. hide it; tooltips fall back to the underlined hover state
     and the in-page info-cards already define everything. */
  .term-bar { display: none; }
  body { padding-bottom: 0; }
}

/* expanded heatmap legend prose */
.legend.expanded {
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 100%;
}
.legend.expanded .legend-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  color: rgba(184,196,162,0.55);
}
.legend.expanded .legend-desc {
  flex-basis: 100%; margin-top: 0.5rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.78rem; font-weight: 300;
  color: rgba(212,221,197,0.7);
  line-height: 1.55;
}

/* asterisk callout */
.callout {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem; color: rgba(184,196,162,0.4);
  letter-spacing: 0.08em; padding-top: 1rem;
  border-top: 1px solid rgba(184,196,162,0.05);
  line-height: 1.6;
}
.callout a {
  color: rgba(184,196,162,0.7);
  border-bottom: 1px dotted rgba(184,196,162,0.4);
}
.callout a:hover { color: rgba(184,196,162,1); }