/* Copyright © 2026 Zenin Easa Panthakkalakath */

:root {
    color: #d8e5ec;
    background: #081018;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-synthesis: none;
    --title-height: 38px;
    --tools-height: 44px;
    --accent: #42c9bc;
    --accent-bright: #6ce0d5;
    --orange: #ed9f52;
    --blue: #63bee8;
    --purple: #c18de1;
    --surface: #111d27;
    --raised: #16242e;
    --border: #263744;
    --muted: #718692;
    --math-keyboard-inset: 0px;
    --rail-width: 44px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; user-select: none; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
input, select, textarea { user-select: text; }

#titleBar {
    position: fixed; z-index: 50; top: 0; display: flex; width: 100%; height: var(--title-height);
    align-items: center; justify-content: space-between; color: #eff8fa; background: #070d13;
    border-bottom: 1px solid #15212a; -webkit-app-region: drag;
}
:is(#titleBar, .toolstrip, .viewCube, .causalInference, .resultTransport) [data-tooltip] { position: relative; -webkit-app-region: no-drag; }
:is(#titleBar, .toolstrip, .viewCube, .causalInference, .resultTransport) [data-tooltip]::after {
    position: absolute; z-index: 100; top: calc(100% + 7px); left: 50%; padding: 5px 7px;
    color: #d8e5ea; background: #15232c; border: 1px solid #354954; border-radius: 4px;
    box-shadow: 0 7px 18px rgb(0 0 0 / 38%); content: attr(data-tooltip); font-size: 8px;
    font-style: normal; font-weight: 500; line-height: 1; opacity: 0; pointer-events: none;
    transform: translate(-50%, -2px); transition: opacity .12s .35s, transform .12s .35s;
    visibility: hidden; white-space: nowrap;
}
:is(#titleBar, .toolstrip, .viewCube, .causalInference, .resultTransport) [data-tooltip]:hover::after,
:is(#titleBar, .toolstrip, .viewCube, .causalInference, .resultTransport) [data-tooltip]:focus-visible::after,
:is(#titleBar, .toolstrip, .viewCube, .causalInference, .resultTransport) [data-tooltip]:focus-within::after {
    opacity: 1; transform: translate(-50%, 0); visibility: visible;
}
/* The title bar and the toolstrip draw their tooltips in .barTooltip instead (see barTooltip in renderer.mjs):
   both clip their contents, which cut off a tooltip drawn as the button's own ::after. */
:is(#titleBar, .toolstrip) [data-tooltip]::after { display: none; }
.barTooltip {
    position: fixed; z-index: 200; padding: 5px 7px; color: #d8e5ea; background: #15232c; border: 1px solid #354954;
    border-radius: 4px; box-shadow: 0 7px 18px rgb(0 0 0 / 38%); font-size: 8px; font-weight: 500; line-height: 1;
    opacity: 0; pointer-events: none; visibility: hidden; white-space: nowrap; transition: opacity .12s;
}
.barTooltip.visible { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .barTooltip { transition: none; } }
:is(.viewCube, .resultTransport) [data-tooltip]::after { top: auto; bottom: calc(100% + 7px); }
.resultTransport .closeResults::after { right: 0; left: auto; transform: translateY(2px); }
.resultTransport .closeResults:hover::after { transform: translateY(0); }
#titleBar .windowControls button:last-child::after { right: 5px; left: auto; transform: translateY(-2px); }
#titleBar .windowControls button:last-child:hover::after,
#titleBar .windowControls button:last-child:focus-visible::after { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    :is(#titleBar, .toolstrip, .viewCube, .causalInference, .resultTransport) [data-tooltip]::after { transition: none; }
}
.windowTitle { display: flex; align-items: center; gap: 8px; padding-left: 13px; font-size: 11px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.windowTitle img { width: 18px; height: 18px; flex-shrink: 0; }
.windowTitle .welcomeButton { padding: 3px 5px; color: #eff8fa; background: transparent; border: 1px solid transparent; border-radius: 4px; font-size: 12px; font-weight: 700; outline: 0; -webkit-app-region: no-drag; flex-shrink: 0; }
.windowTitle .welcomeButton:hover, .windowTitle .welcomeButton:focus-visible { background: #121d25; border-color: #263641; }
/* A quiet dot on the Konjugate button when an update is available (docs/updates.md); the Welcome window
   it opens has the details. Ringed in the title bar's own color so it reads against the button. */
.windowTitle .welcomeButton { position: relative; }
.appUpdateBadge { position: absolute; top: 1px; right: -2px; width: 7px; height: 7px; background: #42c9bc; border-radius: 50%; box-shadow: 0 0 0 2px #081119; }
.appUpdateBadge[hidden] { display: none; }
.windowTitle .documentTitle { margin-left: 14px; padding: 3px 5px; color: #82949f; background: transparent; border: 1px solid transparent; border-radius: 4px; font-weight: 450; -webkit-app-region: no-drag; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; }
.windowTitle .documentTitle:hover { color: #c4d2d8; background: #121d25; border-color: #263641; }
.documentTitleInput { width: 170px; height: 25px; margin-left: 14px; padding: 0 5px; color: #d5e2e7; background: #111d25; border: 1px solid #34505c; border-radius: 4px; outline: 0; font-size: 11px; -webkit-app-region: no-drag; }
.windowTitle i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.encryptionStatus { display: grid; width: 18px; height: 18px; margin-left: 1px; place-items: center; background: rgb(66 201 188 / 10%); border: 1px solid rgb(66 201 188 / 24%); border-radius: 50%; flex-shrink: 0; }
.encryptionStatus[hidden] { display: none; }
.encryptionStatus img { width: 11px; height: 11px; filter: brightness(1.45) saturate(1.25); }
.documentActions { display: flex; align-items: center; gap: 2px; margin-left: 6px; -webkit-app-region: no-drag; flex-shrink: 0; }
.documentActions button {
    display: grid; width: 27px; height: 25px; padding: 0; place-items: center; color: #82949f;
    background: transparent; border: 1px solid transparent; border-radius: 4px; flex-shrink: 0;
}
.documentActions button:hover { color: #dce9ee; background: #17232c; border-color: #293b46; }
.documentActions button:disabled { color: #344752; background: transparent; border-color: transparent; cursor: default; }
.documentActionIcon { width: 14px; height: 14px; opacity: .8; transition: filter .12s, opacity .12s; }
.documentActions button:hover .documentActionIcon { filter: brightness(1.65); opacity: 1; }
.documentActions button:disabled .documentActionIcon { filter: brightness(.55); opacity: .55; }
.documentActions .exampleButton {
    display: flex; width: 148px; height: 27px; align-items: center; justify-content: space-between;
    padding: 0 10px; margin-left: 6px; color: #82949f; background: #0b141b; border: 1px solid #253640;
    border-radius: 5px; outline: 0; font-size: 9px; flex-shrink: 0;
}
.documentActions .exampleButton:hover { color: #d5e2e7; background: #101d25; border-color: #36505d; }
.documentActions .exampleButton .exampleButtonIcon { display: none; stroke: currentColor; }
.exampleButton i { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.documentActions .exampleGuideButton { width: 25px; height: 25px; padding: 0; color: #78aaa7; background: rgb(66 201 188 / 6%); border: 1px solid #2d484c; border-radius: 50%; font-size: 9px; }
.documentActions .exampleGuideButton[hidden] { display: none; }
/* Same round "?" affordance as .exampleGuideButton above, under a name that doesn't tie it to
   example guides specifically -- reusable anywhere a control needs an inline help window. */
.helpButton { width: 25px; height: 25px; padding: 0; color: #78aaa7; background: rgb(66 201 188 / 6%); border: 1px solid #2d484c; border-radius: 50%; font-size: 9px; flex-shrink: 0; }
.helpButton:hover { color: #a4e8e2; border-color: #477574; }
.checkboxFieldRow { display: flex; align-items: center; gap: 8px; }
.checkboxFieldRow .checkboxField { flex: 1; }
.encryptionMenu { width: 245px; padding: 6px; }
.encryptionMenu button { display: block; width: 100%; padding: 8px 9px; color: #91a3ac; background: transparent; border: 0; border-radius: 4px; text-align: left; }
.encryptionMenu button:hover { background: #1a2933; }
.encryptionMenu strong, .encryptionMenu span { display: block; }
.encryptionMenu strong { color: #c1d0d6; font-size: 9px; }
.encryptionMenu span { margin-top: 3px; color: #60747f; font-size: 7px; }
.passwordDialog { width: 330px; padding: 0; color: #b8c7ce; background: #0e1922; border: 1px solid #3a4d58; border-radius: 8px; box-shadow: 0 20px 55px rgb(0 0 0 / 60%); }
.passwordDialog::backdrop { background: rgb(2 7 11 / 62%); backdrop-filter: blur(3px); }
.passwordDialog form { padding: 17px; }
.passwordDialog strong { display: block; margin: 4px 0 5px; color: #d8e4e9; font-size: 13px; }
.passwordDialog p { margin: 0 0 14px; color: #667b86; font-size: 8px; line-height: 1.5; }
.passwordDialog label { display: grid; gap: 5px; margin-top: 9px; color: #718691; font-size: 8px; }
.passwordDialog label[hidden] { display: none; }
.passwordDialog .saveContentOption { grid-template-columns: auto 1fr; align-items: start; padding: 8px; background: #09141b; border: 1px solid #2c404b; border-radius: 4px; cursor: pointer; }
.passwordDialog .saveContentOption input { width: 14px; height: 14px; margin: 1px 0 0; padding: 0; accent-color: var(--accent); }
.passwordDialog .saveContentOption span { display: grid; gap: 3px; }
.passwordDialog .saveContentOption b { color: #c8d6dc; font-size: 9px; }
.passwordDialog .saveContentOption small { color: #667b86; font-size: 7px; line-height: 1.4; }
.passwordDialog :is(input, select) { height: 30px; padding: 0 8px; color: #d4e0e5; background: #09141b; border: 1px solid #2c404b; border-radius: 4px; outline: 0; }
.passwordDialog :is(input, select):focus { border-color: #478177; }
/* Help & feedback, after the Konjugate website's install window: its surface, line and teal colours, rounded copy rows and
   circular close button, at a size meant to be read rather than the app's dense dialog text. */
.helpFeedbackDialog { width: min(620px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: hidden; background: #0c1821; border: 1px solid #253a46; border-radius: 9px; box-shadow: 0 30px 80px rgb(0 0 0 / 48%); }
.helpFeedbackDialog::backdrop { background: rgb(3 9 13 / 80%); backdrop-filter: blur(12px); }
.helpFeedbackDialog form { max-height: calc(100vh - 50px); overflow-y: auto; padding: 26px 30px 28px; color: #b7c6cc; }
.helpFeedbackDialog h1 { margin: 4px 0 8px; color: #f0f7f8; font-size: 22px; font-weight: 650; }
.helpFeedbackDialog h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; color: #f0f7f8; font-size: 14px; font-weight: 620; }
.helpFeedbackDialog p { margin: 0 0 12px; color: #82959e; font-size: 12px; line-height: 1.7; }
.helpFeedbackDialog .helpFeedbackIntro { margin-bottom: 4px; }
.helpFeedbackCloseButton { position: absolute; top: 18px; right: 18px; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; color: #82959e; background: #10202a; border: 1px solid #253a46; border-radius: 50%; font-size: 18px; line-height: 1; }
.helpFeedbackCloseButton:hover { color: #f0f7f8; border-color: #4b626d; }
.helpFeedbackOption { margin-top: 22px; padding-top: 22px; border-top: 1px solid #172a35; }
.helpFeedbackOption.helpFeedbackPreferred { margin-top: 18px; padding: 18px 20px 20px; background: #0a151d; border: 1px solid #1f4a4a; border-radius: 8px; }
.helpFeedbackBadge { padding: 2px 8px; color: #74ddd3; background: rgb(66 201 188 / 12%); border: 1px solid rgb(66 201 188 / 35%); border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.helpFeedbackPrimary { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; color: #061412; background: #42c9bc; border: 1px solid #42c9bc; border-radius: 6px; font-size: 13px; font-weight: 700; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.helpFeedbackPrimary:hover, .helpFeedbackPrimary:focus-visible { background: #74ddd3; border-color: #74ddd3; transform: translateY(-2px); }
.helpFeedbackField { margin: 0 0 12px; }
.helpFeedbackFieldLabel { display: block; margin: 0 0 5px 2px; color: #5e737e; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.helpFeedbackFieldLabel small { margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.helpFeedbackLine { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; background: #0a151d; border: 1px solid #172a35; border-radius: 6px; }
.helpFeedbackLine:focus-within { border-color: #3d5967; }
.helpFeedbackLine input { flex: 1 1 auto; min-width: 0; height: auto; padding: 0; color: #f0f7f8; background: transparent; border: 0; font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.helpFeedbackLine input:focus { border: 0; }
.helpFeedbackMessageLine { align-items: flex-start; }
.helpFeedbackMessageLine textarea { flex: 1 1 auto; min-width: 0; min-height: 170px; padding: 4px 0; color: #dbe7eb; background: transparent; border: 0; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.helpFeedbackMessageLine textarea:focus { border: 0; }
.helpFeedbackDialog .helpFeedbackCopy { flex: none; min-width: 74px; min-height: 32px; padding: 0 12px; color: #dbe7eb; background: #0c1821; border: 1px solid #253a46; border-radius: 5px; font-size: 12px; font-weight: 700; transition: border-color .15s ease, color .15s ease; }
.helpFeedbackDialog .helpFeedbackCopy:hover, .helpFeedbackDialog .helpFeedbackCopy:focus-visible { border-color: #74ddd3; }
.helpFeedbackDialog .helpFeedbackCopy.copied { color: #74ddd3; border-color: #42c9bc; }
.helpFeedbackDialog .helpFeedbackNudge { margin: 8px 2px 0; color: #eaa05c; font-size: 12px; line-height: 1.5; }
.helpFeedbackDialog .helpFeedbackNudge[hidden] { display: none; }
.helpFeedbackDialog .helpFeedbackAll { margin: 4px 2px 0; }
.helpFeedbackLink { padding: 0; color: #74ddd3; background: none; border: 0; font: inherit; font-size: 12px; text-decoration: underline; text-decoration-color: rgb(116 221 211 / 40%); text-underline-offset: 3px; }
.helpFeedbackLink:hover, .helpFeedbackLink:focus-visible { color: #f0f7f8; text-decoration-color: currentColor; }
.helpFeedbackLink.copied { color: #74ddd3; text-decoration: none; }
.helpFeedbackAnnounce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .helpFeedbackPrimary { transition: none; } .helpFeedbackPrimary:hover, .helpFeedbackPrimary:focus-visible { transform: none; } }
.passwordError { min-height: 16px; padding-top: 6px; color: #d48288; font-size: 8px; }
.passwordDialog textarea { padding: 6px 8px; color: #d4e0e5; background: #09141b; border: 1px solid #2c404b; border-radius: 4px; outline: 0; font: inherit; font-size: 8px; resize: vertical; }
.passwordDialog textarea:focus { border-color: #478177; }
#templateDialogError { white-space: pre-wrap; }
.passwordDialog footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; }
.passwordDialog footer .footerLeftButton { margin-right: auto; }
.passwordDialog footer button { height: 28px; padding: 0 10px; color: #82949f; background: transparent; border: 1px solid #2c3e48; border-radius: 4px; font-size: 8px; }
.passwordDialog .doneButton:disabled { color: #53646d !important; background: #1a282f !important; border-color: #263740 !important; cursor: default; opacity: .7; }
.runConfigurationDialog { width: 360px; }
.shapeLibraryDialog { width: 760px; }
.shapeLibraryDialog #shapeLibrarySearch { box-sizing: border-box; width: 100%; height: 30px; padding: 0 9px; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 4px; outline: 0; font-size: 9px; }
.shapeLibraryDomains { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.shapeLibraryDomains button { padding: 4px 9px; color: #8199a3; background: #0f1c24; border: 1px solid #263b45; border-radius: 999px; font-size: 7px; text-transform: uppercase; letter-spacing: .06em; }
.shapeLibraryDomains button.active { color: #09201e; background: var(--accent, #42c9bc); border-color: transparent; }
.shapeLibraryBody { display: grid; grid-template-columns: 1fr 240px; gap: 14px; margin-top: 10px; }
.shapeLibraryBrowse { min-width: 0; }
.shapeLibraryResults { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; max-height: 380px; overflow-y: auto; }
.shapeLibraryItem { display: grid; gap: 3px; padding: 9px; text-align: left; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 5px; }
.shapeLibraryItem:hover { background: rgb(66 201 188 / 6%); border-color: #47736f; }
.shapeLibraryItem.selected { background: rgb(66 201 188 / 10%); border-color: var(--accent, #42c9bc); }
.shapeLibraryItem b { color: #d8e4e9; font-size: 9px; }
.shapeLibraryItem small { display: flex; gap: 5px; color: #6c818d; font-size: 7px; text-transform: uppercase; letter-spacing: .05em; }
.shapeLibraryItem .shapeFormatBadge { padding: 1px 5px; background: #16262e; border-radius: 3px; }
#shapeLibraryEmpty { margin-top: 8px; }
.shapeLibraryDetail { display: flex; flex-direction: column; padding: 10px; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 5px; }
#shapeLibraryDetailEmpty { margin: 0; color: #5e747d; font-size: 8px; line-height: 1.5; }
#shapeLibraryDetailContent { display: grid; gap: 8px; }
#shapeLibraryDetailContent[hidden] { display: none; }
/* Drag-to-rotate only (no zoom/pan) inside a small canvas benefits from an obvious grab
   affordance, since there's no page-level scroll gesture for it to be mistaken for. */
.shapeLibraryPreviewCanvas { width: 100%; aspect-ratio: 16 / 10; background: #060d12; border-radius: 4px; cursor: grab; touch-action: none; }
.shapeLibraryPreviewCanvas:active { cursor: grabbing; }
#shapeLibraryDetailTitle { color: #d8e4e9; font-size: 10px; }
#shapeLibraryDetailMeta { margin: 0; color: #8199a3; font-size: 8px; line-height: 1.6; text-transform: uppercase; letter-spacing: .05em; }
/* Same toolstrip-Run-button treatment as #examplesExplorerLoad, since this is likewise the
   dialog's own primary action rather than a small dialog-footer button. */
#shapeLibraryApply { display: flex; align-items: center; justify-content: center; height: 32px; margin-top: 4px; border-radius: 5px; font-size: 11px; }
#shapeLibraryApply:hover { background: var(--accent-bright) !important; }

.examplesExplorerDialog { width: 760px; }
.examplesExplorerDialog #examplesExplorerSearch { box-sizing: border-box; width: 100%; height: 30px; padding: 0 9px; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 4px; outline: 0; font-size: 9px; }
.examplesExplorerBody { display: grid; grid-template-columns: 1fr 240px; gap: 14px; margin-top: 10px; }
.examplesExplorerBrowse { min-width: 0; }
/* A fixed height (not just a cap) on both the results grid and its detail-pane sibling below, so
   the dialog itself -- sized to its content, being a <dialog> -- doesn't grow or shrink as the
   list's item count or the detail pane's content (empty/Installed/Discover) changes between tabs,
   modes, and selections. align-content:start is required alongside it: a grid container with a
   fixed height and only "auto"-sized rows otherwise stretches those rows to fill the leftover
   space when there are few items (a 4-item list turning each item into a mostly-empty ~95px
   block), and re-packs them tighter as more items arrive -- exactly backwards from a stable list,
   where each item's height should come from its own content and stay put as the count changes. */
.examplesExplorerResults { display: grid; grid-template-columns: repeat(2, 1fr); align-content: start; gap: 8px; height: 380px; overflow-y: auto; }
.examplesExplorerItem { display: grid; align-content: start; gap: 6px; padding: 8px; text-align: left; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 5px; }
.examplesExplorerItem:hover { background: rgb(66 201 188 / 6%); border-color: #47736f; }
.examplesExplorerItem.selected { background: rgb(66 201 188 / 10%); border-color: var(--accent, #42c9bc); }
.examplesExplorerThumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #060d12; border-radius: 3px; }
.examplesExplorerThumb[hidden] { display: none; }
.examplesExplorerThumbPlaceholder { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10; color: #3d5560; background: #060d12; border-radius: 3px; font-size: 7px; text-transform: uppercase; letter-spacing: .05em; }
.examplesExplorerItem b { color: #d8e4e9; font-size: 9px; }
#examplesExplorerEmpty { margin-top: 8px; }
.examplesExplorerDetail { display: flex; flex-direction: column; height: 380px; padding: 10px; overflow-y: auto; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 5px; }
#examplesExplorerDetailEmpty { margin: 0; color: #5e747d; font-size: 8px; line-height: 1.5; }
#examplesExplorerDetailContent { display: grid; gap: 8px; }
#examplesExplorerDetailContent[hidden] { display: none; }
.examplesExplorerDetailThumbnail { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #060d12; border-radius: 4px; }
.examplesExplorerDetailThumbnail[hidden] { display: none; }
#examplesExplorerDetailTitle { color: #d8e4e9; font-size: 10px; }
/* Sized and shaped like the toolstrip's Run button (its .doneButton class already matches its
   accent color/weight) rather than the smaller dialog-footer buttons its plain <button> markup
   would otherwise inherit, since this is the dialog's own primary action. */
#examplesExplorerLoad { display: flex; align-items: center; justify-content: center; height: 32px; margin-top: 4px; border-radius: 5px; font-size: 11px; }
#examplesExplorerLoad:hover { background: var(--accent-bright) !important; }
#examplesExplorerDetailDescription { margin: 0; color: #8199a3; font-size: 8px; line-height: 1.6; }

/* Wider and taller than the Examples dialog it was modeled on: Discover's detail pane now carries
   screenshots and video links as well as a description, and 240px by 380px was too small for that.
   Width and height follow the window (as .assistantConfigurationDialog does for width) so the dialog
   stays on screen at any UI zoom, with the old 380px as the floor. */
.extensionsDialog { --extensions-pane-height: clamp(380px, calc(100vh - 320px), 600px); width: min(980px, calc(100vw - 40px)); max-width: none; }
.extensionsDialog .examplesExplorerBody { grid-template-columns: 1fr 360px; }
.extensionsDialog footer span { flex: 1; }
.extensionsTabs { display: flex; gap: 4px; margin: 10px 0 0; }
.extensionsTab { padding: 5px 11px; color: #7c909a; background: transparent; border: 1px solid transparent; border-radius: 999px; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.extensionsTab:hover { color: #aebdc5; background: #101c24; }
.extensionsTab.active { color: #09201e; background: var(--accent, #42c9bc); border-color: transparent; }
.extensionsBody { margin-top: 12px; }
.extensionsResults { grid-template-columns: 1fr; height: var(--extensions-pane-height); max-height: none; }
.extensionsItem b { display: block; }
/* Clamped to 2 lines rather than left unbounded, so a long description doesn't make one item much
   taller than its neighbors -- every item's height should come from the same shape of content.
   Shared by Discover's own entries and an Installed item borrowing its registry entry's
   description (registryDescriptionFor) -- same shape of content either way. */
.extensionsItemDescription { display: -webkit-box; margin: 0; overflow: hidden; color: #8199a3; font-size: 7.5px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.discoverItemBadges { display: flex; gap: 4px; margin-bottom: 3px; }
/* Extensions lists are a single column, so an item's thumbnail sits beside its text rather than
   above it the way an Examples item's does; the detail pane shows the same image full width. */
.extensionsItemWithThumb { grid-template-columns: 72px 1fr; column-gap: 9px; row-gap: 3px; }
.extensionsItemWithThumb > * { grid-column: 2; }
.extensionsItemWithThumb > .extensionsThumb { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
.extensionsItemWithThumb .discoverItemBadges { margin-bottom: 0; }
.extensionsThumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #060d12; border-radius: 3px; }
.extensionsThumbPlaceholder { display: flex; align-items: center; justify-content: center; color: rgb(66 201 188 / 55%); background: radial-gradient(circle at 30% 25%, rgb(66 201 188 / 12%), transparent 65%), #060d12; font-size: 13px; font-weight: 700; }
/* Images arrive a moment after their item renders, so they fade in rather than pop. */
img.extensionsThumb, .extensionsDetailImage { opacity: 0; transition: opacity 160ms ease; }
img.extensionsThumb.loaded, .extensionsDetailImage.loaded { opacity: 1; }
.extensionsDetailImage { aspect-ratio: 16 / 9; }
@media (prefers-reduced-motion: reduce) {
    img.extensionsThumb, .extensionsDetailImage { transition: none; }
}
/* A registry entry's screenshots: a strip of thumbnails in the Discover detail pane, each of which
   expands to the pane's full width when clicked. Like the cover image, each fades in on arrival. */
.extensionsScreenshots { display: flex; gap: 6px; margin: 6px 0; padding-bottom: 4px; overflow-x: auto; }
.extensionsScreenshot { flex: 0 0 46%; margin: 0; }
.extensionsScreenshot.expanded { flex-basis: 100%; }
.extensionsScreenshotButton { display: block; width: 100%; padding: 0; border: 0; border-radius: 3px; background: #060d12; cursor: zoom-in; }
.extensionsScreenshot.expanded .extensionsScreenshotButton { cursor: zoom-out; }
.extensionsScreenshotButton img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 3px; object-fit: cover; opacity: 0; transition: opacity 160ms ease; }
.extensionsScreenshot.expanded .extensionsScreenshotButton img { aspect-ratio: auto; object-fit: contain; }
.extensionsScreenshotButton img.loaded { opacity: 1; }
.extensionsScreenshot figcaption { margin-top: 2px; color: #8199a3; font-size: 7px; line-height: 1.4; }
.extensionsVideoList { margin: 0 0 6px; padding: 0; list-style: none; }
.extensionsVideoLink { padding: 2px 0; border: 0; background: none; color: #42c9bc; font: inherit; text-align: left; cursor: pointer; }
.extensionsVideoLink:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
    .extensionsScreenshotButton img { transition: none; }
}
.extensionsItemMeta { display: block; margin-top: 2px; color: #647984; font-size: 7px; }
#extensionsRestartNotice { margin-top: 8px; }
.extensionsUpdatesStrip { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; color: #9fd6d0; background: rgb(66 201 188 / 7%); border: 1px solid #2d484c; border-radius: 5px; font-size: 8px; }
.extensionsUpdatesStrip[hidden] { display: none; }
.extensionsUpdatesStrip > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extensionsUpdatesStrip button { flex-shrink: 0; height: 24px; }
.extensionsUpdatesStrip button[hidden] { display: none; }
.extensionsUpdatesStrip .extensionsUpdateAllButton { color: #09201e; background: var(--accent, #42c9bc); border-color: transparent; font-weight: 700; }
.extensionsUpdatesStrip .extensionsUpdateAllButton:hover { color: #09201e; background: var(--accent-bright, #6ce0d5); }
.extensionsUpdatesStrip button:disabled { opacity: .55; cursor: default; }
.extensionsTabCount { margin-left: 5px; padding: 0 5px; color: #06201d; background: #82cfc8; border-radius: 999px; font-size: 7px; font-weight: 700; letter-spacing: 0; }
.extensionsTabCount[hidden] { display: none; }
.extensionsTab.active .extensionsTabCount { color: var(--accent, #42c9bc); background: #09201e; }
.extensionsItem { position: relative; }
.extensionsItem.hasUpdate { border-color: #2f5b59; }
.extensionsItem.hasUpdate > b { padding-right: 96px; }
.extensionsUpdatePill { position: absolute; top: 8px; right: 8px; padding: 2px 7px; color: #06201d; background: #82cfc8; border-radius: 999px; font-size: 6.5px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.extensionsItemUpdate { color: #82cfc8; font-weight: 600; }
.extensionsItem.isIncompatible { border-color: #4a3f2e; }
.extensionsItem.isIncompatible > b { padding-right: 96px; }
.extensionsIncompatiblePill { position: absolute; top: 8px; right: 8px; padding: 2px 7px; color: #2a1c05; background: #d6a35f; border-radius: 999px; font-size: 6.5px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.extensionsItemIncompatible { color: #d6a35f; font-weight: 600; }
.extensionsItemHeldBack { color: #8a9ba3; }
.extensionsRestartPendingNotice { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 8px 10px; color: #d6a35f; background: rgb(214 163 95 / 8%); border: 1px solid #4a3f2e; border-radius: 5px; font-size: 8px; }
.extensionsRestartPendingNotice[hidden] { display: none; }
.extensionsRestartPendingNotice .extensionsToggleButton { flex-shrink: 0; color: #d6a35f; border-color: #4a3f2e; }
.extensionsRestartPendingNotice .extensionsToggleButton:hover { color: #f0c785; background: rgb(214 163 95 / 12%); }
/* The examplesExplorer detail-pane rules above are ID-scoped to that dialog; this dialog's
   detail pane has a different structure (badge/facts/permissions instead of a thumbnail), so it
   gets its own ID rules here rather than trying to share the examplesExplorer ones. */
.examplesExplorerDetailEmpty { margin: 0; color: #5e747d; font-size: 8px; line-height: 1.5; }
/* The detail pane itself never scrolls: each content block is a column holding a scrolling region
   (.extensionsDetailScroll) above a footer that stays put, so the action buttons are always visible
   however long the description is. The pane's own padding moves to the two parts for that reason. */
.extensionsDialog .examplesExplorerDetail { height: var(--extensions-pane-height); padding: 0; overflow: hidden; }
.extensionsDialog .examplesExplorerDetail > .examplesExplorerDetailEmpty { padding: 10px; }
#extensionsDetailContent, #extensionsDiscoverDetailContent { display: flex; flex: 1; flex-direction: column; min-height: 0; }
#extensionsDetailContent[hidden], #extensionsDiscoverDetailContent[hidden] { display: none; }
.extensionsDetailScroll { display: grid; flex: 1; align-content: start; gap: 8px; min-height: 0; padding: 10px; overflow-y: auto; }
#extensionsDetailTitle { color: #d8e4e9; font-size: 10px; }
.extensionsBadge { display: inline-block; width: fit-content; padding: 2px 7px; color: #7c909a; background: #101c24; border: 1px solid #29404b; border-radius: 999px; font-size: 6.5px; text-transform: uppercase; letter-spacing: .06em; }
.extensionsBadge.bundled { color: #78aaa7; background: rgb(66 201 188 / 8%); border-color: #2d484c; }
.extensionsDetailFacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
.extensionsDetailFacts dt { color: #566b76; font-size: 6.5px; text-transform: uppercase; letter-spacing: .05em; }
.extensionsDetailFacts dd { margin: 2px 0 0; color: #c0cdd3; font-size: 8.5px; }
.extensionsDetailLabel { margin: 10px 0 4px; color: #566b76; font-size: 7px; text-transform: uppercase; letter-spacing: .05em; }
.extensionsPermissionList { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.extensionsPermissionList li { padding: 3px 7px; color: #8199a3; background: #0a151d; border: 1px solid #263b45; border-radius: 4px; font-size: 7px; }
.extensionsPermissionList:empty::after { content: 'None requested'; color: #566b76; font-size: 7px; }
.extensionsDetailFooter { display: flex; flex: none; justify-content: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid #2b3d48; background: #0a151d; }
.extensionsToggleButton { height: 28px; padding: 0 10px; color: #82949f; background: transparent; border: 1px solid #2c3e48; border-radius: 4px; font-size: 8px; }
.extensionsToggleButton:hover { color: #dce9ee; background: #17232c; border-color: #293b46; }
.extensionsDangerButton { padding: 0 10px; height: 28px; color: #c17980; background: transparent; border: 1px solid #4a2e30; border-radius: 4px; font-size: 8px; }
.extensionsDangerButton:hover { color: #e39197; background: rgb(193 121 128 / 10%); border-color: #6a3c3f; }
.extensionsBadge.disabled { color: #c17980; background: rgb(193 121 128 / 8%); border-color: #4a2e30; margin-left: 4px; }
#extensionsDetailBundleNote { margin-top: 10px; }
#extensionsDetailBundleNote[hidden] { display: none; }
#extensionsDetailEnabledBadge[hidden] { display: none; }
.extensionsItem.disabledItem { opacity: .55; }
/* Discover mode (see docs/extensionsExplorer.md): a mode toggle above the existing Installed-only
   tabs/domain-chip filters. No pre-download trust-status badge here -- see the comment on
   #extensionsDiscoverDetailContent in index.html for why one isn't shown before a package's
   signature can actually be checked. */
.extensionsModes { margin-top: 0; }
#extensionsTabs[hidden], #extensionsDomains[hidden] { display: none; }
#extensionsDiscoverDetailContent { display: grid; gap: 8px; }
#extensionsDiscoverDetailContent[hidden] { display: none; }
#extensionsDiscoverDetailTitle { color: #d8e4e9; font-size: 10px; }
#extensionsDiscoverDetailDescription { margin: 10px 0 0; color: #8199a3; font-size: 8px; line-height: 1.6; text-transform: none; letter-spacing: normal; }
.extensionsDetailFacts a { color: var(--accent, #42c9bc); text-decoration: none; cursor: pointer; word-break: break-all; }
.extensionsDetailFacts a:hover { text-decoration: underline; }
#extensionsDiscoverInstall:disabled { opacity: .5; cursor: default; }

.componentLibraryPanel {
    position: fixed; z-index: 34; top: calc(var(--title-height) + var(--tools-height) + 10px); left: calc(var(--rail-width) + 10px);
    bottom: calc(var(--math-keyboard-inset) + 10px); display: flex; flex-direction: column; width: 300px;
    overflow: hidden; color: #b8c7ce; background: rgb(14 25 34 / 97%); border: 1px solid #3a4d58;
    border-radius: 8px; box-shadow: 0 16px 38px rgb(0 0 0 / 48%); backdrop-filter: blur(12px);
}
.componentLibraryPanel[hidden] { display: none; }
.controlHistoryPanel { width: 330px; }
.controlHistoryList { display: grid; align-content: start; gap: 12px; overflow-y: auto; padding: 12px 14px 14px; }
.controlHistoryCard { display: grid; gap: 5px; padding: 9px 10px 8px; background: #0f1c24; border: 1px solid #263b45; border-radius: 6px; }
.controlHistoryCard header { display: grid; gap: 1px; }
.controlHistoryCard header strong { color: #d8e4e9; font-size: 9px; }
.controlHistoryCard header small { color: #6c818d; font-size: 7px; }
.controlHistoryPlot { display: block; width: 100%; height: auto; background: #0a151d; border-radius: 4px; }
.controlHistoryLine { fill: none; stroke: var(--accent, #42c9bc); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.controlHistoryOwn { stroke: #3a4d58; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.controlHistoryMark { fill: #d8b24a; stroke: #0a151d; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: help; }
.controlHistoryNow { fill: var(--accent, #42c9bc); stroke: #0a151d; stroke-width: 1; vector-effect: non-scaling-stroke; }
.controlHistoryRestart { stroke: #8f6fd1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.controlHistoryCursor { stroke: #d8e4e9; stroke-width: 1; opacity: .7; vector-effect: non-scaling-stroke; }
.controlHistoryAxis { fill: #6c818d; font-size: 7px; }
.controlHistoryCaption { color: #7d929c; font-size: 7px; line-height: 1.4; }
.controlHistoryChanges { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; color: #8199a3; font-size: 7px; }
.controlHistoryChanges time { color: #d8b24a; margin-right: 4px; }
#controlHistoryEmpty { margin: 0 14px 14px; }
.componentLibraryPanel > header { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px 11px; border-bottom: 1px solid #263742; }
.componentLibraryPanel > header strong { display: block; margin-top: 3px; color: #d5e1e6; font-size: 12px; }
.componentLibraryPanel > header button { color: #60747f; background: transparent; border: 0; font-size: 16px; }
#componentLibrarySearch { box-sizing: border-box; width: calc(100% - 28px); height: 30px; margin: 12px 14px 0; padding: 0 9px; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 4px; outline: 0; font-size: 9px; }
.componentLibraryChips { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 14px 0; }
.componentLibraryChips button { padding: 4px 9px; color: #8199a3; background: #0f1c24; border: 1px solid #263b45; border-radius: 999px; font-size: 7px; text-transform: uppercase; letter-spacing: .06em; }
.componentLibraryChips button.active { color: #09201e; background: var(--accent, #42c9bc); border-color: transparent; }
.componentLibraryResults { display: grid; gap: 10px; overflow-y: auto; padding: 12px 14px 14px; }
.componentLibrarySection { display: grid; gap: 6px; }
.componentLibrarySection h3 { margin: 0; color: #6e828e; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.componentLibraryItem { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; padding: 8px 9px; text-align: left; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 5px; }
.componentLibraryRow { position: relative; display: grid; }
.componentLibraryRowActions { position: absolute; top: 5px; right: 6px; display: none; gap: 2px; }
.componentLibraryRow:hover .componentLibraryRowActions, .componentLibraryRow:focus-within .componentLibraryRowActions { display: flex; }
.componentLibraryRowAction { width: 20px; height: 20px; padding: 0; color: #8199a3; background: #0f1c24; border: 1px solid #263b45; border-radius: 4px; font-size: 9px; line-height: 1; cursor: pointer; }
.componentLibraryRowAction:hover { color: #d8e4e9; border-color: #47736f; }
.componentLibrarySubsection { display: grid; gap: 6px; }
.componentLibrarySubsection > summary { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 0; color: #8199a3; font-size: 8px; cursor: pointer; }
.componentLibrarySubsection > summary .componentLibraryRowAction { width: 18px; height: 18px; visibility: hidden; }
.componentLibrarySubsection > summary:hover .componentLibraryRowAction, .componentLibrarySubsection > summary:focus-within .componentLibraryRowAction { visibility: visible; }
.componentLibrarySubsectionBody { display: grid; gap: 6px; margin-left: 9px; padding-left: 8px; border-left: 1px solid #263b45; }
.componentLibraryItem:hover { background: rgb(66 201 188 / 6%); border-color: #47736f; }
.componentLibraryItem:disabled { opacity: .5; cursor: default; }
.componentLibraryItem .componentLibrarySwatch { width: 10px; height: 10px; border-radius: 3px; }
.componentLibraryItem b { display: block; color: #d8e4e9; font-size: 9px; }
.componentLibraryItem small { display: flex; gap: 5px; color: #6c818d; font-size: 7px; text-transform: uppercase; letter-spacing: .05em; }
#componentLibraryEmpty { margin: 0 14px 14px; }
.componentLibraryHint { margin: 0 14px 14px; padding: 8px 9px; color: #9fb0b8; background: #0f1c24; border: 1px solid #263b45; border-radius: 5px; font-size: 8px; }
.executionConfiguration { margin-top: 13px; padding-top: 11px; border-top: 1px solid #263a44; }
.configurationSectionTitle { display: block; color: #8aa0aa; font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.runConfigurationScope { margin-top: 8px; color: #718690; font-size: 8px; line-height: 1.5; }
.executionAdvanced { margin-top: 11px; padding: 8px 9px; background: #0a161d; border: 1px solid #263b45; border-radius: 5px; }
.executionAdvanced summary { color: #8499a3; font-size: 8px; cursor: pointer; user-select: none; }
.executionAdvanced[open] summary { margin-bottom: 8px; color: #b8cbd1; }
.executionAdvanced label:first-of-type { margin-top: 0; }
.assistantConfigurationDialog { width: min(780px, calc(100vw - 40px)); max-width: none; }
.assistantConfigurationDialog form { padding: 0; }
.assistantConfigurationHeader { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px 12px; border-bottom: 1px solid #263a44; }
.assistantConfigurationHeader > span { display: block; }
.assistantConfigurationHeader strong { margin-bottom: 0; }
.assistantConfigurationHeader > button { width: 26px; height: 26px; padding: 0; color: #718690; background: transparent; border: 0; font-size: 15px; }
.assistantConfigurationWorkspace { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 410px; }
.assistantConfigurationWorkspace > aside { display: flex; flex-direction: column; gap: 9px; padding: 13px; background: #09141b; border-right: 1px solid #263a44; }
.assistantConfigurationWorkspace > aside > button { width: 100%; height: 30px; border: 0; border-radius: 4px; font-size: 8px; }
.assistantConfigurationWorkspace > aside > input { width: 100%; }
.assistantConfigurationList { display: grid; align-content: start; gap: 4px; min-height: 0; overflow-y: auto; }
.assistantConfigurationList button { position: relative; display: grid; gap: 4px; width: 100%; padding: 9px 10px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 4px; }
.assistantConfigurationList button:hover { background: #102029; }
.assistantConfigurationList button.selected { background: #132630; border-color: #31505a; }
.assistantConfigurationList strong { margin: 0; padding-right: 35px; color: #c7d5da; font-size: 9px; }
.assistantConfigurationList span { overflow: hidden; color: #647984; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.assistantConfigurationList i { position: absolute; top: 8px; right: 8px; color: #66c8bf; font-size: 6px; font-style: normal; text-transform: uppercase; letter-spacing: .6px; }
.assistantConfigurationDetails { padding: 15px 18px; }
.assistantConfigurationDetails > div:first-child { min-height: 58px; }
.assistantConfigurationDetails fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.assistantConfigurationDetails fieldset:disabled { opacity: .65; }
.assistantConfigurationStatus { min-height: 16px; padding-top: 6px; color: #718691; font-size: 8px; }
.assistantConfigurationStatus.error { color: #d48288; }
.assistantConfigurationStatus.warning { color: #d6a35f; }
.assistantConfigurationDialog > form > footer { display: grid; grid-template-columns: auto 1fr auto auto; margin: 0; padding: 11px 17px; border-top: 1px solid #263a44; }
.configurationModelControl { display: grid; gap: 5px; }
.configurationModelField { display: grid; grid-template-columns: 1fr auto; }
.passwordDialog .configurationModelField :is(input, select) { border-radius: 4px 0 0 4px; }
.passwordDialog .configurationModelField button { padding: 0 9px; color: #76c8c1; background: #172730; border: 1px solid #304650; border-left: 0; border-radius: 0 4px 4px 0; font-size: 7px; }
.toolchainDetected { display: block; margin-top: 5px; color: #657985; font-size: 7px; overflow-wrap: anywhere; }
.toolchainPathRow { display: flex; gap: 5px; margin-top: 5px; }
.toolchainPathRow input { flex: 1; min-width: 0; }
.passwordDialog .toolchainPathRow button { padding: 0 9px; color: #76c8c1; background: #172730; border: 1px solid #304650; border-radius: 4px; font-size: 7px; }
.assistantConfigurationDialog footer #deleteAssistantConfiguration { color: #c17980; }
@media (max-width: 650px) {
    .assistantConfigurationWorkspace { grid-template-columns: 180px minmax(0, 1fr); }
}
.passwordDialog .runModeSwitch { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 13px; padding: 9px; background: #0a151d; border: 1px solid #293b46; border-radius: 4px; cursor: pointer; }
.runModeSwitch > span { display: grid; gap: 3px; }
.runModeSwitch b { color: #b9c9d0; font-size: 8px; font-weight: 650; }
.runModeSwitch small { color: #607681; font-size: 7px; line-height: 1.4; }
.passwordDialog .runModeSwitch input { position: relative; width: 28px; min-width: 28px; height: 16px; padding: 0; appearance: none; background: #21343e; border: 1px solid #3a505c; border-radius: 10px; cursor: pointer; }
.passwordDialog .runModeSwitch input::after { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: #71858f; border-radius: 50%; content: ''; transition: transform 120ms ease, background 120ms ease; }
.passwordDialog .runModeSwitch input:checked { background: rgb(66 201 188 / 24%); border-color: #39877f; }
.passwordDialog .runModeSwitch input:checked::after { background: var(--accent); transform: translateX(12px); }
.derivedTimeStep { display: flex; justify-content: space-between; margin-top: 12px; padding: 8px; color: #657984; background: #0a151d; border: 1px solid #293b46; border-radius: 4px; font-size: 8px; }
.derivedTimeStep strong { color: #86c9c3; }
.windowControls { display: flex; height: 100%; flex-shrink: 0; margin-left: auto; -webkit-app-region: no-drag; }
.windowControls button { display: grid; width: 46px; height: 100%; padding: 0; place-items: center; background: transparent; border: 0; font-size: 17px; flex-shrink: 0; }
.windowControls .uiZoomButton { width: 34px; color: #7f929c; font-size: 9px; font-weight: 650; letter-spacing: -.04em; }
.windowControls .uiZoomButton:disabled { color: #344751; cursor: default; }
.windowControls .titleAssistantControl { position: relative; width: 38px; color: #82cfc8; font-size: 15px; }
.windowControls .titleAssistantControl[aria-expanded="true"] { color: #a1f2ea; background: rgb(66 201 188 / 10%); }
.windowControls .titleAssistantControl:disabled { color: #344751; cursor: default; }
#diagnosticsButton { color: #5c7079; font-size: 12px; }
#extensionsButton .extensionsUpdateBadge { right: auto; left: 4px; color: #06201d; background: #82cfc8; }
.diagnosticsBadge {
    position: absolute; top: 6px; right: 4px; min-width: 13px; height: 13px; padding: 0 3px;
    color: #1a0d0f; background: #e0929a; border-radius: 7px; font-size: 7px; font-weight: 750;
    line-height: 13px; text-align: center;
}
.windowControlDivider { width: 1px; height: 17px; align-self: center; background: #263944; flex-shrink: 0; }
.windowControls button:hover { background: #1a2730; }
.windowControls :is(.uiZoomButton, .titleAssistantControl):disabled:hover { background: transparent; }
.windowControls .closeButton:hover { background: #d64853; }

.toolstrip {
    position: fixed; z-index: 40; top: var(--title-height); display: flex; width: 100%; height: var(--tools-height);
    align-items: center; gap: 5px; padding: 0 12px; background: rgb(9 18 24 / 92%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 4px 16px rgb(0 0 0 / 24%);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.toolstrip > :not(.toolstripLeft) { flex-shrink: 0; }
.toolSpacer { flex: 1 1 auto; min-width: 0; }
.toolstripLeft {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 0 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.toolstripLeft::-webkit-scrollbar {
    display: none;
}
.toolstripLeft .toolGroup {
    flex-shrink: 0;
}
.toolButton, .squareTool {
    display: flex; height: 30px; align-items: center; justify-content: center; gap: 6px; padding: 0 8px;
    color: #9cafba; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 11px;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.toolGroup { display: flex; align-items: center; gap: 1px; padding: 2px; background: rgb(255 255 255 / 3%); border: 1px solid rgb(255 255 255 / 7%); border-radius: 7px; }
.createToolGroup { background: rgb(255 255 255 / 3%); border: 1px solid rgb(255 255 255 / 7%); border-radius: 7px; }
.squareTool { width: 30px; padding: 0; font-size: 15px; }
.toolSvg { display: block; flex-shrink: 0; }
.toolButton:hover, .squareTool:hover { color: #f0f6f8; background: rgb(255 255 255 / 6%); border-color: transparent; }
.toolButton.active, .squareTool.active { color: var(--accent-bright); background: rgb(66 201 188 / 14%); border-color: rgb(66 201 188 / 38%); }
.squareTool:disabled { color: #344852; background: transparent; border-color: transparent; cursor: default; opacity: .45; }
.historyTool { font-size: 13px; }
.clipboardTool { font-size: 14px; }
.addonTool[hidden] { display: none; }
.addonRail {
    position: fixed; z-index: 39; top: calc(var(--title-height) + var(--tools-height)); bottom: 0; left: 0; display: flex;
    width: var(--rail-width); flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 6px;
    background: rgb(9 18 24 / 92%); border-right: 1px solid rgb(255 255 255 / 7%);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.railSeparator { width: 18px; height: 1px; flex-shrink: 0; align-self: center; margin: 3px 0; background: rgb(255 255 255 / 14%); border-radius: 1px; }
/* Nothing sits below the Extensions button while no add-on button is showing, so there is nothing to divide it from. */
.addonRail:not(:has(.addonTool:not([hidden]))) .railSeparator { display: none; }
.addonRailButtons { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 4px; }
/* One button widens on its own, over the canvas, while hovered or keyboard-focused: the rail itself keeps
   its width, and so does the canvas. The rail must not clip (no overflow), or the widened button would be
   cut off at the rail's edge. */
.railTool { position: relative; width: 32px; flex-shrink: 0; justify-content: flex-start; gap: 0; padding: 0; overflow: hidden; white-space: nowrap; }
.railTool:is(:hover, :focus-visible) {
    z-index: 1; width: auto; color: #f0f6f8; background: var(--raised); border-color: rgb(66 201 188 / 38%);
    box-shadow: 4px 4px 16px rgb(0 0 0 / 40%);
}
.railToolSymbol { position: relative; display: grid; width: 30px; flex-shrink: 0; place-items: center; color: #72d5cc; font-size: 14px; }
.railToolLabel { max-width: 0; padding-right: 0; overflow: hidden; opacity: 0; transition: max-width .14s ease .08s, padding .14s ease .08s, opacity .1s ease .08s; }
.railTool:is(:hover, :focus-visible) .documentActionIcon { filter: brightness(1.65); opacity: 1; }
.railTool:is(:hover, :focus-visible) .railToolLabel { max-width: 200px; padding-right: 10px; opacity: 1; }
.primaryTool { color: #d7e5ea; background: rgb(66 201 188 / 14%); border-color: rgb(66 201 188 / 35%); }
.primaryTool:hover { color: #ffffff; background: rgb(66 201 188 / 24%); border-color: rgb(66 201 188 / 55%); }
.primaryTool .toolSvg { stroke: var(--accent-bright); }
.divider { width: 1px; height: 20px; margin: 0 2px; background: rgba(255, 255, 255, 0.08); }
.simulationReadout {
    display: flex; height: 30px; align-items: center; gap: 7px; padding: 0 9px;
    color: #8da3b0; background: rgb(255 255 255 / 3%); border: 1px solid rgb(255 255 255 / 7%);
    border-radius: 6px; font-size: 11px; font-weight: 500;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.simulationReadout:hover, .simulationReadout[aria-expanded="true"] { color: #dbe7eb; background: rgb(255 255 255 / 6%); }
.simulationReadout i { width: 7px; height: 7px; flex-shrink: 0; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px rgb(66 201 188 / 60%); }
.simulationReadout.warning i { background: var(--orange); box-shadow: 0 0 8px rgb(237 159 82 / 60%); }
.simulationReadout.error i { background: #e06c75; box-shadow: 0 0 8px rgb(224 108 117 / 60%); }
.simulationReadout.pending i { background: #63bee8; box-shadow: 0 0 8px rgb(99 190 232 / 60%); animation: pulse 1s infinite; }
.labelControls {
    display: flex; height: 30px; align-items: center; gap: 1px; padding: 2px;
    background: rgb(255 255 255 / 3%); border: 1px solid rgb(255 255 255 / 7%); border-radius: 7px;
}
.labelControls > span { padding: 0 7px; color: #5f7481; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.labelControls button {
    display: flex; height: 24px; align-items: center; gap: 4px; padding: 0 8px;
    color: #8da1ae; background: transparent; border: 1px solid transparent; border-radius: 5px;
    font-size: 11px; font-weight: 500; transition: background .12s ease, color .12s ease;
}
.labelControls button:hover { color: #dce7eb; background: rgb(255 255 255 / 5%); }
.labelControls button.active { color: #5ce3d6; background: rgb(66 201 188 / 14%); border-color: rgb(66 201 188 / 32%); }
.runButton {
    display: flex; min-width: 76px; height: 30px; align-items: center; justify-content: center; gap: 6px; margin-left: 2px;
    color: #051614; background: linear-gradient(135deg, #42c9bc 0%, #35b5a7 100%);
    border: 1px solid rgba(66, 201, 188, 0.45); border-radius: 6px; font-size: 11px; font-weight: 700;
    box-shadow: 0 2px 8px rgb(66 201 188 / 25%); transition: all .12s ease;
}
.runButton:hover { background: linear-gradient(135deg, #5de0d4 0%, #42c9bc 100%); box-shadow: 0 3px 12px rgb(66 201 188 / 40%); color: #020c0b; }
.runButton:disabled, .runButton:disabled:hover { color: #495e67; background: #15232b; border-color: #21333d; box-shadow: none; cursor: not-allowed; }
@keyframes pulse { 50% { opacity: .28; } }

.assistantPanel { position: fixed; z-index: 40; width: min(390px, calc(100vw - 20px)); height: min(620px, calc(100vh - var(--title-height) - var(--tools-height) - 24px)); overflow: auto; color: #b8c7ce; background: rgb(14 25 34 / 98%); border: 1px solid #3a4d58; border-radius: 8px 8px 3px 3px; box-shadow: 0 16px 38px rgb(0 0 0 / 48%); backdrop-filter: blur(12px); }
.assistantPanel[hidden] { display: none; }
.assistantPanel > header { position: sticky; z-index: 2; top: 0; display: flex; min-height: 43px; align-items: center; justify-content: space-between; padding: 9px 10px 8px 13px; background: rgb(14 25 34 / 98%); border-bottom: 1px solid #263742; cursor: grab; user-select: none; }
.assistantPanel > header:active { cursor: grabbing; }
.assistantPanel > header strong { display: block; margin-top: 3px; color: #d5e1e6; font-size: 12px; }
.assistantPanel > header small { display: none; margin-top: 2px; color: #6f858f; font-size: 7px; font-weight: 500; }
.assistantWindowActions { display: flex; align-items: center; gap: 2px; }
.assistantPanel > header button { display: grid; width: 25px; height: 25px; place-items: center; padding: 0; color: #60747f; background: transparent; border: 0; border-radius: 4px; font-size: 16px; }
.assistantPanel > header button:hover { color: #b9c9d0; background: #1a2a34; }
.assistantPanel.collapsed { height: 43px; overflow: hidden; }
.assistantPanel.collapsed > :not(header) { display: none; }
.assistantPanel.collapsed > header { border-bottom: 0; }
.assistantPanel.collapsed > header strong { font-size: 10px; }
.assistantPanel.collapsed > header small { display: block; }
.assistantPromptForm { display: grid; gap: 8px; padding: 13px; border-bottom: 1px solid #263742; }
.assistantPromptForm label { color: #718690; font-size: 8px; font-weight: 650; }
.assistantPromptForm textarea { width: 100%; min-height: 76px; resize: vertical; padding: 9px 10px; color: #c9d7dc; background: #09151d; border: 1px solid #30434e; border-radius: 5px; outline: none; font: inherit; font-size: 9px; line-height: 1.5; }
.assistantPromptForm textarea:focus { border-color: #4c8e8a; box-shadow: 0 0 0 2px rgb(66 201 188 / 8%); }
.assistantPromptForm > div { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.assistantPromptForm > div select { min-width: 0; height: 27px; flex: 1; padding: 0 6px; overflow: hidden; color: #718690; background: #0a161e; border: 1px solid #293d47; border-radius: 4px; font-size: 7px; text-overflow: ellipsis; }
.assistantPromptForm .assistantManageConfigurations { min-width: 28px; width: 28px; padding: 0; color: #78909a; background: #172630; border: 1px solid #30444e; }
.assistantPromptForm button { min-width: 100px; height: 28px; padding: 0 10px; color: #09201e; background: var(--accent); border: 0; border-radius: 4px; font-size: 8px; font-weight: 700; }
.assistantPromptForm button:disabled { color: #647780; background: #24343d; cursor: default; }
.assistantTranscript { display: grid; gap: 8px; max-height: 160px; padding: 10px 13px; overflow-y: auto; list-style: none; border-bottom: 1px solid #263742; }
.assistantTranscript[hidden] { display: none; }
.assistantTranscriptTurn { display: grid; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid #1a2830; font-size: 8px; line-height: 1.5; }
.assistantTranscriptTurn:last-child { padding-bottom: 0; border-bottom: 0; }
.assistantTranscriptYou, .assistantTranscriptOutcome { margin: 0; overflow-wrap: anywhere; user-select: text; }
.assistantTranscriptYou { color: #b8c7ce; }
.assistantTranscriptYou::before { margin-right: 4px; color: #4c8e8a; font-weight: 650; content: 'You:'; }
.assistantTranscriptOutcome { color: #8ea1aa; }
.assistantTranscriptOutcome::before { margin-right: 4px; color: #6e828e; font-weight: 650; content: 'Assistant:'; }
.assistantEmpty { display: grid; min-height: 205px; place-content: center; justify-items: center; gap: 8px; padding: 34px; color: #607681; text-align: center; }
.assistantEmpty[hidden] { display: none; }
.assistantEmpty > span { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 4px; color: #83d9d1; background: rgb(66 201 188 / 10%); border: 1px solid rgb(66 201 188 / 28%); border-radius: 50%; font-size: 18px; }
.assistantEmpty strong { color: #aabdc5; font-size: 10px; }
.assistantEmpty p { max-width: 260px; font-size: 8px; line-height: 1.6; }
.assistantClarificationOptions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 13px 13px; }
.assistantClarificationOptions[hidden] { display: none; }
.assistantClarificationOption { padding: 6px 10px; color: #83d9d1; background: rgb(66 201 188 / 8%); border: 1px solid rgb(66 201 188 / 28%); border-radius: 14px; font-size: 8px; }
.assistantClarificationOption:hover { background: rgb(66 201 188 / 16%); border-color: rgb(66 201 188 / 45%); }
.assistantPanel section { padding: 13px; border-bottom: 1px solid #263742; }
.assistantPanel section h3 { margin-bottom: 8px; color: #6e828e; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.assistantSummary strong { color: #d4e1e5; font-size: 11px; }
.assistantSummary p { margin-top: 5px; color: #718690; font-size: 8px; }
.assistantSummary p.valid { color: #78cfc7; }
.assistantSummary p.pending { color: #70a9c8; }
.assistantPanel :is(ul, ol) { display: grid; gap: 6px; padding-left: 17px; color: #8ea1aa; font-size: 8px; line-height: 1.5; }
.assistantPanel #assistantChanges { padding-left: 0; list-style: none; }
.assistantChange > :is(button, div) { display: grid; width: 100%; gap: 6px; padding: 8px; color: #8ea1aa; background: #0a161e; border: 1px solid #263943; border-radius: 5px; text-align: left; }
.assistantChange > button:hover { background: #12232c; border-color: #3a555f; }
.assistantChange > :is(button, div) > span { display: flex; align-items: center; gap: 7px; }
.assistantChange b { min-width: 39px; padding: 2px 5px; color: #77cfc7; background: rgb(66 201 188 / 9%); border-radius: 8px; font-size: 6px; text-align: center; text-transform: uppercase; }
.assistantChange.remove b { color: #d68a91; background: rgb(185 75 85 / 10%); }
.assistantChange.add b { color: #83bfe0; background: rgb(83 164 205 / 10%); }
.assistantChange strong { color: #aebfc7; font-size: 8px; font-weight: 600; }
.assistantChange dl { display: grid; gap: 3px; margin: 0; padding-top: 5px; border-top: 1px solid #22343e; user-select: text; }
.assistantChange dl div { display: grid; grid-template-columns: 72px 1fr; gap: 6px; }
.assistantChange dt { overflow: hidden; color: #617681; text-overflow: ellipsis; white-space: nowrap; }
.assistantChange dd { overflow-wrap: anywhere; margin: 0; color: #899da6; }
.assistantProgress { margin: 12px; padding: 9px; background: rgb(66 201 188 / 6%); border: 1px solid rgb(66 201 188 / 22%); border-radius: 4px; }
.assistantProgress[hidden] { display: none; }
.assistantProgressHeader { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.assistantProgressHeader strong { color: #c3d6dc; font-size: 9px; font-weight: 600; }
.assistantProgressHeader button { flex: none; height: 24px; padding: 0 10px; color: #768b96; background: transparent; border: 1px solid #31444f; border-radius: 4px; font-size: 8px; cursor: pointer; }
.assistantProgressHeader button:hover { color: #dce9ee; background: #17232c; border-color: #3d5562; }
.assistantProgressHeader button:focus-visible { outline: none; border-color: #4c8e8a; box-shadow: 0 0 0 2px rgb(66 201 188 / 12%); }
.assistantProgressNote { margin-top: 6px; color: #8aa0aa; font-size: 8px; line-height: 1.5; }
.assistantProgressNote[hidden] { display: none; }
.assistantProgress details { margin-top: 8px; }
.assistantProgress summary { color: #70a9c8; font-size: 8px; cursor: pointer; }
.assistantProgress h3 { margin: 8px 0 3px; color: #8aa0aa; font-size: 8px; font-weight: 600; }
.assistantProgress pre { max-height: 140px; margin: 0; padding: 6px; overflow: auto; color: #a9bcc4; background: rgb(0 0 0 / 22%); border-radius: 3px; font-size: 8px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistantError { margin: 12px; padding: 9px; color: #d99096; background: rgb(134 52 62 / 12%); border: 1px solid #633942; border-radius: 4px; font-size: 8px; }
.assistantPanel footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 7px; padding: 10px 12px; background: rgb(14 25 34 / 98%); border-top: 1px solid #263742; }
.assistantPanel footer button { height: 28px; padding: 0 10px; color: #768b96; background: transparent; border: 1px solid #31444f; border-radius: 4px; font-size: 8px; }
.assistantPanel footer button:disabled { opacity: .45; cursor: default; }

.canvas {
    position: fixed; inset: calc(var(--title-height) + var(--tools-height)) 0 0 var(--rail-width); overflow: hidden;
    background-color: #0a131b;
    background-image:
        linear-gradient(30deg, transparent 49.8%, rgb(49 72 84 / 18%) 50%, transparent 50.2%),
        linear-gradient(150deg, transparent 49.8%, rgb(49 72 84 / 18%) 50%, transparent 50.2%);
    background-size: 52px 30px;
}
.canvas::after { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 40%, transparent 0, rgb(5 11 16 / 18%) 52%, rgb(3 8 12 / 58%) 100%); content: ""; }
.webglContainer,
.css2dContainer { position: absolute; inset: 0; transition: right .18s ease; }
.webglContainer { z-index: 1; }
.css2dContainer { z-index: 4; overflow: hidden; pointer-events: none; }
.canvas:has(> .nodeEditor:not(.hidden), > .edgeEditor:not(.hidden), > .edgeBuilder:not(.hidden)) .webglContainer,
.canvas:has(> .nodeEditor:not(.hidden), > .edgeEditor:not(.hidden), > .edgeBuilder:not(.hidden)) .css2dContainer { right: 460px; }
.webglSurface,
.css2dSurface { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.webglSurface:focus { outline: none; }
.css2dSurface { pointer-events: none; }
.canvas[data-tool="rectangleSelect"] .webglSurface { cursor: crosshair; }
.selectionRectangle { position: absolute; z-index: 8; pointer-events: none; background: rgb(66 201 188 / 10%); border: 1px solid #62e1d5; box-shadow: 0 0 0 1px rgb(3 13 17 / 45%); }
.selectionRectangle[hidden] { display: none; }
.subsystemBreadcrumb { position: absolute; z-index: 9; top: 14px; left: 18px; display: flex; align-items: center; gap: 6px; padding: 6px; background: rgb(10 22 30 / 88%); border: 1px solid #2b4652; border-radius: 7px; box-shadow: 0 8px 22px rgb(0 0 0 / 25%); backdrop-filter: blur(8px); }
.subsystemBreadcrumb[hidden] { display: none; }
.subsystemBreadcrumb button { padding: 4px 7px; color: #86ddd5; background: transparent; border: 0; border-radius: 4px; font-size: 9px; }
.subsystemBreadcrumb button:hover { background: rgb(98 225 213 / 10%); }
.subsystemBreadcrumb span { color: #49616c; font-size: 9px; }
.subsystem-label { pointer-events: none; }
.subsystemLabel { min-width: 150px; padding: 10px 12px; color: #d9e8ec; background: rgb(17 43 51 / 94%); border: 1px solid #4aa99f; border-radius: 7px; box-shadow: 0 10px 28px rgb(0 0 0 / 30%); cursor: pointer; user-select: none; }
.subsystemLabel strong, .subsystemLabel small { display: block; }
.subsystemLabel strong { font-size: 10px; }
.subsystemLabel small { margin-top: 4px; color: #6fa89f; font-size: 8px; }
.node-label-container { pointer-events: none; }
.objectLabel { position: relative; width: auto; min-width: 112px; padding: 7px 9px; user-select: none; background: rgb(15 27 36 / 91%); border: 1px solid #2c414d; border-radius: 6px; box-shadow: 0 8px 18px rgb(0 0 0 / 24%); backdrop-filter: blur(8px); transition: width .16s, padding .16s, border-color .16s; pointer-events: auto; }
.objectLabel::before { position: absolute; top: 50%; right: 100%; width: 12px; height: 1px; background: #3d5663; content: ""; }
.node-label-container.selected .objectLabel { border-color: #62e1d5; box-shadow: 0 0 0 1px rgb(98 225 213 / 24%), 0 8px 18px rgb(0 0 0 / 24%); }
.objectLabel > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.objectLabel strong { color: #d5e2e8; font-size: 11px; font-weight: 650; }
.typeBadge { display: none; padding: 2px 5px; color: #70d8cf; background: rgb(66 201 188 / 10%); border-radius: 3px; font-size: 7px; }
.disabledBadge { display: none; padding: 2px 5px; color: #e0a458; background: rgb(224 164 88 / 12%); border-radius: 3px; font-size: 7px; text-transform: uppercase; letter-spacing: .04em; }
.node-label-container.disabled .objectLabel { border-style: dashed; opacity: .72; }
.node-label-container.disabled .disabledBadge { display: inline-block; }
.stabilityBadge { display: none; width: 15px; height: 15px; padding: 0; color: var(--orange); background: rgb(237 159 82 / 14%); border: 0; border-radius: 3px; font-size: 8px; line-height: 15px; text-align: center; cursor: pointer; }
.stabilityBadge:hover { background: rgb(237 159 82 / 26%); }
.node-label-container.hasStabilityFinding .stabilityBadge { display: inline-block; }
.objectLabel dl { display: none; gap: 5px; margin: 9px 0 5px; padding-top: 7px; border-top: 1px solid #263a45; }
.objectLabel dl div { display: flex; align-items: center; justify-content: space-between; }
.objectLabel dt { color: #718692; font-size: 8px; }
.objectLabel dd { margin: 0; color: #aebfc7; font-size: 9px; font-weight: 600; }
.stateCount { display: none; color: #536974; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.compactLabel { width: auto; }
.compactLabel dl { margin-bottom: 0; }
.objectLabel:hover,
.objectLabel:focus-within,
.showNodesDetails .objectLabel { width: 175px; padding: 10px 11px; }
.objectLabel:hover .typeBadge,
.objectLabel:focus-within .typeBadge,
.showNodesDetails .objectLabel .typeBadge { display: inline-block; }
.objectLabel:hover dl,
.objectLabel:focus-within dl,
.showNodesDetails .objectLabel dl { display: grid; }
.objectLabel:hover .stateCount,
.objectLabel:focus-within .stateCount,
.showNodesDetails .objectLabel .stateCount { display: inline; }

.bundleLabel { width: 112px; color: #b9c8d0; background: rgb(13 24 32 / 68%); border: 1px solid rgb(59 78 89 / 72%); border-radius: 7px; box-shadow: 0 8px 20px rgb(0 0 0 / 22%); backdrop-filter: blur(7px); pointer-events: auto; transition: width .16s, background .16s, border-color .16s, box-shadow .16s; }
.bundleLabel:hover, .bundleLabel:focus-within, .bundleLabel.pinned { background: rgb(13 24 32 / 95%); border-color: #3b4e59; box-shadow: 0 10px 25px rgb(0 0 0 / 34%); }
.bundleLabel header { display: flex; height: 36px; align-items: center; justify-content: space-between; padding: 0 8px 0 11px; border-bottom: 1px solid #293b46; }
.bundleLabel header strong, .bundleLabel header span { display: block; }
.bundleLabel header strong { font-size: 9px; }
.bundleLabel header span { display: none; margin-top: 2px; color: #617581; font-size: 7px; }
.bundleLabel header button { width: 22px; height: 22px; padding: 0; color: #697e8a; background: transparent; border: 0; }
.relationshipRow { display: none; width: 100%; height: 29px; grid-template-columns: 7px 1fr auto; align-items: center; gap: 7px; padding: 0 10px; color: #8599a4; background: transparent; border: 0; text-align: left; }
.relationshipRow:hover { background: #192832; }
.relationshipRow b { display: inline-block; width: 13px; color: #c6d5db; }
.relationshipRow span { font-size: 8px; }
.relationshipRow em { color: #6e828d; font-size: 8px; font-style: normal; }
.relationshipRow.disabled { opacity: .6; }
.relationshipRow.disabled em { color: #e0a458; }
.relationColor { width: 5px; height: 5px; border-radius: 50%; }
.bundleLabel:not(:hover):not(.pinned) header { border: 0; }
.bundleLabel:not(:hover):not(.pinned) header strong { font-size: 8px; }
.bundleLabel:hover,
.bundleLabel.pinned,
.showEdgesDetails .bundleLabel { width: 244px; }
.bundleLabel:hover header span,
.bundleLabel.pinned header span,
.showEdgesDetails .bundleLabel header span { display: block; }
.bundleLabel:hover .relationshipRow,
.bundleLabel.pinned .relationshipRow,
.showEdgesDetails .bundleLabel .relationshipRow { display: grid; }
.showEdgesDetails .bundleLabel header { border-bottom: 1px solid #293b46; }

.contextCard { position: absolute; z-index: 20; color: #b8c7ce; background: rgb(14 25 34 / 97%); border: 1px solid #3a4d58; border-radius: 8px; box-shadow: 0 16px 38px rgb(0 0 0 / 48%); backdrop-filter: blur(12px); }
.contextCard.encryptionMenu { position: fixed; z-index: 70; }
.contextCard.diagnosticsPanel { position: fixed; z-index: 70; width: 320px; max-height: 360px; overflow: hidden; display: flex; flex-direction: column; }
.contextCard.hidden { display: none; }
.diagnosticsPanel > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #263742; }
.diagnosticsPanel > header strong { color: #d5e1e6; font-size: 10px; }
.diagnosticsPanel > header button { padding: 3px 8px; color: #7f929c; background: transparent; border: 1px solid #354954; border-radius: 4px; font-size: 7px; }
.diagnosticsPanel > header button:hover { color: #e4eef2; background: #1c2b35; }
.diagnosticsList { overflow-y: auto; padding: 6px; }
.diagnosticsEmpty { padding: 14px 8px; color: #5c7079; font-size: 8px; text-align: center; }
.diagnosticsEntry { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-radius: 4px; }
.diagnosticsEntry + .diagnosticsEntry { margin-top: 2px; }
.diagnosticsEntry:hover { background: #1a2933; }
.diagnosticsEntryTime { color: #5c7079; font-size: 6px; letter-spacing: .04em; }
.diagnosticsEntryMessage { overflow-wrap: anywhere; color: #b8c7ce; font-size: 8px; white-space: pre-wrap; }
.diagnosticsEntry-error .diagnosticsEntryMessage { color: #e0929a; }
.diagnosticsEntry-warning .diagnosticsEntryMessage { color: #d9b06b; }
.editorCard { width: 390px; }
.edgeEditor, .edgeGroupEditor, .causalInference, .parameterTuning { width: 440px; }
.contextCard.nodeEditor,
.contextCard.edgeEditor,
.contextCard.edgeBuilder,
.contextCard.edgeGroupEditor,
.contextCard.causalInference,
.contextCard.parameterTuning {
    position: fixed; z-index: 34; top: calc(var(--title-height) + var(--tools-height) + 10px); right: 10px;
    bottom: calc(var(--math-keyboard-inset) + 10px); left: auto; max-height: none; overflow: auto;
    overscroll-behavior: contain; transition: bottom .2s ease, opacity .14s ease, transform .14s ease;
}
.contextCard.nodeEditor > header,
.contextCard.edgeEditor > header,
.contextCard.edgeBuilder > header,
.contextCard.edgeGroupEditor > header,
.contextCard.causalInference > header,
.contextCard.parameterTuning > header { position: sticky; z-index: 2; top: 0; background: rgb(14 25 34 / 98%); }
.contextCard.nodeEditor > footer,
.contextCard.edgeEditor > footer,
.contextCard.edgeBuilder > footer,
.contextCard.edgeGroupEditor > footer,
.contextCard.causalInference > footer,
.contextCard.parameterTuning > footer { position: sticky; z-index: 2; bottom: 0; background: rgb(14 25 34 / 98%); border-top: 1px solid #263742; }
.contextCard.nodeEditor > footer[hidden] { display: none; }
.editorCard > header { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px 11px; }
.editorCard > header strong, .contextKicker { display: block; }
.editorCard > header strong { margin-top: 3px; color: #d5e1e6; font-size: 12px; }
.contextKicker { color: #657985; font-size: 7px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.editorCard > header button { color: #60747f; background: transparent; border: 0; font-size: 16px; }
.cardTabs { display: flex; height: 31px; padding: 0 10px; border-top: 1px solid #23343e; border-bottom: 1px solid #293a45; }
.cardTabs button { position: relative; padding: 0 9px; color: #647985; background: transparent; border: 0; font-size: 8px; }
.cardTabs button.active { color: #bfccd3; }
.cardTabs button.active::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; background: var(--accent); content: ""; }
.resultReadOnlyNotice { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 13px; color: #73918f; background: rgb(66 201 188 / 7%); border-bottom: 1px solid #294349; font-size: 7px; }
.resultReadOnlyNotice[hidden] { display: none; }
.resultReadOnlyNotice strong { color: #8fd8d1; font-size: 8px; }
.resultReadOnlyNotice span { color: #627a82; }
.resultModeLocked .editorCard :is(input, select, textarea, math-field, .geometrySourceButton):disabled,
.resultModeLocked .editorCard math-field[read-only] { opacity: .55; cursor: not-allowed; }
.editorCard [data-node-panel][hidden] { display: none; }
.nodeResultsPanel { position: relative; min-height: 285px; padding: 8px !important; }
.nodeResultPlot { width: 100%; height: 270px; }
.parameterTuningComparisonPlot { width: 100%; height: 310px; margin-top: 9px; }
.parameterTuningComparisonPlot[hidden] { display: none; }
.nodeResultEmpty { display: grid; min-height: 260px; place-content: center; gap: 6px; color: #5f747f; text-align: center; }
.nodeResultEmpty strong { color: #91a4ad; font-size: 10px; }
.nodeResultEmpty span { font-size: 8px; }
.nodeResultsPanel.hasResults .nodeResultEmpty { display: none; }
.nodeResultsPanel:not(.hasResults) .nodeResultPlot { display: none; }
.editorCard section { padding: 12px 13px; border-bottom: 1px solid #263742; }
.editorCard section h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 9px; color: #6e828e; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.editorCard section h3 button { padding: 0; color: var(--accent); background: none; border: 0; font-size: 13px; }
.stateRow { display: flex; height: 30px; align-items: center; justify-content: space-between; padding: 0 7px; background: #111f28; border-bottom: 1px solid #243640; font-size: 8px; }
.stateRow:first-of-type { border-radius: 4px 4px 0 0; }
.stateRow:last-of-type { border: 0; border-radius: 0 0 4px 4px; }
.stateRow > span { display: flex; align-items: center; gap: 7px; color: #879aa5; }
.stateIcon { display: grid; width: 18px; height: 18px; place-items: center; color: #72d8d0; background: rgb(66 201 188 / 10%); border-radius: 3px; font-size: 7px; font-style: normal; }
.stateRow b { color: #b8c7ce; font-size: 8px; font-weight: 600; }
.stateRow em { color: #5f7480; font-style: normal; font-weight: 400; }
.emptyEditorState { margin: 0; padding: 9px; color: #566b76; background: #0f1c24; border-radius: 4px; font-size: 8px; }
.groupMemberRow { display: flex; height: 30px; align-items: center; justify-content: space-between; padding: 0 7px; background: #111f28; border-bottom: 1px solid #243640; font-size: 8px; }
.groupMemberRow:first-of-type { border-radius: 4px 4px 0 0; }
.groupMemberRow:last-of-type { border: 0; border-radius: 0 0 4px 4px; }
.groupMemberRow > span { color: #b8c7ce; }
.causalInferenceMappingRow { display: flex; height: 30px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 7px; background: #111f28; border-bottom: 1px solid #243640; font-size: 8px; }
.causalInferenceMappingRow:first-of-type { border-radius: 4px 4px 0 0; }
.causalInferenceMappingRow:last-of-type { border: 0; border-radius: 0 0 4px 4px; }
.causalInferenceMappingRow > span { flex-shrink: 0; max-width: 40%; overflow: hidden; color: #b8c7ce; text-overflow: ellipsis; white-space: nowrap; }
.causalInferenceMappingRow > select {
    flex: 1; min-width: 0; height: 22px; padding: 0 5px; color: #aab9c1; background: #0a151d;
    border: 1px solid #2b3d48; border-radius: 4px; outline: 0; font-size: 7px;
}
.causalInferenceCandidateRow { display: flex; align-items: center; gap: 8px; padding: 7px; background: #111f28; border-bottom: 1px solid #243640; font-size: 8px; cursor: pointer; }
.causalInferenceCandidateRow:first-of-type { border-radius: 4px 4px 0 0; }
.causalInferenceCandidateRow:last-of-type { border: 0; border-radius: 0 0 4px 4px; }
.causalInferenceCandidateRow input[type="checkbox"] { flex-shrink: 0; width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }
.causalInferenceCandidateMain { display: block; flex: 1; color: #d5e1e6; user-select: text; }
.causalInferenceCandidateMeta { display: block; margin-top: 2px; color: #6e828e; font-size: 7px; user-select: text; }
.causalInferenceCandidateTag { flex-shrink: 0; padding: 2px 6px; border-radius: 9px; font-size: 7px; letter-spacing: .04em; text-transform: uppercase; }
.causalInferenceCandidateTag.correlationOnly { color: #d9b06b; background: rgb(217 176 107 / 12%); }
.causalInferenceCandidateTag.continuousLagged { color: #78c9c2; background: rgb(66 201 188 / 12%); }
.editorField.checkboxField { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-top: 10px; }
.checkboxField input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.checkboxField span { color: #9fb0b8; font-size: 8px; }
.editorStateRow { display: grid; grid-template-columns: 1.25fr .65fr .7fr .55fr 14px 14px 18px; gap: 4px; margin-bottom: 5px; }
.editorStateRow input { width: 100%; min-width: 0; height: 27px; padding: 0 5px; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 4px; outline: 0; font-size: 7px; }
.editorStateRow button { padding: 0; color: #946b72; background: transparent; border: 0; font-size: 13px; }
.editorStateRow .moveState { color: #7ea3ad; font-size: 11px; cursor: pointer; }
.editorStateRow .moveState:disabled { color: #33454f; cursor: default; }
.sourceTermSummaryRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; padding: 0 7px; background: #111f28; border-bottom: 1px solid #243640; }
.sourceTermSummaryRow:first-of-type { border-radius: 4px 4px 0 0; }
.sourceTermSummaryRow:last-of-type { border: 0; border-radius: 0 0 4px 4px; }
.sourceTermOpen { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px; padding: 0; color: inherit; background: none; border: 0; font-size: 8px; text-align: left; cursor: pointer; }
.sourceTermPreview { overflow: hidden; color: #b8c7ce; text-overflow: ellipsis; white-space: nowrap; }
.removeSourceTerm { padding: 0; color: #946b72; background: transparent; border: 0; font-size: 13px; }
.kindBadge { padding: 3px 7px; color: #83d7cf; background: rgb(66 201 188 / 10%); border: 1px solid #2b4a4a; border-radius: 10px; font-size: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.editorParameterRow { display: grid; grid-template-columns: 1fr .6fr .55fr .55fr .75fr 18px; gap: 6px 4px; padding: 8px; margin-bottom: 9px; background: rgb(255 255 255 / 1.5%); border: 1px solid #1f2c33; border-radius: 6px; }
.providerBindingRow { display: grid; grid-template-columns: 1fr 1fr 18px; gap: 5px 4px; margin-bottom: 9px; }
.parameterField { display: grid; min-width: 0; gap: 3px; color: #607580; font-size: 6px; }
.editorParameterRow input, .editorParameterRow select, .providerBindingRow input, .providerBindingRow select { width: 100%; min-width: 0; height: 27px; padding: 0 5px; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 4px; outline: 0; font-size: 7px; }
.editorParameterRow > button, .providerBindingRow > button { align-self: start; height: 27px; padding: 0; color: #946b72; background: transparent; border: 0; font-size: 13px; cursor: pointer; }
.editorParameterRow > button:hover, .providerBindingRow > button:hover { color: #d2767f; }
.parameterControlFields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 7px; background: rgb(66 201 188 / 4%); border: 1px solid #263d45; border-radius: 5px; }
.parameterControlFields[hidden] { display: none; }
.parameterControlError { grid-column: 1 / -1; min-height: 8px; color: #d2767f; font-size: 6px; }
.parameterTuningToggle { display: flex; grid-column: 1 / -1; align-items: center; gap: 7px; padding: 2px 0; color: #8fa3ac; font-size: 7px; cursor: pointer; }
.parameterTuningToggle:has(input:disabled) { color: #4a5b64; cursor: not-allowed; }
.parameterTuningToggle input { width: 13px; height: 13px; accent-color: #42c9bc; cursor: pointer; }
.parameterTuningToggle input:disabled { cursor: not-allowed; }
.parameterTuningFields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); gap: 5px; padding: 7px; background: rgb(217 139 84 / 5%); border: 1px solid #453626; border-radius: 5px; }
.parameterTuningFields[hidden] { display: none; }
.parameterTuningFields input:disabled { color: #4a5b64; cursor: not-allowed; }
.parameterTuningError { grid-column: 1 / -1; min-height: 8px; color: #d2767f; font-size: 6px; }
.editorCard footer { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 10px 12px; }
.editorCard footer button { height: 28px; padding: 0 10px; color: #768b96; background: transparent; border: 1px solid transparent; border-radius: 4px; font-size: 8px; }
.editorCard footer button:first-child { margin-right: auto; color: #bc6c73; }
.editorCard footer .connectButton { color: #78c9c2; border-color: #31525a; }
.editorCard footer .connectButton:hover { color: #a1e8e2; background: rgb(66 201 188 / 8%); }
.doneButton { color: #09201e !important; background: var(--accent) !important; border-color: var(--accent) !important; font-weight: 700; }
.editorField { display: grid; gap: 5px; margin-bottom: 10px; color: #6c818d; font-size: 8px; }
.editorField[hidden] { display: none; }
.editorField select, .editorField input { width: 100%; height: 29px; padding: 0 7px; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 4px; outline: 0; font-size: 8px; }
.editorField input[type="color"] { padding: 3px; cursor: pointer; }
.editorField textarea { width: 100%; padding: 6px 7px; box-sizing: border-box; resize: vertical; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 4px; outline: 0; font: inherit; font-size: 8px; }
.editorCard textarea { width: 100%; padding: 7px; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 4px; outline: 0; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; line-height: 1.45; }
.equationHeading { display: flex; align-items: center; justify-content: space-between; }
.equationHeading[hidden] { display: none; }
.equationHeading h3 { margin-bottom: 0 !important; }
.equationModes { display: flex; padding: 2px; background: #09141b; border: 1px solid #293b46; border-radius: 4px; }
.equationModes button { height: 21px; padding: 0 7px; color: #627783; background: transparent; border: 0; border-radius: 3px; font-size: 7px; }
.equationModes button.active { color: #80d9d1; background: rgb(66 201 188 / 12%); }
.templateButtonGroup { display: flex; gap: 6px; }
.templateButton { height: 21px; padding: 0 8px; color: #80d9d1; background: rgb(66 201 188 / 8%); border: 1px solid #31525a; border-radius: 4px; font-size: 7px; }
.templateButton:hover { background: rgb(66 201 188 / 14%); }
.equationMathField { display: block; width: 100%; min-height: 47px; margin-top: 3px; padding: 8px 9px; color: #d4e1e6; background: #09141b; border: 1px solid #2b3d48; border-radius: 5px; font-size: 17px; --caret-color: var(--accent); --selection-background-color: rgb(66 201 188 / 22%); }
.equationMathField:focus-within { border-color: #47746f; outline: 0; }
.equationSource[hidden], .equationMathField[hidden] { display: none; }
.equationDiagnostics { min-height: 19px; padding: 5px 2px 0; color: #d08187; font-size: 7px; line-height: 1.4; }
.equationDiagnostics.valid { color: #69b9b2; }
.unitInput { display: grid; grid-template-columns: 1fr 38px; }
.unitInput input { border-radius: 4px 0 0 4px; }
.unitInput b { display: grid; place-items: center; color: #647985; background: #172630; border: 1px solid #2b3d48; border-left: 0; border-radius: 0 4px 4px 0; font-size: 7px; font-weight: 500; }
.addPalette { width: 238px; padding: 8px; }
.addPalette > label { display: flex; height: 33px; align-items: center; gap: 7px; margin-bottom: 9px; padding: 0 8px; color: #647984; background: #09141b; border: 1px solid #30424d; border-radius: 5px; }
.addPalette > label input { min-width: 0; flex: 1; color: #d0dde3; background: transparent; border: 0; outline: 0; font-size: 9px; }
.addPalette > .contextKicker { padding: 3px 7px 5px; }
.addPalette > button { display: grid; width: 100%; min-height: 42px; grid-template-columns: 29px 1fr auto; align-items: center; gap: 8px; padding: 5px 7px; color: #8da0aa; background: transparent; border: 0; border-radius: 4px; text-align: left; }
.addPalette > button:hover { background: #1a2933; }
.addPalette button strong, .addPalette button small { display: block; }
.addPalette button strong { color: #aebdc5; font-size: 9px; }
.addPalette button small { margin-top: 2px; color: #5d717c; font-size: 7px; }
.addPalette kbd { color: #516570; font-family: inherit; font-size: 7px; }
.addPalette hr { height: 1px; margin: 6px 3px; background: #293a45; border: 0; }
.primitiveIcon { display: grid; width: 25px; height: 25px; place-items: center; color: #70d8cf; background: rgb(66 201 188 / 10%); border: 1px solid rgb(66 201 188 / 22%); border-radius: 5px; font-style: normal; }
.primitiveIcon.edgeIcon { color: #c79ae0; background: rgb(193 141 225 / 10%); border-color: rgb(193 141 225 / 22%); }
.primitiveIcon.dangerIcon { color: #e08a8a; background: rgb(224 138 138 / 10%); border-color: rgb(224 138 138 / 22%); }
.addPalette > button[hidden] { display: none; }
.addPalette > button > b { color: #58707c; font-size: 15px; font-weight: 400; }
.builderCard { width: 390px; max-height: calc(100% - 24px); overflow: auto; }
.builderCard > header { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px 11px; border-bottom: 1px solid #293a45; }
.builderCard > header strong { display: block; margin-top: 3px; color: #d5e1e6; font-size: 12px; }
.builderCard > header button { color: #60747f; background: transparent; border: 0; font-size: 16px; }
.builderCard section { padding: 12px 13px; border-bottom: 1px solid #263742; }
.builderCard section h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 9px; color: #6e828e; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.builderCard section h3 button { padding: 0; color: var(--accent); background: none; border: 0; font-size: 13px; }
.builderCard footer { display: flex; justify-content: flex-end; gap: 7px; padding: 10px 12px; }
.builderCard footer button { height: 28px; padding: 0 10px; color: #768b96; background: transparent; border: 1px solid transparent; border-radius: 4px; font-size: 8px; }
.endpointGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.vectorGrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.endpointField > div { display: grid; grid-template-columns: 1fr auto; }
.endpointField select { border-radius: 4px 0 0 4px; }
.endpointField button { padding: 0 7px; color: #73bdb7; background: #13242c; border: 1px solid #2b4650; border-left: 0; border-radius: 0 4px 4px 0; font-size: 7px; }
.endpointField button.active { color: #09201e; background: var(--accent); border-color: var(--accent); }
.canvas.pickingEndpoint .webglSurface { cursor: crosshair; }
.endpointPickBanner {
    position: absolute; z-index: 36; top: 14px; left: 50%; display: flex; min-width: 310px;
    align-items: center; justify-content: space-between; gap: 20px; padding: 9px 10px 9px 13px;
    color: #bdd0d7; background: rgb(11 23 31 / 94%); border: 1px solid #48706f; border-radius: 7px;
    box-shadow: 0 12px 30px rgb(0 0 0 / 38%); backdrop-filter: blur(10px); transform: translateX(-50%);
}
.endpointPickBanner[hidden] { display: none; }
.endpointPickBanner span, .endpointPickBanner strong, .endpointPickBanner small { display: block; }
.endpointPickBanner strong { color: #d7e7eb; font-size: 9px; }
.endpointPickBanner small { margin-top: 2px; color: #6f858f; font-size: 7px; }
.endpointPickBanner button { height: 27px; padding: 0 8px; color: #89a1aa; background: #152630; border: 1px solid #324853; border-radius: 4px; font-size: 8px; }
.endpointPickBanner kbd { margin-left: 5px; color: #607781; font-family: inherit; font-size: 7px; }
.validationPanel { position: absolute; z-index: 33; top: 12px; right: 12px; width: 340px; max-height: calc(100% - 24px); overflow: auto; color: #aebfc7; background: rgb(13 24 32 / 96%); border: 1px solid #3a4d58; border-radius: 8px; box-shadow: 0 16px 38px rgb(0 0 0 / 45%); backdrop-filter: blur(12px); }
.validationPanel[hidden] { display: none; }
.validationPanel header { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 13px; background: rgb(13 24 32 / 98%); border-bottom: 1px solid #293a45; }
.validationPanel header strong { display: block; margin-top: 3px; color: #d5e1e6; font-size: 11px; }
.validationPanel header button { color: #60747f; background: transparent; border: 0; font-size: 16px; }
.validationIssue { display: grid; width: 100%; grid-template-columns: 8px 1fr; gap: 8px; padding: 10px 12px; color: #91a3ad; background: transparent; border: 0; border-bottom: 1px solid #23343e; text-align: left; }
.validationIssue:hover { background: #182832; }
.validationIssue i { width: 7px; height: 7px; margin-top: 2px; background: var(--orange); border-radius: 50%; }
.validationIssue.error i { background: #d96f78; }
.validationIssue strong, .validationIssue small { display: block; user-select: text; }
.validationIssue strong { color: #becdd3; font-size: 8px; line-height: 1.4; }
.validationIssue small { margin-top: 3px; color: #5f747f; font-size: 7px; text-transform: capitalize; }
.validationEmpty { margin: 0; padding: 16px 13px; color: #648079; font-size: 8px; }
.node-label-container.validationError .objectLabel { border-color: #97545b; box-shadow: 0 0 0 1px rgb(217 111 120 / 14%), 0 8px 18px rgb(0 0 0 / 24%); }
.node-label-container.validationWarning .objectLabel { border-color: #8a683f; }
.bundleLabel.validationError { border-color: #97545b; }
.bundleLabel.validationWarning { border-color: #8a683f; }
.canvas.pickingEndpoint .node-label-container { opacity: .32; transition: opacity .14s; }
.canvas.pickingEndpoint .node-label-container.endpointEligible { opacity: 1; }
.canvas.pickingEndpoint .node-label-container.endpointEligible .objectLabel { border-color: #58a69f; box-shadow: 0 0 0 1px rgb(66 201 188 / 20%), 0 8px 22px rgb(0 0 0 / 30%); }
@media (max-width: 820px) {
    .contextCard.nodeEditor, .contextCard.edgeEditor, .contextCard.edgeBuilder { width: calc(100vw - 20px); }
    .canvas:has(> .nodeEditor:not(.hidden), > .edgeEditor:not(.hidden), > .edgeBuilder:not(.hidden)) .webglContainer,
    .canvas:has(> .nodeEditor:not(.hidden), > .edgeEditor:not(.hidden), > .edgeBuilder:not(.hidden)) .css2dContainer { right: 0; }
}
.referencePicker { margin: 9px 0; color: #607581; font-size: 7px; }
.referencePicker button { padding: 4px 6px; color: #7dbab5; background: rgb(66 201 188 / 7%); border: 1px solid #29454a; border-radius: 9px; font-size: 7px; }
.referencePicker > span { display: block; margin-bottom: 6px; }
.referencePicker div { display: flex; flex-wrap: wrap; gap: 5px; }
.builderHint { margin: -3px 0 9px; color: #566b77; font-size: 7px; line-height: 1.45; }
.builderRows { display: grid; gap: 6px; }
.builderRow { display: grid; grid-template-columns: 1.4fr .7fr .8fr .6fr 18px; gap: 5px; align-items: center; }
.builderRow.sourceTermRow { grid-template-columns: .8fr .8fr 1.2fr 18px; }
.builderRow.parameterRow { grid-template-columns: 1fr .55fr .55fr .55fr .7fr 18px; align-items: end; }
.builderRow.providerBindingRow { grid-template-columns: 1fr 1fr 18px; }
.builderRow.parameterRow .parameterControlFields { grid-column: 1 / -1; }
.sourceTermProviderFields { display: grid; grid-column: 1 / -1; gap: 6px; padding: 9px; background: rgb(66 201 188 / 4%); border: 1px solid #263d45; border-radius: 5px; }
.sourceTermProviderFields[hidden] { display: none; }
.sourceTermProviderFields .providerBindingRow { grid-template-columns: 1fr 1fr 18px; }
.builderRow input, .builderRow select, .builderCard textarea { width: 100%; min-width: 0; height: 27px; padding: 0 6px; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 4px; outline: 0; font-size: 8px; }
.builderCard textarea { height: auto; padding: 7px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.4; }
.geometrySourceRow { display: flex; gap: 6px; }
.geometrySourceButton { display: flex; flex: 1; min-width: 0; height: 29px; align-items: center; justify-content: center; padding: 0 8px; color: #7ec8c2; background: #0b171f; border: 1px dashed #31515a; border-radius: 5px; cursor: pointer; font-size: 8px; white-space: nowrap; }
.geometrySourceButton:hover { background: rgb(66 201 188 / 6%); border-color: #47736f; }
.geometrySourceButton input { display: none; }
.geometrySourceStatus { display: block; margin: 4px 0 10px; color: #5c717d; font-size: 7px; }
.geometrySourceStatus.loading { opacity: .65; }
.geometrySourceStatus.error { color: #d58b91; }
.builderRow .removeBuilderRow { padding: 0; color: #7d5c65; background: transparent; border: 0; font-size: 13px; }
.builderRowHeader { color: #536874; font-size: 6px; text-transform: uppercase; }
.paletteShape { display: block; width: 23px; height: 18px; background: #2b565b; border: 1px solid #4d8c8d; border-radius: 2px; transform: skewY(-12deg); }
.paletteShape.cylinder { background: #285a72; border-color: #4e91aa; border-radius: 50%; transform: none; }
.paletteShape.sphere { width: 20px; height: 20px; background: radial-gradient(circle at 30% 30%, #e9bd7c, #9f5748); border-color: #d2925b; border-radius: 50%; transform: none; }
.importIcon { display: grid; width: 25px; height: 25px; place-items: center; color: #8a9ca6; background: #1a2a34; border-radius: 4px; font-style: normal; }

.canvasHelp { position: absolute; z-index: 8; bottom: 13px; left: 50%; display: flex; align-items: center; gap: 8px; padding: 5px 9px; color: #4f6571; background: rgb(8 17 24 / 80%); border: 1px solid #22343f; border-radius: 5px; font-size: 7px; transform: translateX(-50%); }
.canvasHelp b { color: #758995; font-weight: 600; }
.canvasHelp i { width: 1px; height: 9px; background: #2a3b46; }
.liveParameterPanel { position: absolute; z-index: 13; right: 18px; bottom: 62px; width: min(390px, calc(100% - 36px)); max-height: min(430px, calc(100% - 150px)); overflow: auto; color: #91a5ae; background: rgb(9 18 25 / 96%); border: 1px solid #304651; border-radius: 9px; box-shadow: 0 14px 38px rgb(0 0 0 / 38%); backdrop-filter: blur(12px); }
.liveParameterPanel[hidden] { display: none; }
.liveParameterPanel > header { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; background: #0b1922; border-bottom: 1px solid #263b46; }
.liveParameterPanel > header div { display: grid; gap: 2px; }
.liveParameterPanel > header strong { color: #d6e6e9; font-size: 9px; }
.liveParameterPanel > header small { color: #637984; font-size: 7px; }
.liveParameterPanel > header button { width: 22px; height: 22px; color: #78909a; background: transparent; border: 0; }
.liveParameterRow { display: grid; grid-template-columns: 26px minmax(110px, 1fr) 26px 72px; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #1e313b; }
.liveParameterRow:last-child { border-bottom: 0; }
.liveParameterLabel { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.liveParameterLabel strong { color: #c4d6da; font-size: 8px; }
.liveParameterLabel small { color: #647984; font-size: 7px; }
.liveParameterRow button { width: 26px; height: 26px; padding: 0; color: #91aaaF; background: #12242e; border: 1px solid #304852; border-radius: 50%; }
.liveParameterRow input[type="range"] { min-width: 0; accent-color: var(--accent); }
.liveParameterRow input[type="number"] { width: 72px; height: 26px; padding: 0 6px; color: #c9dcdf; background: #0d1c25; border: 1px solid #304651; border-radius: 4px; font-size: 8px; }
.parameterScheduleRow { display: flex; grid-column: 1 / -1; gap: 6px; margin-top: 4px; }
.parameterScheduleRow select { flex: 0 0 auto; height: 24px; padding: 0 4px; color: #8297a1; background: #101e27; border: 1px solid #2d414c; border-radius: 4px; font-size: 7px; }
.parameterScheduleRow input[type="number"] { flex: 1; width: auto; height: 24px; padding: 0 6px; color: #c9dcdf; background: #0d1c25; border: 1px solid #304651; border-radius: 4px; font-size: 8px; }
.parameterScheduleRow input[hidden] { display: none; }
.parameterScheduleRow { flex-wrap: wrap; }
.parameterWaveformFields { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
.parameterWaveformFields[hidden] { display: none; }
.scheduleField { display: grid; gap: 2px; flex: 1 1 64px; min-width: 56px; color: #7d929c; font-size: 7px; }
.scheduleField[hidden] { display: none; }
.scheduleField > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parameterScheduleRow { align-items: end; }
.parameterWaveformFields { align-items: end; }
.scheduleField input[type="number"] { width: 100%; min-width: 0; }
.liveParameterRow .waveformPreview { display: block; width: 100%; min-width: 0; height: auto; background: #0a151d; border: 1px solid #263b45; border-radius: 4px; }
.liveParameterRow .waveformPreview[hidden] { display: none; }
.waveformLine { fill: none; stroke: var(--accent, #42c9bc); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.waveformCentre { stroke: #3a4d58; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.waveformCursor { stroke: #d8b24a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.waveformDot { fill: #d8b24a; }
.waveformCaption { flex: 1 1 100%; color: #7d929c; font-size: 7px; line-height: 1.4; }
.waveformNow { color: #d8b24a; }
.parameterWaveformFields button { flex: 0 0 auto; width: auto; height: 24px; padding: 0 9px; border-radius: 4px; font-size: 8px; }
.liveParameterPanel > footer { position: sticky; bottom: 0; padding: 10px 12px; background: #0b1922; border-top: 1px solid #263b46; }
.liveParameterPanel > footer button { width: 100%; height: 28px; border-radius: 5px; font-size: 8px; }
/* The branches menu and the fork-parameter panel open directly above #branchesButton; their
   left/bottom are set by anchorPanelToBranchesButton in renderer.mjs. These values are only the
   fallback until that runs. left:210px clears the view-cube widget in the bottom-left corner. */
#forkParameterPanel, .branchesPanel { left: 210px; right: auto; bottom: 96px; }
/* Width recomputed against the new left offset (210px) plus an 18px right margin, same margin
   budget the base right:18px rule already used -- otherwise these could run past the right edge
   on a narrow window instead of shrinking symmetrically the way right-anchoring did. */
#forkParameterPanel { width: min(390px, calc(100% - 228px)); }
.branchesPanel { width: min(320px, calc(100% - 228px)); max-height: min(360px, calc(100% - 150px)); }
/* The fork action sits above the tree as the panel's first row; the tree below it is empty until
   a second branch exists. */
.branchForkAction { display: flex !important; width: calc(100% - 24px) !important; height: 28px; align-items: center; gap: 6px; margin: 10px 12px 4px; padding: 0 9px; color: #5ce3d6; background: rgb(66 201 188 / 10%); border: 1px solid rgb(66 201 188 / 28%); border-radius: 5px; font-size: 10px; font-weight: 600; }
.branchForkAction:hover { color: #ffffff; background: rgb(66 201 188 / 20%); border-color: rgb(66 201 188 / 45%); }
.branchForkAction[hidden] { display: none !important; }
.resultTransport .branchesButton[hidden] { display: none; }
.resultTransport #controlHistoryButton[hidden] { display: none; }
.resultTransport #controlHistoryButton small { color: #637984; font-size: 9px; font-variant-numeric: tabular-nums; }
.resultTransport #controlHistoryButton small:empty { display: none; }
.resultTransport #controlHistoryButton[aria-expanded="true"] { color: #dbe7eb; background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 12%); }
.resultTransport .branchesButton i { width: 7px; height: 7px; flex: 0 0 auto; background: var(--branch-color, #758a95); border-radius: 50%; }
.resultTransport .branchesButton small { color: #637984; font-size: 9px; font-variant-numeric: tabular-nums; }
.resultTransport .branchesButton small:empty { display: none; }
.resultTransport .branchesButton b { color: #637984; font-size: 8px; font-weight: 400; }
.resultTransport .branchesButton[aria-expanded="true"] { color: #dbe7eb; background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 12%); }
#branchTree { padding: 4px 0; }
.branchTreeLevel { display: flex; flex-direction: column; gap: 2px; padding: 2px 0; }
.branchTreeLevel .branchTreeLevel { margin-left: 16px; padding-left: 8px; border-left: 1px solid #263b46; }
.branchTreeItem { display: flex; align-items: center; gap: 6px; padding: 3px 12px; }
.branchCompareToggle { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); }
.branchCompareToggle:disabled { opacity: .35; }
.branchTreeButton { display: flex !important; width: auto !important; flex: 1; align-items: center; gap: 6px; padding: 4px 7px; color: #8ca0aa; background: transparent; border: 1px solid #304651; border-radius: 4px; font-size: 10px; white-space: nowrap; text-align: left; }
.branchTreeButton::before { display: block; width: 7px; height: 7px; flex: 0 0 auto; background: var(--branch-color, #758a95); border-radius: 50%; content: ""; }
.branchTreeButton.active { color: #d6e6e9; background: #182832; border-color: #30444f; }
.branchTreeButton:disabled { opacity: .5; }
.resultTransport {
    position: absolute; z-index: 12; bottom: 20px; left: 50%;
    display: flex; flex-direction: column; gap: 7px;
    width: max-content; min-width: min(860px, calc(100% - 48px)); max-width: min(940px, calc(100% - 48px));
    padding: 9px 13px;
    color: #8da2ad; background: rgb(9 18 26 / 94%); border: 1px solid rgb(255 255 255 / 8%); border-radius: 12px;
    box-shadow: 0 18px 44px rgb(0 0 0 / 50%), 0 0 0 1px rgb(255 255 255 / 4%) inset;
    transform: translateX(-50%); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    user-select: none;
}
.resultTransport.liveMode { width: max-content; min-width: min(680px, calc(100% - 48px)); max-width: min(800px, calc(100% - 48px)); }
.resultTransport[hidden] { display: none; }

/* Tier 1: Scrubbing Timeline Track */
.transportTimelineTrack {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 2px 4px 6px; border-bottom: 1px solid rgb(255 255 255 / 6%);
}
.transportTimelineTrack output {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.transportTimelineTrack #resultCurrentTime,
.transportTimelineTrack #simulationProgress {
    flex: 1 1 0; min-width: 60px; text-align: right; color: #e0ecf2;
}
.transportTimelineTrack #resultExtent {
    flex: 1 1 0; min-width: 120px; text-align: left; color: #6d8694; font-size: 10px; font-weight: 500;
}

/* Custom Range Slider */
.transportTimelineTrack input[type="range"] {
    flex: 0 1 420px; width: 100%; max-width: 420px; min-width: 140px; height: 6px;
    -webkit-appearance: none; appearance: none;
    background-color: rgb(255 255 255 / 7%); border: 1px solid rgb(255 255 255 / 5%); border-radius: 3px;
    outline: none; cursor: pointer;
    background-image:
        var(--stability-marks, none),
        linear-gradient(to right, #42c9bc 0 var(--available-progress, 0%), rgb(255 255 255 / 7%) var(--available-progress, 0%) 100%);
    accent-color: var(--accent);
}
.transportTimelineTrack input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: #ffffff; border: 3px solid #35b5a7;
    box-shadow: 0 1px 6px rgb(0 0 0 / 50%), 0 0 8px rgb(66 201 188 / 70%);
    cursor: grab; transition: transform .12s ease, box-shadow .12s ease;
}
.transportTimelineTrack input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.18); box-shadow: 0 2px 10px rgb(0 0 0 / 60%), 0 0 12px rgb(66 201 188 / 90%);
}
.transportTimelineTrack input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing; transform: scale(1.28);
}

/* Tier 2: Streamlined Control Bar with Grid Separation */
.transportControlBar {
    display: grid;
    /* max-content minimums: the side columns may grow to keep playback centred, but never shrink
       below their content -- minmax(0, 1fr) let the busier actions column spill into its neighbour. */
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
    width: 100%;
    column-gap: 14px;
}
.transportStatusGroup {
    display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-width: 0;
}
.transportPlaybackGroup {
    display: flex; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0;
}
.transportActionsGroup {
    display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0;
}

/* Status: Results Mode Badge */
.resultMode {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px;
    color: #5ce3d6; background: rgb(66 201 188 / 10%); border: 1px solid rgb(66 201 188 / 25%);
    border-radius: 5px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
    flex-shrink: 0;
}
.resultMode small {
    color: #7b9ba7; font-size: 8.5px; font-weight: 500; letter-spacing: normal; text-transform: none;
}
.resultMode small::before {
    content: "•"; margin-right: 4px; opacity: .6;
}

/* Generic transport button rules */
.resultTransport button {
    display: grid; place-items: center; padding: 0;
    color: #8da1ae; background: transparent; border: 1px solid transparent; border-radius: 5px; font-size: 10.5px;
    transition: all .12s ease;
}
.resultTransport button:hover {
    color: #f0f6f8; background: rgb(255 255 255 / 6%); border-color: transparent;
}

/* Execution / Pill Buttons */
.resultTransport .executionButton {
    display: inline-flex; height: 25px; width: auto; flex-shrink: 0;
    align-items: center; gap: 4px; padding: 0 7px;
    color: #8da1ae; background: rgb(255 255 255 / 3%); border: 1px solid rgb(255 255 255 / 7%); border-radius: 5px;
    font-size: 10px; font-weight: 500; white-space: nowrap;
}
.resultTransport .executionButton span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px;
}
.resultTransport .executionButton:hover {
    color: #dbe7eb; background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 12%);
}

/* Stability Pill with Glowing Indicator */
.stabilitySummaryButton i { width: 6px; height: 6px; background: #465862; border-radius: 50%; }
.stabilitySummaryButton.hasFindings i { background: var(--orange); box-shadow: 0 0 7px rgb(237 159 82 / 60%); }

/* Playback Controls Capsule */
.transportGroup { display: flex; align-items: center; gap: 4px; }
.transportGroup[hidden] { display: none; }
.playbackGroup {
    display: inline-flex; align-items: center; gap: 1px; padding: 2px;
    background: rgb(255 255 255 / 3%); border: 1px solid rgb(255 255 255 / 7%); border-radius: 6px;
    flex-shrink: 0;
}
.playbackGroup button { width: 25px; height: 23px; border-radius: 4px; font-size: 10.5px; }
.playbackGroup .resultPlayPause {
    width: 30px; height: 23px; color: #041614;
    background: linear-gradient(135deg, #42c9bc 0%, #30b6a8 100%);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; font-size: 10.5px; font-weight: 700;
    box-shadow: 0 2px 6px rgb(66 201 188 / 32%);
}
.playbackGroup .resultPlayPause:hover {
    color: #020c0b; background: linear-gradient(135deg, #5fe4d6 0%, #42c9bc 100%);
    box-shadow: 0 3px 12px rgb(66 201 188 / 50%);
}

/* Continue / Extend simulation Button */
.resultTransport #continueRun,
.resultTransport .continueRunButton {
    display: inline-flex; height: 25px; width: auto; flex-shrink: 0;
    align-items: center; gap: 4px; padding: 0 8px;
    color: #5ce3d6; background: rgb(66 201 188 / 10%); border: 1px solid rgb(66 201 188 / 28%); border-radius: 5px;
    font-size: 10px; font-weight: 600; white-space: nowrap;
}
.resultTransport #continueRun:hover,
.resultTransport .continueRunButton:hover {
    color: #ffffff; background: rgb(66 201 188 / 20%); border-color: rgb(66 201 188 / 45%);
    box-shadow: 0 2px 8px rgb(66 201 188 / 20%);
}
.resultTransport #continueRun[hidden] { display: none; }

/* Speed / Pacing Select Dropdowns */
.resultTransport select {
    height: 25px; padding: 0 6px; color: #8da1ae; background: rgb(255 255 255 / 3%);
    border: 1px solid rgb(255 255 255 / 7%); border-radius: 5px; font-size: 10px; font-weight: 500;
    cursor: pointer; outline: none; transition: all .12s ease; flex-shrink: 0;
}
.resultTransport select:hover {
    color: #dce7eb; background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 12%);
}

/* Close & Edit Button */
.resultTransport .closeResults {
    display: inline-flex; height: 25px; width: auto; flex-shrink: 0;
    align-items: center; gap: 5px; padding: 0 8px 0 5px;
    color: #f87171; background: rgb(248 113 113 / 8%); border: 1px solid rgb(248 113 113 / 22%); border-radius: 5px;
    font-size: 10px; font-weight: 600; white-space: nowrap; transition: all .12s ease;
}
.resultTransport .closeResults span {
    display: grid; width: 13px; height: 13px; place-items: center;
    color: #f87171; background: rgb(248 113 113 / 20%); border-radius: 50%; font-size: 9px; font-weight: 800; line-height: 1;
    transition: all .12s ease;
}
.resultTransport .closeResults:hover {
    color: #fca5a5; background: rgb(248 113 113 / 16%); border-color: rgb(248 113 113 / 38%);
}
.resultTransport .closeResults:hover span {
    background: #f87171; color: #1a0505;
}

/* Mode toggles */
.reviewControl[hidden] { display: none; }
.resultTransport.liveMode :is(.reviewControl, #resultPlaybackControls, #continueRun) { display: none; }
.resultTransport:not(.liveMode) :is(#simulationExecutionControls, #simulationPacing) { display: none; }
.resultTransport:not(.liveMode) .liveControl { display: none; }
.canvas:has(.resultTransport:not([hidden])) .canvasHelp { display: none; }
.executionSummaryCard { position: absolute; z-index: 13; right: 18px; bottom: 96px; width: 285px; padding: 0; overflow: hidden; }
.executionSummaryCard header { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px 9px; border-bottom: 1px solid #29404a; }
.executionSummaryCard header small, .executionSummaryCard header strong { display: block; }
.executionSummaryCard header small { color: #607782; font-size: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.executionSummaryCard header strong { margin-top: 3px; color: #d0dfe3; font-size: 10px; }
.executionSummaryCard header button { width: 22px; height: 22px; padding: 0; color: #70858f; background: transparent; border: 0; font-size: 13px; }
.executionSummaryCard > p { margin: 0; padding: 9px 12px; color: #77909a; background: rgb(66 201 188 / 5%); border-bottom: 1px solid #263b45; font-size: 7px; line-height: 1.45; }
.executionSummaryCard dl { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 0; padding: 11px 12px 12px; font-size: 7px; user-select: text; }
.executionSummaryCard dt { color: #718791; }
.executionSummaryCard dd { margin: 0; color: #b9cbd0; text-align: right; }
.stabilityFindingsCard { position: absolute; z-index: 13; right: 18px; bottom: 96px; width: 310px; max-height: min(420px, calc(100% - 150px)); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.stabilityFindingsCard header { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 11px 12px 9px; background: rgb(14 25 34 / 98%); border-bottom: 1px solid #29404a; }
.stabilityFindingsCard header small, .stabilityFindingsCard header strong { display: block; }
.stabilityFindingsCard header small { color: #607782; font-size: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.stabilityFindingsCard header strong { margin-top: 3px; color: #d0dfe3; font-size: 10px; }
.stabilityFindingsCard header button { width: 22px; height: 22px; padding: 0; color: #70858f; background: transparent; border: 0; font-size: 13px; }
.stabilityFindingsHint { margin: 0; padding: 9px 12px; color: #77909a; background: rgb(237 159 82 / 5%); border-bottom: 1px solid #263b45; font-size: 7px; line-height: 1.45; }
#stabilityFindingsList { overflow: auto; }
.stabilityFinding { display: grid; width: 100%; grid-template-columns: 8px 1fr; gap: 8px; padding: 10px 12px; color: #91a3ad; background: transparent; border: 0; border-bottom: 1px solid #23343e; text-align: left; }
.stabilityFinding:hover { background: #182832; }
.stabilityFinding i { width: 7px; height: 7px; margin-top: 2px; background: var(--orange); border-radius: 50%; }
.stabilityFinding strong, .stabilityFinding small { display: block; user-select: text; }
.stabilityFinding strong { color: #becdd3; font-size: 8px; line-height: 1.4; }
.stabilityFinding small { margin-top: 3px; color: #5f747f; font-size: 7px; }
.stabilityFindingsEmpty { margin: 0; padding: 16px 12px; color: #5f747f; font-size: 7px; text-align: center; }
.stabilityConvergenceSection { border-top: 1px solid #23343e; }
.stabilityConvergenceHint { margin: 0; padding: 9px 12px; color: #77909a; background: rgb(66 201 188 / 5%); border-bottom: 1px solid #263b45; font-size: 7px; line-height: 1.45; }
.stabilityConvergenceRow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid #23343e; }
.stabilityConvergenceRow:last-child { border-bottom: 0; }
.stabilityConvergenceRow > strong { flex: 1; min-width: 60px; color: #becdd3; font-size: 8px; font-weight: 650; }
.stabilityCheckConvergence, .stabilityApplyConvergenceFix { padding: 4px 8px; color: #b9cbd0; background: #17262f; border: 1px solid #2d414c; border-radius: 4px; font-size: 7px; cursor: pointer; }
.stabilityCheckConvergence:hover, .stabilityApplyConvergenceFix:hover { background: #1e313b; }
.stabilityCheckConvergence:disabled { color: #5f747f; cursor: default; }
.stabilityApplyConvergenceFix { color: #7cd9cc; border-color: #2f5850; }
.stabilityConvergenceResult { flex-basis: 100%; color: #91a3ad; font-size: 7px; line-height: 1.4; }
.stabilityConvergenceResult.converged { color: #7cd9cc; }
.stabilityConvergenceResult.notConverged { color: var(--orange); }
.viewCube { position: absolute; z-index: 9; bottom: 18px; left: 18px; width: 176px; height: 180px; background: rgb(9 18 25 / 75%); border: 1px solid #293f4a; border-radius: 16px; box-shadow: 0 10px 28px rgb(0 0 0 / 28%); backdrop-filter: blur(10px); }
.viewCubeScene { position: absolute; z-index: 2; top: 28px; left: 40px; width: 96px; height: 96px; perspective: 260px; pointer-events: none; }
.viewCubeObject { position: relative; top: 48px; left: 48px; width: 0; height: 0; transform-style: preserve-3d; }
.viewCubeObject button { pointer-events: auto; }
.cubeFace { position: absolute; display: grid; width: 52px; height: 52px; place-items: center; margin: -26px; padding: 0; color: #8297a2; background: rgb(23 42 52 / 94%); border: 1px solid #45606d; outline: 0; backface-visibility: hidden; font-size: 7px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.cubeFace:hover, .cubeFace.active { color: #b9f1ed; background: #235057; border-color: #65aaa7; }
.cubeFront { transform: translateZ(26px); }
.cubeBack { transform: rotateY(180deg) translateZ(26px); }
.cubeRight { transform: rotateY(90deg) translateZ(26px); }
.cubeLeft { transform: rotateY(-90deg) translateZ(26px); }
.cubeTop { transform: rotateX(90deg) translateZ(26px); }
.cubeBottom { transform: rotateX(-90deg) translateZ(26px); }
.cubeCorner { position: absolute; width: 12px; height: 12px; margin: -6px; padding: 0; background: #71979d; border: 1px solid #b0cfd1; border-radius: 1px; transform-style: preserve-3d; }
.cubeCorner::before, .cubeCorner::after { position: absolute; inset: -1px; pointer-events: none; background: #587b83; border: 1px solid #9bbec1; border-radius: 1px; content: ""; }
.cubeCorner::before { transform: rotateY(90deg) translateZ(6px); }
.cubeCorner::after { background: #85a9ad; transform: rotateX(90deg) translateZ(6px); }
.cubeCorner:hover, .cubeCorner:hover::before, .cubeCorner:hover::after { background: var(--accent); border-color: #c4fffa; box-shadow: 0 0 8px rgb(66 201 188 / 65%); }
.cornerPPP { transform: translate3d(26px, -26px, 26px); }
.cornerPPN { transform: translate3d(26px, -26px, -26px); }
.cornerPNP { transform: translate3d(26px, 26px, 26px); }
.cornerPNN { transform: translate3d(26px, 26px, -26px); }
.cornerNPP { transform: translate3d(-26px, -26px, 26px); }
.cornerNPN { transform: translate3d(-26px, -26px, -26px); }
.cornerNNP { transform: translate3d(-26px, 26px, 26px); }
.cornerNNN { transform: translate3d(-26px, 26px, -26px); }
.panPad { position: absolute; z-index: 1; top: 4px; left: 16px; width: 144px; height: 144px; border-radius: 50%; }
.panPad button { position: absolute; inset: 0; width: 144px; height: 144px; padding: 0; color: #718792; background: rgb(17 33 42 / 92%); border: 1px solid #2d4651; border-radius: 50%; mask: radial-gradient(circle, transparent 0 55px, #000 56px); font-size: 10px; }
.panPad button:hover { z-index: 1; color: #a4ebe5; background: rgb(35 72 77 / 96%); border-color: #5e9693; }
.panPad button span { position: absolute; width: 22px; height: 22px; }
.panPad button span::before, .panPad button span::after { position: absolute; top: 50%; left: 3px; width: 13px; height: 1.5px; background: currentcolor; border-radius: 1px; content: ""; transform-origin: right center; }
.panPad button span::before { transform: translateY(-.75px) rotate(31deg); }
.panPad button span::after { transform: translateY(-.75px) rotate(-31deg); }
.panPad .panUp { clip-path: polygon(0 0, 100% 0, 50% 50%); }
.panPad .panUp span { top: -3px; left: 61px; transform: rotate(-90deg); }
.panPad .panRight { clip-path: polygon(100% 0, 100% 100%, 50% 50%); }
.panPad .panRight span { top: 61px; right: -3px; }
.panPad .panDown { clip-path: polygon(100% 100%, 0 100%, 50% 50%); }
.panPad .panDown span { bottom: -3px; left: 61px; transform: rotate(90deg); }
.panPad .panLeft { clip-path: polygon(0 100%, 0 0, 50% 50%); }
.panPad .panLeft span { top: 61px; left: -3px; transform: rotate(180deg); }
.viewNavActions { position: absolute; z-index: 3; right: 0; bottom: 7px; left: 0; display: flex; height: 23px; align-items: center; justify-content: center; gap: 3px; }
.viewNavActions button { display: grid; min-width: 23px; height: 22px; place-items: center; padding: 0 7px; color: #6d838e; background: #11212a; border: 1px solid #2d4651; border-radius: 11px; font-size: 9px; }
.viewNavActions .cubeFit { font-size: 7px; }
.viewNavActions button:hover { color: #8adfd8; border-color: #477574; }
/* #viewCube #lock2DButton (not just #lock2DButton): the shared tooltip rule above,
   :is(#titleBar, .toolstrip, .viewCube, .causalInference) [data-tooltip], carries #titleBar's id specificity
   even though .viewCube is what actually matches here (:is() specificity is its highest-
   specificity argument, not the one that matched) -- a bare id selector alone still loses to it. */
#viewCube #lock2DButton { position: absolute; z-index: 4; top: 8px; right: 8px; display: grid; width: 22px; height: 22px; place-items: center; padding: 0; background: #11212a; border: 1px solid #2d4651; border-radius: 50%; }
#lock2DButton:hover { border-color: #477574; }
#lock2DButton.active { background: #235057; border-color: #65aaa7; }
#lock2DButton img { width: 13px; height: 13px; opacity: .8; transition: filter .12s, opacity .12s; }
#lock2DButton:hover img { filter: brightness(1.4); opacity: 1; }
#lock2DButton.active img { filter: brightness(1.5); opacity: 1; }
.viewCube [data-tooltip]::after { top: auto; bottom: calc(100% + 7px); }
.modelStatus { position: absolute; z-index: 8; right: 12px; top: 12px; display: flex; align-items: center; gap: 13px; padding: 6px 9px; color: #607581; background: rgb(9 18 25 / 74%); border: 1px solid #22343e; border-radius: 5px; font-size: 7px; }
.modelStatus i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 6px var(--accent); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #2a3b46; border: 2px solid transparent; border-radius: 5px; background-clip: padding-box; }

@media (max-width: 960px) {
    /* Toolstrip: collapse status text into glowing indicator dot, hide "Details" text */
    .simulationReadout { padding: 0 8px; justify-content: center; }
    .simulationReadout #statusText { display: none; }
    .labelControls > span { display: none; }
}

@media (max-width: 900px) {
    .objectLabel:hover,
    .objectLabel:focus-within,
    .showNodesDetails .objectLabel { width: 145px; }
    .bundleLabel:hover,
    .bundleLabel.pinned,
    .showEdgesDetails .bundleLabel { width: 208px; }

    /* Titlebar: collapse Examples pill to compact icon button, hide zoom buttons */
    .documentActions .exampleButton {
        width: 27px; height: 25px; padding: 0; margin-left: 2px; justify-content: center;
    }
    .documentActions .exampleButton span,
    .documentActions .exampleButton i {
        display: none;
    }
    .documentActions .exampleButton .exampleButtonIcon {
        display: block;
    }
    .windowControls .uiZoomButton,
    .windowControls .windowControlDivider:first-of-type {
        display: none;
    }

    /* Simulation Results Bar */
    .resultTransport { left: 50%; width: calc(100% - 24px); }
    .resultTransport.liveMode { max-width: calc(100% - 24px); }
    .resultMode small { display: none; }
    .transportTimelineTrack #resultExtent { min-width: 80px; font-size: 9.5px; }
    .transportTimelineTrack input[type="range"] { min-width: 90px; }
}

@media (max-width: 800px) {
    /* Titlebar: tighten spacing, hide welcome text and secondary export button */
    .windowTitle { padding-left: 8px; gap: 4px; }
    .windowTitle .documentTitle { margin-left: 4px; max-width: 110px; }
    .windowTitle .welcomeButton { display: none; }
    #exportCsvButton { display: none; }
    .windowControls button { width: 38px; }
    .windowControls .titleAssistantControl { width: 34px; }

    /* Toolstrip: compact padding and buttons */
    .toolstrip { padding: 0 8px; gap: 4px; }
    .toolstripLeft { gap: 3px; }
    .toolstripLeft .squareTool { width: 28px; }
    .toolstripLeft .toolGroup { gap: 0; }
    .labelControls { gap: 3px; padding: 2px; }
    .labelControls button { padding: 0 5px; font-size: 9.5px; }

    /* Simulation Results Bar: compact actions and text collapse */
    .transportControlBar { column-gap: 8px; }
    .transportStatusGroup { gap: 3px; }
    .transportPlaybackGroup { gap: 3px; }
    .transportActionsGroup { gap: 3px; }
    .transportActionsGroup #branchesButton { width: 26px; padding: 0; justify-content: center; }
    .transportActionsGroup #branchesButton :is(span, small, b) { display: none; }
    .transportActionsGroup .closeResults {
        font-size: 0; width: 26px; padding: 0; justify-content: center;
    }
    .transportActionsGroup .closeResults span[aria-hidden] {
        margin: 0;
    }
}

@media (min-width: 1500px) {
    .objectLabel:hover,
    .objectLabel:focus-within,
    .showNodesDetails .objectLabel {
        width: 184px;
        padding: 11px 12px;
    }

    .objectLabel strong {
        font-size: 12px;
    }

    .objectLabel dt,
    .objectLabel dd {
        font-size: 9px;
    }

    .bundleLabel:hover,
    .bundleLabel.pinned,
    .showEdgesDetails .bundleLabel {
        width: 254px;
    }
}

/* Web edition only (docs/proposals/webEdition.md, phase 3) -- [data-web-edition] is set on
   <html> only by scripts/buildWebShell.mjs's transform of index.html, so this never applies to
   the desktop app. */
.webEditionBanner {
    display: none;
}
[data-web-edition] .webEditionBanner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    background: rgb(12 24 33 / 96%);
    color: #b7c6cc;
    border: 1px solid #253a46;
    border-left: 3px solid var(--orange);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgb(0 0 0 / 40%);
    backdrop-filter: blur(10px);
    font-size: 12px;
    line-height: 1.55;
    /* A floating notice over the empty canvas, centred below the toolstrip: a bar across the top covered the title bar, and with it
       New, Open, Save, Examples and every other title-bar control, until it was dismissed. */
    position: fixed;
    top: calc(var(--title-height) + var(--tools-height) + 12px);
    left: calc(var(--rail-width) + (100vw - var(--rail-width)) / 2);
    transform: translateX(-50%);
    width: min(680px, calc(100vw - var(--rail-width) - 32px));
    z-index: 38;
    /* It floats over canvas that people work on, so only its link and its dismiss button take clicks; everything else goes through to the canvas. */
    pointer-events: none;
}
.webEditionBanner :is(a, button) {
    pointer-events: auto;
}
.webEditionBanner span {
    flex: 1;
}
.webEditionBanner a {
    color: #74ddd3;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.webEditionBanner button {
    background: none;
    border: none;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}

/* Minimal in-page provider editor (docs/proposals/webEdition.md, phase 4) -- only ever created
   by src/renderer/webShims/providerEditor.mjs, never referenced by the desktop app. */
.webProviderEditorDialog {
    width: min(640px, 90vw);
    background: var(--surface);
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}
.webProviderEditorDialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.webProviderEditorDialog h2 {
    margin: 0 0 12px;
    font-size: 14px;
}
.webProviderEditorDialog textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--raised);
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    padding: 8px;
    resize: vertical;
}
.webProviderEditorStatus {
    min-height: 1.2em;
    font-size: 12px;
    color: var(--muted);
}
.webProviderEditorDialog menu {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
}

/* Parameters table: docked left like the branch tree so it stays open beside the right-docked
   editors it navigates to. Not a .contextCard on purpose -- hideCards() closes every context
   card whenever a node or edge is selected, which would close this table on the very click that
   jumps to a row's owner. */
/* Anchored to the top-left, not the bottom-left where Fork here and the branch tree dock, so the
   table can stay open while forking; its height leaves room for those bottom panels, and it sits
   one layer below them for the short-window case where they still meet. */
.parametersPanel { z-index: 12; top: calc(var(--title-height) + var(--tools-height) + 10px); left: 210px; right: auto; bottom: auto; width: min(720px, calc(100% - 228px)); max-height: min(420px, calc(100% - 340px)); }
.parametersPanel > header { gap: 10px; }
.parametersPanel > header .parametersControls { display: flex; flex: 1; justify-content: flex-end; gap: 6px; }
.parametersControls input, .parametersControls select { height: 22px; color: #c9dcdf; background: #0d1c25; border: 1px solid #304651; border-radius: 4px; font-size: 8px; }
.parametersControls input { width: 120px; padding: 0 6px; }
.parametersTableWrap { overflow-x: auto; }
#parametersTable { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 8px; }
#parametersTable th { position: sticky; top: 0; padding: 6px 8px; color: #647984; background: #0b1922; border-bottom: 1px solid #263b46; font-size: 7px; font-weight: 750; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
#parametersTable td { padding: 4px 8px; color: #b7cbd0; border-bottom: 1px solid #1e313b; vertical-align: middle; }
#parametersTable tr.sharedRow td { background: rgb(156 131 196 / 8%); }
#parametersTable tr.sharedUserRow td { color: #7f939c; background: rgb(255 255 255 / 2%); }
#parametersTable td:first-child { color: #d0e0e4; }
#parametersTable td.symbolCell { font-family: ui-monospace, monospace; color: #8fb5bd; }
#parametersTable input, #parametersTable select { height: 22px; color: #c9dcdf; background: #0d1c25; border: 1px solid #304651; border-radius: 4px; font-size: 8px; }
#parametersTable input[type="number"] { width: 78px; padding: 0 5px; }
#parametersTable input[data-field="unit"] { width: 54px; padding: 0 5px; }
#parametersTable input:disabled, #parametersTable select:disabled { opacity: .55; }
#parametersTable .invalid { border-color: #d0665a; }
#parametersTable .ownerLink { padding: 0; color: #8fb5bd; background: transparent; border: 0; font-size: 8px; text-align: left; text-decoration: underline dotted; cursor: pointer; }
#parametersTable .ownerLink:hover { color: #d0e0e4; }
.sharedBadge { display: inline-block; margin-right: 6px; padding: 1px 6px; color: #d9cdee; background: rgb(156 131 196 / 22%); border-radius: 8px; font-size: 7px; font-weight: 700; }
.parametersNotice { margin: 0; padding: 10px 12px; color: #78909a; font-size: 8px; }
#parametersTable .fitCell { display: flex; align-items: center; gap: 4px; }
#parametersTable .scheduleCell { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#parametersTable .scheduleRemove { padding: 0 5px; line-height: 1.2; }
#parametersTable .scheduleOpen { padding: 0; color: #c9dcdf; background: transparent; border: 0; font-size: 8px; text-decoration: underline dotted; cursor: pointer; }
#parametersTable .valueWithSchedule { display: inline-flex; align-items: center; gap: 3px; }
#parametersTable .scheduleAdd { padding: 0 3px; color: #8fb5bd; background: transparent; border: 0; font-size: 10px; cursor: pointer; }
#parametersTable .scheduleAdd:disabled { opacity: .45; cursor: default; }
.scheduleDialog textarea { width: 100%; min-height: 150px; padding: 7px; color: #c9dcdf; background: #0d1c25; border: 1px solid #304651; border-radius: 4px; font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
#parametersTable .fitCell input[type="number"] { width: 58px; }
#parametersTable .fitCell input[hidden] { display: none; }
#parametersTable { min-width: 720px; }

/* Label detail has three states per group: compact, expanded, hidden. The small glyph in each button shows
   which: one line, three lines, or a dashed empty box. */
.labelControls button { white-space: nowrap; }
.detailMode { display: inline-block; width: 11px; height: 9px; margin-left: 5px; vertical-align: -1px; border: 1px solid currentColor; border-radius: 2px; opacity: .85; }
[data-mode="compact"] .detailMode { background: linear-gradient(currentColor, currentColor) 50% 3px / 6px 1px no-repeat; }
[data-mode="expanded"] .detailMode {
    background: linear-gradient(currentColor, currentColor) 50% 1px / 7px 1px no-repeat,
        linear-gradient(currentColor, currentColor) 50% 3px / 7px 1px no-repeat,
        linear-gradient(currentColor, currentColor) 50% 5px / 7px 1px no-repeat;
}
[data-mode="hidden"] .detailMode { border-style: dashed; opacity: .55; }
.labelControls button[data-mode="hidden"] { color: #4a5d69; }

/* Hidden labels vanish unless they are selected, hovered (.peek), flagged, pinned, or needed to pick an endpoint. */
.hideNodeLabels:not(.pickingEndpoint) .node-label-container:not(.selected):not(.peek):not(.hasStabilityFinding),
.hideEdgeLabels .bundleLabel:not(.pinned):not(.peek):not(:focus-within) { visibility: hidden; pointer-events: none; }

/* A relationship with several equations: a row per intermediate quantity and per equation. */
.severalRow { margin-bottom: 9px; padding: 7px; background: rgb(255 255 255 / 1.5%); border: 1px solid #1f2c33; border-radius: 6px; }
.severalRowHead { display: grid; grid-template-columns: 1fr 12px 16px 16px 18px; align-items: center; gap: 4px; }
.severalRowHead input, .severalRowHead select { width: 100%; min-width: 0; height: 27px; padding: 0 5px; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 4px; outline: 0; font-size: 8px; }
.severalRowHead button { height: 27px; padding: 0; color: #7ea3ad; background: transparent; border: 0; font-size: 12px; cursor: pointer; }
.severalRowHead button[data-remove] { color: #946b72; font-size: 13px; }
.severalRowHead button:disabled { color: #33454f; cursor: default; }
.severalEquals { color: #607580; font-size: 11px; text-align: center; }
.nodeProgramRow { display: grid; grid-template-columns: .8fr 1.2fr auto 18px; align-items: center; gap: 4px; margin-bottom: 6px; }
.nodeProgramRow input[data-field="key"], .nodeProgramRow select { width: 100%; min-width: 0; height: 27px; padding: 0 5px; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 4px; outline: 0; font-size: 8px; }
.nodeProgramRow > button { height: 27px; padding: 0; color: #946b72; background: transparent; border: 0; font-size: 13px; cursor: pointer; }
.nodeProgramRow > button[hidden] { display: none; }
.nodeProgramSets { display: flex; align-items: center; gap: 3px; color: #8fa3ac; font-size: 7px; white-space: nowrap; }
.nodeProgramRowError { grid-column: 1 / -1; color: #d2767f; font-size: 7px; }
.nodeProgramRowError:empty { display: none; }
#nodeProgramFields[hidden], #nodeProgramSourceFields[hidden], #nodeProgramFmuFields[hidden] { display: none; }
.nodePartRow { display: grid; grid-template-columns: 1fr 34px auto 18px; align-items: center; gap: 4px; margin-bottom: 6px; }
.nodePartRow input[data-field="prefix"] { width: 100%; min-width: 0; height: 27px; padding: 0 5px; color: #aab9c1; background: #0a151d; border: 1px solid #2b3d48; border-radius: 4px; outline: 0; font-size: 8px; }
.nodePartRow input[type="color"] { width: 34px; height: 27px; padding: 0; background: transparent; border: 0; }
.nodePartRow > button { height: 27px; padding: 0; color: #946b72; background: transparent; border: 0; font-size: 13px; cursor: pointer; }
.partMesh { color: #7ec8c2; font-size: 7px; white-space: nowrap; cursor: pointer; }
.partMesh input, .partAddButton input { display: none; }
.partAddButton { display: inline-flex; width: auto; height: auto; margin-left: 6px; padding: 0 6px; border-style: solid; }
.nodePartProblem { grid-column: 1 / -1; color: #d2767f; font-size: 7px; }
.nodePartProblem.note { color: #8fa3ac; }
.nodePartProblem:empty { display: none; }
.severalSummary { min-height: 8px; color: #d2767f; font-size: 7px; }
#editEdgeEquationsList > h3 button { margin-left: 6px; }

/* The guided first-model tour (src/renderer/tour.mjs): a ring around the control a step is about, and the card that says what to do. */
.tourRing { position: fixed; z-index: 9000; box-sizing: border-box; border: 2px solid #42c9bc; border-radius: 8px; box-shadow: 0 0 0 4px rgb(66 201 188 / 22%), 0 0 24px rgb(66 201 188 / 35%); pointer-events: none; transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; }
.tourRing[hidden], .tourFloating[hidden] { display: none; }
.tourFloating { position: fixed; z-index: 9001; left: 94px; top: 160px; width: min(360px, calc(100vw - 48px)); box-sizing: border-box; padding: 16px 18px; color: #dbe7ec; background: #0f1d27; border: 1px solid #2f6f6a; border-radius: 10px; box-shadow: 0 12px 40px rgb(0 0 0 / 55%); }
.tourFloating .tourProgress { display: block; color: #7fa3ad; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.tourFloating .tourProgress:empty { display: none; }
.tourFloating .tourTitle { display: block; cursor: grab; touch-action: none; margin: 2px 0 6px; font-size: 15px; }
.tourFloating .tourText { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #b9ccd4; }
.tourFloating .tourNotice { margin: 0 0 4px; font-size: 12px; color: #e9b872; }
.tourFloating .tourActions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tourFloating .tourActions .tourLink { margin-right: auto; }
.tourFloating button { height: 30px; padding: 0 14px; font-size: 12px; font-weight: 700; border-radius: 6px; cursor: pointer; }
.tourFloating .tourPrimary { color: #061412; background: #42c9bc; border: 1px solid #42c9bc; }
.tourFloating .tourSecondary { color: #dbe7ec; background: transparent; border: 1px solid #3b5460; }
.tourFloating .tourLink { padding: 0; height: auto; color: #8fb3bd; background: none; border: 0; font-weight: 500; text-decoration: underline; }
.tourFloating button[hidden] { display: none; }
.tourFloating button:disabled { opacity: .5; cursor: default; }

/* A pulsing ring on a control the step wants pressed: the glow swells and fades, and the ring itself breathes, so the eye goes there. */
.tourRing.tourRingPulse { animation: tourRingPulse 1.4s ease-in-out infinite; }
@keyframes tourRingPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgb(66 201 188 / 30%), 0 0 10px rgb(66 201 188 / 35%); border-color: #42c9bc; }
    50% { box-shadow: 0 0 0 12px rgb(66 201 188 / 0%), 0 0 30px rgb(66 201 188 / 80%); border-color: #9ff0e8; }
}
@media (prefers-reduced-motion: reduce) {
    .tourRing.tourRingPulse { animation: none; }
}

/* Parameter tuning while it runs: the convergence plot, the numbers beside it, the warnings, and the chip that reopens the card. */
.parameterTuningConvergencePlot { width: 100%; height: 190px; margin-top: 6px; }
#parameterTuningObjectiveSection[hidden], #parameterTuningMeasuredPicker[hidden], .parameterTuningConvergencePlot[hidden], .parameterTuningStats[hidden], .parameterTuningLogToggle[hidden], #parameterTuningProgressBar[hidden], .parameterTuningRunActions[hidden], .tuningChip[hidden] { display: none; }
.parameterTuningLogToggle { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; color: #8da3b0; font-size: 11px; }
.parameterTuningRow { padding: 6px 7px; background: #111f28; border-bottom: 1px solid #243640; font-size: 9px; }
.parameterTuningRow .parameterTuningToggle { display: flex; align-items: baseline; gap: 6px; color: #b8c7ce; }
.parameterTuningRow .parameterTuningToggle small { margin-left: auto; color: #7d929c; font-size: 8px; }
.parameterTuningBounds { display: flex; flex-wrap: wrap; gap: 8px; margin: 5px 0 0 20px; }
.parameterTuningBounds[hidden] { display: none; }
.parameterTuningBounds label { display: flex; align-items: center; gap: 4px; color: #7d929c; }
.parameterTuningBounds input { width: 84px; padding: 3px 5px; color: #d6e4ea; background: #0b1820; border: 1px solid #243640; border-radius: 3px; font-size: 9px; }
.parameterTuningBounds .parameterTuningError { flex-basis: 100%; color: #e08a7d; }
.parameterTuningConstraints { margin: 9px 0; }
.parameterTuningConstraints h3 button { padding: 0 6px; color: #7dbab5; background: transparent; border: 0; font-size: 12px; }
.parameterTuningConstraintRow { margin-bottom: 8px; padding: 6px; background: #111f28; border: 1px solid #243640; border-radius: 4px; }
.parameterTuningConstraintRow .parameterTuningConstraintBound { display: flex; gap: 6px; align-items: center; margin-top: 5px; }
.parameterTuningConstraintRow select, .parameterTuningConstraintRow input { padding: 4px 6px; color: #d6e4ea; background: #0b1820; border: 1px solid #243640; border-radius: 3px; font-size: 9px; }
.parameterTuningConstraintRow input[data-field="limit"] { width: 90px; }
.parameterTuningConstraintRow .parameterTuningConstraintBound button { margin-left: auto; color: #8297a1; background: transparent; border: 0; font-size: 12px; }
.parameterTuningGoal { display: flex; gap: 0; margin: 0 0 8px; }
.parameterTuningGoal button { flex: 1; padding: 6px 8px; color: #8297a1; background: #111f28; border: 1px solid #243640; font-size: 9px; }
.parameterTuningGoal button:first-child { border-radius: 4px 0 0 4px; }
.parameterTuningGoal button:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
.parameterTuningGoal button[aria-pressed="true"] { color: #d8fffb; background: rgb(66 201 188 / 16%); border-color: #3b8f88; }
.parameterTuningStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; margin: 8px 0; }
.parameterTuningStats div { min-width: 0; }
.parameterTuningStats dt { color: #7d929c; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.parameterTuningStats dd { margin: 1px 0 0; color: #dbe7eb; font-size: 13px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#parameterTuningProgressBar { width: 100%; height: 6px; margin: 2px 0 8px; accent-color: var(--accent); }
.parameterTuningBestValues { margin: 4px 0; color: #b9ccd4; font-size: 12px; }
.parameterTuningBestValues div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-bottom: 1px solid rgb(255 255 255 / 5%); font-variant-numeric: tabular-nums; }
.parameterTuningWarnings p { margin: 6px 0 0; padding: 6px 8px; color: #e9b872; background: rgb(237 159 82 / 8%); border-radius: 6px; font-size: 12px; line-height: 1.4; }
.parameterTuningRunActions { display: flex; gap: 8px; margin-top: 10px; }
.parameterTuningRunActions button { flex: 1; height: 30px; color: #dbe7eb; background: transparent; border: 1px solid #3b5460; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.parameterTuningRunActions button:first-child { color: #061412; background: #42c9bc; border-color: #42c9bc; }
.parameterTuningRunActions button:disabled { opacity: .5; cursor: default; }