/* Shared readability improvements retained from UX-T01. Landing styling is in landing.css. */
body { overflow-wrap: anywhere; }
.reading-note { color: var(--ink-soft); margin-block: 16px; }
.workspace-examples { margin-top: 36px; border-top: 1px solid var(--line); padding-block: 24px; }
a.home-demo, a.home-feature { text-decoration: none; }
.workspace-examples > summary { font-size: 1.2rem; font-weight: 600; padding-block: 10px; }
.workspace-examples .reference-column { max-width: 900px; margin-top: 24px; }
.workspace-examples .reference-stage { min-height: 420px; }
.welcome-grid { display: block; max-width: 860px; }
.project-starter { max-width: none; padding: 28px; }
.confirmation-heading > div { min-width: 0; }
.confirmation-heading h2, .confirmed-summary dd { overflow-wrap: anywhere; }
.saved-details dl > div { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; }
.saved-details dd { min-width: 0; overflow-wrap: anywhere; text-align: left; }
.prototype-note, .welcome-bottom { display: none; }
.welcome .welcome-heading { margin-bottom: 28px; }
.welcome h1 { font-size: clamp(2rem,4vw,3rem); letter-spacing: -.035em; }
.welcome-lede { max-width: 58ch; }
.app-layout { grid-template-columns: 260px minmax(0,1fr); }
.sidebar { overflow-y: auto; }
.workspace-header { flex-wrap: wrap; gap: 16px; height: auto; min-height: 84px; padding-block: 16px; }
.workspace-crumb { flex: 1; }
.sidebar-project, .local-status { flex-wrap: wrap; }
.mentor-note, .sidebar-dense-board, .workspace-status, .crumb-mark { display: none; }
.story-progress { display: flex; flex-wrap: wrap; gap: 4px; }
.story-progress button { flex: 0 0 44px; min-width: 44px; min-height: 44px; }
.story-navigation { position: static; flex-wrap: wrap; }
button, input, select, textarea, summary { font-family: var(--sans); }
button, select, input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), summary { min-height: 44px; }
textarea, select { font-size: 1rem; }
button, a, summary, label { overflow-wrap: anywhere; }
:focus-visible { scroll-margin-block: 24px; }

@media (max-width: 1000px) {
 .app-layout { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; padding: 20px; }
 .sidebar-project, .sidebar-bottom, .nav-label { display: none; }
 .journey ol { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; } .journey li { flex: 1 1 140px; } .journey button { height: 100%; }
}
@media (max-width: 720px) {
 .workspace-header { align-items: flex-start; } .workspace-crumb, .header-actions { flex-basis: 100%; }
 .header-help > div { position: static; width: 100%; } .project-circuit-strip { display: flex; flex-direction: column; gap: 12px; }
 .project-circuit-strip span { width: 100%; min-width: 0; } .project-circuit-strip i { display: none; }
 .workspace-examples .reference-stage { min-height: 340px; } .story-heading { flex-wrap: wrap; }
}