/* Evidence-led case studies. Same materials, a wider working surface. */
@layer layout {
 body[data-side="work"] { --col: 980px; }
 .work-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; border-bottom:1px solid var(--kei); }
 .work-head nav { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
 .work-head a { display:inline-flex; align-items:center; min-height:44px; border:0; }
 .case-intro { padding:68px 0 44px; }
 .case-intro h1 { font-family:var(--f-serif); font-weight:500; max-width:18ch; font-size:clamp(2.6rem,5.6vw,4.2rem); line-height:1.05; letter-spacing:-.015em; margin:18px 0 25px; }
 .case-intro .lede { max-width:40em; font-size:1.16rem; line-height:1.75; }
 .case-intro .lede em { font-family:var(--f-serif); font-size:1.12em; }
 .case-meta { display:flex; flex-wrap:wrap; gap:12px 34px; margin-top:28px; color:var(--usu); }
 .case-section { padding:40px 0; border-top:1px solid var(--kei); }
 .case-section>h2 { font-family:var(--f-serif); font-weight:500; font-size:1.9rem; line-height:1.2; margin-bottom:18px; letter-spacing:-.01em; }
 .case-section>p { margin-bottom:18px; max-width:36em; }
 .case-section h3 { font-family:var(--f-serif); font-weight:500; font-size:1.3rem; line-height:1.3; margin:20px 0 10px; }
 .decision-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
 .decision-list p { font-size:.96rem; }
 .case-foot { padding:28px 0 48px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--kei); }
 .case-foot a { min-height:44px; display:inline-flex; align-items:center; }
 .case-foot .kbd-hint { background:none; border:0; padding:0; min-height:44px; cursor:pointer; color:var(--usu); font:inherit; }
 .case-foot .kbd-hint:hover { color:var(--ai); }
 .case-foot .kbd-hint kbd { font:inherit; border:1px solid var(--kei); border-radius:3px; padding:0 .4em; margin-right:.4em; }
 .case-foot { flex-wrap:wrap; }
 .source-links { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:20px; }
 .source-links a { min-height:44px; display:inline-flex; align-items:center; }
}
@layer components {
 .demo-label { color:var(--usu); max-width:52em; margin-bottom:24px; font-size:.86rem; }
 .demo-controls { display:flex; flex-wrap:wrap; gap:6px 22px; border-bottom:1px solid var(--kei); padding-bottom:12px; }
 .demo-controls button { background:none; border:0; border-bottom:2px solid transparent; padding:10px 0; min-height:44px; cursor:pointer; font-size:.88rem; color:var(--usu); }
 .demo-controls button[aria-pressed="true"] { color:var(--sumi); border-color:var(--ai); }
 .demo-case { padding-top:24px; }
 .demo-case>h3 { margin-top:0; }
 .demo-grid { position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; margin-top:20px; }
 /* Evidence line (js/evidence-thread.js): an indigo line from a field to its source; it ignores the pointer */
 .demo-grid .thread { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; opacity:0; transition:opacity var(--t-touch) var(--ease); }
 .demo-grid .thread.on { opacity:1; }
 .demo-grid .thread path { fill:none; stroke:var(--ai); stroke-width:1.5; stroke-linecap:round; }
 .demo-grid .thread circle { fill:var(--ai); transform-box:fill-box; transform-origin:center; }
 .source-paper { padding:28px; background:var(--tana); border:1px solid var(--kei); }
 .source-label { font-style:italic; color:var(--usu); font-size:.9rem; margin-bottom:6px; }
 .source-paper .source-heading { margin:18px 0; font-family:var(--f-serif); font-style:italic; font-size:1.6rem; font-weight:500; }
 .source-paper p { margin-bottom:18px; }
 .source-paper [data-evidence] { border-bottom:1px dotted var(--usu); scroll-margin-top:140px; }
 .source-paper [data-active] { background:color-mix(in srgb,var(--ai) 14%,transparent); color:var(--sumi); box-shadow:0 0 0 2px var(--ai); box-decoration-break:clone; -webkit-box-decoration-break:clone; border-radius:1px; }
 .field-list>a { display:flex; justify-content:space-between; align-items:center; gap:15px; min-height:64px; padding:14px 12px; margin-top:0; border-bottom:1px solid var(--kei); color:var(--sumi); }
 .field-list>a .field-name { font-size:.76rem; color:var(--usu); }
 .field-list>a strong { font-size:1rem; font-weight:500; }
 .field-list>a[aria-current="true"] { border-left:3px solid var(--ai); padding-left:9px; background:color-mix(in srgb,var(--ai) 7%,transparent); }
 .selection-note { padding:18px 0 0; min-height:100px; font-size:.92rem; color:var(--usu); }
 .demo-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:12px; }
 .action-btn { background:var(--sumi); color:var(--washi); border:1px solid var(--sumi); padding:10px 16px; min-height:44px; cursor:pointer; font-size:.84rem; }
 .action-btn:disabled { cursor:default; opacity:.75; }
 .action-btn.secondary { background:none; color:var(--sumi); border-color:var(--kei); }
 /* The status line is for screen readers only: the change on screen already says it all */
 .demo-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .demo-hint { font-size:.86rem; color:var(--usu); margin:10px 0 18px; }
 .demo-walkthrough { display:flex; flex-wrap:wrap; gap:12px 32px; padding:18px 0 18px 22px; border-bottom:1px solid var(--kei); font-size:.84rem; }
 .work-preview { border-top:1px solid var(--kei); border-bottom:1px solid var(--kei); margin:22px 0 16px; padding:20px 0; }
 .work-preview .preview-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:22px; margin:14px 0; }
 .work-preview blockquote { margin:0; padding-left:14px; border-left:2px solid var(--ai); font-family:var(--f-serif); font-style:italic; font-size:1.15rem; line-height:1.5; }
 .work-preview .preview-result { color:var(--ai); font-size:1.15rem; }
 .entry .work-preview p { color:var(--usu); }
 .project-actions { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:15px; }
 .project-actions a { display:inline-flex; align-items:center; min-height:44px; }
}
@media (max-width:650px) {
 .demo-grid,.decision-list { grid-template-columns:1fr; gap:22px; }
 .case-intro { padding:42px 0 30px; }
 .source-paper { padding:20px; }
 .selection-note { min-height:0; }
 .work-head { align-items:flex-start; }
 .work-preview .preview-grid { grid-template-columns:1fr; gap:12px; }
}