/* ===== Agent Readiness Operator — audit-instrument design system ===== */

/* --- semantic tokens (color = meaning, only) --- */
:root {
  --aro-ship:     #34d399;
  --aro-fix:      #fbbf24;
  --aro-escalate: #f87171;
  --aro-brand:    #22d3ee;
}

/* --- dark scheme (default): surface, not void --- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:          #0f131a;
  --md-default-fg-color:          #e8ebf0;
  --md-default-fg-color--light:   #9aa4b2;
  --md-default-fg-color--lighter: #6b7686;
  --md-code-bg-color:             #161c26;
  --md-code-fg-color:             #e8ebf0;
  --md-typeset-a-color:           var(--aro-brand);
  --md-accent-fg-color:           var(--aro-brand);
  --md-primary-fg-color:          #11151c;
  --md-primary-bg-color:          #e8ebf0;
  --md-footer-bg-color:           #0b0e14;
  --aro-surface:        #161c26;
  --aro-surface-raised: #1d2532;
  --aro-line:           #1d2532;
  --aro-chip-ship:     var(--aro-ship);
  --aro-chip-fix:      var(--aro-fix);
  --aro-chip-escalate: var(--aro-escalate);
  --aro-glow: rgba(34, 211, 238, 0.07);
}

/* --- light scheme: same discipline, AA contrast --- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:  #11151c;
  --md-primary-bg-color:  #eef1f5;
  --md-typeset-a-color:   #0e7490;
  --md-accent-fg-color:   #0e7490;
  --aro-surface:        #f4f6f9;
  --aro-surface-raised: #e9edf2;
  --aro-line:           #dde3ea;
  --aro-chip-ship:     #047857;
  --aro-chip-fix:      #92400e;
  --aro-chip-escalate: #b91c1c;
  --aro-glow: rgba(14, 116, 144, 0.06);
}

/* --- long-form readability --- */
.md-typeset { line-height: 1.7; }
.md-typeset h1, .md-typeset h2 { letter-spacing: -0.01em; }

/* --- tables read as instrument output --- */
.md-typeset table:not([class]) {
  background: var(--aro-surface);
  border: none;
  border-radius: 0.35rem;
  font-size: 0.72rem;
}
.md-typeset table:not([class]) th {
  background: var(--aro-surface-raised);
  font-family: var(--md-code-font-family);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.md-typeset table:not([class]) tbody tr:hover {
  background: var(--aro-surface-raised);
  box-shadow: none;
}

/* --- code blocks: artifacts, framed like output --- */
.md-typeset pre > code { border-radius: 0.4rem; }
.md-typeset .highlight { border: 1px solid var(--aro-line); border-radius: 0.45rem; }

/* --- decision chips: color + text, never color alone --- */
.chip {
  display: inline-block;
  font-family: var(--md-code-font-family);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.35em 0.7em;
  border-radius: 1em;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.chip.ship     { color: var(--aro-chip-ship);     background: color-mix(in srgb, var(--aro-chip-ship)     10%, transparent); }
.chip.fix      { color: var(--aro-chip-fix);      background: color-mix(in srgb, var(--aro-chip-fix)      10%, transparent); }
.chip.escalate { color: var(--aro-chip-escalate); background: color-mix(in srgb, var(--aro-chip-escalate) 10%, transparent); }

/* --- score band scale: a meter, not a list --- */
.band-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 1em 0;
  border: 1px solid var(--aro-line);
  border-radius: 2em;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
}
.band-scale span {
  font-family: var(--md-code-font-family);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  padding: 0.45em 0.85em;
  background: var(--aro-surface);
  color: var(--md-default-fg-color--light);
  border-right: 1px solid var(--aro-line);
}
.band-scale span:last-child { border-right: none; }
.band-scale span.active {
  background: var(--aro-surface-raised);
  color: var(--md-default-fg-color);
  box-shadow: inset 0 0 0 1px var(--aro-brand);
  position: relative;
}

/* --- score bars: /20 readings as instrument needles --- */
.score-bar {
  display: inline-block;
  vertical-align: middle;
  width: 5rem;
  height: 0.32rem;
  border-radius: 1em;
  background: var(--aro-surface-raised);
  overflow: hidden;
  position: relative;
}
.score-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) * 5%);
  border-radius: inherit;
  background: var(--aro-brand);
}
.score-bar.ship i     { background: var(--aro-chip-ship); }
.score-bar.fix i      { background: var(--aro-chip-fix); }
.score-bar.escalate i { background: var(--aro-chip-escalate); }

/* before→after projection bars (run pages) */
.lift-row { display: grid; grid-template-columns: 11rem 1fr 6.5rem; gap: 0.8rem; align-items: center; font-family: var(--md-code-font-family); font-size: 0.66rem; padding: 0.4rem 0; border-bottom: 1px solid var(--aro-line); }
.lift-row:last-child { border-bottom: none; }
.lift-track { position: relative; height: 0.45rem; background: var(--aro-surface-raised); border-radius: 1em; overflow: hidden; }
.lift-track .before, .lift-track .after { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.lift-track .after  { width: calc(var(--after) * 5%); background: color-mix(in srgb, var(--aro-chip-ship) 45%, transparent); }
.lift-track .before { width: calc(var(--before) * 5%); background: var(--aro-chip-fix); z-index: 1; }
.lift-grid { background: var(--aro-surface); border: 1px solid var(--aro-line); border-radius: 0.45rem; padding: 0.85rem 1.1rem; margin: 1.2em 0; }
.lift-grid .lift-legend { display: flex; gap: 1.2rem; font-family: var(--md-code-font-family); font-size: 0.58rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--md-default-fg-color--light); margin-bottom: 0.5rem; }
.lift-legend .k { display: inline-block; width: 0.85em; height: 0.45em; border-radius: 1em; margin-right: 0.4em; vertical-align: baseline; }
.lift-legend .k.before { background: var(--aro-chip-fix); }
.lift-legend .k.after  { background: color-mix(in srgb, var(--aro-chip-ship) 45%, transparent); }
@media screen and (max-width: 44.9em) { .lift-row { grid-template-columns: 8rem 1fr 5.5rem; gap: 0.5rem; } }

/* ===================== landing page ===================== */

/* atmosphere: brand glow + faint plotting grid behind the hero only */
.aro-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 3rem 0 1.75rem;
  position: relative;
}
.aro-hero::before {
  content: "";
  position: absolute;
  inset: -4rem -6rem auto -6rem;
  height: 30rem;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(38rem 22rem at 18% 10%, var(--aro-glow), transparent 65%),
    linear-gradient(var(--aro-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--aro-line) 1px, transparent 1px);
  background-size: auto, 2.6rem 2.6rem, 2.6rem 2.6rem;
  -webkit-mask-image: radial-gradient(42rem 26rem at 30% 20%, #000 35%, transparent 75%);
          mask-image: radial-gradient(42rem 26rem at 30% 20%, #000 35%, transparent 75%);
  opacity: 0.55;
}
@media screen and (max-width: 59.9em) { .aro-hero { grid-template-columns: 1fr; } }

.aro-kicker {
  font-family: var(--md-code-font-family);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aro-brand);
  margin: 0 0 0.8rem;
}
.aro-hero h1 { margin-top: 0; }
.aro-tagline { color: var(--md-default-fg-color--light); font-size: 0.85rem; max-width: 34rem; }
.aro-cta { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.md-typeset .md-button--primary {
  border-color: transparent;
  background: linear-gradient(120deg, var(--aro-brand), #0ea5b7);
  color: #06262c;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.md-typeset .md-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--aro-brand) 30%, transparent);
  color: #06262c;
}
/* slate sets --md-primary-fg-color near-black for the header bar; outlined
   buttons inherit it as text/border color and vanish on the dark background */
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) { color: var(--md-default-fg-color); }

/* the instrument panel stays dark in both schemes — it is the product shot */
.aro-panel {
  background: #0b0e14;
  border: 1px solid #1d2532;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem 1.1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  font-family: var(--md-code-font-family);
  font-size: 0.68rem;
  position: relative;
  overflow: hidden;
}
/* scan line: a single calm sweep on load, then settles as the top accent */
.aro-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--aro-brand), transparent);
  animation: aro-scan 1.8s ease-out 1;
}
@keyframes aro-scan {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
.aro-panel-title {
  color: #6b7686;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.aro-panel table { width: 100%; border-collapse: collapse; }
/* the generic instrument-table surface flips light in the default scheme;
   inside the always-dark panel it must stay transparent in both schemes */
.md-typeset .aro-panel table:not([class]),
.md-typeset .aro-panel table:not([class]) th { background: transparent; }
.aro-panel th, .aro-panel td {
  text-align: left;
  padding: 0.45em 0.5em;
  border-bottom: 1px solid #1d2532;
  color: #e8ebf0;
}
.aro-panel th { color: #6b7686; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
.aro-panel tr.total td { border-bottom: none; font-weight: 700; }
.aro-panel tr:hover td { background: transparent; }
/* bars inside the always-dark panel keep dark-scheme track color */
.aro-panel .score-bar { width: 3.6rem; background: #1d2532; }

.aro-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
@media screen and (max-width: 44.9em) { .aro-steps { grid-template-columns: 1fr; } }
.aro-step {
  background: var(--aro-surface);
  border: 1px solid var(--aro-line);
  border-top: 2px solid var(--aro-brand);
  border-radius: 0.4rem;
  padding: 1rem 1.1rem;
  font-size: 0.74rem;
}
.aro-step .n { display: block; font-family: var(--md-code-font-family); color: var(--aro-brand); font-size: 0.62rem; margin-bottom: 0.4rem; }

.aro-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0 2.5rem; }
@media screen and (max-width: 59.9em) { .aro-cards { grid-template-columns: 1fr; } }
.aro-card {
  display: block;
  background: var(--aro-surface);
  border-radius: 0.4rem;
  padding: 1rem 1.1rem;
  font-size: 0.7rem;
  color: var(--md-default-fg-color) !important;
  border: 1px solid var(--aro-line);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  position: relative;
}
.aro-card:hover {
  border-color: var(--aro-brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.aro-card::after {
  content: "→";
  position: absolute;
  top: 0.85rem; right: 1rem;
  font-family: var(--md-code-font-family);
  color: var(--md-default-fg-color--lighter);
  transition: color 150ms ease, transform 150ms ease;
}
.aro-card:hover::after { color: var(--aro-brand); transform: translateX(2px); }
.aro-card strong { display: block; margin-bottom: 0.35rem; padding-right: 1.4rem; }
.aro-card .meta {
  font-family: var(--md-code-font-family);
  color: var(--md-default-fg-color--light);
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

/* --- entrance: one orchestrated reveal, CSS only --- */
@media (prefers-reduced-motion: no-preference) {
  .aro-hero > div, .aro-steps .aro-step, .aro-cards .aro-card {
    animation: aro-rise 480ms cubic-bezier(0.22, 0.8, 0.36, 1) both;
  }
  .aro-hero > div:nth-child(2) { animation-delay: 110ms; }
  .aro-steps .aro-step:nth-child(2) { animation-delay: 90ms; }
  .aro-steps .aro-step:nth-child(3) { animation-delay: 180ms; }
  .aro-cards .aro-card:nth-child(2) { animation-delay: 60ms; }
  .aro-cards .aro-card:nth-child(3) { animation-delay: 120ms; }
  .aro-cards .aro-card:nth-child(4) { animation-delay: 180ms; }
  .aro-cards .aro-card:nth-child(5) { animation-delay: 240ms; }
  .aro-cards .aro-card:nth-child(6) { animation-delay: 300ms; }
}
@keyframes aro-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}