/* Responsive comparison layout; original stacked styles remain in style.css. */
main{max-width:1000px}
header,.intro-copy,#setup,#example-analysis,.contact-details,footer{max-width:776px;margin-left:auto;margin-right:auto}
.results-workspace{margin:28px 0}
.result-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.result-panels>.branch{min-width:0;margin:0;padding:18px;border:1px solid var(--line);border-radius:10px;height:72vh;height:72dvh;min-height:360px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;overflow-wrap:anywhere}
.result-panels>.branch>button,.result-panels>.branch>.collaborator-actions>button{max-width:100%;white-space:normal}
.result-panels iframe{max-width:100%}
.result-tabs{display:none}
@media(max-width:767px){
 main{max-width:820px}
 .result-tabs{display:flex;gap:6px;margin-bottom:15px}
 .result-tabs button{flex:1;min-width:0;padding:10px 6px;font-size:.8rem;line-height:1.4;background:#fff;color:var(--ink);border-color:var(--line)}
 .result-tabs button[aria-selected=true]{background:var(--accent);color:white;border-color:var(--accent)}
 .result-panels{display:block}
 .result-panels>.branch{height:68vh;height:68dvh;min-height:300px;padding:14px}
 .result-panels>.branch[data-mobile-active=false]{display:none}
}
@media(prefers-reduced-motion:no-preference){.result-tabs button{transition:background-color .15s ease}}

/* Measurements always remain a direct, two-column comparison. */
.comparison-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:480px){
 .comparison-cards{gap:8px}
 .comparison-card{padding:10px}
 .comparison-card h3{font-size:.8rem;line-height:1.4}
 .comparison-card p{font-size:.75rem;line-height:1.5}
 .comparison-card p:first-of-type{font-size:.9rem}
}
.comparison-card h3{overflow-wrap:anywhere}
.result-tabs button{overflow-wrap:anywhere}

/* Match both numbered start buttons on phones and tablets. */
@media(max-width:800px){
 #start-standard,#start-collaborate{
  display:block;width:100%;text-align:left;padding:11px 12px;
 }
}

/* Keep generation feedback visible above the scrollable answer. */
.branch [id^="status-"]:not(:empty){position:sticky;top:0;z-index:2;margin:12px 0;padding:10px;background:#fff;border:0;border-radius:0;color:#FF0000}

/* Keep measurements close to the result panels. */
.results-workspace{margin-bottom:0}
#comparison{margin-top:0;padding-top:15px}

/* Let full games and conversations determine the panel height. */
.result-panels>.branch{height:auto;min-height:0;overflow:visible;scrollbar-gutter:auto}
.result-panels iframe{max-height:none}

/* Equal-width reply choices with the alternative inside its button label. */
.send-row.collaborator-actions{flex-direction:column;align-items:stretch}
.send-row.collaborator-actions>button{width:100%;max-width:none;min-width:0;text-align:center;white-space:normal;overflow-wrap:anywhere}

/* Align the start controls with the full puzzle width on every screen. */
#start-standard,#start-collaborate{display:block;width:100%}
#conversation-standard>article:first-child,#conversation-collaborate>article:first-child{border-top:0}

/* Follow-up progress stays with the input, rather than sticking to the page top. */
#follow-form-collaborate #status-collaborate{position:static}

/* A single desktop headline; two deliberate lines on narrow screens. */
.main-headline{font-size:clamp(2rem,4.5vw,2.8rem);white-space:nowrap}
@media(max-width:767px){
 .main-headline{white-space:normal;font-size:clamp(1.8rem,7.5vw,2.8rem)}
 .main-headline span{display:block;white-space:nowrap}
}

/* Comparison tabs use orange to distinguish navigation from blue action buttons. */
.result-tabs button{color:#B85C00;background:#fff;border-color:#B85C00}
.result-tabs button[aria-selected=true]{color:#fff;background:#B85C00;border-color:#B85C00}
.result-tabs button .brand-plus{color:inherit}

/* Draw the plus at the adjacent font's capital-letter height. Keep its text for accessibility. */
.brand-plus{display:inline-block;position:relative;width:.72em;height:.72em;width:1cap;height:1cap;vertical-align:baseline;overflow:hidden;text-indent:-999em;margin-inline:.06em;margin-inline-end:calc(.06em + 1px)}
.brand-plus::before,.brand-plus::after{content:"";position:absolute;background:currentColor;border-radius:.025em}
.brand-plus::before{left:0;right:0;top:50%;height:.13em;transform:translateY(-50%)}
.brand-plus::after{top:0;bottom:0;left:50%;width:.13em;transform:translateX(-50%)}

/* Align wrapped instructions after the numbered circle. */
.prompt-heading{display:flex;align-items:flex-start;gap:.4em}
.prompt-heading .step-number{flex:0 0 1.75em;margin-right:0}
.prompt-heading>span:last-child{min-width:0}
#custom-prompt{border-width:2px}

#custom-prompt::placeholder{color:#8a8a8a;opacity:1;font-weight:700}