/* Olympusx AI — component styles for the website.
   Every colour, size and space comes from tokens.css (generated from tokens.json).
   Motion lives here because the token format has no motion family. */

:root {
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-draw: cubic-bezier(0.25, 0, 0.25, 1);
  --dur-fast: 110ms;
  --dur-moderate: 240ms;
  --dur-slow: 400ms;
  --dur-rise: 320ms;
  --dur-draw: 700ms;
  --stagger: 55ms;
}

/* ---------- Base ---------- */
.ox-root {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.ox-root *, .ox-root *::before, .ox-root *::after { box-sizing: border-box; border-radius: var(--radius-none); }
.ox-mono { font-family: var(--font-mono); }
.ox-tabular { font-variant-numeric: tabular-nums; }

/* ---------- Eyebrow, blue rule, section heading ---------- */
.ox-eyebrow {
  font: 400 0.75rem/1.33333 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-data);
}
[data-theme="light"] .ox-eyebrow { color: var(--text-helper); }
:lang(ar) .ox-eyebrow { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }

.ox-rule {
  inline-size: 5.5rem;
  block-size: 3px;
  background: var(--button-primary);
  border: 0;
  margin: 0;
}

.ox-section-heading { display: grid; gap: var(--spacing-04); max-inline-size: 48rem; }
.ox-section-heading h2 {
  margin: 0;
  font: 300 clamp(1.75rem, 3vw, 2.625rem)/1.19 var(--font-sans);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.ox-section-heading p {
  margin: var(--spacing-02) 0 0;
  font: 300 clamp(1rem, 1.35vw, 1.1875rem)/1.5 var(--font-sans);
  color: var(--text-secondary);
  max-inline-size: 68ch;
}

/* ---------- Buttons: label start, icon end, asymmetric padding ---------- */
.ox-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 3rem;
  border: 0;
  cursor: pointer;
  padding-inline: var(--spacing-05) var(--spacing-10);
  padding-block: 0;
  font: 400 0.875rem/1.28572 var(--font-sans);
  letter-spacing: 0.16px;
  text-align: start;
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, color var(--dur-fast) ease;
}
.ox-btn > svg { position: absolute; inset-inline-end: var(--spacing-05); inline-size: 1rem; block-size: 1rem; fill: currentColor; }
[dir="rtl"] .ox-btn > svg { transform: scaleX(-1); }
.ox-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; box-shadow: inset 0 0 0 3px var(--background); }
.ox-btn--primary { background: var(--button-primary); color: var(--text-on-color); }
.ox-btn--primary:hover { background: var(--button-primary-hover); }
.ox-btn--primary:active { background: var(--button-primary-active); }
.ox-btn--secondary { background: var(--button-secondary); color: var(--text-on-color); }
.ox-btn--tertiary { background: transparent; color: var(--button-tertiary); box-shadow: inset 0 0 0 1px var(--button-tertiary); }
.ox-btn--tertiary:hover { background: var(--button-tertiary); color: var(--text-inverse); }
[data-theme="light"] .ox-btn--tertiary:hover { color: var(--text-on-color); }
.ox-btn--ghost { background: transparent; color: var(--link-primary); padding-inline: var(--spacing-05); }
.ox-btn--ghost:hover { background: var(--layer-hover-01); }
.ox-btn--danger { background: var(--button-danger-primary); color: var(--text-on-color); }
.ox-btn--xl { min-block-size: 4rem; font-size: 1rem; }
.ox-btn[disabled] { background: var(--layer-02); color: var(--text-placeholder); box-shadow: none; cursor: not-allowed; }

/* ---------- Links ---------- */
.ox-link { color: var(--link-primary); text-decoration: underline; text-underline-offset: 0.15em; }
.ox-link:hover { color: var(--link-primary-hover); }
.ox-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ox-link--cta { display: inline-flex; align-items: center; gap: var(--spacing-03); text-decoration: none; }
.ox-link--cta:hover { text-decoration: underline; }
.ox-link--cta svg { inline-size: 1rem; block-size: 1rem; }
[dir="rtl"] .ox-link--cta svg { transform: scaleX(-1); }

/* ---------- Cards and the hairline grid ---------- */
.ox-grid {
  display: grid;
  gap: 1px;
  background: var(--border-subtle-00);
  border: 1px solid var(--border-subtle-00);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.ox-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-04);
  background: var(--layer-01);
  padding: var(--spacing-06);
  min-inline-size: 0;
}
.ox-grid > .ox-card { background: var(--background); }
.ox-card h3 { margin: 0; font: 400 1.25rem/1.4 var(--font-sans); }
.ox-card p { margin: 0; font: 400 0.875rem/1.42857 var(--font-sans); letter-spacing: 0.16px; color: var(--text-secondary); }
.ox-card__foot { margin-block-start: auto; padding-block-start: var(--spacing-05); display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-05); }
.ox-card--interactive { box-shadow: inset 0 0 0 1px var(--border-subtle-01); cursor: pointer; transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.ox-card--interactive:hover { background: var(--layer-hover-01); box-shadow: inset 0 0 0 1px var(--border-strong-01); }
.ox-card--selected { box-shadow: inset 0 0 0 2px var(--border-interactive); }

/* ---------- Metric ---------- */
.ox-metric { display: grid; gap: var(--spacing-02); }
.ox-metric__value { font: 300 clamp(2rem, 4vw, 3.375rem)/1.19 var(--font-sans); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ox-metric__unit { font: 400 0.875rem/1 var(--font-mono); color: var(--text-helper); margin-inline-start: var(--spacing-02); letter-spacing: 0; }
.ox-metric__label { font: 400 0.75rem/1.33333 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-helper); }
.ox-metric__note { font: 400 0.875rem/1.42857 var(--font-sans); color: var(--text-secondary); }

/* ---------- Chips, tags, status ---------- */
.ox-chip {
  display: inline-flex; align-items: center; gap: var(--spacing-02);
  block-size: 1.5rem; padding-inline: var(--spacing-03);
  border: 1px solid var(--border-subtle-01);
  font: 400 0.75rem/1 var(--font-sans); letter-spacing: 0.32px;
  color: var(--text-secondary); white-space: nowrap;
}
.ox-tag {
  display: inline-flex; align-items: center;
  block-size: 1.25rem; padding-inline: var(--spacing-03);
  font: 400 0.75rem/1 var(--font-sans); letter-spacing: 0.32px; white-space: nowrap;
}
.ox-tag--blue { background: var(--tag-blue-bg); color: var(--tag-blue-text); }
.ox-tag--green { background: var(--tag-green-bg); color: var(--tag-green-text); }
.ox-tag--purple { background: var(--tag-purple-bg); color: var(--tag-purple-text); }
.ox-tag--teal { background: var(--tag-teal-bg); color: var(--tag-teal-text); }
.ox-tag--gray { background: var(--tag-gray-bg); color: var(--tag-gray-text); }
.ox-tag--red { background: var(--tag-red-bg); color: var(--tag-red-text); }
.ox-status { display: inline-flex; align-items: center; gap: var(--spacing-03); font: 400 0.875rem/1.28572 var(--font-sans); color: var(--text-primary); }
.ox-status svg { inline-size: 1rem; block-size: 1rem; flex: none; }
.ox-status--shipped svg { fill: var(--support-success); }
.ox-status--partial svg { fill: var(--support-warning); }
.ox-status--notbuilt svg { fill: var(--support-error); }
.ox-status--deferred svg { fill: var(--support-info); }
.ox-pulse { inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--radius-round); background: var(--support-success); display: inline-block; }

/* ---------- Table ---------- */
.ox-table-wrap { overflow-x: auto; }
.ox-table { inline-size: 100%; border-collapse: collapse; font: 400 0.875rem/1.28572 var(--font-sans); letter-spacing: 0.16px; }
.ox-table caption { text-align: start; font: 400 0.75rem/1.33333 var(--font-mono); color: var(--text-helper); padding-block-end: var(--spacing-03); }
.ox-table th { background: var(--layer-accent-01); font-weight: 600; text-align: start; block-size: 3rem; padding-inline: var(--spacing-05); }
.ox-table td { background: var(--layer-01); block-size: 3rem; padding-inline: var(--spacing-05); border-block-end: 1px solid var(--border-subtle-01); color: var(--text-secondary); }
.ox-table td:first-child { color: var(--text-primary); }
.ox-table tr:hover td { background: var(--layer-hover-01); }
.ox-table .num { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- Code ---------- */
.ox-code {
  margin: 0; background: var(--layer-01); border: 1px solid var(--border-subtle-01);
  padding: var(--spacing-05); overflow-x: auto;
  font: 400 0.875rem/1.42857 var(--font-mono); letter-spacing: 0.32px; color: var(--text-primary);
  direction: ltr; text-align: start; tab-size: 2;
}
.ox-code__caption { font: 400 0.75rem/1.33333 var(--font-mono); color: var(--text-helper); margin-block-end: var(--spacing-03); }
.ox-code .k { color: var(--charts-1); }
.ox-code .s { color: var(--charts-7); }
.ox-code .n { color: var(--charts-10); }
.ox-code .c { color: var(--text-helper); }
.ox-code .hl { background: var(--highlight); display: inline-block; inline-size: 100%; }

/* ---------- Form field ---------- */
.ox-field { display: grid; gap: var(--spacing-02); }
.ox-field label { font: 400 0.75rem/1.33333 var(--font-sans); letter-spacing: 0.32px; color: var(--text-secondary); }
.ox-field input, .ox-field textarea {
  block-size: 3rem; background: var(--field-01); color: var(--text-primary);
  border: 0; border-block-end: 1px solid var(--border-strong-01);
  padding-inline: var(--spacing-05); font: 400 0.875rem/1.28572 var(--font-sans); letter-spacing: 0.16px;
}
.ox-field textarea { block-size: auto; min-block-size: 6rem; padding-block: var(--spacing-04); }
.ox-field input::placeholder, .ox-field textarea::placeholder { color: var(--text-placeholder); }
.ox-field input:focus, .ox-field textarea:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.ox-field__helper { font: 400 0.75rem/1.33333 var(--font-sans); color: var(--text-helper); }
.ox-field--invalid input { border-block-end: 2px solid var(--support-error); }
.ox-field--invalid .ox-field__helper { color: var(--text-error); }

/* ---------- Brand: wordmark and lockup ---------- */
.ox-wordmark { font: 400 1rem/1 var(--font-sans); letter-spacing: 0; color: var(--text-primary); white-space: nowrap; }
.ox-wordmark b { font-weight: 400; color: var(--brand-accent); }
.ox-lockup { display: inline-flex; align-items: center; gap: var(--spacing-03); text-decoration: none; }
.ox-lockup img { inline-size: 1.5rem; block-size: 1.5rem; }

/* ---------- Header and footer ---------- */
.ox-header {
  position: sticky; inset-block-start: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-07);
  block-size: var(--header-height); padding-inline: var(--spacing-05);
  background: var(--background); border-block-end: 1px solid var(--border-subtle-00);
}
.ox-header nav { display: flex; gap: var(--spacing-06); }
.ox-header nav a { color: var(--text-secondary); text-decoration: none; font: 400 0.875rem/1.28572 var(--font-sans); letter-spacing: 0.16px; padding-block: var(--spacing-03); border-block-end: 2px solid transparent; }
.ox-header nav a:hover { color: var(--text-primary); }
.ox-header nav a[aria-current="page"] { color: var(--text-primary); border-block-end-color: var(--interactive); }
.ox-footer { border-block-start: 1px solid var(--border-subtle-00); padding-block: var(--spacing-09); padding-inline: var(--spacing-05); display: grid; gap: var(--spacing-07); }
.ox-footer__cols { display: flex; flex-wrap: wrap; gap: var(--spacing-09); }
.ox-footer__cols a { display: block; color: var(--text-secondary); text-decoration: none; font: 400 0.875rem/2 var(--font-sans); }
.ox-footer__cols a:hover { color: var(--text-primary); }
.ox-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-05); font: 400 0.75rem/1.33333 var(--font-mono); color: var(--text-helper); }

/* ---------- Agents: step tree (from the console's run and trace view) ---------- */
.ox-steps { display: grid; gap: 0; background: var(--layer-01); padding: var(--spacing-05) var(--spacing-06); font: 400 0.875rem/1.28572 var(--font-sans); }
.ox-step { display: grid; grid-template-columns: 5.5rem 1fr auto; column-gap: var(--spacing-04); row-gap: var(--spacing-02); align-items: center; padding-block: var(--spacing-03); }
.ox-step__at { font: 400 0.75rem/1 var(--font-mono); color: var(--text-helper); text-align: end; font-variant-numeric: tabular-nums; }
.ox-step__what { display: flex; align-items: center; gap: var(--spacing-03); min-inline-size: 0; flex-wrap: wrap; }
.ox-step__what strong { font-weight: 600; }
.ox-step__cost { font: 400 0.75rem/1 var(--font-mono); color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ox-step__bar { grid-column: 2 / 4; block-size: 3px; background: var(--layer-accent-01); position: relative; }
.ox-step__bar i { position: absolute; inset-block: 0; inset-inline-start: var(--from, 0%); inline-size: var(--len, 10%); background: var(--interactive); }
.ox-step__note { grid-column: 2 / 4; font: 400 0.75rem/1.33333 var(--font-mono); color: var(--text-helper); }
.ox-step--held { background: var(--layer-accent-01); margin-inline: calc(var(--spacing-03) * -1); padding-inline: var(--spacing-03); }
.ox-step--failed .ox-step__note { color: var(--text-error); }
.ox-step--child { padding-inline-start: var(--spacing-06); border-inline-start: 1px solid var(--border-subtle-01); margin-inline-start: 5.5rem; grid-template-columns: 0 1fr auto; }
.ox-step--child .ox-step__at { display: none; }

/* ---------- Agents: approval gate ---------- */
.ox-gate { background: var(--layer-01); padding: var(--spacing-06); display: grid; gap: var(--spacing-05); box-shadow: inset 0 0 0 1px var(--border-subtle-01); }
.ox-gate__head { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-05); flex-wrap: wrap; }
.ox-gate__tool { font: 400 1.25rem/1.4 var(--font-mono); }
.ox-gate dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--spacing-03) var(--spacing-06); margin: 0; font-size: 0.875rem; }
.ox-gate dt { color: var(--text-helper); }
.ox-gate dd { margin: 0; }
.ox-gate__actions { display: flex; gap: 1px; flex-wrap: wrap; }

/* ---------- Agents: the AI aura panel (the one gradient) ---------- */
.ox-aura {
  position: relative; background: var(--layer-01); padding: var(--spacing-06);
  background-image: radial-gradient(120% 70% at 50% 100%, var(--ai-aura-start), var(--ai-aura-end) 70%);
  box-shadow: inset 0 0 0 1px var(--ai-border-start);
}
.ox-aura::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; background: linear-gradient(90deg, var(--ai-border-start), var(--ai-border-end), var(--ai-border-start)); }

/* ---------- Motion (all inside the reduced-motion guard) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ox-rise { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
  @keyframes ox-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.55; } }
  @keyframes ox-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes ox-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .ox-rise { animation: ox-rise var(--dur-rise) var(--ease-entrance) backwards; }
  .ox-pulse { animation: ox-pulse 2.4s ease-in-out infinite; }
  .ox-draw { stroke-dasharray: 1; animation: ox-draw var(--dur-draw) var(--ease-draw) backwards; }
  .ox-step__bar i { transform-origin: left center; animation: ox-grow var(--dur-draw) var(--ease-draw) backwards; }
  [dir="rtl"] .ox-step__bar i { transform-origin: right center; }
}