/* Consumer reading and navigation. Loaded after the existing visual system.
   The Norway map, result artwork and their animation remain unchanged. */

/* Useful copy stays comfortable to read alongside the display headings. */
#featured-context.featured-context,
.questions .question-copy .context,
#weekly-card .question-copy .context,
.standalone-question .question-copy .context,
#most-answered .top-intro,
.contribute p,
.random-journey > .random-intro {
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0;
}
#featured-context.featured-context { max-width: 48ch; }
.featured-copy .featured-meta,
.featured-copy .featured-purpose-link,
.questions .card .category,
.questions .card-top .status,
.card .card-footer .card-bottom > span,
.card .card-answer-space > .method-note,
.card .card-result-slot.result-suppressed .method-note,
.question-hub .sample-label,
#question-page-count,
#most-answered .section-note,
#most-answered .method-note,
#most-answered .top-list small,
.random-journey > .random-progress,
footer.site-footer .footer-small {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0;
}
.preview { padding: 8px 20px; }
.preview span { margin-left: 0; font-size: 12px; line-height: 1.5; letter-spacing: 0; }
.featured-copy #featured-eyebrow { font-size: 11px; letter-spacing: .1em; }
.identity-header .perspective #perspective-text { display: block; font-size: 16px; line-height: 1.55; white-space: nowrap; }
.identity-header .perspective { width: min(780px, 100%); }

/* Equal answer buttons; secondary actions stay readable and easy to target. */
.featured-actions .vote,
.card .choices button,
.card .choices button:last-child { font-size: 16px; min-height: 48px; line-height: 1.4; }
.featured-copy #featured-links .text-button,
.featured-round-link,
.featured-purpose-link,
.card .card-footer .text-button,
.card .card-links .question-withdraw,
.question-pagination .outline,
.leaderboard-switch button,
.contribute > button,
#weekly-controls > .text-button,
#weekly-controls > .primary,
.weekly-navigation button,
.page-content .back-link {
  font-size: 14px;
  line-height: 1.5;
  min-height: 44px;
}
.card .question-menu-panel :is(a, button) { font-size: 14px; line-height: 1.5; }
.card .card-footer .card-links { gap: 6px 24px; }
.card .card-footer .card-bottom { min-width: 0; }
.card .card-footer .card-bottom > span { overflow-wrap: anywhere; }
#most-answered .top-count { min-width: 0; }
#most-answered .top-list a { font-size: 17px; line-height: 1.45; }

/* A single category row with a quiet indicator of the scroll position. */
.questions .question-hub .toolbar { gap: 16px; }
.question-hub .filters {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 4px;
  scrollbar-width: none;
}
.question-hub .filters button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}
.question-hub .filters button:focus-visible { outline-offset: 2px; }
.question-hub .filters::-webkit-scrollbar { display: none; }
.category-scroll-indicator {
  position: relative;
  flex: none;
  width: 100%;
  height: 3px;
  margin: -8px 0 0;
  overflow: hidden;
  border-radius: 999px;
  background: #ded7e1;
  pointer-events: none;
}
.category-scroll-indicator > .category-scroll-thumb {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--category-thumb-width, 24%);
  height: 100%;
  border-radius: inherit;
  background: #85748c;
  transform: translateX(var(--category-thumb-offset, 0px));
}
.question-hub .question-tools {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin-left: 0;
}
.question-sort-label { margin: 0 auto 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.question-hub .question-filter { flex: 0 0 auto; }
.question-hub .question-filter summary { min-height: 48px; font-size: 14px; line-height: 1.5; }
.question-hub .search {
  flex: 0 1 360px;
  width: min(360px, 100%);
  max-width: none;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 10px 16px;
}
.question-hub .search input { width: 100%; min-width: 0; font-size: 16px; line-height: 1.5; }
.question-hub .search:focus-within { border-color: #85748c; box-shadow: 0 0 0 3px #49354f0b; }
.question-filter-panel { max-height: min(560px, 75dvh); overflow-y: auto; overscroll-behavior: contain; }
.question-filter-panel legend { font-size: 12px; line-height: 1.5; letter-spacing: .04em; }
.question-filter-panel label { min-height: 44px; font-size: 14px; line-height: 1.5; }
.question-filter-panel p { font-size: 13px; line-height: 1.6; }
.question-filter-panel > button { min-height: 44px; font-size: 14px; }

/* The five primary destinations stay large enough to read on every screen. */
.secondary-nav { display: flex; flex-wrap: nowrap; }
.secondary-nav > a:not(.nav-info-desktop),
.secondary-nav > button:not(.nav-info-desktop),
.secondary-nav .nav-info-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}
.secondary-nav .nav-info-panel :is(a, button) { font-size: 14px; line-height: 1.5; }
.site-footer .footer-column h2 { font-size: 12px; line-height: 1.5; }
.site-footer .footer-column-links :is(a, button) { font-size: 14px; min-height: 44px; line-height: 1.6; }

/* Account and short dialogs share the same readable scale as the page. */
#dialog { --modal-body: 16px; --modal-note: 13px; --modal-lead: 17px; }
#dialog :is(.primary, .outline, .text-button) { font-size: 14px; line-height: 1.5; }
#dialog .share-options button,
#dialog .share-format button,
#dialog .share-background button { font-size: 14px; }
#dialog > #close { width: 44px; height: 44px; }

@media (max-width: 1050px) {
  .question-hub .question-tools { flex-wrap: wrap; }
  .question-sort-label { flex: 1 1 160px; }
}
@media (max-width: 700px) {
  .preview { padding: 8px 16px; }
  .preview span { font-size: 11px; }
  .identity-header .perspective { width: 100%; margin-top: 12px; }
  .identity-header .perspective #perspective-text { font-size: clamp(12px, 3.5vw, 15px); line-height: 1.55; }
  .secondary-nav {
    justify-content: space-between;
    gap: clamp(4px, 1.1vw, 8px);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .secondary-nav > :is(a, button):not(.nav-info-desktop),
  .secondary-nav .nav-info-menu > summary { flex: 0 0 auto; width: auto; min-width: 0; font-size: clamp(12px, 3.2vw, 14px); }
  .secondary-nav .nav-info-panel { width: 190px; max-width: calc(100vw - 40px); }
  .question-hub .filters { flex: initial; }
  .question-hub .filters button { padding: 10px 14px; }
  .question-hub .question-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .question-sort-label { grid-column: 1 / -1; margin: 0; }
  .question-hub .search { width: 100%; margin: 0; padding: 10px 12px; }
  .question-hub .question-filter summary { padding: 10px 12px; }
  .question-filter-panel { width: 280px; max-width: calc(100vw - 76px); }
  #most-answered .top-list a { grid-template-columns: 24px minmax(0, 1fr) 82px; gap: 10px; font-size: 16px; }
  #most-answered .top-list a > .arrow { display: none; }
  #most-answered .top-count small { font-size: 12px; line-height: 1.4; }
  .site-footer .footer-column h2 { font-size: 12px; }
  .site-footer .footer-column-links :is(a, button) { min-height: 44px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .question-hub .search { transition: none; }
}

/* A question remains fully readable; longer backgrounds expand in the page. */
.question-round .round-card{height:auto;min-height:460px}
.question-round .round-card-top{flex:0 0 auto;margin-bottom:12px}
.question-round .round-copy{flex:1 0 auto;min-height:0;max-height:none;overflow:visible;overscroll-behavior:auto;margin-bottom:20px;padding-right:0}
.question-round .round-copy .round-question{min-height:0}
.question-round .round-copy .round-context{min-height:0;margin-bottom:0;font-size:16px;line-height:1.7}
.question-round .round-intro,.question-round .round-finish-copy,.question-round .round-empty p{font-size:16px;line-height:1.7}
.question-round .round-choices{flex:0 0 auto;margin:0}
.question-round .round-feedback{flex:0 0 auto;min-height:76px;max-height:none;overflow:visible;padding-top:14px}
.question-round .round-confirmation:empty{display:none}
.question-round .round-confirmation,.question-round .round-result-note,.question-round .round-result-labels,.question-round .round-footnote,.question-round #round-progress-text,.question-round .round-swipe-hint,.question-round .round-card-top>span,.question-round .round-topic-field,.question-round .round-summary small{font-size:13px;line-height:1.6}
.question-round .round-kicker{font-size:11px}
.question-round .round-secondary{flex:0 0 auto;min-height:48px;margin-top:8px}
.question-round .round-secondary :is(button,a),.question-round .round-navigation button,.question-round .round-resume,.question-round #round-topic,.question-round .round-finish-actions :is(button,a){font-size:14px}
.question-round .round-summary li{font-size:16px}
.question-round .round-swipe-hint{display:none}
@media(pointer:coarse){.question-round .round-swipe-hint:not([hidden]){display:inline}}
@media(max-width:700px){.question-round .round-card{height:auto;min-height:440px}.question-round .round-copy{margin-bottom:18px}.question-round .round-feedback{flex-basis:auto;min-height:76px}}

/* Short explanations remain in context. */
#dialog .result-help-dialog > h2 { margin: 12px 0 24px; font-size: var(--hmd-section-size); line-height: 1.2; letter-spacing: -.035em; }
#dialog .result-help-dialog :is(p, li) { font-size: 16px; line-height: 1.7; }
#dialog .result-help-dialog details { margin-top: 20px; border-top: 1px solid var(--line); }
#dialog .result-help-dialog summary { min-height: 44px; padding: 12px 0; font-size: 14px; line-height: 1.5; cursor: pointer; }