/* Shared type roles. Keep brand/display type distinct from reading and controls. */
:root {
  --hmd-section-size: clamp(28px, 2.8vw, 36px);
  --hmd-question-size: clamp(24px, 2.5vw, 32px);
  --hmd-page-size: clamp(32px, 3.6vw, 44px);
  --hmd-body-size: 14px;
  --hmd-control-size: 13px;
  --hmd-note-size: 12px;
}
.question-round .round-title,
.questions .question-hub .section-head h2,
#most-answered .section-head h2,
.contribute h2 {
  font-size: var(--hmd-section-size);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.04em;
  text-wrap: pretty;
}
.question-round .round-question,
.questions .question-copy h3,
#weekly-card .question-copy h3 {
  font-size: var(--hmd-question-size);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.035em;
}
.question-round .round-question { max-width: 34ch; }
.page-content .page-heading h1,
.page-content .random-journey > h1 {
  font-size: var(--hmd-page-size);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.04em;
}
.question-round .round-intro,
.question-round .round-context,
.questions .question-copy .context,
#featured-context.featured-context,
#most-answered .top-intro,
.contribute p,
.random-journey > .random-intro {
  font-size: var(--hmd-body-size);
  line-height: 1.7;
  letter-spacing: 0;
}
.question-round .round-card-top > span,
.questions .card .category,
.questions .card-top .status,
.question-hub .sample-label,
#most-answered .section-note {
  font-size: var(--hmd-note-size);
  line-height: 1.5;
  letter-spacing: .01em;
}
.question-round .round-secondary :is(button,a),
.question-round .round-resume,
.featured-round-link,
#featured-links .text-button,
.card .card-footer .text-button,
.question-hub .filters button,
.question-hub .question-filter summary,
.leaderboard-switch button,
.contribute > button {
  font-size: var(--hmd-control-size);
  font-weight: 400;
  line-height: 1.5;
}
#dialog {
  --modal-title: var(--hmd-section-size);
  --modal-body: var(--hmd-body-size);
  --modal-note: var(--hmd-note-size);
}
.questions .question-hub .section-head { align-items: baseline; }
.questions .question-hub .section-head h2 { margin: 0; max-width: none; }
.question-hub .filters button { min-height: 38px; padding: 9px 16px; }
.question-hub .question-tools { gap: 12px; }
.question-hub .question-filter summary,
.question-hub .search { min-height: 44px; }

/* The topic picker uses the same paper, plum and disclosure language as Åpenhet. */
.question-round .round-topic-field {
  display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%;
  color: var(--round-muted); font-size: var(--hmd-note-size); line-height: 1.5;
}
.question-round .round-topic-menu { position: relative; min-width: 0; z-index: 20; }
.question-round #round-topic {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  width: auto; min-width: 204px; min-height: 46px; max-width: 100%;
  padding: 11px 17px; margin: 0; list-style: none;
  border: 1px solid var(--round-line); border-radius: 999px;
  background: #fffdfa; color: var(--round-plum);
  font: 400 var(--hmd-control-size)/1.5 Arial, Helvetica, sans-serif;
  cursor: pointer; transition: background .18s, border-color .18s, box-shadow .18s;
}
.question-round #round-topic::-webkit-details-marker { display: none; }
.question-round #round-topic::marker { content: ''; }
.question-round #round-topic-value { min-width: 0; overflow-wrap: anywhere; }
.question-round #round-topic > svg {
  width: 14px; height: 14px; flex: 0 0 14px;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .2s;
}
.question-round .round-topic-menu[open] #round-topic {
  border-color: #a899af; background: #f3eef5; box-shadow: 0 0 0 3px #49354f08;
}
.question-round .round-topic-menu[open] #round-topic > svg { transform: rotate(180deg); }
.question-round #round-topic[aria-disabled=true] { opacity: .5; cursor: wait; }
.question-round .round-topic-panel {
  position: absolute; z-index: 20; left: 0; top: calc(100% + 9px);
  width: 270px; max-width: calc(100vw - 82px); max-height: min(366px, 55dvh);
  padding: 7px; border: 1px solid #ded7e1; border-radius: 16px;
  background: #f7f5f2; box-shadow: 0 10px 32px #28232b14;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: #c6bcca transparent;
}
.question-round .round-topic-menu:not([open]) .round-topic-panel { display: none; }
.question-round .round-topic-panel > button {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 44px; padding: 11px 13px; margin: 0;
  border: 0; border-radius: 9px; background: transparent; color: #49354f;
  font: 400 var(--hmd-control-size)/1.5 Arial, Helvetica, sans-serif;
  text-align: left; cursor: pointer;
}
.question-round .round-topic-panel > button[aria-checked=true] { background: #e9e2ec; }
.question-round .round-topic-panel > button > svg {
  width: 16px; height: 16px; flex: 0 0 16px; opacity: 0;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.question-round .round-topic-panel > button[aria-checked=true] > svg { opacity: 1; }
.question-round .round-topic-panel > button:focus-visible { outline: 2px solid #85748c; outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .question-round #round-topic:hover { border-color: #a899af; background: #f3eef5; }
  .question-round .round-topic-panel > button:hover { background: #e9e2ec; }
}
@media (max-width: 700px) {
  :root {
    --hmd-section-size: 28px;
    --hmd-question-size: clamp(23px, 6.1vw, 28px);
    --hmd-page-size: 32px;
    --hmd-body-size: 14px;
    --hmd-control-size: 12px;
    --hmd-note-size: 11px;
  }
  .question-round .round-question { max-width: none; }
  .question-round #round-topic { min-width: 180px; max-width: 100%; gap: 18px; }
  .question-round .round-topic-field { gap: 10px; }
  .question-round .round-topic-panel > button { font-size: 14px; min-height: 46px; }
  .question-hub .filters button { padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .question-round #round-topic, .question-round #round-topic > svg { transition: none; }
}

/* A quiet directory of existing pages and dialogs. */
footer.site-footer{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,1.5fr);gap:56px 64px;text-align:left;margin-top:48px;padding:64px 0 28px;border-top:1px solid #49354f24;color:#49354f}
.site-footer .footer-identity{min-width:0}
.site-footer .footer-brand{display:inline-flex;align-items:center;gap:12px;font-size:22px;line-height:1.2;letter-spacing:-.055em;color:#49354f}
.site-footer .footer-brand img{display:block;object-fit:contain}
.site-footer .footer-identity>p{margin:16px 0 0;font-size:13px;line-height:1.6;color:#706775}
.site-footer .footer-navigation{display:grid;align-items:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;min-width:0}
.site-footer .footer-column{margin:0;padding:0;border:0;min-width:0}
.site-footer .footer-column h2{margin:0 0 20px;font:400 11px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#49354f}
.site-footer .footer-column-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.site-footer .footer-column-links :is(a,button){display:block;width:auto;max-width:100%;min-height:40px;margin:0;padding:9px 0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#706775;font:400 13px/1.6 Arial,Helvetica,sans-serif;letter-spacing:0;text-align:left;text-decoration:none;white-space:normal;cursor:pointer}
.site-footer .footer-column-links :is(a,button):hover{color:#49354f;text-decoration:underline;text-underline-offset:4px}
.site-footer :is(a,button):focus-visible{outline:2px solid #85748c;outline-offset:5px}
footer.site-footer .footer-small{grid-column:1/-1;width:100%;max-width:none;margin:0;padding:22px 0 0;border-top:1px solid #49354f18;text-align:left;font-size:11px;line-height:1.7;color:#706775}
@media(max-width:900px){footer.site-footer{grid-template-columns:1fr;gap:36px;padding-top:44px}.site-footer .footer-navigation{gap:24px}}
@media(max-width:700px){footer.site-footer{margin-top:28px;padding:36px 0 calc(24px + env(safe-area-inset-bottom,0px));gap:28px}.site-footer .footer-navigation{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.site-footer .footer-column:last-child{grid-column:1/-1}.site-footer .footer-column h2{margin-bottom:12px}.site-footer .footer-column-links :is(a,button){min-height:44px;font-size:13px}.site-footer .footer-brand{font-size:22px}.site-footer .footer-identity>p{margin-top:12px}}

/* Strong headings and a compact, visible mobile directory. */
.site-footer .footer-column h2{font-weight:700}
@media(max-width:700px){
 footer.site-footer{gap:28px}
 .site-footer .footer-navigation{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
 .site-footer .footer-column:first-child{grid-row:1 / span 2}
 .site-footer .footer-column:last-child{grid-column:2}
 .site-footer .footer-column h2{font-size:11px;letter-spacing:.04em;margin-bottom:12px}
 .site-footer .footer-column-links{gap:0}
 .site-footer .footer-column-links :is(a,button){min-height:40px;padding:8px 0;font-size:13px;line-height:1.6}
 .site-footer .footer-identity>p{margin-top:8px}
}
/* Reserve the same reading and result space in every swipe card. Long copy remains scrollable. */
.question-round .round-card{height:520px;min-height:520px}
.question-round .round-card-top{flex:0 0 44px}
.question-round .round-copy{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#c6bcca transparent;margin-bottom:24px;padding-right:6px}
.question-round .round-copy:focus-visible{outline:2px solid #85748c;outline-offset:3px}
.question-round .round-copy .round-question{min-height:0}
.question-round .round-copy .round-context{min-height:0;margin-bottom:0}
.question-round .round-choices{flex:0 0 auto;margin:0}
.question-round .round-feedback{flex:0 0 96px;min-height:96px;overflow-y:auto}
.question-round .round-secondary{flex:0 0 48px;min-height:48px}
@media(max-width:700px){
 .question-round .round-card{height:540px;min-height:540px}
 .question-round .round-copy{margin-bottom:20px}
 .question-round .round-feedback{flex-basis:96px;min-height:96px}
}