/*
 * Readability layer
 * Loaded after the page-specific styles so the compact CodeSOTA language stays
 * intact without relying on sub-legible 8-10px labels.
 */

/* Shared navigation, running heads, labels, tables, actions, and footer. */
.brand small,
.running-head,
.section-num,
.kicker,
.figure-note,
.band-head,
.product-map span,
.product-map b,
th,
td:first-child,
td code,
.tag,
.process span,
.principle > div span,
.generated-key,
.endpoint,
footer > div p,
footer > small {
  font-size: 11px;
}

.nav a,
.btn,
.reader-key p,
.counts b,
.start-actions > a:last-child,
footer nav a {
  font-size: 12px;
}

.support,
.product-map p,
td,
.process p {
  font-size: 13px;
}

td strong,
.process b {
  font-size: 14px;
}

.reader-key b {
  font-size: 11px;
}

.counts span,
.generated-key small {
  font-size: 11px;
}

/* Above-the-fold API onboarding and live demo. */
.onboarding-copy {
  font-size: 14px;
  line-height: 1.5;
}

.key-model-label,
.api-base span,
.hero-key > span,
.route-default > span,
.route-default em,
.route-default small,
.model-picker legend,
.model-choice small,
.model-picker > p,
.onboarding-hint,
#demo-form label,
.demo-status,
.demo-result > div,
.demo-result > div button,
.prompt-box > div,
.prompt-box button {
  font-size: 11px;
}

.model-choice b {
  font-size: 13px;
}

.key-model-label select,
#demo-form select,
#demo-form textarea,
.demo-result pre {
  font-size: 14px;
}

.api-base code,
.onboarding-links a,
.demo-examples button,
.agent-copy > a {
  font-size: 13px;
}

.api-onboarding pre,
.hero-key code,
.hero-key button,
.key-code-tabs button,
.key-code pre,
.prompt-box pre {
  font-size: 12px;
}

.table-action {
  font-size: 11px;
}

/* Aggregate usage report: chart text remains compact but no longer microscopic. */
.usage-hero aside > span,
.usage-hero aside div,
.usage-totals span,
.usage-totals small,
.metric-tabs button,
.usage-legend,
.chart-column strong,
.chart-column span,
.chart-axis {
  font-size: 12px;
}

.usage-hero aside p,
.section-heading > p {
  font-size: 13px;
  line-height: 1.5;
}

/* Hermes guide and changelog metadata. */
.guide-toc span,
.guide-section-num,
.guide-code > div,
.guide-code button,
.release time,
.release > div span {
  font-size: 11px;
}

.guide-toc a,
.guide-content > section > pre,
.guide-code pre,
.release pre {
  font-size: 12px;
}

.guide-note strong,
.guide-note span {
  font-size: 13px;
  line-height: 1.5;
}

.release li {
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 850px) {
  /* Microcopy has one consistent, readable floor on small screens. */
  .brand small,
  .running-head,
  .section-num,
  .kicker,
  .reader-key b,
  .figure-note,
  .band-head,
  .counts span,
  .product-map span,
  .product-map b,
  th,
  td:first-child,
  td code,
  .tag,
  .process span,
  .principle > div span,
  .generated-key,
  .generated-key small,
  .endpoint,
  .key-model-label,
  .api-base span,
  .hero-key > span,
  .route-default > span,
  .route-default em,
  .route-default small,
  .model-picker legend,
  .model-choice small,
  .model-picker > p,
  .onboarding-hint,
  .api-onboarding pre,
  .hero-key code,
  .hero-key button,
  .key-code-tabs button,
  .key-code pre,
  #demo-form label,
  .demo-status,
  .demo-result > div,
  .demo-result > div button,
  .prompt-box > div,
  .prompt-box button,
  .prompt-box pre,
  .table-action,
  .usage-hero aside > span,
  .usage-hero aside div,
  .usage-totals span,
  .usage-totals small,
  .metric-tabs button,
  .usage-legend,
  .chart-column strong,
  .chart-column span,
  .chart-axis,
  .guide-section-num,
  .guide-code > div,
  .guide-code button,
  .release time,
  .release > div span,
  footer > div p,
  footer > small {
    font-size: 12px;
  }

  .model-choice b {
    font-size: 14px;
  }

  .metric-tabs button,
  .usage-legend,
  .chart-column strong,
  .chart-column span,
  .chart-axis {
    font-size: 13px;
  }

  .support,
  .onboarding-copy,
  .onboarding-links a,
  .demo-examples button,
  .agent-copy > a,
  .usage-hero aside p,
  .section-heading > p,
  .guide-note strong,
  .guide-note span,
  .release li {
    font-size: 14px;
  }

  /* 16px prevents mobile browser zoom and improves selection accuracy. */
  .key-model-label select,
  #demo-form select,
  #demo-form textarea {
    min-height: 44px;
    font-size: 16px;
  }

  /* Touch targets for the compact controls and text actions used on these pages. */
  .btn,
  .onboarding-links a,
  .hero-key button,
  .key-code-tabs button,
  .demo-examples button,
  .demo-result > div button,
  .agent-copy > a,
  .prompt-box button,
  .table-action,
  .metric-tabs button,
  .guide-code button,
  .band-head a,
  .start-actions > a,
  .endpoint a,
  footer nav a {
    min-height: 44px;
  }

  .onboarding-links a,
  .agent-copy > a,
  .band-head a,
  .endpoint a,
  footer nav a {
    display: inline-flex;
    align-items: center;
  }
}