/* Component reading sizes. Load after typography.css and the component styles. */

.work-section .flagship-copy > p,
.work-section .project-contribution p,
.work-section .sample-card p,
.evidence-explorer .evidence-header > p,
.evidence-explorer .evidence-context > p,
.evidence-explorer .reasoning-example p,
.evidence-explorer .review-example p,
.case-chapters > p,
.case-section p,
.case-section li,
.case-meta dd,
.case-demo-intro > p,
.case-next p {
  font-size: var(--type-body, 1rem);
  line-height: 1.65;
}

.work-section .section-side-note,
.work-section .preview-caption p,
.case-demo-note,
.case-evidence-figure figcaption,
.case-section .decision-outcome,
.evidence-explorer .evidence-experience > strong,
.demo-scenario-picker > p {
  font-size: var(--type-small, .875rem);
  line-height: 1.6;
}

.work-section .work-label,
.evidence-explorer .work-label,
.work-section .sample-skill,
.work-section .project-contribution > span,
.work-section .tag-list > span,
.work-section .preview-caption > span,
.case-section .work-label,
.case-chapter .case-section .eyebrow,
.case-meta dt,
.case-section .decision-card > span,
.case-tour > article > span {
  max-width: 100%;
  font-size: var(--type-label, .75rem);
  line-height: 1.5;
  letter-spacing: .06em;
  white-space: normal;
}

.work-section .project-actions :is(.button, .text-link),
.evidence-explorer .evidence-context :is(.button, .text-link),
.evidence-explorer .reasoning-example .text-link,
.case-next .button,
.guided-scenarios a {
  min-height: 44px;
  max-width: 100%;
  font-size: var(--type-control, .9375rem);
  line-height: 1.5;
  white-space: normal;
}

.work-section :is(.flagship-copy, .sample-card),
.evidence-explorer .evidence-context,
.case-chapters :is(.case-overview-copy, .decision-card, .case-learnings > div) {
  min-width: 0;
  overflow-wrap: break-word;
}

.work-section .preview-topbar {
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: var(--type-label, .75rem);
  line-height: 1.5;
  letter-spacing: .04em;
}
.work-section .preview-demo-label { font-size: var(--type-label, .75rem); }
.work-section .project-process { flex-wrap: wrap; justify-content: flex-start; gap: 12px 18px; }
.work-section .project-process span { font-size: var(--type-small, .875rem); line-height: 1.5; }
.work-section .project-process b { font-size: var(--type-label, .75rem); }
.work-section .tag-list { gap: 8px; }

.evidence-explorer .evidence-tabs button {
  flex: 0 0 auto;
  min-height: 48px;
  max-width: 15rem;
  padding: 13px 16px;
  font-size: var(--type-control, .9375rem);
  line-height: 1.5;
  white-space: normal;
}
.evidence-explorer .qa-example label { min-height: 44px; gap: 12px; padding-block: 15px; }
.evidence-explorer .qa-example label > span { min-width: 0; }
.evidence-explorer .qa-example input { width: 20px; height: 20px; }
.evidence-explorer .qa-example label strong,
.evidence-explorer .reasoning-example strong {
  font-size: var(--type-body, 1rem);
  line-height: 1.5;
}
.evidence-explorer .qa-example label small,
.evidence-explorer .qa-example-footer small {
  font-size: var(--type-small, .875rem);
  line-height: 1.6;
}
.evidence-explorer .qa-example-top,
.evidence-explorer .qa-example-top > span,
.evidence-explorer .qa-example-top output,
.evidence-explorer .reasoning-example b,
.evidence-explorer .review-example span {
  font-size: var(--type-label, .75rem);
  line-height: 1.5;
}
.evidence-explorer .qa-example-top,
.evidence-explorer .qa-example-footer { flex-wrap: wrap; gap: 12px; }
.evidence-explorer .qa-example-footer button {
  min-height: 44px;
  padding: 10px 16px;
  font-size: var(--type-control, .9375rem);
  line-height: 1.5;
}
.case-footnote { font-size: var(--type-small, .875rem) !important; line-height: 1.65; }

/* Search keeps the existing dialog sizing, hidden states, and result scroller. */
.portfolio-search-dialog {
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-body, 1rem);
  line-height: 1.65;
}
.portfolio-search-dialog .portfolio-search-header p,
.portfolio-search-dialog .portfolio-search-status {
  font-size: var(--type-small, .875rem);
  line-height: 1.5;
}
.portfolio-search-dialog .portfolio-search-input {
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-body, 1rem);
  line-height: 1.5;
  min-height: 52px;
}
.portfolio-search-dialog .portfolio-search-result { min-height: 80px; padding-block: 14px; }
.portfolio-search-dialog .portfolio-search-result-title,
.portfolio-search-dialog .portfolio-search-description,
.portfolio-search-dialog .portfolio-search-empty p {
  font-size: var(--type-body, 1rem);
  line-height: 1.55;
}
.portfolio-search-dialog .portfolio-search-category {
  max-width: 100%;
  font-size: var(--type-label, .75rem);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.portfolio-search-dialog .portfolio-search-key-help,
.portfolio-search-dialog .portfolio-search-key-help kbd {
  font-size: var(--type-label, .75rem);
  line-height: 1.5;
}
.portfolio-search-dialog .portfolio-search-footer { flex-wrap: wrap; gap: 8px 16px; }
.portfolio-search-dialog .portfolio-search-clear {
  min-height: 44px;
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-control, .9375rem);
  line-height: 1.5;
}

/* Demo specificity must exceed its button/input font: inherit reset. */
.demo-root {
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-body, 1rem);
  line-height: 1.65;
}
.demo-root .demo-intro,
.demo-root .demo-explanation > p:not(.demo-mini-label),
.demo-root .demo-empty p,
.demo-root .demo-detail-empty p,
.demo-root .demo-rules-content p,
.demo-root .demo-rules-content li {
  font-size: var(--type-body, 1rem);
  line-height: 1.65;
}
.demo-root .demo-guide li,
.demo-root .demo-summary-card > span,
.demo-root .demo-results-bar > p,
.demo-root .demo-table-note,
.demo-root .demo-detail-channel,
.demo-root .demo-review-state,
.demo-root .demo-selection-note,
.demo-root .demo-simulator > p,
.demo-root .demo-review-disclaimer,
.demo-root .demo-announcement {
  font-size: var(--type-small, .875rem);
  line-height: 1.6;
}
.demo-root .demo-kicker,
.demo-root .demo-subtitle,
.demo-root .demo-guide li > span,
.demo-root .demo-summary-card > small,
.demo-root .demo-mini-label,
.demo-root .demo-detail-metrics dt,
.demo-root .demo-delivery-progress > div,
.demo-root .demo-simulator-label > output {
  font-size: var(--type-label, .75rem);
  line-height: 1.5;
}
.demo-root .demo-filter legend,
.demo-root .demo-search-field > label,
.demo-root .demo-simulator-label {
  font-size: var(--type-small, .875rem);
  line-height: 1.5;
}
.demo-root .demo-button,
.demo-root .demo-text-button,
.demo-root .demo-campaign-select,
.demo-root .demo-filter-buttons button,
.demo-root .demo-rules summary {
  min-height: 44px;
  max-width: 100%;
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-control, .9375rem);
  font-weight: 600;
  line-height: 1.5;
  white-space: normal;
}
.demo-root .demo-campaign-select { max-width: 16rem; }
.demo-root .demo-filter-buttons { flex-wrap: wrap; }
.demo-root .demo-filter-buttons button { min-width: 0; gap: 6px; padding: 9px 10px; }
.demo-root .demo-filter-buttons button > [data-i18n] {
  min-width: 0;
  font: inherit;
  opacity: 1;
}
.demo-root .demo-filter-buttons button > span:not([data-i18n]) {
  flex: 0 0 auto;
  font-size: var(--type-label, .75rem);
  line-height: 1.5;
  opacity: .85;
}
.demo-root .demo-search-field > input,
.demo-root .demo-simulator input {
  min-height: 44px;
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-body, 1rem);
  line-height: 1.5;
}
.demo-root .demo-toolbar { flex-wrap: wrap; gap: 18px 24px; }
.demo-root .demo-filter { flex: 1 1 27rem; }
.demo-root .demo-search-field { flex: 1 1 17rem; min-width: 0; max-width: 100%; }
.demo-root .demo-utility-actions { flex-wrap: wrap; gap: 8px 20px; }
.demo-root .demo-review-actions { gap: 10px; }
.demo-root .demo-button { padding: 11px 15px; }
.demo-root .demo-simulator-label { flex-wrap: wrap; gap: 8px 14px; }
.demo-root .demo-detail-metrics dd { overflow-wrap: anywhere; }
.demo-root .demo-table { min-width: 46rem; }
.demo-root .demo-table th,
.demo-root .demo-table td,
.demo-root .demo-cell-delivery strong,
.demo-root .demo-cell-pacing {
  font-size: var(--type-small, .875rem);
  line-height: 1.5;
}
.demo-root .demo-table td { padding-block: 18px; }
.demo-root .demo-channel,
.demo-root .demo-cell-delivery small,
.demo-root .demo-cell-pacing small,
.demo-root .demo-status,
.demo-root .demo-review-indicator {
  font-size: var(--type-label, .75rem);
  line-height: 1.5;
}
.demo-root .demo-formula code { font-size: var(--type-small, .875rem); line-height: 1.65; }

@media (max-width: 860px) {
  .evidence-explorer .evidence-panel { gap: 24px; }
  .case-chapters .decision-grid { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 700px) {
  .demo-root .demo-filter,
  .demo-root .demo-search-field { flex-basis: auto; }
  .demo-root .demo-filter-buttons button { padding: 9px 6px; gap: 4px; flex-wrap: wrap; }
  .demo-root .demo-summary-card { gap: 12px; padding: 18px; }
  .demo-root .demo-summary-card > span,
  .demo-root .demo-summary-card > small { overflow-wrap: break-word; }
  .demo-root .demo-detail-shell { padding: 22px; }
}

@media (max-width: 620px) {
  .evidence-explorer .evidence-tabs button { padding-inline: 13px; }
  .evidence-explorer .qa-example-footer { align-items: flex-start; }
  .work-section .preview-topbar { padding: 12px; }
  .work-section .project-actions { gap: 12px 18px; }
  .portfolio-search-dialog .portfolio-search-result { padding-block: 13px; }
}