/* planex2d.org/viewer: the tool in the sheet, beyond the shared style */
.tool{scroll-margin-top:calc(var(--header-h) + 12px)}
.p2d .sheet{background:var(--sheet)}
.p2d .tool-body{background:none}
.p2d .stage{position:relative;min-height:0;padding:24px}
.tool-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;visibility:hidden}
.tool-frame.is-visible{visibility:visible}
.drop[hidden],.loading[hidden],.drop-overlay[hidden]{display:none}
.sheet-area.is-dragging .drop{border-color:var(--accent);background:var(--accent-wash)}
.drop-overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;border:1.5px dashed var(--accent);background:color-mix(in srgb,var(--accent-wash) 88%,transparent);font:450 26px/1.1 var(--font-display);color:var(--ink)}
.drop-problem{max-width:44ch;font-size:14px;color:var(--accent-ink)}
.loading{display:grid;justify-items:center;gap:16px;text-align:center;color:var(--ink-muted);font-size:14.5px}
.p2d .app-bar{gap:12px;min-width:0}
.p2d .tool-status{text-transform:none;letter-spacing:.04em}
.tool-status{flex:1 1 auto;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-tabs:empty+.tool-status{text-align:left}
.file-tabs{display:flex;flex:0 1 auto;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:thin}
.file-tab{display:inline-flex;align-items:center;flex:none;max-width:220px;border:1px solid var(--hair);border-radius:4px;background:var(--sheet-2)}
.file-tab.is-active{border-color:var(--accent);background:var(--accent-wash)}
.file-tab.is-error .file-tab-name{color:var(--accent-ink);text-decoration:line-through}
.p2d .file-tab button{border:0;background:none;color:var(--ink);cursor:pointer;font:500 12.5px/1 var(--font-mono)}
.file-tab-name{padding:7px 4px 7px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p2d .file-tab-close{padding:6px 8px 6px 4px;color:var(--ink-muted);font-size:15px}
.tool-actions{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none}
.sheet-area:fullscreen{background:var(--sheet)}
.sheet-area:fullscreen .tool-body{height:100vh}
.example-figure .geo{fill:none}
.example-figure .node circle{fill:var(--sheet-2);stroke:var(--accent);stroke-width:1.3}
.p2d .example-actions a{text-decoration:none}
@container (max-width:600px){.p2d .app-bar{flex-wrap:wrap}.tool-status{order:3;flex-basis:100%;text-align:left}}
.view-menu{position:relative}
.view-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:20;display:grid;gap:8px;width:230px;padding:12px 14px 14px;background:var(--sheet);border:1px solid var(--hair);border-radius:6px;box-shadow:var(--lift-pop)}
.view-panel.is-hidden{display:none}
.view-panel .mono-label{font-size:10.5px;margin-top:2px}
.segmented{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair-strong);border-radius:5px;overflow:hidden}
.segmented label{position:relative;cursor:pointer}
.segmented input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.segmented span{display:block;padding:7px 8px;text-align:center;font:500 13.5px/1 var(--font-sans);color:var(--ink-muted)}
.segmented label+label span{border-left:1px solid var(--hair-strong)}
.segmented input:checked+span{background:var(--accent-wash);color:var(--accent-ink)}
.segmented input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px}
.view-panel .check{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.view-panel .check input{width:16px;height:16px;margin:0;accent-color:var(--accent)}