/* Reserve space for the question controls; longer or zoomed questions can scroll between them. */
html dialog.mg-guide-dialog[open][data-phase=question] {
    display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden;
}
html .mg-guide-dialog[data-phase=question] .mg-guide-head { position:static; min-height:52px; padding:4px clamp(14px,4vw,54px); }
html .mg-guide-dialog[data-phase=question] .mg-guide-body {
    box-sizing:border-box; width:100%; max-width:none; min-height:0; margin:0;
    display:flex; flex-direction:column; overflow:auto; padding:clamp(8px,2dvh,18px) clamp(16px,4vw,48px);
}
html .mg-guide-dialog[data-phase=question] .mg-question-stage { flex:none; width:100%; max-width:750px; min-height:0; margin:auto; }
html .mg-guide-dialog[data-phase=question] .mg-question-stage h2 { font-size:clamp(23px,2.5vw,34px); line-height:1.15; margin:0 0 clamp(12px,2dvh,18px); }
html .mg-guide-dialog[data-phase=question] .mg-visual-choices { gap:clamp(8px,1.4dvh,12px); }
html .mg-guide-dialog[data-phase=question] .mg-visual-choice { min-height:46px; border-radius:14px; }
html .mg-guide-dialog[data-phase=question] :is(.mg-choices-cards,.mg-choices-panels,.mg-choices-tiles) .has-art {
    padding:clamp(8px,1.5dvh,14px) 12px; gap:5px; align-content:center;
}
html .mg-guide-dialog[data-phase=question] .mg-visual-choice .mg-option-art.mg-3d-art {
    display:block; max-width:100%; height:clamp(54px,12dvh,112px); object-fit:contain; margin-inline:auto;
}
html .mg-guide-dialog[data-phase=question] .mg-choices-rows .mg-option-art.mg-3d-art,
html .mg-guide-dialog[data-phase=question] .mg-choices-compact .mg-option-art.mg-3d-art { height:clamp(36px,6dvh,54px); }
html .mg-guide-dialog[data-phase=question] .mg-choices-rows .mg-visual-choice { padding:6px 14px; grid-template-columns:minmax(46px,64px) minmax(0,1fr) 22px; gap:12px; }
html .mg-guide-dialog[data-phase=question] .mg-visual-choice.is-text-choice { grid-template-columns:minmax(0,1fr) 22px; padding:11px 15px; }
html .mg-guide-dialog[data-phase=question] .mg-choice-copy strong { font-size:clamp(15px,1.2vw,17px); line-height:1.28; }
html .mg-guide-dialog[data-phase=question] .practical-hint { margin:12px 0 0; font-size:13px; line-height:1.45; }
html .mg-guide-dialog[data-phase=question] .mg-guide-foot { position:static; min-height:0; padding:6px clamp(16px,4vw,54px) max(8px,env(safe-area-inset-bottom)); }
html .mg-guide-dialog[data-phase=question] .mg-guide-foot button { min-height:44px; }
html .mg-guide-dialog[data-phase=question] .mg-guide-foot .primary { padding:9px 19px; min-width:125px; }
@media(max-width:520px){
 html .mg-guide-dialog[data-phase=question] .mg-choices-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
 html .mg-guide-dialog[data-phase=question] .mg-choices-cards .has-art { grid-template-columns:1fr; grid-template-areas:'art' 'copy'; text-align:center; }
 html .mg-guide-dialog[data-phase=question] .mg-choices-cards .has-art .mg-choice-radio { position:absolute; top:8px; right:8px; width:17px; min-width:17px; height:17px; }
 html .mg-guide-dialog[data-phase=question] .mg-choices-cards .mg-option-art.mg-3d-art { height:clamp(48px,10dvh,75px); }
}
@media(max-height:490px) and (min-width:521px) {
 html .mg-guide-dialog[data-phase=question] .mg-choices-cards .has-art { grid-template-columns:58px minmax(0,1fr) 20px; grid-template-areas:'art copy control'; gap:10px; padding:6px 12px; text-align:left; }
 html .mg-guide-dialog[data-phase=question] .mg-choices-cards .has-art .mg-choice-radio { position:static; grid-area:control; }
}
.reader-vote { min-width:0; }
.reader-vote > strong,.reader-editor legend { font-weight:650; font-size:15px; }
.reader-stars { display:flex; gap:1px; align-items:center; }
.reader-stars a,.reader-form .reader-stars label { position:relative; box-sizing:border-box; display:grid; place-items:center; margin:0; padding:0; width:44px; height:44px; color:var(--pink-ink,var(--pink)); cursor:pointer; border-radius:7px; }
.reader-stars svg { display:block; fill:transparent; }
.reader-stars :is(a,label).on svg,.reader-stars label:has(:checked) svg,.reader-stars label:has(~ label :checked) svg { fill:currentColor; }
.reader-stars:has(:is(a,label):hover) svg { fill:transparent; }
.reader-stars :is(a,label):hover svg,.reader-stars :is(a,label):has(~ :is(a,label):hover) svg { fill:currentColor; }
.reader-stars :is(a:focus-visible,label:has(:focus-visible)) { outline:2px solid currentColor; outline-offset:-2px; }
.reader-stars label input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.reader-vote-next a { color:var(--pink-ink,var(--pink)); font-weight:600; text-decoration:underline; }
.reader-editor { display:grid; max-width:34rem; gap:12px; margin:12px 0; }
.reader-editor fieldset { padding:0; margin:0; border:0; }
.reader-editor details summary { padding:6px 0; cursor:pointer; font-weight:600; }
.reader-editor details label { display:grid; gap:4px; margin:8px 0; }
.reader-editor details :is(input,textarea) { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:6px; padding:9px; background:var(--surface); color:var(--text); font:inherit; }
.reader-editor .reader-honest { display:flex; align-items:center; gap:8px; }
.reader-editor button { justify-self:start; min-height:44px; }
.reader-editor [data-reader-notice]:empty { display:none; }