/*
  The Omnatix frame, shared by all four demos and kept identical, like charts.js.

  Two layers. The bar across the top is Omnatix's own identity, black, silver and emerald from
  the mark, the same on every demo so a prospect always knows whose work they are looking at.
  Everything below it (the summary, the section navigation, the filter, the table extras) is
  drawn in the demo's own tokens, so each demo keeps its identity inside the frame. The --ox
  names fall back to token names every theme already declares; a theme overrides one only
  where its own names differ.
*/

:root {
  --ox-black: #0C0C0D;
  --ox-silver: #C9CCC6;
  /* The emerald of the gems in the mark. White on it measures 5.4:1. */
  --ox-emerald: #0F7A55;
  --ox-emerald-2: #0B6446;
  --ox-shimmer: rgba(255, 255, 255, 0.45);
}

/* ---------------------------------------------------------------- the Omnatix bar */

.ox-bar {
  background: var(--ox-black);
  color: #F4F4F2;
  font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
  font-size: 12.5px;
  line-height: 1.3;
}
.ox-bar-in {
  max-width: var(--measure, 1200px);
  margin: 0 auto;
  padding: 0.4rem var(--ox-gutter, 2rem);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 46px;
}
.ox-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #F4F4F2;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.ox-brand img { width: 26px; height: 26px; display: block; }
.ox-tag { color: #A9ABA6; font-size: 12px; }
.ox-actions { margin-left: auto; display: flex; align-items: center; gap: 0.3rem; }
.ox-link {
  color: #D9DAD6;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  padding: 0.5rem 0.65rem;
  border-radius: 4px;
  white-space: nowrap;
}
.ox-link:hover { background: #1D1E20; color: #FFFFFF; }
.ox-cta {
  background: var(--ox-emerald);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  padding: 0.55rem 0.85rem;
  border-radius: 4px;
  white-space: nowrap;
}
.ox-cta:hover { background: var(--ox-emerald-2); }
.ox-bar a:focus-visible,
.ox-bar button:focus-visible { outline: 2px solid var(--ox-silver); outline-offset: 2px; }

@media (max-width: 760px) {
  .ox-tag, .ox-print { display: none; }
}
@media (max-width: 460px) {
  .ox-bar-in { padding: 0.35rem 1rem; gap: 0.4rem; }
  /* The mark carries the brand on a phone; the wordmark would push the button off screen. */
  .ox-brand span { display: none; }
  .ox-link { padding: 0.5rem 0.45rem; }
  .ox-cta { padding: 0.55rem 0.7rem; }
}

/* ---------------------------------------------------------------- section navigation */

.ox-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ox-page, var(--paper));
  border-bottom: 1px solid var(--rule);
}
.ox-nav[hidden] { display: none; }
.ox-nav-in {
  max-width: var(--measure, 1200px);
  margin: 0 auto;
  padding: 0 var(--ox-gutter, 2rem);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ox-sections {
  display: flex;
  gap: 0.1rem;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.ox-sections::-webkit-scrollbar { display: none; }
.ox-sections a {
  flex: none;
  white-space: nowrap;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 12.5px;
  padding: 0.85rem 0.55rem 0.7rem;
  border-bottom: 2px solid transparent;
}
.ox-sections a .n { color: var(--ink-3); margin-right: 0.4rem; font-variant-numeric: tabular-nums; }
.ox-sections a:hover { color: var(--ink); }
.ox-sections a.is-active { color: var(--ink); border-bottom-color: var(--ox-accent, var(--s1)); }
.ox-sections a:focus-visible { outline: 2px solid var(--ox-accent, var(--s1)); outline-offset: -2px; }

.ox-filter {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 12.5px;
  color: var(--ink-2);
}
.ox-filter select {
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--ox-card, var(--paper));
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  min-height: 36px;
}
.ox-filter.is-set select {
  border-color: var(--ox-accent, var(--s1));
  box-shadow: inset 0 0 0 1px var(--ox-accent, var(--s1));
}

@media (max-width: 760px) {
  .ox-nav-in { flex-wrap: wrap; gap: 0; }
  .ox-filter { width: 100%; padding: 0 0 0.6rem; }
  .ox-filter select { flex: 1; min-height: 40px; }
}
@media (max-width: 460px) {
  .ox-nav-in { padding: 0 1rem; }
}

/* A jump from the nav lands the heading below the sticky bar, not under it. */
section[id], #ox-top { scroll-margin-top: 68px; }
@media (max-width: 760px) {
  section[id], #ox-top { scroll-margin-top: 116px; }
}

/* ---------------------------------------------------------------- summary */

.ox-top { padding-top: 0.25rem; }
.ox-kicker { color: var(--ink-2); font-size: 1rem; margin: 1.5rem 0 0; max-width: 70ch; }
.ox-findings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 0.5rem;
}
.ox-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 0.95rem 0.9rem;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong);
  border-radius: 4px;
  background: var(--ox-card, transparent);
  color: var(--ink);
  text-decoration: none;
}
.ox-card:hover { border-color: var(--rule-strong); border-top-color: var(--ox-accent, var(--s1)); }
.ox-card:focus-visible { outline: 2px solid var(--ox-accent, var(--s1)); outline-offset: 2px; }
.ox-card.is-close { border-top-color: var(--ox-accent, var(--s1)); }
.ox-card-n { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ox-card-title { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
/* The hero rule applies here too: sans, proportional figures, never tabular. */
.ox-card-value {
  font-family: var(--font-sans);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: auto;
  padding-top: 0.2rem;
}
.ox-card-note { font-size: 12px; color: var(--ink-3); line-height: 1.35; }

@media (max-width: 460px) {
  .ox-findings { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .ox-card { padding: 0.7rem 0.75rem; }
  .ox-card-value { font-size: 1.2rem; }
}

/* ---------------------------------------------------------------- scope labels */

.ox-scope {
  display: inline-block;
  vertical-align: 0.12em;
  margin-left: 0.6rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.ox-scope.is-on { border-color: var(--ox-accent, var(--s1)); color: var(--ink); }

/* ---------------------------------------------------------------- loading */

.ox-skel { background: var(--rule); border-radius: 4px; position: relative; overflow: hidden; }
.ox-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--ox-shimmer), transparent);
  animation: ox-shimmer 1.4s infinite;
}
@keyframes ox-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ox-skel::after { animation: none; } }
.ox-skel-h { height: 22px; width: 38%; margin: 2.5rem 0 1rem; }
.ox-skel-p { height: 12px; width: 72%; margin: 0 0 0.6rem; }
.ox-skel-p.is-short { width: 50%; }
.ox-skel-chart { height: 240px; margin: 1.5rem 0 0; }

/* ---------------------------------------------------------------- table extras */

.table-scroll .row-more { display: none; }
.table-scroll.is-open .row-more { display: table-row; }
.tbl-more { margin-top: 0.6rem; }
.cbar {
  display: inline-block;
  width: 56px;
  height: 6px;
  margin-right: 0.55rem;
  vertical-align: middle;
  background: var(--ox-track, var(--rule));
  border-radius: 0 3px 3px 0;
  overflow: hidden;
}
.cbar i { display: block; height: 100%; background: var(--ox-bar, var(--ink-3)); border-radius: 0 3px 3px 0; }
.cbar.is-neg i { background: var(--neg); }
/* The bar and its value stay on one line; wrapped, a narrow column split "-R1.8m" in two. */
td:has(> .cbar) { white-space: nowrap; }
@media (max-width: 460px) { .cbar { display: none; } }

.chart-empty { color: var(--ink-3); font-size: 0.9rem; padding: 2rem 0; margin: 0; }

/* ---------------------------------------------------------------- two up on wide screens */

/* A chart of three bars stretched across 1100px reads as three bars and a lot of paper. On a
   wide screen, pairs of small figures sit side by side; below the breakpoint they stack. */
.ox-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2.5rem; align-items: start; }
@media (min-width: 1080px) {
  .ox-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ox-split.is-wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* ---------------------------------------------------------------- print */

/* Save as PDF produces a board pack: no frame, every folded row unfolded, each chart scaled
   to the paper through its viewBox, and the colours printed as designed. */
@page { margin: 14mm 12mm; }
@media print {
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ox-bar, .ox-nav, .tbl-toggle, .tip, #theme-toggle, .theme-toggle, .ox-theme,
  .ox-print-hide { display: none !important; }
  .table-scroll { overflow: visible !important; }
  .table-scroll .row-more { display: table-row !important; }
  .wrap { max-width: none !important; padding: 0 !important; }
  .chart svg { width: 100% !important; height: auto !important; }
  .ox-split { grid-template-columns: minmax(0, 1fr) !important; }
  .figure, .tile, .hero, .ox-card, tr, .callout { break-inside: avoid; }
  h2, h3, .section-head, .figure-head { break-after: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* The loading state mirrors the page it is waiting for: a heading, a line or two, a chart. */
#loading { text-align: left; padding: 1rem 0 3rem; }

/* ---------------------------------------------------------------- one view at a time */

/* A view that is not on screen. Printing shows every one, so Save as PDF is the whole pack. */
.ox-off { display: none !important; }
@media print {
  .ox-off { display: block !important; }
  .ai-brief, .ai { break-inside: avoid; }
}

/* ---------------------------------------------------------------- AI insights, structure only

   Each demo dresses these in its own tokens and its own shape: a margin note, an alert, a
   committee recommendation, a decision support card. Only the skeleton is shared. */

.ai, .ai-brief { position: relative; }
.ai-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.ai-badge { font-weight: 700; }
.ai-conf { margin-left: auto; }
.ai p { margin: 0; }
.ai-actions, .ai-pris { margin: 0; padding: 0; list-style: none; }
.ai-actions li { display: flex; flex-direction: column; gap: 0.1rem; }
.ai-meta { display: block; }
.ai-value { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.ai-value-n { font-family: var(--font-sans); font-weight: 700; font-variant-numeric: proportional-nums; }
.ai-pri { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: baseline; text-decoration: none; color: inherit; }
.ai-pri-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ai-pri-n, .ai-pri-v { font-variant-numeric: tabular-nums; }
.ai-pri-v { font-weight: 700; white-space: nowrap; }
.ai-pri:focus-visible { outline: 2px solid var(--ox-accent, var(--s1)); outline-offset: 2px; }

/* The light and dark switch, shaped by each demo. */
.ox-theme { font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- the AI pop-up, structure only

   ask.js draws the same parts on every demo: a launcher in the corner, and a window with the
   conversation and the briefing. Each demo dresses them in its own tokens: a letters desk, a
   console, a memo, a chat. Kept identical in Leshaw's css/ai.css. */

.aipop-launch {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.1rem 0 0.95rem;
  border: 0;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.aipop-launch-ico, .aipop-mark { display: inline-flex; flex: none; }
.aipop-launch svg, .aipop-mark svg { width: 18px; height: 18px; fill: currentColor; }
.aipop-launch:focus-visible, .aipop-icon:focus-visible,
.aipop-tab:focus-visible { outline: 2px solid var(--ox-accent, var(--s1)); outline-offset: 2px; }

.aipop {
  position: fixed;
  z-index: 71;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 56px);
  width: min(420px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 104px));
  height: min(640px, calc(100dvh - 104px));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  animation: aipop-in 0.18s ease-out both;
}
.aipop[hidden] { display: none; }
@keyframes aipop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aipop { animation: none; } }

.aipop-head { display: flex; align-items: center; gap: 0.6rem; flex: none; padding: 0.8rem 0.6rem 0.8rem 1rem; }
.aipop-id { flex: 1; min-width: 0; }
.aipop-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.aipop-sub { margin: 0.2rem 0 0; font-size: 0.74rem; line-height: 1.3; }
.aipop-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.aipop-icon[hidden] { display: none; }
.aipop-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aipop-tabs { display: flex; align-items: stretch; gap: 0.35rem; flex: none; padding: 0 0.8rem; overflow-x: auto; scrollbar-width: none; }
.aipop-tab {
  flex: none;
  padding: 0.65rem 0.4rem 0.55rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}
.aipop-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.aipop-pane[hidden] { display: none; }
.aipop-brief { display: block; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.1rem 1.2rem; }
.aipop-brief:focus-visible { outline: none; }
.aipop-refresh, .aipop-link { font: inherit; cursor: pointer; }

/* The conversation. */
.ask { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ask-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
}
.ask-hello p { margin: 0 0 0.4rem; }
.ask-hello p:last-child { margin-bottom: 0; }
.ask-examples { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ask-examples:empty { display: none; }
.ask-chip { font: inherit; cursor: pointer; text-align: left; line-height: 1.35; }
.ask-log { display: flex; flex-direction: column; gap: 1rem; }
.ask-log:empty { display: none; }
.ask-q { font-weight: 700; overflow-wrap: anywhere; }
.ask-a, .ask-hello { min-width: 0; overflow-wrap: anywhere; }
.ask-answer p, .ask-msg { margin: 0 0 0.5rem; }
.ask-answer p:last-child { margin-bottom: 0; }
.ask-answer ul { margin: 0 0 0.5rem; padding-left: 1.2rem; }
.ask-status { margin: 0; opacity: 0.75; }
.ask-status::after { content: '...'; }
.ask-proof { margin-top: 0.5rem; }
.ask-proof summary { cursor: pointer; }
.ask-purpose { margin: 0.6rem 0 0.4rem; }
.ask-sql {
  max-height: 220px;
  overflow: auto;
  margin: 0.5rem 0;
  padding: 0.7rem 0.8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.45;
}
.aipop .table-scroll { max-height: 260px; overflow: auto; }
.aipop table { font-size: 0.76rem; }
.ask-meta { margin: 0.4rem 0 0; }
.ask-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: end; flex: none; padding: 0.75rem 0.8rem max(0.85rem, env(safe-area-inset-bottom)); }
.ask-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ask-input { box-sizing: border-box; width: 100%; min-height: 44px; max-height: 140px; resize: none; font: inherit; line-height: 1.4; }
.ask-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-send { display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; font: inherit; cursor: pointer; }
.ask-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ask-send:disabled { opacity: 0.5; cursor: progress; }

/* A phone: the window is the screen, and the page behind it stays put. */
@media (max-width: 640px) {
  .aipop { inset: 0; width: auto; height: auto; border-radius: 0 !important; }
  html.aipop-open, html.aipop-open body { overflow: hidden; }
  html.aipop-open .aipop-launch { display: none; }
  .ask-input { font-size: 16px; }
}
@media print { .aipop, .aipop-launch { display: none !important; } }