/* App shell: navigation, working surface, and secondary tools. */
.app{height:100dvh;min-height:0;overflow:hidden;font-family:var(--site-sans)}
.app .topbar{flex:none}.app .topbar__in{max-width:none;min-height:60px;padding:0 24px}
.app .topnav{font-size:12px;gap:25px}.app .topnav a{display:block}
.app .bench{max-width:none;flex:1;min-height:0;margin:0;padding:0 20px 16px 238px;position:relative;gap:0}
.app .bench__head{display:flex;align-items:center;gap:18px;padding:20px 0 10px;max-width:none;flex:none}
.app .bench__title{font:600 18px var(--site-sans);letter-spacing:-.5px}
.app .bench__lede{font:12px var(--site-sans);color:var(--ink-3);margin:0}
.app-sidebar{position:absolute;left:0;top:0;bottom:0;width:214px;border-right:1px solid var(--site-line);background:var(--paper-2);padding:25px 14px 18px;display:flex;flex-direction:column;gap:20px;overflow-y:auto}
.app-sidebar>details>summary{font:550 12px var(--site-sans);padding:0 12px 18px;cursor:pointer;list-style:none}.app-sidebar>details>summary::-webkit-details-marker{display:none}
.app-sidebar .rail__examples-picker{display:block}.app-sidebar .rail__lbl{display:none}
.app-sidebar .seg{display:flex;flex-direction:column;gap:24px;width:100%}
.app-sidebar .seg__group{display:flex;flex-direction:column;align-items:stretch;gap:2px;background:transparent;padding:0;border-radius:0}
.app-sidebar .seg__group-label{font:550 10px var(--site-sans);letter-spacing:.09em;color:var(--ink-3);padding:0 12px 6px}
.app-sidebar .seg__b{text-align:left;border-radius:5px;font:450 12px/1.5 var(--site-sans);padding:8px 12px;text-transform:capitalize}
.app-sidebar .seg__b:hover{background:var(--paper-3)}
.app-sidebar .seg__b[aria-pressed=true]{background:var(--card);box-shadow:0 1px 3px #0001;color:var(--acc);font-weight:550}
.app-sidebar .format-description{margin:18px 12px 0;font:11px/1.6 var(--site-sans);color:var(--ink-3);max-width:none}
.sidebar-bottom{margin-top:auto;padding:20px 12px 0;border-top:1px solid var(--site-line);display:grid;gap:12px;font:11px/1.5 var(--site-sans)}
.sidebar-bottom a{text-decoration:none;color:var(--ink-2)}.sidebar-bottom p{font-size:10px;color:var(--ink-3);margin-top:10px}
.app .rail{margin:0;padding:8px 0 12px;gap:8px;align-items:center;flex:none}
.workspace-label{font:11px var(--site-sans);color:var(--ink-3);margin-right:auto}
.app .pill{font:500 11px/1.4 var(--site-sans);box-shadow:none;border:1px solid var(--site-line);border-radius:5px;min-height:34px;padding:7px 12px;gap:6px}
.app .pill--spec{order:2}.app .rail__set--present{order:3}
.app .pill--present{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.file-menu{position:relative;font:500 11px var(--site-sans)}
.file-menu>summary{list-style:none;cursor:pointer;padding:9px 18px;border:1px solid var(--site-line);border-radius:5px;min-height:34px;box-sizing:border-box}
.file-menu>summary::-webkit-details-marker{display:none}
.file-menu-items{position:absolute;z-index:20;right:0;top:calc(100% + 6px);display:flex;flex-direction:column;align-items:stretch;width:200px;background:var(--card);padding:6px;border:1px solid var(--site-line);border-radius:7px;box-shadow:0 10px 30px #0002}
.file-menu-items .pill{border:0;border-radius:3px;text-align:left;justify-content:start;background:transparent;color:var(--ink);margin:0;min-height:38px}
.file-menu-items .pill:hover{background:var(--paper-2)}
.app .statusbar{padding:0 0 9px;min-height:24px;gap:8px;flex:none}
.app .status{font-size:10px;margin:0}.app .status .badge{font-size:9px}
.app .panes{flex:1;min-height:0;height:auto;grid-template-columns:minmax(230px,.8fr) minmax(0,1.4fr);gap:12px}
.app .pane{height:100%;min-height:0;border-radius:7px;box-shadow:none;border:1px solid var(--site-line)}
.app .pane__bar{height:40px;min-height:40px;padding:0 13px;border-radius:0;font-size:10px}
.app .pane__tag{display:none}.app .pane__name{font:550 11px var(--site-sans);text-transform:none;letter-spacing:0}
.app .ed{flex:1;min-height:0}.app .ed__area{font-size:12px}.app .stage{flex:1;height:100%;min-height:0}
.app .narration{max-height:34vh;overflow:auto;margin:0 0 10px;padding:12px;border-radius:6px;gap:14px}
.app .narration__intro p{font:11px/1.5 var(--site-sans)}.app .narration__intro h2{font:550 16px var(--site-sans)}
.app .narration__eyebrow{display:none}
.app.is-present .app-sidebar,.app.is-present .bench__head{display:none}
.app.is-present .bench{padding:0}.app.is-present .panes{position:fixed;inset:0;display:block;height:100dvh}
.app.is-present .panes .pane--view{height:100%;border:0;border-radius:0}.app.is-present .panes .pane--edit{height:100%;border:0}
.app.is-workspace .panes{grid-template-columns:minmax(230px,.65fr) minmax(0,1.7fr)}
@media(max-width:1100px){.app .bench{padding-left:202px;padding-right:12px}.app-sidebar{width:188px;padding-inline:10px}.app .panes{grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr)}}
@media(max-width:899px){.app .bench{padding:0 12px 12px}.app-sidebar{position:relative;width:auto;top:auto;bottom:auto;left:auto;flex:none;padding:0;border:0;background:transparent;overflow:visible;display:block;order:1}.app-sidebar>details>summary{pointer-events:auto;padding:10px 12px;border:1px solid var(--site-line);border-radius:5px;list-style:disclosure-closed;cursor:pointer;width:max-content;font-size:11px}.app-sidebar .rail__set--examples{position:absolute;top:42px;left:0;right:0;z-index:30;padding:18px;background:var(--card);border:1px solid var(--site-line);border-radius:6px;box-shadow:0 12px 30px #0002;max-height:65dvh;overflow:auto}.app-sidebar .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.sidebar-bottom{display:none}.app .bench__head{padding:15px 0 12px}.app .rail{order:2;margin-top:8px}.app .statusbar{order:3}.app .narration{order:4}.app .swap{order:5;display:flex;margin-bottom:8px;padding:0;gap:6px}.app .swap__b{font:500 11px var(--site-sans);padding:7px 14px;border-radius:4px}.app .panes,.app.is-workspace .panes{order:6;display:flex;flex-direction:column;min-height:0}.app .pane{flex:1}.app .bench__lede{display:none}.workspace-label{display:none}.app .file-menu{margin-left:auto}.app .topbar__in{padding:0 16px}.app .topnav a:nth-child(3){display:none}.app.is-present .panes .pane--view{display:flex}}
@media(max-width:480px){.app-sidebar .seg{grid-template-columns:1fr 1fr}.app .topnav{gap:14px}.app .topnav a:nth-child(2){display:none}.app .rail{gap:6px}.app .pill{padding:7px 10px}.app .bench__head{padding:12px 0 10px}.app .narration{max-height:30vh}.app .workspace-controls{gap:5px}}
@media(max-width:899px){.app .bench__head{display:none}.app-sidebar{margin-top:12px}.app .rail{position:absolute;right:12px;top:12px;margin:0;padding:0;z-index:10}.app .statusbar{margin-top:10px}.app-sidebar>details>summary{font-size:10px;padding:10px}.app .pill{min-height:34px}.app-sidebar .rail__set--examples{z-index:40}.app .rail:has(.workspace-controls:not([hidden])){position:relative;top:auto;right:auto;margin-top:10px}}