/* Native EyouCMS components in the DisplayCasePro editorial system. */
.masthead-account { display: flex; align-items: center; gap: var(--space-xs); }
.primary-nav a.active { color: var(--color-accent); }
.primary-nav a.active::after { content: ''; height: 2px; background: var(--color-accent); position: absolute; bottom: 0; inset-inline: 0; }
.native-save { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; }
.save-button.native-save { width: auto; min-width: 44px; padding: var(--space-xs); height: 44px; font-size: var(--text-xs); background: var(--color-paper); color: var(--color-ink); }
.native-save.on { color: var(--color-accent); }
.category-links { display: flex; flex-direction: column; gap: var(--space-sm); padding-bottom: var(--space-lg); }
.category-links a { min-height: 36px; display: flex; align-items: center; font-size: var(--text-sm); }
.screening-group { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); }
.screening-group h3 { font-family: var(--font-body); font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.screening-group a { display: block; padding-block: var(--space-xs); font-size: var(--text-sm); }
.screening-group a.active { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }
.native-sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); }
.native-sort a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.native-sort a.ey_active { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }
.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-xl); }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); list-style: none; padding: 0; }
.pagination li, .pagination a, .pagination span { min-width: 38px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-sm); }
.pagination a { padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); }
.pagination .active a, .pagination .active, .pagination strong { color: var(--color-accent); }
.without-toc { grid-template-columns: minmax(0, 850px); justify-content: center; }
.prose img { max-width: 100%; height: auto; }
.prose ul, .prose ol { padding-inline-start: 1.5rem; margin-block: var(--space-md); }
.prose figure { margin-block: var(--space-lg); }
.article-hero figcaption { padding-block: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.member-switch { margin-top: var(--space-lg); }
.captcha-row, .code-row { display: flex; align-items: center; gap: var(--space-sm); }
.captcha-row input, .code-row input { min-width: 0; flex: 1; }
.captcha-refresh { padding: 0; flex: 0 0 auto; background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); min-width: 120px; min-height: 44px; }
.captcha-refresh img { width: 120px; height: 40px; object-fit: contain; }
.auth-form > .field-help { margin-bottom: var(--space-md); }
.dcp-comments-host { min-width: 0; }
.dcp-comments-host button, .dcp-comments-host input, .dcp-comments-host textarea { font: inherit; max-width: 100%; }
.dcp-comments-host textarea { width: 100%; background: var(--color-paper); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule-strong); padding: var(--space-md); }
.submission-layout select[name='typeid'] { width: 100% !important; max-width: 100%; min-height: 48px; }
.photo-picker { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-md); }
.photo-picker-control { position: relative; display: inline-flex; flex: 0 0 auto; }
.dropzone .photo-picker-control .photo-picker-native { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; z-index: 1; cursor: pointer; }
.photo-picker-control .button { pointer-events: none; }
.photo-picker-native:focus-visible + .button { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.photo-picker-native:disabled { cursor: wait; }
.photo-picker-native:disabled + .button { opacity: .6; }
.photo-picker-summary { font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.account-main .editorial-note { margin-top: var(--space-xl); }
.account-main .editorial-note p { margin-block: var(--space-sm); }
.feature-copy > .feature-secondary { margin-top: var(--space-xl); }
@media(max-width: 42rem) {
  .category-links { flex-direction: row; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
  .category-links a { min-height: 44px; }
  .code-row { flex-wrap: wrap; }
  .code-row input { flex-basis: 100%; }
  .code-row .button { width: 100%; }
  .article-meta .page-actions { flex-wrap: wrap; }
}
@media(max-width:23rem) { .masthead-account > .icon-button { display: none; } }

/* Curated native Special-model topics reuse the existing editorial typography. */
.topic-directory { padding-top: 0; }
.topic-directory .story-title a { display: block; }
.topic-breadcrumb { margin-top: var(--space-xl); }
.topic-breadcrumb + .page-head { padding-top: var(--space-lg); }
.topic-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; margin-bottom: var(--space-2xl); }
.topic-intro { max-width: 42rem; }
.topic-intro > :first-child { margin-top: 0; }
.topic-cover { margin: 0; }
.topic-cover img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.topic-cover figcaption { padding-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.topic-index { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-xl); padding-block: var(--space-lg); border-block: var(--rule-hair) solid var(--color-rule); }
.topic-index > .label { flex-basis: 100%; }
.topic-index a { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; max-width: 100%; font-size: var(--text-sm); }
.topic-index svg { width: 18px; height: 18px; flex-shrink: 0; }
.topic-section h2 { scroll-margin-top: var(--space-xl); }
.topic-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
@media(max-width: 48rem) {
  .topic-overview { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .topic-cover { order: -1; }
}