/* Image direction guide: semantic briefs and review-only composition previews. */
.production-nav { position:fixed; top:calc(var(--header-height) + 32px); left:24px; width:180px; display:flex; flex-direction:column; gap:12px; font-size:14px; z-index:2; }
.production-nav a { min-height:32px; display:flex; align-items:center; color:#666; }
.production-nav a[aria-current=page] { color:var(--ink); }
.production-sections { border-top:1px solid #d4d4d4; margin-top:12px; padding-top:12px; font-size:12px; }
.production-sections[hidden] { display:none; }
.component-template main,.image-production main { margin-left:220px; }
.production-main { padding:48px var(--gutter) 64px; }
.production-intro { padding-bottom:40px; border-bottom:1px solid #d4d4d4; }
.production-main h1,.production-main h2,.production-main h3,.production-main p,.production-main dd { word-break:keep-all; overflow-wrap:break-word; }
.production-intro h1 { font-size:40px; font-weight:400; margin:16px 0; }
.production-intro>p:not(.eyebrow) { max-width:75ch; }
.production-section { padding:40px 0; border-bottom:1px solid #d4d4d4; scroll-margin-top:88px; }
.production-section h2 { font-size:24px; font-weight:400; margin-bottom:16px; }
.production-section h3 { font-size:18px; font-weight:400; }
.production-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.production-heading label { display:flex; align-items:center; gap:12px; font-size:14px; }
.production-heading select { border:0; border-bottom:1px solid #a2a2a2; background:white; min-height:44px; font:inherit; }
.production-note { font-size:14px; color:#666; line-height:1.6; margin:12px 0; }
.production-item { display:grid; grid-template-columns:160px minmax(0,1fr); gap:24px; padding:28px 0; border-top:1px solid #d4d4d4; scroll-margin-top:88px; }
.production-slot { background:var(--gray); aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; align-self:start; padding:8px; }
.production-slot.is-portrait { aspect-ratio:7/9; }
.production-slot span { font-size:12px; }
.production-slot small { font-size:12px; color:#666; }
.production-meta,.production-file { font-size:12px; color:#666; margin:8px 0; overflow-wrap:anywhere; }
.production-places { list-style:none; padding:0; margin:16px 0; display:grid; gap:8px; }
.production-places li { font-size:14px; }
.production-places small { display:block; font-size:12px; color:#8a8a8a; overflow-wrap:anywhere; }
.production-prompt { border-top:1px solid #d4d4d4; margin-top:16px; padding-top:12px; }
.production-prompt summary { cursor:pointer; min-height:44px; font-size:14px; }
.prompt-text { font-size:14px; font-weight:300; line-height:1.7; padding:16px; background:var(--gray); user-select:text; overflow-wrap:anywhere; }
.production-copy { margin-top:12px; padding:0; min-height:44px; font-size:14px; display:inline-flex; align-items:center; gap:24px; }
.production-copy:hover span { transform:translate(3px,-3px); }
.production-copy:focus-visible,.production-nav a:focus-visible,.production-prompt summary:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.production-personas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:24px; }
.production-persona { border-top:1px solid #d4d4d4; padding-top:20px; }
.production-persona h3 span { display:block; font-size:14px; margin-top:8px; }
.production-persona-link { font-size:14px; display:inline-flex; min-height:44px; align-items:center; }
.production-copy-status { min-height:24px; margin-top:24px; font-size:14px; }
@media(max-width:1020px) {
 .production-nav { position:static; width:auto; padding:20px var(--gutter); flex-direction:row; gap:24px; flex-wrap:wrap; border-bottom:1px solid #d4d4d4; }
 .production-sections { display:none; }
 .component-template main,.image-production main { margin-left:0; }
}
@media(max-width:760px) {
 .production-main { padding:32px var(--gutter); }
 .production-main h1,.production-main h2,.production-main h3,.production-main p,.production-main dd { word-break:keep-all; overflow-wrap:break-word; }
.production-intro h1 { font-size:30px; }
 .production-item { grid-template-columns:1fr; gap:16px; }
 .production-slot { width:160px; }
 .production-heading { display:block; }
 .production-heading label { margin-bottom:16px; }
 .production-personas { grid-template-columns:1fr; }
}

.production-subheading { margin-top:32px; }
.production-detail,.production-persona { min-width:0; }
.production-brief { margin:20px 0; font-size:14px; line-height:1.65; }
.production-brief>div { display:grid; grid-template-columns:116px minmax(0,1fr); gap:16px; border-top:1px solid #e3e3e3; padding:12px 0; }
.production-brief dt { font-weight:500; color:var(--ink); }
.production-brief dd { margin:0; color:#4b4b4b; }
.production-brief>div:nth-last-child(2) { border-left:3px solid var(--ink); padding-left:12px; }
.production-test-review { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:20px; }
.production-test-review article { background:#f5f5f5; padding:20px; }
.production-test-review h4 { font-weight:500; font-size:15px; margin:0 0 16px; }
.production-test-review p { font-size:14px; line-height:1.6; }
.production-test-review p span { display:block; font-size:12px; color:#666; margin:16px 0 6px; }
.production-palette-controls { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.production-palette-controls button { display:flex; align-items:center; gap:8px; border:1px solid #aaa; min-height:44px; padding:10px 14px; font:inherit; font-size:13px; }
.production-palette-controls button[aria-pressed=true] { border-color:var(--ink); box-shadow:inset 0 -3px var(--ink); }
.production-palette-controls button:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.palette-swatch { width:12px; height:12px; background:var(--swatch); }
.production-storyboard { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:24px; }
.story-stage { min-width:0; }
.story-stage h3 { font-size:16px; margin:0 0 12px; min-height:48px; }
.story-frame { background:var(--story-paper); color:var(--story-ink); border:1px solid var(--story-muted); padding:16px 12px; min-height:164px; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.story-flow { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1.2fr); gap:8px; align-items:center; }
.story-touchpoints { display:grid; gap:8px; font-size:12px; }
.story-touchpoints span { border:1px solid var(--story-ink); padding:6px; text-align:center; }
.story-arrow { font-size:20px; }
.story-tokens { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
.story-token { color:var(--story-signal); font-size:18px; }
.story-token.is-transit { color:var(--story-secondary); }
.story-lanes { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; font-size:10px; text-align:center; }
.story-lanes>span { border-bottom:1px solid var(--story-muted); padding-bottom:4px; }
.story-lanes>div { grid-column:1/-1; display:flex; justify-content:space-around; background:var(--story-muted); }
.story-candidates { display:grid; grid-template-columns:repeat(6,1fr); gap:3px; }
.story-candidates span { border:1px solid var(--story-muted); color:var(--story-signal); min-height:22px; display:grid; place-items:center; font-size:10px; }
.story-candidates .is-selected { background:var(--story-signal); color:var(--story-paper); }
.story-caption { display:flex; justify-content:space-between; gap:8px; font-size:10px; }
.story-caption strong { font-weight:500; text-align:right; }
.story-example { font-size:10px; text-align:right; }
@media(max-width:1200px) { .production-storyboard { grid-template-columns:1fr; } .story-stage h3 { min-height:0; } .story-frame { max-width:600px; } .story-flow { grid-template-columns:1fr 40px 1.5fr; } .story-caption,.story-lanes { font-size:12px; } }
@media(max-width:760px) { .production-test-review { grid-template-columns:1fr; } .production-brief>div { grid-template-columns:1fr; gap:4px; } .production-palette-controls { flex-direction:column; align-items:stretch; } }