/* ============================================================
   AIVA – Documentation custom styles
   ============================================================ */

/* ============================================================
   SUBSCRIPTION TIER BADGES
   ============================================================ */
.tier-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tier-free   { background: #e0e0e0; color: #424242; }
.tier-trial  { background: #fff3e0; color: #e65100; }
.tier-plus   { background: #e3f2fd; color: #1565c0; }
.tier-pro    { background: #ede7f6; color: #4527a0; }
.tier-enterprise { background: #e8f5e9; color: #2e7d32; }

/* ============================================================
   PIPELINE FLOWCHART
   ============================================================ */
.aiva-flow {
  display: flex;
  justify-content: center;
  padding: 12px 8px;
}

.aiva-flow__svg {
  width: 100%;
  max-width: 340px;
  height: auto;
}

/* ============================================================
   SECTION WRAPPER
   ============================================================ */
.aiva-section {
  margin: 56px 0;
}

.aiva-section__label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--md-primary-fg-color);
  margin-bottom: 6px;
}

.aiva-section__title {
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.aiva-section__desc {
  font-size: 0.93rem;
  opacity: .68;
  max-width: 500px;
  line-height: 1.7;
  margin-bottom: 0;
}

/* ============================================================
   FEATURE SPLIT  (mockup + text, alternating sides)
   ============================================================ */
.aiva-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 48px 0;
}

/* Reversed: swap column order with flexbox-order, no RTL */
.aiva-feature--reverse .aiva-feature__visual { order: 2; }
.aiva-feature--reverse .aiva-feature__body   { order: 1; }

@media (max-width: 800px) {
  .aiva-feature {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .aiva-feature--reverse .aiva-feature__visual { order: 0; }
  .aiva-feature--reverse .aiva-feature__body   { order: 0; }
}

/* ── Mockup window chrome ──────────────────────────────────── */
.aiva-feature__mockup {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--md-typeset-table-color);
  background: var(--md-code-bg-color);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  font-size: 0.8rem;
}

[data-md-color-scheme="slate"] .aiva-feature__mockup {
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

.aiva-mockup__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  background: var(--md-default-bg-color);
  border-bottom: 1px solid var(--md-typeset-table-color);
}

.aiva-mockup__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.aiva-mockup__dot--red    { background: #ff6058; }
.aiva-mockup__dot--yellow { background: #ffbe2e; }
.aiva-mockup__dot--green  { background: #28c840; }

.aiva-mockup__title {
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  opacity: .5;
  letter-spacing: .3px;
}

.aiva-mockup__body {
  padding: 14px;
}

/* ── Chat mockup ───────────────────────────────────────────── */
.aiva-chat__msg {
  border-radius: 7px;
  padding: 8px 11px;
  margin-bottom: 8px;
  font-size: 0.77rem;
  line-height: 1.5;
}

.aiva-chat__msg--user {
  background: rgba(0,188,212,.1);
  border: 1px solid rgba(0,188,212,.2);
  margin-left: 20%;
}

.aiva-chat__msg--ai {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-typeset-table-color);
}

.aiva-chat__label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--md-primary-fg-color);
  margin-bottom: 3px;
}

.aiva-chat__table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 0.72rem;
  border: 1px solid var(--md-typeset-table-color);
  border-radius: 6px;
  overflow: hidden;
}

.aiva-chat__table th {
  text-align: left;
  padding: 5px 9px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: .55;
  border-bottom: 1px solid var(--md-typeset-table-color);
}

.aiva-chat__table td {
  padding: 5px 9px;
  border-bottom: 1px solid var(--md-typeset-table-color);
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.71rem;
}

.aiva-chat__table tr:last-child td { border-bottom: none; }

/* ── Table mockup ──────────────────────────────────────────── */
.aiva-tbl__head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 6px;
  padding: 5px 9px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .48;
  border-bottom: 1px solid var(--md-typeset-table-color);
}

.aiva-tbl__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 6px 9px;
  font-size: 0.73rem;
  border-bottom: 1px solid var(--md-typeset-table-color);
}
.aiva-tbl__row:last-of-type { border-bottom: none; }
.aiva-tbl__row--alt { background: rgba(0,0,0,.02); }
[data-md-color-scheme="slate"] .aiva-tbl__row--alt { background: rgba(255,255,255,.03); }
.aiva-tbl__row span:first-child {
  font-weight: 600;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.7rem;
}

.aiva-tbl__foot {
  padding: 6px 9px;
  font-size: 0.65rem;
  opacity: .4;
  text-align: right;
  border-top: 1px solid var(--md-typeset-table-color);
}

/* ── Analysis hub mockup ───────────────────────────────────── */
.aiva-hub__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 12px;
}

.aiva-hub__card {
  border: 1px solid var(--md-typeset-table-color);
  border-radius: 6px;
  padding: 9px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--md-default-bg-color);
}

.aiva-hub__icon {
  height: 18px;
  width: 30px;
  border-radius: 4px;
  margin: 0 auto 5px;
}
.aiva-hub__icon--acmg { background: linear-gradient(135deg,#00bcd4,#00897b); }
.aiva-hub__icon--pgx  { background: linear-gradient(135deg,#7c4dff,#5c35cc); }
.aiva-hub__icon--sv   { background: linear-gradient(135deg,#ff6d00,#e65100); }
.aiva-hub__icon--cat  { background: linear-gradient(135deg,#0288d1,#01579b); }

.aiva-hub__bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 44px;
  padding: 0 2px;
}

.aiva-hub__bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--md-primary-fg-color), rgba(0,188,212,.35));
  opacity: .65;
}

/* ── Report mockup ─────────────────────────────────────────── */
.aiva-rpt__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--md-typeset-table-color);
}

.aiva-rpt__logo-block {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: linear-gradient(135deg,#00bcd4,#00897b);
  flex-shrink: 0;
}

.aiva-rpt__meta { flex: 1; }

.aiva-rpt__line {
  height: 5px;
  border-radius: 3px;
  background: var(--md-typeset-table-color);
  margin-bottom: 4px;
  width: 100%;
}
.aiva-rpt__line--short { width: 55%; }
.aiva-rpt__line--long  { width: 88%; }
.aiva-rpt__line--med   { width: 70%; }
.aiva-rpt__line--find  { width: 55%; margin: 0; }

.aiva-rpt__section {
  margin-bottom: 10px;
}

.aiva-rpt__section-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .4;
  margin-bottom: 5px;
}

.aiva-rpt__finding {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

/* ── Feature text body ─────────────────────────────────────── */
.aiva-feature__label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--md-primary-fg-color);
  margin-bottom: 2px;
}

.aiva-feature__title {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
}

.aiva-feature__desc {
  font-size: 0.91rem;
  line-height: 1.75;
  opacity: .75;
  margin-bottom: 16px;
}

.aiva-feature__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.aiva-feature__bullets li {
  padding: 3px 0 3px 20px;
  position: relative;
  font-size: 0.87rem;
  opacity: .82;
}

.aiva-feature__bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--md-primary-fg-color);
  font-weight: 700;
}

.aiva-feature__link {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--md-primary-fg-color) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap .15s;
}
.aiva-feature__link:hover { gap: 9px; }

/* ============================================================
   CLASSIFICATION BADGES
   ============================================================ */
.aiva-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.aiva-badge--path  { background: #ffebee; color: #c62828; }
.aiva-badge--lpath { background: #fff3e0; color: #bf360c; }
.aiva-badge--vus   { background: #fff8e1; color: #f57f17; }
.aiva-badge--lben  { background: #f1f8e9; color: #33691e; }
.aiva-badge--ben   { background: #e8f5e9; color: #1b5e20; }

[data-md-color-scheme="slate"] .aiva-badge--path  { background: rgba(198,40,40,.2);  color: #ef9a9a; }
[data-md-color-scheme="slate"] .aiva-badge--lpath { background: rgba(191,54,12,.2);  color: #ffcc80; }
[data-md-color-scheme="slate"] .aiva-badge--vus   { background: rgba(245,127,23,.2); color: #ffe082; }
[data-md-color-scheme="slate"] .aiva-badge--lben  { background: rgba(51,105,30,.2);  color: #aed581; }
[data-md-color-scheme="slate"] .aiva-badge--ben   { background: rgba(27,94,32,.2);   color: #a5d6a7; }

/* ============================================================
   CAPABILITY CARDS
   ============================================================ */
.aiva-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .aiva-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .aiva-cards { grid-template-columns: 1fr; }
}

.aiva-card {
  border-radius: 10px;
  padding: 22px 18px;
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-typeset-table-color);
  transition: transform .15s, box-shadow .15s;
  text-decoration: none !important;
  display: block;
  color: inherit !important;
}

.aiva-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.09);
}
[data-md-color-scheme="slate"] .aiva-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.32);
}

.aiva-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 5px;
  display: block;
}

.aiva-card__desc {
  font-size: 0.8rem;
  opacity: .6;
  line-height: 1.55;
  display: block;
}

/* ============================================================
   AUDIENCE
   ============================================================ */
.aiva-audience {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .aiva-audience { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .aiva-audience { grid-template-columns: 1fr; }
}

.aiva-audience__card {
  border-radius: 10px;
  padding: 22px 18px;
  border-left: 3px solid var(--md-primary-fg-color);
  background: var(--md-code-bg-color);
  border-top: 1px solid var(--md-typeset-table-color);
  border-right: 1px solid var(--md-typeset-table-color);
  border-bottom: 1px solid var(--md-typeset-table-color);
}

.aiva-audience__role {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0 0 7px;
  /* Prevent compound words from blowing out the card width */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.aiva-audience__desc {
  font-size: 0.79rem;
  opacity: .62;
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   QUICK LINKS
   ============================================================ */
.aiva-quicklinks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--md-typeset-table-color);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 22px;
}
@media (max-width: 900px) {
  .aiva-quicklinks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .aiva-quicklinks { grid-template-columns: 1fr; }
}

.aiva-quicklink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--md-code-bg-color);
  text-decoration: none !important;
  color: inherit !important;
  transition: background .12s;
}
.aiva-quicklink:hover { background: var(--md-default-bg-color); }

.aiva-quicklink__inner { flex: 1; min-width: 0; }

.aiva-quicklink__title {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--md-typeset-a-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aiva-quicklink__desc {
  display: block;
  font-size: 0.77rem;
  opacity: .58;
  line-height: 1.4;
  margin-top: 2px;
}

.aiva-quicklink__arrow {
  font-size: 0.95rem;
  opacity: .32;
  flex-shrink: 0;
  transition: opacity .12s, transform .12s;
}
.aiva-quicklink:hover .aiva-quicklink__arrow {
  opacity: .8;
  transform: translateX(3px);
}

/* ============================================================
   CTA BANNER
   ============================================================ */
/* ============================================================
   ADMONITION COLOR OVERRIDES
   Fix the radioactive lime green on `question` / `faq` / `help`
   and tune all other types to be cohesive with the brand.
   ============================================================ */

/* ── question / faq / help ────────────────────────────────── */
.md-typeset .admonition.question,
.md-typeset details.question {
  border-color: var(--md-primary-fg-color) !important;
}
.md-typeset .question > .admonition-title,
.md-typeset .question > summary {
  background-color: rgba(0, 150, 136, .07) !important;
  color: inherit !important;
}
.md-typeset .question > .admonition-title::before,
.md-typeset .question > summary::before {
  background-color: var(--md-primary-fg-color) !important;
}
.md-typeset .question > summary {
  color: inherit !important;
}

/* ── note / info / tip / warning / danger — subtle tones ─── */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: #0097a7;
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(0, 151, 167, .07) !important;
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: #0097a7 !important;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #00897b;
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(0, 137, 123, .07) !important;
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: #00897b !important;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: #f59e0b;
}
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(245, 158, 11, .07) !important;
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: #f59e0b !important;
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: #ef4444;
}
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: rgba(239, 68, 68, .07) !important;
}
.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before {
  background-color: #ef4444 !important;
}

/* All admonition titles: cleaner baseline */
.md-typeset .admonition-title,
.md-typeset details > summary {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* ============================================================
   INTERACTIVE DESIGN POLISH
   Tables, inline code, dividers, blockquotes, links, kbd
   ============================================================ */

/* ── Content tables ────────────────────────────────────────── */
.md-typeset table:not([class]) {
  font-size: 0.85rem;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--md-typeset-table-color);
  box-shadow: none;
  display: table;
  width: 100%;
}

.md-typeset table:not([class]) th {
  background: var(--md-code-bg-color);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 14px;
  border-bottom: 2px solid var(--md-typeset-table-color);
  white-space: nowrap;
}

.md-typeset table:not([class]) td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--md-typeset-table-color);
  vertical-align: top;
  line-height: 1.6;
}

.md-typeset table:not([class]) tr:last-child td {
  border-bottom: none;
}

.md-typeset table:not([class]) tr:hover td {
  background: rgba(0, 150, 136, .04);
  transition: background .12s;
}

/* ── Inline code ───────────────────────────────────────────── */
.md-typeset code:not(.highlight code) {
  font-size: 0.82em;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-typeset-table-color);
  color: var(--md-code-fg-color);
  font-weight: 500;
}

/* ── Keyboard keys ─────────────────────────────────────────── */
.md-typeset kbd {
  font-size: 0.75em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-typeset-table-color);
  border-bottom-width: 2px;
  font-family: var(--md-code-font-family);
  font-weight: 600;
  color: var(--md-typeset-color);
  box-shadow: none;
}

/* ── Blockquote ────────────────────────────────────────────── */
.md-typeset blockquote {
  border-left: 3px solid var(--md-primary-fg-color);
  background: rgba(0, 150, 136, .05);
  border-radius: 0 6px 6px 0;
  padding: 12px 16px;
  margin: 16px 0;
  font-style: normal;
  color: var(--md-typeset-color);
  opacity: .85;
}

/* ── Horizontal rules ──────────────────────────────────────── */
.md-typeset hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--md-typeset-table-color) 20%, var(--md-typeset-table-color) 80%, transparent);
  margin: 32px 0;
}

/* ── Content links ─────────────────────────────────────────── */
.md-typeset a:not([class]):not(.md-button) {
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 188, 212, .35);
  transition: border-color .15s, color .15s;
}
.md-typeset a:not([class]):not(.md-button):hover {
  border-bottom-color: var(--md-primary-fg-color);
  color: var(--md-primary-fg-color);
}

/* ── Headings (content pages) ──────────────────────────────── */
.md-typeset h1 {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.md-typeset h2 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--md-typeset-table-color);
}
.md-typeset h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
}

/* ── Details / accordion smooth expand ────────────────────── */
.md-typeset details {
  border-radius: 8px !important;
  transition: box-shadow .2s;
}
.md-typeset details[open] {
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
[data-md-color-scheme="slate"] .md-typeset details[open] {
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.md-typeset details > summary {
  border-radius: 7px !important;
  transition: background .15s !important;
}
.md-typeset details[open] > summary {
  border-radius: 7px 7px 0 0 !important;
}

/* ── Numbered step lists ───────────────────────────────────── */
.md-typeset ol li {
  padding-left: 4px;
  line-height: 1.7;
}

/* ── Code blocks ───────────────────────────────────────────── */
.md-typeset .highlight pre {
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.65;
}

/* ── Navigation improvements ──────────────────────────────── */
.md-nav__link {
  transition: color .15s !important;
}

/* ── Search bar ────────────────────────────────────────────── */
.md-search__input {
  border-radius: 8px !important;
}

/* ── Breadcrumb path ───────────────────────────────────────── */
.md-nav--secondary .md-nav__title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 700;
  opacity: .55;
}