/* Shared showcase layer; original workflow styles remain underneath. */
:root { --ink:var(--text-primary); --paper:var(--surface-page); --sheet:var(--surface-card); --muted:var(--text-muted); --line:var(--border-subtle); --rule:var(--border-subtle); --green:var(--brand-accent); --forest:var(--brand-accent); --red:var(--brand-accent); --lime:var(--brand-lime); --shadow:4px 5px 0 rgb(0 0 0 / .10); }
html { background:var(--paper); color:var(--ink); font-family:var(--font-sans); scroll-behavior:auto; }
body { background:var(--paper); color:var(--ink); font-family:var(--font-sans); }
button,input,textarea,select { font:inherit; } button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
a { color:var(--brand-accent); } :focus-visible { outline:3px solid var(--brand-focus); outline-offset:4px; }
.site-header { max-width:1280px; margin:auto; padding:18px 24px; gap:18px; flex-wrap:wrap; border-color:var(--rule); }
.site-header .workbench-label { display:none; }
.project-nav { display:flex; align-items:center; gap:16px; margin-left:auto; font-size:14px; font-weight:650; }
.project-nav a { display:inline-flex; align-items:center; min-height:44px; text-underline-offset:5px; }
.project-nav button { min-height:44px; background:var(--sheet); color:var(--ink); border:1px solid var(--border-strong); border-radius:6px; padding:8px 12px; cursor:pointer; }
.wordmark-mark { background:var(--brand-lime); color:var(--brand-ink); }
.skip-link { background:var(--brand-lime); color:var(--brand-ink); }
.catalog { max-width:1280px; margin:auto; padding:38px 24px 70px; }
.hero { margin-bottom:24px; max-width:850px; }
.hero h1,.intro h1 { font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:clamp(2.8rem,6vw,4.7rem); letter-spacing:-.025em; line-height:1.03; margin:12px 0 16px; }
.hero-copy,.dek { font-size:18px; color:var(--text-secondary); line-height:1.6; max-width:65ch; margin-bottom:14px; }
.eyebrow,.kicker { color:var(--brand-accent); }
.mode-guide { padding:12px 0; margin:14px 0; max-width:72ch; color:var(--text-secondary); font-size:14px; line-height:1.6; }
.mode-guide summary { cursor:pointer; min-height:44px; padding:10px 0; color:var(--brand-accent); font-weight:700; }
.mode-guide p { margin:8px 0; }
.catalog-filters { display:grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) auto; gap:16px; align-items:end; padding:20px; background:var(--surface-recessed); border:1px solid var(--rule); border-radius:10px; margin:22px 0; }
.catalog-filters label { display:grid; gap:8px; font-size:14px; font-weight:650; }
.catalog-filters input,.catalog-filters select { width:100%; min-width:0; min-height:48px; background:var(--sheet); color:var(--ink); border:1px solid var(--border-strong); border-radius:5px; padding:10px; }
.catalog-filters button,.empty-state button { min-height:48px; background:var(--sheet); color:var(--ink); border:1px solid var(--border-strong); border-radius:5px; padding:10px 16px; cursor:pointer; }
.starter-grid,.category-adventures { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.starter-section { margin:30px 0 40px; }.starter-section h2 { font-size:25px; margin-bottom:6px; }.starter-section>p { color:var(--muted); }
.starter-grid .category-adventure { border-top:5px solid var(--brand-lime); }
.category-adventure,.adventure-card,.compact-adventure-card { background:var(--sheet); color:var(--ink); border:1px solid var(--rule); padding:22px; box-shadow:none; border-radius:8px; display:flex; flex-direction:column; }
.category-adventure h3 { font:700 21px/1.25 var(--font-sans); letter-spacing:-.03em; margin:10px 0; }
.category-adventure p { color:var(--text-secondary); font:400 14px/1.6 var(--font-sans); }.category-adventure .adventure-status { color:var(--brand-accent); font:650 11px/1.4 var(--font-mono); }
.category-adventure .card-button { margin-top:auto; align-self:flex-start; }
.card-button,.primary-button { background:var(--brand-lime); color:var(--brand-ink); border:1px solid var(--brand-ink); min-height:44px; padding:11px 15px; font:700 14px/1.4 var(--font-sans); border-radius:5px; }
.card-button:hover,.primary-button:hover { background:var(--brand-lime); color:var(--brand-ink); text-decoration:underline; }
.thinking-category { margin:26px 0 34px; scroll-margin-top:20px; }.category-heading h2 { font:700 24px/1.3 var(--font-sans); }.category-heading p { color:var(--text-secondary); }.category-index { color:var(--brand-accent); }
.catalog-count { color:var(--text-secondary); }.empty-state { padding:30px; border:1px dashed var(--border-strong); background:var(--sheet); }
.adventure-shell { max-width:1280px; margin:auto; }.briefing,.scene-card,.response-card,.completion-card,.mentor-reply,.conversation-entry { background:var(--sheet); color:var(--ink); border-color:var(--rule); }
.briefing h1,.scene-card h2,.completion-card h2 { font-family:var(--font-sans); letter-spacing:-.03em; }.briefing-purpose,.scene-copy,.mode-control p,.progress li { color:var(--text-secondary); }
.choice,.segmented button,.mentor-actions button,.continuation-actions button,.continuation-input button,.secondary-button { background:var(--sheet); color:var(--ink); border-color:var(--border-strong); }
.choice:hover,.choice.selected,.segmented button[aria-pressed="true"] { background:var(--accent-soft); color:var(--ink); border-color:var(--brand-accent); }.choice-letter { color:var(--brand-accent); border-color:var(--border-strong); }
.lesson,.request-status { background:var(--surface-recessed); color:var(--ink); border-color:var(--brand-accent); }.response-verdict,.response-label,.stage-label,.lesson-label,.progress .current { color:var(--brand-accent); }
.intro { padding:28px 0 18px; max-width:950px; }.intro h1 em { color:var(--brand-accent); font-style:normal; }.intro .dek { margin-bottom:0; }
.workspace { padding:24px; box-shadow:none; border-radius:9px; }.workspace:before { display:none; }.sheet-heading h2 { font:700 24px/1.2 var(--font-sans); }.prototype-label { display:none; }
#analysis-form { margin-top:18px; }#source-text { min-height:150px; background:var(--surface-note); color:var(--ink); border-color:var(--border-strong); padding:14px; border-radius:5px; }textarea::placeholder,input::placeholder { color:var(--muted); opacity:1; }
.controls { gap:20px; align-items:start; }.field-meta { margin-bottom:18px; }.control-explanation,.privacy-note,.research-time-note,.review-context { color:var(--text-secondary); }
.mode-control label>span { background:var(--sheet); color:var(--ink); border-color:var(--border-strong); }.mode-control input:checked+span,.roast-option input:checked+span { background:var(--brand-lime); color:var(--brand-ink); }.mode-control input:focus-visible+span { outline-color:var(--brand-focus); }
.recommended { background:var(--accent-soft); color:var(--ink); }.button.primary { background:var(--brand-lime); border-color:var(--brand-ink); color:var(--brand-ink); }.button.quiet { color:var(--ink); border-color:var(--border-strong); }.example-link { color:var(--brand-accent); }
.form-actions { margin-top:18px; }.privacy-note { display:block; margin-top:10px; font-size:13px; }.research-card,.roast-card,.progress-panel { background:var(--surface-note); color:var(--ink); }.progress-track { background:var(--surface-recessed); }.result-copy { color:var(--ink); }
[hidden] { display:none!important; }
@media(max-width:760px) { .starter-grid,.category-adventures { grid-template-columns:1fr; }.catalog-filters { grid-template-columns:1fr; }.catalog { padding:24px 16px 45px; }.site-header { padding:12px 16px; gap:10px; }.project-nav { gap:12px; }.wordmark { max-width:100%; }.controls { grid-template-columns:1fr; }.intro { padding-top:24px; }.intro h1 { font-size:clamp(2.6rem,10vw,4.5rem); }.workspace { padding:18px; }.site-header>p { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

.progress .current span,.progress .complete span { background:var(--brand-lime); color:var(--brand-ink); border-color:var(--brand-ink); }

/* Heading no longer has a separate numeric grid cell. */
.category-heading { display:block; width:100%; max-width:none; margin-bottom:20px; }
.category-heading>div { width:100%; min-width:0; }
.category-heading div>p { max-width:65ch; }

/* Learning control palette: keep text/background pairs together across themes.
   These selectors deliberately outrank the legacy workflow state rules. */
:root {
  --control-primary-bg:var(--brand-lime);
  --control-primary-text:var(--brand-ink);
  --control-bg:var(--surface-card);
  --control-text:var(--text-primary);
  --control-hover-bg:var(--accent-soft);
  --control-disabled-bg:var(--surface-recessed);
  --control-disabled-text:var(--text-muted);
  --control-border:var(--border-strong);
  --control-focus:var(--brand-focus);
}
.card-button,.primary-button,.mentor-actions .primary-button,
.card-button:hover,.primary-button:hover,.mentor-actions .primary-button:hover,
.card-button:active,.primary-button:active,.mentor-actions .primary-button:active {
  background:var(--control-primary-bg); color:var(--control-primary-text);
  border-color:var(--control-primary-text);
}
.choice,.segmented button,.mentor-actions button,.continuation-actions button,
.continuation-input button,.secondary-button,.request-status button,
.alternative-choices button,.library-button,.category-nav a {
  background:var(--control-bg); color:var(--control-text); border-color:var(--control-border);
}
.choice:hover:not(:disabled),.choice.selected,.segmented button[aria-pressed=true],
.segmented button:not([aria-pressed=true]):hover,
.mentor-actions button:not(.primary-button):hover,.mentor-actions button:not(.primary-button):active,
.secondary-button:hover,.secondary-button:active,.request-status button:hover,
.continuation-actions button:hover,.continuation-input button:hover,
.alternative-choices button:hover,.library-button:hover,
.category-nav a:hover,.category-nav a:focus-visible,
.catalog-filters button:hover,.empty-state button:hover,.project-nav button:hover {
  background:var(--control-hover-bg); color:var(--control-text); border-color:var(--control-border);
}
/* Do not fade disabled text. Dashed boundaries distinguish unavailable actions. */
button:disabled,.mentor-actions button:disabled,.mentor-actions .primary-button:disabled,
.continuation-actions button:disabled,.continuation-input button:disabled,
.alternative-choices button:disabled,.choice:disabled {
  background:var(--control-disabled-bg); color:var(--control-disabled-text);
  border-color:var(--control-border); border-style:dashed; opacity:1;
}
.choice.selected:disabled {
  background:var(--control-hover-bg); color:var(--control-text); border-style:solid;
}
.continuation-input input {
  background:var(--control-bg); color:var(--control-text); border-color:var(--control-border);
}
.reflection,.library-entry,.category-adventure.planned {
  background:var(--surface-recessed); color:var(--text-primary);
}
.planned .adventure-status { color:var(--text-muted); }
.progress li span { border-color:var(--control-border); }
.progress .current span,.progress .complete span { border-color:var(--control-border); }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
a:focus-visible,summary:focus-visible { outline-color:var(--control-focus); }
::selection { background:var(--control-primary-bg); color:var(--control-primary-text); }

/* Guidance loads last; match its focus specificity without changing geometry. */
body .bench-guidance a:focus-visible,body .bench-guidance summary:focus-visible { outline-color:var(--control-focus); }
.card-button:disabled,.primary-button:disabled { background:var(--control-disabled-bg); color:var(--control-disabled-text); border-color:var(--control-border); border-style:dashed; opacity:1; }

.progress li.current span,.progress li.complete span { background:var(--control-primary-bg); color:var(--control-primary-text); border-color:var(--control-border); }