/* The first workshop session: a small guided trial, then the user's model. */
.workshop-home .workshop-rail, .workshop-home #intro-upload-wrap .quick-flow { display: none; }
.workshop-home #intro-upload-wrap { display: flex; flex-direction: column; }
.workshop-home .recipe-intro { order: 0; }
.workshop-home.has-workshop-model .workshop-start { display: none; }
.workshop-home .workshop-start { order: 1; }
.workshop-home #autosave-banner { order: 2; }
.workshop-home #upload-title { order: 3; }
.workshop-home #dropzone { order: 4; }
.workshop-home .preprocess-toggle { order: 5; }
.workshop-home .preprocess-note { order: 6; }
.workshop-home .adv-details { order: 7; }
.workshop-home .other-workflows, .workshop-home .reassure-strip { order: 8; }
.workshop-home .recipe-sub { line-height: 1.65; font-size: var(--text-sm); }
.workshop-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; position: sticky; top: 0; z-index: 30; background: var(--surface); padding: 6px 0; }
.workshop-progress button { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); font: inherit; font-size: var(--text-xs); padding: 9px 3px; cursor: pointer; }
.workshop-progress button[aria-current="step"] { color: var(--text); border-color: var(--accent2); background: rgba(45,212,191,.10); }
.workshop-progress button:focus-visible, .workshop-start button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.workshop-start, .workshop-trial { border: 1px solid rgba(45,212,191,.40); background: linear-gradient(150deg, rgba(45,212,191,.10), rgba(90,167,255,.05)); border-radius: 12px; padding: 18px; margin: 14px 0; }
.workshop-start h2, .workshop-trial h2 { font-size: var(--text-lg); margin-bottom: 6px; }
.workshop-start p, .workshop-trial p { font-size: var(--text-sm); color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.workshop-start small, .workshop-trial small { display: block; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; margin: 8px 0 12px; }
.workshop-start .btn, .workshop-trial .btn { width: 100%; min-height: 44px; justify-content: center; text-align: center; text-decoration: none; }
.workshop-trial[hidden], #trial-receive[hidden] { display: none; }
.trial-kicker { font-size: var(--text-xs); color: var(--accent2); margin-bottom: 8px; }
.trial-dimensions { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 12px; background: var(--surface3); border-radius: 8px; margin: 12px 0 18px; font-size: var(--text-sm); }
.trial-dimensions span { color: var(--muted); }
.trial-dimensions strong { text-align: right; }
.workshop-trial label { font-size: var(--text-sm); display: block; margin-bottom: 6px; }
.trial-feedback { color: var(--muted); font-size: var(--text-sm); line-height: 1.5; margin: 8px 0; min-height: 1.5em; }
.trial-feedback.is-error { color: var(--danger); }
#trial-receive { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 16px; }
.workshop-home #goal-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 16px; }
.workshop-home #goal-nav .goal-chip { width: 100%; min-height: 46px; padding: 10px 6px; white-space: normal; text-align: left; border-radius: 8px; font-size: var(--text-sm); }
.workshop-tools:not(.is-editing) .tool-panel, .workshop-tools:not(.is-editing) .toolbox-shell { display: none !important; }
.workshop-tools.is-editing #goal-nav, .workshop-tools.is-editing .optional-tools-title { display: none; }
.workshop-back { display: none; margin-bottom: 12px; }
.workshop-tools.is-editing .workshop-back { display: block; }
.workshop-home:not(.has-workshop-model) #workshop-model-info { display: none; }
#workshop-model-info { border: 1px solid var(--border); border-radius: 8px; margin: 12px 0; }
#workshop-model-info > summary { cursor: pointer; font-size: var(--text-sm); padding: 10px 12px; color: var(--muted); }
#workshop-model-info[open] { padding: 0 10px 10px; }
.workshop-home .workshop-trial .btn { margin-bottom: 8px; }
@media (max-width: 800px) {
  .workshop-start, .workshop-trial { padding: 14px; }
  .workshop-home .conversion-title { font-size: 1.5rem; }
}