/* Main application layout; shared components live in app.css. */
#journey, #guide, #glossary-panel { margin-block: var(--space-6); }
#journey > a { display: inline-block; margin: var(--space-4); }
.worked-example { padding-inline-start: var(--space-6); }
.worked-example > li { padding-block: var(--space-3); }
.worked-example .result-card { max-width: var(--measure); }
#main section, #main article, #main form { min-width: 0; }
#main select { width: 100%; min-width: 0; }
#main pre, #main p, .site-footer { overflow-wrap: anywhere; }

#mode-choices button { display: grid; grid-template-columns: auto minmax(0, 1fr); text-align: start; width: 100%; gap: var(--space-2); }
#mode-choices button span { grid-column: 2; }
#mode-choices [aria-pressed="true"] { border-color: var(--mode-color); box-shadow: inset 0 0 0 1px var(--mode-color); }
#mode-choices { margin-block: var(--space-6); }
#history > section, #chat-region { margin-block: var(--space-6); }
#jobs .job { align-items: start; }
@media (max-width: 760px) {
  #main .workflow-grid { grid-template-columns: minmax(0, 1fr); }
  #journey > a { display: block; margin-inline: 0; }
}