/* Local proposal: loaded only by storyplanung.html. Shared CSS stays untouched. */
body.sp-design{--muted:#aaaabd}
.sp-design header{min-height:240px;padding-top:24px;padding-bottom:24px}
.sp-design .hero-copy{padding:24px 0 0}
.sp-design .hero-copy h1{margin:8px 0}
.sp-design header::before{animation:none}
.sp-design .access{padding:16px 0}
.sp-design .access #notes-controls button{letter-spacing:.08em}
.sp-design main{display:block;padding-top:24px}
.sp-design section.workspace{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:40px;align-items:start}
.sp-design section.workspace>*{grid-column:2;min-width:0}
.sp-design section.workspace>nav{grid-column:1;grid-row:1/40;margin:0;border:0;border-right:1px solid var(--line);padding:0 24px 24px 0;display:block;overflow:visible}
.sp-design nav details>summary{display:none}
.sp-design .sp-nav-group+.sp-nav-group{margin-top:24px}
.sp-design .sp-nav-label{font:500 12px/16px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.sp-design nav button{display:block;width:100%;text-align:left;min-height:48px;padding:8px 16px;margin:0;white-space:normal;overflow-wrap:anywhere;font:500 20px/28px var(--body);border-left:2px solid transparent;color:var(--ink)}
.sp-design nav button[aria-pressed=true]{background:var(--panel);border-left-color:var(--accent);color:var(--accent)}
.sp-design nav button[aria-pressed=true]::after{display:none}
.sp-design nav button:hover:not(:disabled){background:rgba(255,255,255,.03)}
.sp-design #sp-view-heading{margin:0 0 8px}
.sp-design #overview{margin:0 0 24px}
.sp-design #overview h2{font:400 16px/24px var(--body);letter-spacing:0;color:var(--muted);margin:0}
.sp-design #overview p{font:400 16px/24px var(--body);margin:0}
.sp-design #sp-filter-host{padding:16px 24px;background:var(--panel);border:1px solid var(--line);border-radius:4px;margin-bottom:16px}
.sp-design #filters-panel>summary{font:500 20px/28px var(--body);letter-spacing:0;align-items:center}
.sp-design .filter-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;padding-top:16px}
.sp-design .sp-field{min-width:0}
.sp-design .sp-selected-label{margin:8px 0 0;overflow-wrap:anywhere}
.sp-design .sp-field label{margin:0 0 8px;letter-spacing:.08em}
.sp-design .sp-field input,.sp-design .sp-field select{font:500 20px/28px var(--body);padding:8px;min-height:48px;background:var(--bg)}
.sp-design #reset{width:auto;justify-self:start;grid-column:1/-1;margin:0}
.sp-design .sp-filter-help{grid-column:1/-1}
.sp-design .sp-help>summary{font:400 16px/24px var(--body);letter-spacing:0;align-items:center;justify-content:flex-start;gap:16px;min-height:44px}
.sp-design .sp-help p{margin:8px 0 16px}
.sp-design .sp-help .notice{margin:8px 0 16px;padding:16px;background:var(--panel)}
.sp-design #explanation{color:var(--ink)}
.sp-design .sp-filter-help p{font:400 16px/24px var(--body);color:var(--muted)}
.sp-design #sp-filter-state{font:400 16px/24px var(--body);margin:0 0 16px;color:var(--muted);overflow-wrap:anywhere}
.sp-design #count{margin:24px 0 0}
.sp-design .card{padding:24px 0}
.sp-design .card p,.sp-design .full,.sp-design .preview{max-width:72ch}
.sp-design .card h3{overflow-wrap:anywhere;hyphens:auto;margin:8px 0 16px}
.sp-design #results h3{font:500 20px/28px var(--body);letter-spacing:0;max-width:72ch}
.sp-design .card .meta{color:var(--muted)}
.sp-design .card button,.sp-design .row button,.sp-design dialog button{line-height:24px;letter-spacing:.08em;overflow-wrap:anywhere;min-height:48px}
.sp-design .tag{max-width:100%;overflow-wrap:anywhere;line-height:24px;padding:0 8px;color:var(--muted)}
.sp-design .full{font:500 20px/28px var(--body)}
.sp-design dialog :is(h2,h3){overflow-wrap:anywhere;hyphens:auto}
.sp-design :is(label,legend,button,summary){overflow-wrap:anywhere}
.sp-design summary::after{flex-shrink:0}
.sp-design #answerTools{margin:16px 0}
.sp-design #answer-mode,.sp-design #status,.sp-design #knowledge-category{max-width:100%;font:500 20px/28px var(--body)}
.sp-design .row>*{min-width:0}
.sp-design footer{font:400 16px/24px var(--body)}
@media(max-width:1100px){
 .sp-design section.workspace{grid-template-columns:216px minmax(0,1fr);column-gap:24px}
 .sp-design section.workspace>nav{padding-right:16px}
}
@media(max-width:900px){
 .sp-design main{padding-top:24px}
 .sp-design section.workspace{display:block}
 .sp-design section.workspace>nav{border:1px solid var(--line);border-radius:4px;padding:8px 16px;margin:0 0 24px;background:var(--panel)}
 .sp-design nav details>summary{display:flex;font:500 20px/28px var(--body);letter-spacing:0;align-items:center;min-height:48px}
 .sp-design .sp-nav-groups{padding:16px 0}
 .sp-design .sp-nav-group+.sp-nav-group{margin-top:16px}
 .sp-design nav button{max-width:100%;min-height:48px}
 .sp-design #overview{margin-bottom:16px}
}
@media(max-width:600px){
 .sp-design header{min-height:216px;padding:16px}
 .sp-design .hero-copy{padding:24px 0 0}
 .sp-design .hero-copy h1{font:400 32px/40px var(--title);letter-spacing:.04em;overflow-wrap:anywhere}
 .sp-design .hero-copy .lead{font:italic 24px/32px 'Playfair Display',Georgia,serif}
 .sp-design .hero-top{flex-wrap:wrap;gap:8px}
 .sp-design .access,.sp-design footer{margin-left:16px;margin-right:16px}
 .sp-design main{padding:24px 16px 40px}
 .sp-design #notes-controls{display:flex;align-items:stretch;gap:8px;width:100%}
 .sp-design #notes-controls button{flex:1 1 120px;padding:8px;min-height:48px;letter-spacing:0}
 .sp-design .filter-body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
 .sp-design #sp-filter-host{padding:8px 16px}
 .sp-design #reset{width:100%}
 .sp-design .card button{margin-right:0}
 .sp-design dialog,.sp-design #note-editor{padding:16px}
 .sp-design .row{gap:8px}
}