:root { color-scheme: dark; --bg: #1e1e1e; --surface: #252526; --surface-2: #2d2d2d; --surface-3: #37373d; --border: #3a3a3a; --border-2: #454545; --text: #dddddd; --text-2: #cccccc; --text-strong: #ffffff; --text-dim: #aaaaaa; --text-mute: #888888; --ink: #111111; --accent: #2d5a8c; --accent-hi: #4a8fd6; --accent-lt: #7db4e8; --accent-bg: #243247; --accent-text: #cfe0f5; --accent-border: #3a4a63; --danger: #a23b3b; --danger-text: #e07070; --ok: #2e7d46; --ok-text: #4ec98e; --warn: #e0b34d; --warn-bg: #5a4a2a; --shadow: rgba(0,0,0,.5); --panel-glass: rgba(45,45,45,.85); --overlay-dim: rgba(30,30,30,.55); --scrim-blue: rgba(20,26,36,.92); --tint-blue: rgba(36,46,62,.6); --accent-glow: rgba(97,175,239,.14); --danger-glow: rgba(224,108,91,.14); --ok-glow: rgba(46,125,70,.16); --border-glass: rgba(255,255,255,.25); /* Shapes, not colours — these are used as CSS masks over currentColor, so they need no light/dark variant and are not part of the theme palette above. Inline data URIs rather than files: an icon must never be a second request that can arrive late, or fail, after the tree is already on screen. */ --icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M14.5 7.2V6.1a1 1 0 0 0-1-1H7.9L6.5 3.5H2.5a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M1.5 12.5 3.7 7.4h11.3l-2.2 5.1z'/%3E%3C/svg%3E"); --icon-folder-shut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M1.5 4.5a1 1 0 0 1 1-1h4l1.4 1.6h5.6a1 1 0 0 1 1 1v6.4a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); /* File types, by shape rather than by letters — a mark is recognised, a label has to be read. Masks like the folders above, so they follow the row (and its git tint). The Markdown mark is the real one (Dustin Curtis's, public domain); JSON gets its braces and the config formats a slider pair, neither having a mark worth borrowing. */ --icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M3.6 1.9h5.3l3.5 3.5v8.7H3.6z'/%3E%3Cpath d='M8.9 1.9v3.5h3.5'/%3E%3Cpath d='M5.9 8.4h4.2M5.9 10.8h4.2' stroke-linecap='round'/%3E%3C/svg%3E"); --icon-md: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='.9' y='3.1' width='14.2' height='9.8' rx='1.4'/%3E%3Cpath d='M3.3 10.4V5.6l2.2 2.8 2.2-2.8v4.8'/%3E%3Cpath d='M11.5 5.6v4.5M9.8 8.4l1.7 1.9 1.7-1.9'/%3E%3C/svg%3E"); --icon-json: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 2.6c-1.5 0-1.5 1.6-1.5 2.8 0 1.3-.6 2.1-1.8 2.6 1.2.5 1.8 1.3 1.8 2.6 0 1.2 0 2.8 1.5 2.8'/%3E%3Cpath d='M9.8 2.6c1.5 0 1.5 1.6 1.5 2.8 0 1.3.6 2.1 1.8 2.6-1.2.5-1.8 1.3-1.8 2.6 0 1.2 0 2.8-1.5 2.8'/%3E%3C/svg%3E"); --icon-cfg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 4.6h3.1M8.9 4.6h5.1M2 11.4h5.1M10.9 11.4h3.1'/%3E%3Ccircle cx='7' cy='4.6' r='1.8'/%3E%3Ccircle cx='9' cy='11.4' r='1.8'/%3E%3C/svg%3E"); /* The one mark that keeps its own colours: the two-snake logo is recognised BY them, and its blue is the only hue git isn't already using in this tree. */ --icon-py: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%233776AB' d='M8 1c-1.6 0-3 .2-3 1.8v1.4h3.2v.6H3.6C2 4.8 1 5.7 1 8s1 3.2 2.6 3.2h1.1V9.4c0-1.6 1.4-2.9 3-2.9h3.2c1.4 0 2.6-1.2 2.6-2.6V2.8C13.5 1.5 12.2 1 10.8 1z'/%3E%3Ccircle fill='%23fff' cx='6.2' cy='2.9' r='.62'/%3E%3Cg transform='rotate(180 8 8)'%3E%3Cpath fill='%23FFD43B' d='M8 1c-1.6 0-3 .2-3 1.8v1.4h3.2v.6H3.6C2 4.8 1 5.7 1 8s1 3.2 2.6 3.2h1.1V9.4c0-1.6 1.4-2.9 3-2.9h3.2c1.4 0 2.6-1.2 2.6-2.6V2.8C13.5 1.5 12.2 1 10.8 1z'/%3E%3Ccircle fill='%23fff' cx='6.2' cy='2.9' r='.62'/%3E%3C/g%3E%3C/svg%3E"); } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; overflow: hidden; } /* The top bar spans the full width; the chat panel sits BELOW it and reserves its strip by pushing #panes (via body.chat-open), so the bar stays continuous while the panes shrink. (ResizeObserver in workspace.js re-syncs the canvases when the #panes width changes.) */ #workspace { width: 100%; height: 100vh; display: flex; flex-direction: column; } #tabbar { position: relative; display: flex; gap: 4px; padding: 8px 10px 0; background: var(--surface); border-bottom: 1px solid var(--surface-2); } .tab { padding: 6px 16px; border-radius: 6px 6px 0 0; background: var(--surface-2); cursor: pointer; font-size: 13px; color: var(--text-2); user-select: none; } .tab.active { background: var(--bg); color: var(--text-strong); font-weight: 600; } /* The title sits in the middle of the BAR, not in the gap between its neighbours: an auto-margin centre would drift every time the project name changes length, and a title that moves when you switch projects reads as a glitch. Absolute, so it takes no part in the flex row — and pointer-events:none so it can never swallow a click meant for a tab underneath it. */ #brand { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; align-items: baseline; gap: 8px; pointer-events: none; white-space: nowrap; user-select: none; } .brand-name { font-weight: 700; font-size: 13.5px; color: var(--text-strong); letter-spacing: .3px; } .brand-sub { font-size: 11.5px; color: var(--text-dim); font-style: italic; } /* Which organisation's installation this is. On a shared deployment that is the question a screenshot has to answer by itself. */ #brand-tenant { font-size: 11.5px; color: var(--accent-hi); font-weight: 600; letter-spacing: .2px; } /* When the bar runs out of room the tabs and the project name need it more than the title does, and an overlap would cost both. Driven from brand.js off the *bar's* width, not the viewport's: opening the chat panel halves the bar while the window stays exactly as wide as it was. The tenant is the half worth keeping longest. */ #brand.tight .brand-sub { display: none; } #brand.cramped { display: none; } /* Project + account together on the right: both are "this session", and the tabs are "this project" — grouping them puts the two kinds of control on opposite sides. */ #topright { margin-left: auto; display: flex; align-items: center; } #project-indicator { margin: 0 0 4px; align-self: center; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 4px 12px; border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 12.5px; cursor: pointer; min-width: 130px; max-width: 40%; } #project-indicator:hover { background: var(--surface-3); } #project-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } #project-indicator .pi-caret { opacity: .6; font-size: 10px; } #project-menu { position: fixed; z-index: 80; min-width: 220px; max-width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 5px; box-shadow: 0 6px 22px var(--shadow); font-size: 13px; } #project-menu .pm-item { padding: 7px 10px; border-radius: 5px; display: flex; align-items: center; gap: 6px; } #project-menu .pm-item:hover { background: var(--accent); color: var(--text-strong); } #project-menu .pm-item.current { background: var(--surface-3); } #project-menu .pm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; cursor: pointer; } #project-menu .pm-sub { font-size: 11px; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #project-menu .pm-item:hover .pm-sub { opacity: .8; } #project-menu .pm-del { flex: 0 0 auto; background: none; border: none; color: var(--text-dim); font-size: 13px; cursor: pointer; opacity: 0; padding: 2px 5px; border-radius: 4px; } #project-menu .pm-item:hover .pm-del { opacity: .7; } #project-menu .pm-del:hover { opacity: 1; background: var(--warn-bg); color: var(--text-strong); } #project-menu .pm-empty { padding: 8px 10px; opacity: .5; } #project-menu .pm-new { padding: 8px 10px; margin-top: 4px; cursor: pointer; border-top: 1px solid var(--surface-2); color: var(--accent-lt); border-radius: 5px; } #project-menu .pm-new:hover { background: var(--accent-bg); color: var(--accent-text); } #panes { flex: 1; position: relative; transition: margin-right .12s ease; } /* room for the chat, bar stays full-width; width is user-draggable (chat.js sets --chat-w) */ body.chat-open #panes { margin-right: var(--chat-w, 380px); } .pane { position: absolute; inset: 0; display: none; } #welcome { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, var(--shadow) 0%, var(--scrim-blue) 80%); } #welcome[hidden] { display: none; } .wel-card { max-width: 460px; text-align: center; padding: 34px 40px; background: var(--scrim-blue); border: 1px solid var(--accent-bg); border-radius: 14px; box-shadow: 0 14px 50px var(--shadow); } .wel-logo { font-size: 27px; font-weight: 700; letter-spacing: .5px; color: var(--accent-text); margin-bottom: 12px; } .wel-tag { font-size: 15px; color: var(--accent-text); margin: 0 0 12px; line-height: 1.5; } .wel-sub { font-size: 13px; color: var(--text-dim); margin: 0 0 18px; line-height: 1.6; } .wel-create { padding: 11px 22px; background: var(--accent); color: var(--text-strong); border: none; border-radius: 8px; font-size: 14px; cursor: pointer; } .wel-create:hover { background: var(--accent); } .wel-create-alt { background: none; border: 1px solid var(--accent-border); color: var(--accent-text); margin-top: 4px; padding: 9px 18px; font-size: 13px; } .wel-create-alt:hover { background: var(--accent-bg); } .wel-projects { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; max-height: 240px; overflow: auto; text-align: left; } .wel-proj { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 13px; background: var(--tint-blue); border: 1px solid var(--accent-bg); border-radius: 8px; cursor: pointer; color: var(--accent-text); } .wel-proj:hover { background: var(--accent-bg); border-color: var(--accent-border); } .wel-proj-name { font-size: 13.5px; font-weight: 600; } .wel-proj-sub { font-size: 11.5px; color: var(--text-mute); } .wel-feats { margin-top: 22px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--text-mute); } .pane.active { display: block; } #cad { width: 100%; height: 100%; } /* top padding clears the ☰ button (top:10, ~26 tall) so real plots start ~20px below it, keeping the button's strip free; the empty-state line is pulled out of this flow below so the padding never pushes it down. */ #plot { width: 100%; height: 100%; overflow: auto; padding: 56px 14px 14px; box-sizing: border-box; } #plot img { max-width: 100%; display: block; margin: 0 auto; background: var(--text-strong); border-radius: 6px; } /* Each plot is a card: its title/filename above it, an ✕ to close just this one. */ .plot-card { position: relative; margin: 0 auto 18px; max-width: 100%; } .plot-cap { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 2px 8px 6px; font-size: 12.5px; color: var(--text-2); } .plot-ttl { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 78%; } .plot-x { background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 6px; border-radius: 4px; } .plot-x:hover { background: var(--border); color: var(--text-strong); } .plot-card.loading img { visibility: hidden; min-height: 80px; } .plot-card .spinner.sm { position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; } .plot-card.loading .spinner.sm { display: inline-block; } /* Discoverability: point at the ☰ when it holds more plots than are on screen. */ #plot-hint { position: absolute; top: 10px; left: 54px; z-index: 6; min-height: 26px; display: flex; align-items: center; font-size: 12.5px; color: var(--accent-lt); cursor: pointer; } #plot-hint[hidden] { display: none; } /* the id rule above beats UA [hidden] */ #plot-hint:hover { color: var(--accent-text); text-decoration: underline; } #plot-clear { position: absolute; top: 10px; right: 10px; z-index: 6; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 12px; padding: 5px 10px; border-radius: 6px; } #plot-clear:hover { background: var(--surface-3); color: var(--text-strong); } /* "No plots yet" sits beside the ☰ button, centred against it (like #hint) — absolute so #plot's top padding lifts only real plots, not this line. */ #pane-plot > #plot > .empty { position: absolute; top: 10px; left: 54px; z-index: 5; min-height: 26px; display: flex; align-items: center; padding: 0; max-width: 70%; } /* the hint sits beside the ☰ button (left of the CAD view), vertically centred against it — a 26px box from the button's top so the text lines up with it. */ #hint { position: absolute; top: 10px; left: 54px; min-height: 26px; display: flex; align-items: center; font-size: 13px; opacity: 0.7; max-width: 70%; } .empty { opacity: 0.5; font-size: 14px; padding: 24px; } /* KB tab */ #pane-kb.active { display: flex; } #kb-side { width: 270px; border-right: 1px solid var(--surface-2); display: flex; flex-direction: column; box-sizing: border-box; } #kb-search { margin: 10px 10px 6px; padding: 6px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; } #kb-list { flex: 1; overflow: auto; padding: 0 10px 10px; } .kb-snip { opacity: .5; font-size: 11px; margin-top: 1px; } #kb-article { flex: 1; overflow: auto; padding: 18px 28px; box-sizing: border-box; line-height: 1.55; } #kb-article h1 { font-size: 22px; margin: 0 0 4px; } #kb-article code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; } #kb-article pre { background: var(--surface-2); padding: 12px; border-radius: 6px; overflow: auto; } .kb-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .5; margin: 12px 0 4px; } .kb-item { padding: 5px 8px; border-radius: 5px; cursor: pointer; font-size: 13px; } .kb-item:hover { background: var(--surface-2); } /* KaTeX's own 1.21em reads at body weight inside prose; in a 13px row it makes the symbol the loudest thing, inverting what the row is for — the words say which article, the symbol confirms it. 1.1em is the compromise: still quieter than the text, but enough that a three-part subscript (f_{core,rad,FW}) stays legible. */ .kb-item .katex { font-size: 1.1em; } .kb-item.active { background: var(--accent-bg); color: var(--accent-text); } #kb-head { display: flex; gap: 8px; align-items: center; margin: 10px 10px 6px; } #kb-head #kb-search { flex: 1; margin: 0; } #kb-collapse-all { flex: none; padding: 5px 8px; background: var(--surface-2); cursor: pointer; border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; } #kb-collapse-all:hover { color: var(--text-strong); } .kb-group-wrap > .kb-cat { cursor: pointer; user-select: none; } .kb-caret { display: inline-block; width: 11px; opacity: .7; transition: transform .15s; } .kb-group-wrap.collapsed .kb-caret { transform: rotate(-90deg); } .kb-group-wrap.collapsed .kb-group-items { display: none; } .kb-count { letter-spacing: 0; font-weight: 400; } .kb-subgroup { margin-left: 12px; } .kb-subgroup > .kb-cat { text-transform: none; opacity: .6; margin: 8px 0 3px; font-size: 12px; letter-spacing: 0; } .kb-tags { opacity: .6; font-size: 12px; margin-bottom: 14px; } .kb-back { display: block; margin: 0 0 14px; padding: 4px 11px; background: none; color: var(--accent-lt); border: 1px solid var(--accent-border); border-radius: 6px; cursor: pointer; font-size: 12.5px; } .kb-back:hover { background: var(--accent-bg); color: var(--accent-text); } .kb-explain { margin-top: 22px; padding: 8px 14px; background: var(--accent); color: var(--text-strong); border: none; border-radius: 6px; cursor: pointer; font-size: 13px; } .kb-explain:hover { background: var(--accent); } .kb-print { margin: 22px 0 0 8px; padding: 8px 14px; background: none; color: var(--accent-lt); border: 1px solid var(--accent-border); border-radius: 6px; cursor: pointer; font-size: 13px; } .kb-print:hover { background: var(--accent-bg); color: var(--accent-text); } .kb-extended { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--accent-bg); font-size: 12px; opacity: .65; } .kb-extended a { color: var(--accent-lt); text-decoration: underline; cursor: pointer; } .kb-extended a:hover { color: var(--accent-text); } a.kb-xref { color: var(--accent-lt); text-decoration: none; border-bottom: 1px dotted var(--accent-border); cursor: pointer; } a.kb-xref:hover { color: var(--accent-text); border-bottom-color: var(--accent-lt); } /* Every Becky button is non-clickable while a question is in flight — keyed off a body class so dynamically-added buttons (a new KB article) are covered too. */ body.becky-busy .tw-ask, body.becky-busy #tweak-review, body.becky-busy #tweak-sabine, body.becky-busy .kb-explain { opacity: .4 !important; pointer-events: none; } /* Files tab */ #pane-files.active { display: flex; } #files-col { width: 250px; flex: 0 0 250px; border-right: 1px solid var(--surface-2); display: flex; flex-direction: column; min-height: 0; } #files-side, #source-side { flex: 1; overflow: auto; padding: 10px; box-sizing: border-box; } #source-side[hidden] { display: none; } /* Files-pane sub-tabs: work-tree (Files) vs git (Commit) */ #files-col.git-mode { width: 320px; flex-basis: 320px; } #files-subtabs { display: flex; gap: 4px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--surface-2); } #files-subtabs[hidden] { display: none; } #files-subtabs .fsub { padding: 4px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); cursor: pointer; font-size: 12.5px; } #files-subtabs .fsub:hover { color: var(--text-strong); } #files-subtabs .fsub.active { background: var(--surface-3); color: var(--text-strong); border-color: var(--accent-border); } #git-badge { display: inline-block; margin-left: 6px; min-width: 15px; padding: 0 5px; background: var(--accent-hi); color: var(--text-strong); border-radius: 9px; font-size: 10px; line-height: 15px; text-align: center; } #git-badge[hidden] { display: none; } #git-refresh { margin-left: auto; background: none; border: none; color: var(--accent-lt); cursor: pointer; font-size: 15px; line-height: 1; } #git-refresh:hover { color: var(--accent-text); } /* Commit view: branch line, change list, commit box */ #git-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; } #git-panel[hidden] { display: none; } #git-branchline { padding: 7px 12px; font-size: 12px; color: var(--accent-lt); border-bottom: 1px solid var(--surface-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #git-branchline:empty { display: none; } #git-changes { flex: 1; overflow: auto; padding: 6px 0; } .git-empty { padding: 20px 14px; color: var(--text-mute); font-size: 12.5px; line-height: 1.6; } .git-empty button { display: block; margin-top: 12px; padding: 6px 12px; background: var(--accent); color: var(--text-strong); border: none; border-radius: 6px; cursor: pointer; font-size: 12.5px; } .git-empty button:hover { background: var(--accent); } .git-group { margin-bottom: 6px; } .git-group-head { display: flex; align-items: center; padding: 4px 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); } .git-all-btn { margin-left: auto; background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 10.5px; text-transform: none; letter-spacing: 0; } .git-all-btn:hover { color: var(--accent-text); } .git-change-row { display: flex; align-items: center; gap: 8px; padding: 3px 12px; cursor: pointer; font-size: 12.5px; } .git-change-row:hover { background: var(--surface-2); } .git-change-row.active { background: var(--surface-3); } .git-st { flex: none; width: 14px; text-align: center; font-weight: 600; font-size: 11px; } .git-st-M { color: var(--warn); } .git-st-A { color: var(--ok-text); } .git-st-D { color: var(--danger-text); } .git-st-R, .git-st-C { color: var(--accent-lt); } .git-st-U, .git-st-X { color: var(--text-mute); } .git-path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); } .git-row-acts { display: none; gap: 4px; flex: none; } .git-change-row:hover .git-row-acts { display: flex; } .git-row-btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; color: var(--accent-lt); cursor: pointer; width: 20px; height: 20px; padding: 0; line-height: 1; font-size: 13px; } .git-row-btn:hover { background: var(--accent-border); color: var(--text-strong); } #git-commit-box { border-top: 1px solid var(--surface-2); padding: 8px 10px; flex: none; } #git-commit-box[hidden] { display: none; } #git-msg-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 40px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12.5px; padding: 6px 8px; font-family: inherit; } #git-msg-input:focus { outline: none; border-color: var(--accent); } #git-commit-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } #git-commit-actions button { padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--accent-text); } #git-commit-actions button:hover:not(:disabled) { background: var(--accent-border); color: var(--text-strong); } #git-commit-actions button:disabled { opacity: .45; cursor: default; } #git-commit-actions #git-commit { background: var(--accent); color: var(--text-strong); border-color: var(--accent); } #git-commit-actions #git-commit:hover:not(:disabled) { background: var(--accent); } #git-remote-box { display: flex; gap: 6px; align-items: center; margin: 8px 10px 0; } #git-remote-box[hidden] { display: none; } #git-remote-url { flex: 1; min-width: 0; font-size: 11.5px; padding: 5px 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border-2); border-radius: 6px; } #git-remote-url:focus { outline: none; border-color: var(--accent); } #git-remote-set { padding: 5px 10px; font-size: 11.5px; background: var(--surface-2); color: var(--accent-text); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; white-space: nowrap; } #git-remote-set:hover { background: var(--accent-border); color: var(--text-strong); } #git-msg { margin-top: 6px; font-size: 11px; color: var(--text-mute); min-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Unified-diff view in the shared right pane */ .git-diff-host { flex: 1; min-height: 0; overflow: auto; background: var(--bg); } #files-view pre.git-diff { padding: 10px 14px; font-family: ui-monospace, monospace; font-size: 12.5px; line-height: 1.5; } #files-view pre.git-diff > div { white-space: pre-wrap; word-break: break-word; } .diff-add { color: var(--ok-text); background: var(--ok-glow); } .diff-del { color: var(--danger-text); background: var(--danger-glow); } .diff-hunk { color: var(--accent-lt); } .diff-meta { color: var(--text-mute); } .diff-ctx { color: var(--text-2); } /* branch switcher: clickable branch line + popover */ #git-branchline { cursor: pointer; } #git-branchline:hover { color: var(--accent-text); background: var(--surface-2); } #git-branch-menu { position: fixed; z-index: 80; width: 300px; max-height: 70vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 28px var(--shadow); overflow: hidden; } #gb-search { margin: 8px; padding: 6px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12.5px; } #gb-search:focus { outline: none; border-color: var(--accent); } .gb-new { padding: 7px 12px; color: var(--accent-lt); cursor: pointer; font-size: 12.5px; border-bottom: 1px solid var(--surface-2); } .gb-new:hover { background: var(--surface-2); color: var(--accent-text); } #gb-body { overflow: auto; padding: 4px 0; } .gb-sec-head { padding: 6px 12px 3px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); } .gb-item { display: flex; align-items: center; gap: 8px; padding: 4px 12px; cursor: pointer; font-size: 12.5px; color: var(--text-2); } .gb-item:hover { background: var(--surface-2); } .gb-item.current { color: var(--ok-text); cursor: default; } .gb-item.current:hover { background: transparent; } .gb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-track { flex: none; font-size: 10.5px; color: var(--text-mute); } .gb-del { display: none; flex: none; background: none; border: none; padding: 0 2px; color: var(--danger-text); cursor: pointer; font-size: 12px; } .gb-item:hover .gb-del { display: inline; } .gb-del:hover { color: var(--danger-text); } .gb-empty { padding: 12px; color: var(--text-mute); font-size: 12px; } .fdlg-files { margin: 4px 0 2px; font-size: 12px; color: var(--warn); word-break: break-word; } .fdlg-actions.fdlg-3 { flex-wrap: wrap; } /* min-width:0 lets the editor area shrink to the available space so a long code line scrolls inside CodeMirror instead of ballooning #files-view and crushing the file list (flex items default to min-width:auto). */ #files-view { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* The pane below the strip belongs to whichever tab is active — an editor, a read-only source, or a diff — so every renderer writes into this one box. */ #files-body { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } #files-view pre { margin: 0; padding: 16px 20px; font-size: 12.5px; line-height: 1.5; tab-size: 4; } #files-view .hljs-ln td { padding: 0; border: 0; } #files-view .hljs-ln-numbers { text-align: right; color: var(--accent-border); user-select: none; padding-right: 16px; } /* read-only reference-source viewer (the Bluemira sub-tab) */ #files-view .source-path { flex: 0 0 auto; padding: 6px 12px; font-size: 11.5px; color: var(--text-mute); font-family: ui-monospace, monospace; border-bottom: 1px solid var(--surface-2); overflow: auto; white-space: nowrap; } #files-view pre.source-view { flex: 1; min-height: 0; overflow: auto; white-space: pre; position: relative; } /* Ctrl-hover "you can jump here" underline in the source viewer */ .source-link-mark { position: absolute; pointer-events: none; border-bottom: 1.5px solid var(--accent-lt); background: var(--accent-glow); } pre.source-view:has(.source-link-mark) { cursor: pointer; } /* go-to-definition landing line in the source viewer */ .source-line-mark { position: absolute; left: 0; right: 0; pointer-events: none; background: var(--accent-glow); border-left: 2px solid var(--accent-lt); } .source-path .nav-back, .source-path .nav-fwd { margin-right: 10px; padding: 1px 8px; background: none; color: var(--accent-lt); border: 1px solid var(--accent-border); border-radius: 5px; cursor: pointer; font-size: 11px; } .source-path .nav-back:hover, .source-path .nav-fwd:hover { background: var(--accent-bg); color: var(--accent-text); } /* Ctrl/Cmd-hover "you can jump here" affordance on an identifier */ .cm-nav-link { text-decoration: underline; cursor: pointer; color: var(--accent-lt); } /* editor hover preview (code navigation) */ .cm-nav-hover { max-width: 560px; padding: 8px 10px; font-size: 12px; } .cm-nav-sig { font-family: ui-monospace, monospace; white-space: pre-wrap; color: var(--accent-text); } .cm-nav-doc { margin-top: 6px; white-space: pre-wrap; color: var(--text-dim); max-height: 220px; overflow: auto; } .files-root { display: flex; align-items: center; gap: 8px; padding: 5px 8px 6px; font-size: 12px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--surface-3); margin-bottom: 4px; } .files-root > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .files-export { flex: 0 0 auto; background: none; color: var(--accent-lt); border: 1px solid var(--accent-border); border-radius: 5px; padding: 2px 7px; font-size: 11px; font-weight: 500; cursor: pointer; } .files-export:hover:not(:disabled) { background: var(--accent-bg); color: var(--accent-text); } .files-export:disabled { opacity: .55; cursor: default; } .files-folder { padding: 4px 8px; border-radius: 5px; cursor: pointer; font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; } /* Folder glyph as a mask over currentColor, not an or an emoji: it inherits the row's colour, so the git tint below reaches the icon for free, and it stays legible in both themes (an emoji carries its own unthemeable colours). */ .files-folder::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px; background: currentColor; -webkit-mask: var(--icon-folder) center/contain no-repeat; mask: var(--icon-folder) center/contain no-repeat; } .files-folder.collapsed::before { -webkit-mask-image: var(--icon-folder-shut); mask-image: var(--icon-folder-shut); } .files-folder:hover { background: var(--surface-2); } .files-kids[hidden] { display: none; } .files-item { padding: 4px 8px; border-radius: 5px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* File-type mark, keyed off data-ext so the row's text stays exactly the filename. Every icon is the same box, or the names start at different x and the column reads as ragged. An unknown extension falls through to the plain document — a tree with a gap where an icon should be looks broken; one that says "a file" is just quiet. */ .files-item[data-ext]::before, .ftab[data-ext]::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -3px; background-color: currentColor; -webkit-mask: var(--icon-doc) center/contain no-repeat; mask: var(--icon-doc) center/contain no-repeat; } .files-item[data-ext="md"]::before, .ftab[data-ext="md"]::before { -webkit-mask-image: var(--icon-md); mask-image: var(--icon-md); } .files-item[data-ext="json"]::before, .ftab[data-ext="json"]::before { -webkit-mask-image: var(--icon-json); mask-image: var(--icon-json); } .files-item[data-ext="toml"]::before, .files-item[data-ext="cfg"]::before, .ftab[data-ext="toml"]::before, .ftab[data-ext="cfg"]::before { -webkit-mask-image: var(--icon-cfg); mask-image: var(--icon-cfg); } /* …and the one that carries its own colours, so it drops the mask entirely. */ .files-item[data-ext="py"]::before, .ftab[data-ext="py"]::before { -webkit-mask: none; mask: none; background: var(--icon-py) center/contain no-repeat; } .files-item:hover { background: var(--surface-2); } .files-item.active { background: var(--surface-3); color: var(--text-strong); } /* Working-tree state, rolled up onto the folders that hold it (git.js). Only ever set while the project actually is a repository — without version control the tree looks exactly as it did before, rather than claiming everything is new. */ .files-item.git-modified, .files-folder.git-modified, .files-root.git-modified > span { color: var(--warn); } .files-item.git-untracked, .files-folder.git-untracked, .files-root.git-untracked > span { color: var(--ok-text); } .files-item.git-conflict, .files-folder.git-conflict, .files-root.git-conflict > span { color: var(--danger-text); } .files-item.git-modified.active, .files-item.git-untracked.active, .files-item.git-conflict.active { color: var(--text-strong); } /* Open-file tabs — the strip above the editor. It is built with the editor, so it is absent in the Git and reference-source views, which own the same pane. */ #files-tabs { display: flex; flex: 0 0 auto; overflow-x: auto; background: var(--bg); border-bottom: 1px solid var(--surface-2); scrollbar-width: thin; } #files-tabs:empty { display: none; } .ftab { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; cursor: pointer; max-width: 210px; padding: 5px 7px 5px 11px; font-size: 12px; color: var(--text-dim); background: var(--surface-2); border-right: 1px solid var(--border); border-top: 2px solid transparent; } .ftab:hover { color: var(--text-2); } .ftab.active { background: var(--surface); color: var(--text-strong); border-top-color: var(--accent-hi); } .ftab[data-ext]::before { width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; flex: 0 0 12px; } .ftab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* What a tab is, when it is not simply one of your files: reference source you can only read, or a diff. Said in a word rather than a glyph nobody has learnt yet. */ .ftab-tag { flex: 0 0 auto; margin-left: 5px; padding: 1px 4px; border-radius: 3px; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; background: var(--surface-3); color: var(--text-mute); } .ftab.kind-diff .ftab-tag { color: var(--warn); } /* Fixed width: the dot appears and disappears with every save, and the label must not shuffle sideways under the pointer when it does. */ .ftab-dot { flex: 0 0 9px; text-align: center; font-size: 9px; color: var(--warn); } .ftab.dirty .ftab-dot::before { content: '\25CF'; } .ftab-close { background: none; border: 0; padding: 0 3px; border-radius: 3px; color: inherit; opacity: .45; font-size: 11px; line-height: 1.4; cursor: pointer; } .ftab-close:hover { opacity: 1; background: var(--surface-3); } /* Files editor (CodeMirror 6) — toolbar + editor host */ .files-bar { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 7px 12px; border-bottom: 1px solid var(--surface-2); background: var(--surface); } .files-bar .files-name { flex: 1; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .files-bar .files-status { font-size: 11px; opacity: .6; white-space: nowrap; } .files-bar .files-status.dirty { color: var(--warn); opacity: 1; } .files-bar .files-run { background: var(--ok); color: var(--text-strong); border: none; border-radius: 4px; padding: 4px 12px; font-size: 12px; cursor: pointer; } .files-bar .files-run:hover:not(:disabled) { background: var(--ok); } .files-bar .files-run:disabled { opacity: .5; cursor: default; } .files-bar .files-dl { background: none; color: var(--accent-lt); border: 1px solid var(--accent-border); border-radius: 5px; padding: 4px 9px; font-size: 13px; cursor: pointer; } .files-bar .files-dl:hover { background: var(--accent-bg); color: var(--accent-text); } /* The two halves of one decision (files.js), so they carry equal weight — neither "take theirs" nor "keep mine" is the safe default. Both are absent unless an agent write and an unsaved edit have actually diverged; saving is otherwise automatic. */ .files-bar .files-reload, .files-bar .files-save { background: none; color: var(--warn); border: 1px solid var(--warn-bg); border-radius: 5px; padding: 4px 9px; font-size: 12px; cursor: pointer; white-space: nowrap; } .files-bar .files-reload:hover, .files-bar .files-save:hover { background: var(--surface-2); color: var(--warn); } .files-bar .files-reload[hidden], .files-bar .files-save[hidden] { display: none; } .files-editor { flex: 1; min-height: 0; overflow: auto; } .files-editor .cm-editor { height: 100%; font-size: 13px; } .files-output { flex: 0 0 auto; max-height: 38%; overflow: auto; padding: 8px 12px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; color: var(--text); background: var(--bg); border-top: 1px solid var(--surface-2); } .files-output.err { color: var(--danger-text); } /* File-tree right-click menu + the small new/rename/delete dialogs */ .ctx-menu { position: fixed; z-index: 80; min-width: 152px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px; box-shadow: 0 6px 20px var(--shadow); font-size: 13px; } .ctx-item { padding: 6px 12px; border-radius: 4px; cursor: pointer; color: var(--text); } .ctx-item:hover { background: var(--accent); color: var(--text-strong); } .fdlg { position: fixed; inset: 0; z-index: 90; background: var(--shadow); display: flex; align-items: center; justify-content: center; } .fdlg-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; width: 340px; max-width: 90vw; } .fdlg-title { font-size: 13px; color: var(--text); margin-bottom: 10px; word-break: break-word; } .fdlg-input { width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: 13px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 5px; color: var(--text); font-family: ui-monospace, SFMono-Regular, monospace; } .fdlg-input:focus { outline: none; border-color: var(--accent); } .fdlg-err { color: var(--danger-text); font-size: 11.5px; min-height: 14px; margin: 6px 2px 0; } .fdlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .fdlg-actions button { padding: 6px 14px; font-size: 12px; border: none; border-radius: 5px; cursor: pointer; } .fdlg-cancel { background: var(--border); color: var(--text); } .fdlg-cancel:hover { background: var(--border-2); } .fdlg-ok { background: var(--accent); color: var(--text-strong); } .fdlg-ok:hover:not(:disabled) { background: var(--accent); } .fdlg-ok:disabled { opacity: .5; cursor: default; } .fdlg-danger { background: var(--danger); } .fdlg-danger:hover:not(:disabled) { background: var(--danger); } .fdlg-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 95; background: var(--danger); color: var(--text-strong); padding: 8px 16px; border-radius: 6px; font-size: 12.5px; box-shadow: 0 4px 16px var(--shadow); } /* "A new build is available" — a bar, not a toast: it must not time out unnoticed. Sits above the toast strip so both can be on screen at once. */ #update-bar { position: fixed; bottom: 62px; left: 50%; transform: translateX(-50%); z-index: 96; display: flex; align-items: center; gap: 10px; max-width: 92vw; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); padding: 8px 12px; border-radius: 6px; font-size: 12.5px; box-shadow: 0 4px 16px var(--shadow); } #update-bar[hidden] { display: none; } #update-bar button { padding: 5px 12px; font-size: 12px; border: none; border-radius: 5px; cursor: pointer; } #update-bar .upd-reload { background: var(--accent); color: var(--text-strong); } #update-bar .upd-later { background: transparent; color: var(--text-mute); } #update-bar .upd-later:hover { color: var(--text); } /* Sits above the update bar so the two never cover each other, and carries the warning colour: a build being stale is news, running out of credit is a problem. */ #credit-bar { position: fixed; bottom: 108px; left: 50%; transform: translateX(-50%); z-index: 96; display: flex; align-items: center; gap: 10px; max-width: 92vw; background: var(--warn-bg); color: var(--text); border: 1px solid var(--warn); padding: 8px 12px; border-radius: 6px; font-size: 12.5px; box-shadow: 0 4px 16px var(--shadow); } #credit-bar[hidden] { display: none; } #credit-bar .cred-later { padding: 5px 12px; font-size: 12px; border: none; border-radius: 5px; cursor: pointer; background: transparent; color: inherit; opacity: .75; } #credit-bar .cred-later:hover { opacity: 1; } /* New-project wizard */ .wiz { position: fixed; inset: 0; z-index: 92; background: var(--shadow); display: flex; align-items: center; justify-content: center; } .wiz-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; width: 460px; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; } .wiz-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--surface-2); } .wiz-title { flex: 1; font-size: 15px; font-weight: 600; color: var(--text); } .wiz-x { background: none; border: none; color: var(--text-mute); font-size: 15px; cursor: pointer; } .wiz-x:hover { color: var(--text-strong); } .wiz-body { padding: 16px 18px; overflow: auto; display: flex; flex-direction: column; gap: 10px; } .wiz-p { margin: 0 0 4px; font-size: 13px; color: var(--text-2); line-height: 1.5; } .wiz-card { padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--surface-2); } .wiz-card:hover { border-color: var(--accent); } .wiz-card.sel { border-color: var(--accent); background: var(--accent-bg); } .wiz-card-disabled { opacity: .45; cursor: default; } .wiz-card-disabled:hover { border-color: var(--border); } .wiz-card-t { font-size: 13.5px; font-weight: 600; color: var(--text); } .wiz-card-d { font-size: 12px; color: var(--text-dim); margin-top: 2px; white-space: pre-line; line-height: 1.45; } .wiz-templates { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .wiz-tmpl-kind { margin-left: 8px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-lt); border: 1px solid var(--accent-border); border-radius: 4px; padding: 1px 5px; vertical-align: middle; font-weight: 500; } .wiz-input { width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 13px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); font-family: ui-monospace, SFMono-Regular, monospace; } .wiz-input:focus { outline: none; border-color: var(--accent); } .wiz-err { padding: 0 18px; min-height: 16px; font-size: 12px; color: var(--warn); } .wiz-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--surface-2); } .wiz-btn { padding: 7px 14px; font-size: 12.5px; border: none; border-radius: 6px; cursor: pointer; } .wiz-ghost { background: var(--border); color: var(--text); } .wiz-ghost:hover { background: var(--border-2); } .wiz-primary { background: var(--accent); color: var(--text-strong); } .wiz-primary:hover { background: var(--accent); } /* Tweak tab */ #pane-tweak.active { display: flex; flex-direction: column; } #tweak-preview { padding: 6px 14px 8px; border-bottom: 1px solid var(--surface-3); flex: none; } .tw-prev-label { font-size: 11px; opacity: .5; margin-bottom: 3px; } #plasma-preview { display: block; width: 100%; height: 150px; } #tw-lineage { flex: none; margin: 6px 14px 0; min-height: 17px; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #tw-lineage .src { color: var(--accent-hi); font-weight: 600; } #tw-lineage .dn { color: var(--warn); } #tw-lineage .none { opacity: .45; } .tw-group > .tw-caret { transition: color .12s; } .tw-group { transition: color .12s, opacity .12s; } .tw-group-wrap.lin-src > .tw-group { opacity: 1; color: var(--accent-hi); } .tw-group-wrap.lin-down > .tw-group { opacity: 1; color: var(--warn); } #tweak-unused { flex: none; padding: 5px 9px; background: var(--surface-2); cursor: pointer; border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font-size: 12px; white-space: nowrap; } #tweak-unused.on { background: var(--accent); color: var(--text-strong); border-color: var(--accent); } #tweak-unused:disabled { opacity: .4; cursor: default; } .tw-unused-tag { margin-left: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); border: 1px solid var(--warn-bg); border-radius: 4px; padding: 0 4px; } #tweak-body.show-unused .tw-row[data-used="0"] { opacity: .55; } #tweak-body { flex: 1; overflow: auto; padding: 14px 18px; box-sizing: border-box; } .tw-locked { text-align: center; padding: 40px 24px; } .tw-locked-t { font-size: 15px; color: var(--accent-text); margin-bottom: 8px; } .tw-locked-d { font-size: 12.5px; color: var(--text-mute); line-height: 1.6; max-width: 380px; margin: 0 auto; } /* A PROCESS-driven study: the run's identity above a read-only table of the values bluemira exchanges with the systems code. No sliders — hence no edit controls. */ #pane-tweak.process-mode #tweak-rebuild, #pane-tweak.process-mode #tweak-reset, #pane-tweak.process-mode #tweak-unused, #pane-tweak.process-mode #tweak-review, #pane-tweak.process-mode #tweak-load-design, #pane-tweak.process-mode #tweak-sabine, #pane-tweak.process-mode #tweak-snapshots, #pane-tweak.process-mode #tw-lineage { display: none; } .tw-run { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 6px; } .tw-run-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tw-run-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; } .tw-run-badge.ok { color: var(--ok-text); background: var(--ok-glow); border: 1px solid var(--ok); } .tw-run-badge.bad { color: var(--danger-text); background: var(--danger-glow); border: 1px solid var(--danger); } .tw-run-title { font-size: 14px; color: var(--text-strong); } .tw-run-meta { font-size: 11.5px; color: var(--text-mute); margin-top: 5px; } .tw-run-note { font-size: 12px; color: var(--text-dim); line-height: 1.55; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); } .tw-run-note code, .tw-pvar code { font-size: 11px; color: var(--accent-lt); } .tw-run-src { cursor: help; } .tw-run-legend { font-size: 11px; color: var(--text-mute); margin-top: 7px; } /* The shelf of shipped runs, above whatever the panel then shows — including the "never run" card, which is exactly when it earns its place. */ .tw-refs { margin-bottom: 10px; } .tw-refs-lead { font-size: 11px; color: var(--text-mute); margin-bottom: 6px; } .tw-refs-row { display: flex; gap: 6px; flex-wrap: wrap; } .tw-ref { font-size: 12px; padding: 4px 10px; border-radius: 12px; cursor: pointer; background: var(--surface); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; } .tw-ref:hover { color: var(--text-strong); border-color: var(--accent); } .tw-ref.on { background: var(--accent); color: var(--text-strong); border-color: var(--accent); } .tw-ref.bad { color: var(--danger-text); border-color: var(--danger); } /* it did not converge */ .tw-ref.bad.on { background: var(--danger-glow); } .tw-ref-blurb { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-bottom: 8px; max-width: 62ch; } /* Adopting a design into the sliders: the proposal, shown in place above them. */ .tw-adopt { background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; } .tw-adopt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .tw-adopt-rows { margin: 10px 0; } .tw-adopt-row { display: grid; grid-template-columns: 130px 1fr 76px 16px 76px 40px; gap: 8px; align-items: baseline; font-size: 12.5px; padding: 2px 0; } .tw-adopt-row .k { color: var(--text-2); } .tw-adopt-row .c { color: var(--text-mute); font-size: 11.5px; } .tw-adopt-row .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-mute); } .tw-adopt-row .v.to { color: var(--text-strong); } .tw-adopt-row .a { text-align: center; color: var(--text-mute); } .tw-adopt-row .u { color: var(--text-mute); font-size: 11.5px; } .tw-adopt-note { font-size: 12px; color: var(--text-dim); line-height: 1.55; padding-top: 9px; border-top: 1px solid var(--border); max-width: 68ch; } .tw-adopt-bar { display: flex; gap: 8px; margin-top: 11px; } .tw-adopt-go { padding: 6px 14px; background: var(--accent); color: var(--text-strong); border: none; border-radius: 6px; cursor: pointer; font-size: 12.5px; } .tw-adopt-x { padding: 6px 12px; background: transparent; color: var(--text-mute); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 12.5px; } .tw-adopt-x:hover { color: var(--text-strong); } /* .tw-row sets the slider grid further down the sheet, so this needs both classes to win on specificity rather than on order. */ .tw-row.tw-prow { grid-template-columns: 176px 104px 16px 1fr 32px; } .tw-prow > label { color: var(--text-2); } .tw-pval { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-strong); font-size: 13px; cursor: help; } .tw-pdir { text-align: center; color: var(--text-mute); cursor: help; } .tw-pdir.dir-out { color: var(--accent-lt); } /* the locked ones — PROCESS decided */ .tw-pdir.dir-both { color: var(--warn); } .tw-pvar { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: var(--text-mute); cursor: help; } .tw-pdesc { margin-left: 7px; } #tweak-bar { border-top: 1px solid var(--surface-2); padding: 10px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; row-gap: 8px; } #tweak-rebuild { padding: 7px 16px; background: var(--accent); color: var(--text-strong); border: none; border-radius: 6px; cursor: pointer; font-size: 13px; } #tweak-rebuild:hover { background: var(--accent); } #tweak-rebuild:disabled { opacity: .5; cursor: default; } #tweak-status { font-size: 12px; opacity: .7; } #tweak-head { display: flex; gap: 8px; align-items: center; margin: 10px 14px 2px; } #tweak-collapse-all { padding: 5px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } #tweak-collapse-all:hover { color: var(--text-strong); } #tweak-search { flex: 1; padding: 6px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; } .tw-group { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .5; margin: 16px 0 8px; cursor: pointer; user-select: none; } .tw-caret { display: inline-block; width: 11px; opacity: .7; transition: transform .15s; } .tw-group-wrap.collapsed .tw-caret { transform: rotate(-90deg); } .tw-group-wrap.collapsed .tw-group-rows { display: none; } #tweak-split { margin-left: auto; padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); cursor: pointer; font-size: 13px; } #tweak-split.on { background: var(--accent); color: var(--text-strong); border-color: var(--accent); } /* the plasma-preview Overlay toggle lives in the CAD half (top-right) — it controls that pane, and only shows in split view where the preview appears */ #tweak-overlay { display: none; position: absolute; top: 12px; right: 12px; z-index: 6; padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); cursor: pointer; font-size: 13px; align-items: center; } #tweak-overlay:hover { color: var(--text-strong); } #tweak-overlay.on { background: var(--accent); color: var(--text-strong); border-color: var(--accent); } #panes.split #pane-cad #tweak-overlay { display: inline-flex; } /* inert while the real build is shown (nothing to overlay) — greyed, non-interactive */ #tweak-overlay:disabled { opacity: .4; cursor: default; background: var(--surface-2); color: var(--text-mute); border-color: var(--border); } /* stack the build-progress checklist below the toggle so they don't collide */ #panes.split #pane-cad #track-progress { top: 52px; } /* honest "this coil is a preview approximation" note — shown only for the non-PrincetonD shapes, whose real optimiser (field ripple + keep-out) the live preview can't compute */ #coil-approx { display: none; position: absolute; bottom: 52px; left: 12px; z-index: 6; padding: 4px 10px; background: var(--panel-glass); border: 1px solid var(--warn-bg); border-radius: 6px; color: var(--warn); font-size: 12px; align-items: center; cursor: help; } #panes.split #pane-cad #coil-approx:not([hidden]) { display: inline-flex; } @keyframes spin { to { transform: rotate(360deg); } } .spinner { width: 54px; height: 54px; border: 5px solid var(--border); border-top-color: var(--accent-hi); border-radius: 50%; animation: spin 0.9s linear infinite; } .spinner.sm { width: 15px; height: 15px; border-width: 3px; display: none; } .spinner.sm.on { display: inline-block; } #cad-loading { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; gap: 14px; align-items: center; justify-content: center; background: var(--overlay-dim); } #cad-loading.on { display: flex; } .cad-loading-msg { font-size: 12px; color: var(--text-dim); max-width: 260px; text-align: center; line-height: 1.45; } #panes.split #pane-tweak { inset: 0 calc(50% + 1px) 0 0; } #panes.split #pane-cad { display: block; inset: 0 0 0 50%; border-left: 1px solid var(--surface-2); } #panes.split #pane-cad .art-icon { display: none; } /* no file-browse mid-tweak */ #cad-live { position: absolute; top: 12px; left: 54px; z-index: 5; display: none; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); background: var(--panel-glass); padding: 4px 11px; border-radius: 6px; max-width: calc(100% - 24px); } #cad-live span { text-align: left; line-height: 1.35; } /* the two-line preview note */ #cad-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-text); } /* stale (a slider moved since the last build): amber + a ⟳ glyph, not the green dot */ #cad-live.stale { color: var(--warn); } #cad-live.stale::before { content: '\21BB'; width: auto; height: auto; border-radius: 0; background: none; color: var(--warn); font-size: 13px; line-height: 1; } #panes.split #pane-cad #cad-live { display: inline-flex; } #panes.split #pane-cad #hint { display: none; } /* split view hides the ☰ icon, so reclaim the left edge for the Live badge */ #panes.split #pane-cad #cad-live { left: 12px; } /* tweak/preview mode: the built model is hidden, so the clickable legend and the Cut-open / See-through controls would act on nothing — drop them (they return on mode switch, since the rule keys off .split). Reset view stays. */ #panes.split #pane-cad #cad-legend, #panes.split #pane-cad #clip-toggle, #panes.split #pane-cad #shell-ghost, #panes.split #pane-cad #view-top, #panes.split #pane-cad #view-front, #panes.split #pane-cad #view-flip, #panes.split #pane-cad #grid-toggle, #panes.split #pane-cad #cad-scale, #panes.split #pane-cad #cad-ruler, #panes.split #pane-cad #clip-ctrls { display: none; } .tab.unread::after { content: '•'; color: var(--accent-hi); margin-left: 5px; } /* param glossary: info icon, tooltip, article modal */ .tw-info { margin-left: 6px; width: 15px; height: 15px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--accent-hi); color: var(--accent-hi); font-size: 10px; font-style: italic; cursor: default; } .tw-info:hover { background: var(--accent-hi); color: var(--text-strong); } #tw-tip { position: fixed; z-index: 60; max-width: 290px; display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 9px 12px; font-size: 12.5px; line-height: 1.45; color: var(--text); box-shadow: 0 4px 16px var(--shadow); } #tw-tip .more { margin-top: 6px; opacity: .55; font-size: 11px; } #tw-tip .tw-tip-live { margin-top: 6px; font-size: 11px; color: var(--accent-lt); } #param-modal { position: fixed; inset: 0; background: var(--shadow); z-index: 70; display: none; align-items: center; justify-content: center; } #param-modal.open { display: flex; } .pm-panel { width: 620px; max-width: 90vw; max-height: 82vh; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; } .pm-head { display: flex; padding: 8px 12px; border-bottom: 1px solid var(--surface-2); } .pm-head .x { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 18px; } #pm-body { overflow: auto; padding: 16px 26px 24px; line-height: 1.55; } #pm-body h1 { font-size: 21px; margin: 0 0 10px; } #pm-body code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; } #pm-body pre { background: var(--surface-2); padding: 12px; border-radius: 6px; overflow: auto; } .tw-row { display: grid; grid-template-columns: 216px 1fr 92px 32px; gap: 10px; align-items: center; margin: 7px 0; } .tw-ask { opacity: .5; padding: 2px 0; flex: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; color: var(--accent-hi); cursor: pointer; font-size: 10px; transition: opacity .12s; } .tw-row:hover .tw-ask { opacity: 1; } .tw-ask:hover { background: var(--accent); color: var(--text-strong); border-color: var(--accent); opacity: 1; } #tweak-review, #tweak-sabine, #tweak-reset { padding: 7px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--accent-text); cursor: pointer; font-size: 13px; } #tweak-review:hover, #tweak-sabine:hover, #tweak-reset:hover { background: var(--accent-border); color: var(--text-strong); } #tweak-reset:disabled { opacity: .45; cursor: default; background: var(--surface-2); color: var(--accent-text); } #tweak-snapshots { flex: none; padding: 5px 10px; background: var(--surface-2); cursor: pointer; border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } #tweak-snapshots:hover { color: var(--text-strong); } #snap-dialog { position: fixed; inset: 0; background: var(--shadow); z-index: 50; display: none; align-items: center; justify-content: center; } #snap-dialog.open { display: flex; } #snap-save { padding: 6px 12px; background: var(--accent); color: var(--text-strong); border: none; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; } #snap-save:hover { background: var(--accent); } #snap-list { overflow: auto; padding: 8px; } #snap-list .empty { padding: 18px; } .snap-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; } .snap-item:hover { background: var(--surface-2); } .snap-item .main { flex: 1; cursor: pointer; min-width: 0; } .snap-item .t { font-size: 14px; } .snap-item .meta { font-size: 11px; opacity: .55; margin-top: 2px; } .snap-item .act { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 5px; cursor: pointer; font-size: 12px; padding: 3px 8px; } .snap-item .act:hover { color: var(--text-strong); border-color: var(--accent-hi); } .tw-row label { font-size: 13px; } .tw-row label .tw-unit { opacity: .45; font-size: 11px; margin-left: 4px; } /* params that drive the live 3-D preview: bold + a small ◆ so they stand out from the physics-only params that need a Full Rebuild to show any effect */ .tw-row.tw-live label { font-weight: 600; color: var(--accent-text); } .tw-row.tw-live label::before { content: '\25C6'; color: var(--accent-hi); font-size: 8px; vertical-align: 1px; margin-right: 6px; } .tw-row input[type=range] { width: 100%; accent-color: var(--accent-hi); } .tw-row .tw-num { width: 84px; padding: 4px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: 12px; } /* Artifact icon + dialog */ .art-icon { position: absolute; top: 10px; left: 10px; z-index: 5; background: var(--panel-glass); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; cursor: pointer; font-size: 14px; } .art-icon:hover { background: var(--border); } #cad-legend { position: absolute; top: 12px; left: 54px; z-index: 5; display: flex; flex-direction: column; gap: 2px; } #cad-legend:empty { display: none; } /* Track build-progress checklist — top-right corner (the ☰ file icon is top-left). */ #track-progress { position: absolute; top: 10px; right: 10px; z-index: 5; background: var(--panel-glass); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--text); max-width: 210px; user-select: none; } #track-progress .tp-head { font-weight: 600; color: var(--text-strong); margin-bottom: 4px; } #track-progress .tp-row { display: flex; gap: 6px; align-items: baseline; line-height: 1.55; color: var(--text-dim); } #track-progress .tp-row.done { color: var(--text); } #track-progress .tp-mark { width: 11px; flex: none; text-align: center; color: var(--text-mute); } #track-progress .tp-row.done .tp-mark { color: var(--accent-hi); } .layer-row { display: flex; align-items: center; gap: 8px; padding: 3px 9px 3px 7px; background: var(--panel-glass); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text); user-select: none; } .layer-row:hover { background: var(--border); } .layer-row.off { opacity: 0.4; } .layer-row.off .ln { text-decoration: line-through; } .layer-row .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid var(--border-glass); } .layer-row .layer-ghost { margin-left: auto; background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 13px; line-height: 1; flex: none; padding: 0 1px; border-radius: 4px; } .layer-row .layer-ghost:hover { color: var(--text); } .layer-row .layer-ghost.on { color: var(--accent-hi); } #cad-clip { position: absolute; bottom: 12px; left: 12px; z-index: 5; display: flex; gap: 6px; align-items: center; } /* which CAD file is on screen (name + version) — bottom-right, out of the way */ #cad-source { position: absolute; bottom: 12px; right: 12px; z-index: 5; max-width: 44%; padding: 3px 9px; border-radius: 6px; background: var(--panel-glass); color: var(--text-dim); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } #cad-source[hidden] { display: none; } #cad-source b { color: var(--text-2); font-weight: 600; } #cad-source .unsaved { color: var(--warn); } #clip-toggle, #view-reset, #shell-ghost, #view-top, #view-front, #view-flip, #grid-toggle { background: var(--panel-glass); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; cursor: pointer; font-size: 13px; line-height: 2;} #clip-toggle:hover, #view-reset:hover, #shell-ghost:hover, #view-top:hover, #view-front:hover, #view-flip:hover, #grid-toggle:hover { background: var(--border); } #clip-toggle.on, #shell-ghost.on, #view-top.on, #view-front.on, #grid-toggle.on { background: var(--accent); color: var(--text-strong); border-color: var(--accent); } /* adaptive scale bar (optional) — a bracket + auto-unit label, bottom-right */ #cad-scale { position: absolute; bottom: 42px; right: 12px; z-index: 5; pointer-events: none; text-align: center; font-size: 11px; color: var(--text); text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg); } #cad-scale[hidden] { display: none; } #cad-scale .scale-label { display: block; margin-bottom: 3px; font-variant-numeric: tabular-nums; } #cad-scale .scale-bar { height: 6px; margin: 0 auto; box-sizing: border-box; border: 2px solid var(--text); border-top: 0; } /* edge rulers (ortho only) — a 2-D canvas over the 3-D view, under the controls */ #cad-ruler { position: absolute; inset: 0; z-index: 4; pointer-events: none; } #cad-ruler[hidden] { display: none; } /* when the ortho rulers reserve the bottom + right gutters, lift the controls + file badge clear of them (the gutters are ~26 px bottom / ~46 px right) */ #pane-cad.measuring #cad-clip { bottom: 34px; } #pane-cad.measuring #cad-source { bottom: 34px; right: 54px; } #clip-ctrls { display: inline-flex; gap: 5px; align-items: center; padding: 3px 7px; background: var(--panel-glass); border: 1px solid var(--border); border-radius: 6px; } #clip-ctrls[hidden] { display: none; } #clip-ctrls button { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; cursor: pointer; font-size: 12px; } #clip-ctrls button.on { background: var(--accent); color: var(--text-strong); border-color: var(--accent); } #clip-ctrls input[type=range] { width: 96px; accent-color: var(--accent-hi); } .clip-lbl { font-size: 11px; color: var(--text-dim); } /* Account button (rightmost in the tabbar, beside the project indicator) + profile dialog (v1: identity, logout, own AI token). */ #account-btn { align-self: center; margin: 0 0 4px 8px; cursor: pointer; font-size: 15px; line-height: 1; padding: 5px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); user-select: none; } #account-btn:hover { background: var(--surface-3); color: var(--text-strong); } #profile-dialog { position: fixed; inset: 0; background: var(--shadow); z-index: 55; display: none; align-items: center; justify-content: center; } #profile-dialog.open { display: flex; } .prof-panel { width: 380px; } /* the panel is max-height:80vh + overflow:hidden (.art-panel) -> make the body itself scroll so tall content (admin: members + invites + key) never clips off-screen */ #prof-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 14px; font-size: 13px; flex: 1; min-height: 0; overflow-y: auto; } .prof-who { display: flex; flex-direction: column; gap: 3px; } .prof-who .lbl { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; } .prof-who .val { font-size: 15px; color: var(--text-strong); font-weight: 600; word-break: break-all; } .prof-sec { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--surface-2); padding-top: 13px; } .prof-sec .lbl { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; } /* a section's own header (direct child .lbl) is a collapse toggle — not the nested ones (e.g. "Add member" inside Members) */ .prof-sec > .lbl { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; } .prof-sec > .lbl::before { content: '\25BE'; font-size: 9px; color: var(--text-mute); transition: transform .15s; } .prof-sec.collapsed > .lbl::before { transform: rotate(-90deg); } .prof-sec.collapsed > :not(.lbl) { display: none; } .prof-row { display: flex; gap: 7px; } .prof-row input { flex: 1; padding: 8px 9px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; } .prof-row input:focus { outline: none; border-color: var(--accent); } .prof-btn { padding: 8px 12px; border: 0; border-radius: 6px; background: var(--accent); color: var(--text-strong); font-size: 13px; font-weight: 600; cursor: pointer; } .prof-btn:hover { background: var(--accent); } .prof-btn.ghost { background: var(--surface-2); color: var(--text); } .prof-btn.ghost:hover { background: var(--border-2); } .prof-note { font-size: 12px; color: var(--text-dim); } .prof-note.ok { color: var(--ok-text); } .prof-note.err { color: var(--danger-text); } .prof-theme-row { align-items: center; } .prof-theme-row label { font-size: 13px; color: var(--text-2); white-space: nowrap; } .prof-theme { flex: 1; padding: 8px 9px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; } .prof-legal { text-align: center; font-size: 11px; color: var(--text-mute); padding-top: 12px; border-top: 1px solid var(--surface-2); } .prof-legal a { color: var(--accent-lt); text-decoration: none; } .prof-legal a:hover { text-decoration: underline; } .mem-list { display: flex; flex-direction: column; } .mem-row { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; border-bottom: 1px solid var(--surface-3); } .mem-row:last-child { border-bottom: 0; } .mem-row.suspended { opacity: .55; } .mem-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .mem-email { color: var(--text); font-weight: 600; word-break: break-all; } .mem-email em { color: var(--text-mute); font-weight: 400; font-style: normal; } .mem-status { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; } .mem-row.suspended .mem-status { color: var(--warn); } .mem-ctl { display: flex; gap: 6px; align-items: center; } .mem-ctl select, .mem-add select { padding: 6px 7px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; font-size: 12px; } .mem-ctl select { flex: 1; } .mem-ctl .mem-susp { padding: 6px 9px; font-size: 12px; } .mem-addons { display: flex; flex-wrap: wrap; gap: 4px 12px; } .mem-addons label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); } .mem-addons input { width: auto; } .mem-add { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .mem-add select { flex: 1; } .inv-list { display: flex; flex-direction: column; gap: 8px; } .inv-row { display: flex; flex-direction: column; gap: 3px; } .inv-top { display: flex; gap: 8px; align-items: center; } .inv-code { flex: 1; font-family: monospace; font-size: 12px; color: var(--accent-text); background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px; word-break: break-all; user-select: all; } .inv-meta { font-size: 11px; color: var(--text-mute); } .inv-copy { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; border-radius: 5px; padding: 3px 9px; font-size: 12px; white-space: nowrap; } .inv-copy:hover { background: var(--border-2); } .inv-x { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; } .inv-x:hover { color: var(--danger-text); } .inv-mk { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .inv-mk2 { align-items: center; } .inv-nplan, .inv-exp { flex: 1; padding: 8px 9px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; } .inv-su { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); } .inv-su input { width: auto; } .use-head { display: flex; align-items: center; gap: 8px; } .use-win { flex: 1; padding: 6px 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; } .use-total { font-weight: 600; white-space: nowrap; } .use-credit { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; padding: 8px 10px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); } .use-credit-bal { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .use-credit-lbl { flex: 1; font-size: 12px; color: var(--text-dim); } .use-credit-spent { font-size: 11px; color: var(--text-mute); white-space: nowrap; } .use-credit.out { border-color: var(--danger-text); } .use-credit.out .use-credit-bal, .use-credit.out .use-credit-lbl { color: var(--danger-text); } .use-list { display: flex; flex-direction: column; margin-top: 4px; } .use-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--surface-3); font-size: 12px; } .use-row:last-child { border-bottom: 0; } .use-row.idle { color: var(--text-mute); } .use-who { flex: 1; overflow-wrap: anywhere; } .use-turns { color: var(--text-mute); white-space: nowrap; } .use-cost { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 62px; text-align: right; } .key-list { display: flex; flex-direction: column; gap: 12px; } .key-row { display: flex; flex-direction: column; gap: 4px; } .key-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .key-name { color: var(--text); font-weight: 600; } .key-tail { font-family: monospace; font-size: 11px; color: var(--text-mute); flex-shrink: 0; } .key-x { padding: 6px 10px; font-size: 13px; line-height: 1; flex-shrink: 0; } .key-own { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--surface-3); display: flex; flex-direction: column; gap: 4px; } #art-dialog { position: fixed; inset: 0; background: var(--shadow); z-index: 50; display: none; align-items: center; justify-content: center; } #art-dialog.open { display: flex; } .art-panel { width: 560px; max-width: 90vw; max-height: 80vh; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; } .art-head { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--surface-2); } .art-head .ttl { font-weight: 600; } .art-head input { flex: 1; padding: 6px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); } .art-head .x { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 18px; } #art-list { overflow: auto; padding: 8px; } .art-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 6px; } .art-item:hover { background: var(--surface-2); } .art-item .main { flex: 1; cursor: pointer; } .art-item .t { font-size: 14px; } .art-item .art-ver { color: var(--accent-hi); font-weight: 600; font-size: 12px; margin-right: 2px; } .art-item .meta { font-size: 11px; opacity: .55; margin-top: 2px; } .art-item .art-diff { font-size: 11px; color: var(--accent-lt); margin-top: 4px; cursor: default; } .art-item .act { background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 12px; padding: 2px 4px; } .art-item .act:hover { color: var(--text-strong); } /* Textbook overlay — the whole KB compiled into one printable document */ #kb-textbook { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; background: var(--bg); } #kb-textbook.open { display: flex; } #kb-textbook .tb-actions { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--surface-2); background: var(--surface); } #kb-textbook .tb-ttl { font-weight: 600; flex: 1; } #kb-textbook #tb-print { padding: 7px 14px; background: var(--accent); color: var(--text-strong); border: none; border-radius: 6px; cursor: pointer; font-size: 13px; } #kb-textbook #tb-print:hover { background: var(--accent); } #kb-textbook .x { background: none; border: none; color: var(--text-mute); font-size: 16px; cursor: pointer; } #kb-textbook .x:hover { color: var(--text-strong); } #tb-body { flex: 1; overflow: auto; padding: 28px 48px; box-sizing: border-box; max-width: 900px; width: 100%; margin: 0 auto; } #tb-body .tb-cover { text-align: center; padding: 36px 0 22px; border-bottom: 1px solid var(--surface-2); } #tb-body .tb-cover h1 { font-size: 30px; margin: 0; } #tb-body .tb-sub { opacity: .6; margin-top: 6px; } #tb-body .tb-toc { margin: 22px 0; } #tb-body .tb-toc ul { columns: 2; list-style: none; padding: 0; } #tb-body .tb-toc li { padding: 2px 0; text-transform: capitalize; } #tb-body .tb-toc span { opacity: .5; } #tb-body .tb-cat-ttl { margin-top: 38px; padding-bottom: 6px; border-bottom: 2px solid var(--accent-border); text-transform: capitalize; } #tb-body .tb-art { margin: 22px 0; } #tb-body .tb-art h2 { font-size: 20px; } #tb-body pre { background: var(--surface-2); padding: 12px; border-radius: 6px; overflow: auto; } #tb-body code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; } /* Print: the workspace is a fixed-viewport SPA (html/body locked to 100vh, panes absolutely positioned with their own internal scroll). For print we unwind that chain to normal static flow so the chosen article — or the whole textbook — becomes one tall block the engine can paginate, and force a paper-readable palette over the dark theme. */ @media print { @page { margin: 16mm; } /* the chat panel reserves its strip by pushing #panes — that shrinks the print box. Force full width and kill the margin transition so it snaps instantly (a mid-animation print snapshot would otherwise still be narrow). */ html, body { width: auto !important; margin: 0 !important; height: auto !important; overflow: visible !important; background: var(--text-strong) !important; transition: none !important; } #panes { margin-right: 0 !important; transition: none !important; } /* drop anything that isn't the print target's container (the chat panel, etc.) */ body > *:not(#workspace):not(#kb-textbook) { display: none !important; } #tabbar, #kb-side, .kb-print, .kb-explain, .kb-extended, .kb-back, .tb-actions { display: none !important; } /* single article (textbook closed) */ body:not(.tb-open) #kb-textbook { display: none !important; } body:not(.tb-open) #workspace { display: block !important; width: 100% !important; height: auto !important; } body:not(.tb-open) #panes { position: static !important; height: auto !important; } body:not(.tb-open) .pane:not(#pane-kb) { display: none !important; } body:not(.tb-open) #pane-kb { position: static !important; display: block !important; } body:not(.tb-open) #kb-article { position: static !important; width: 100% !important; height: auto !important; overflow: visible !important; padding: 0 !important; } /* whole textbook (open) */ body.tb-open #workspace { display: none !important; } body.tb-open #kb-textbook { position: static !important; display: block !important; height: auto !important; overflow: visible !important; } body.tb-open #tb-body { height: auto !important; overflow: visible !important; padding: 0 !important; } /* paper-readable palette */ #kb-article, #kb-article *, #tb-body, #tb-body * { color: var(--ink) !important; background: transparent !important; border-color: var(--text-2) !important; } #kb-article pre, #kb-article code, #tb-body pre, #tb-body code { background: var(--text-strong) !important; color: var(--ink) !important; } /* keep wide ASCII diagrams on the page without breaking their alignment */ #kb-article pre, #tb-body pre { overflow: visible !important; font-size: 11px; } #kb-article a, #tb-body a { color: var(--accent) !important; } .tb-art { break-inside: avoid-page; } .tb-cat-ttl { break-before: page; } } /* Server-mode sign-in overlay (password auth) — covers the workspace until the browser holds a valid session cookie. Never shown in local mode. */ .ba-login-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: var(--bg); } .ba-login-card { display: flex; flex-direction: column; gap: 12px; width: 320px; max-width: 86vw; padding: 26px 26px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 34px var(--shadow); } .ba-login-card h2 { margin: 0 0 4px; font-size: 17px; color: var(--text-strong); font-weight: 600; } .ba-login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-dim); } .ba-login-card input { padding: 9px 10px; border-radius: 6px; font-size: 14px; background: var(--bg); color: var(--text); border: 1px solid var(--border); } .ba-login-card input:focus { outline: none; border-color: var(--accent); } .ba-login-card button { margin-top: 6px; padding: 9px; border: 0; border-radius: 6px; background: var(--accent); color: var(--text-strong); font-size: 14px; font-weight: 600; cursor: pointer; } .ba-login-card button:hover { background: var(--accent); } .ba-login-card button[disabled] { opacity: .6; cursor: default; } .ba-login-err { margin: 2px 0 0; font-size: 12px; color: var(--danger-text); } /* The reset flow's neutral answer — deliberately not an error colour: "if that address has an account…" is a success, and red would read as a rejection. */ .ba-login-note { margin: 2px 0 0; font-size: 12px; color: var(--text-dim); } .ba-login-alt { margin: 6px 0 0; font-size: 12px; color: var(--text-mute); text-align: center; } .ba-login-alt a { color: var(--accent-lt); text-decoration: none; } .ba-login-alt a:hover { text-decoration: underline; } /* legal links pinned to the bottom of the entry page (above the overlay, z 200) */ .ba-login-footer { position: fixed; bottom: 16px; left: 0; right: 0; z-index: 201; text-align: center; font-size: 12px; color: var(--text-mute); } .ba-login-footer a { color: var(--text-mute); text-decoration: none; } .ba-login-footer a:hover { color: var(--text-2); text-decoration: underline; } /* ---- native chat panel (chat.js, behind ?chat=native) ---- */ #chat-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 8; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; background: var(--accent); color: var(--text-strong); font-size: 20px; box-shadow: 0 2px 8px var(--shadow); } #chat-toggle:hover { background: var(--accent); } #chat-panel { position: fixed; top: var(--topbar-h, 0); right: 0; bottom: 0; width: var(--chat-w, 380px); z-index: 9; background: var(--surface); border-left: 1px solid var(--surface-2); border-top: 1px solid var(--surface-2); color: var(--text); display: none; flex-direction: column; } #chat-panel.open { display: flex; } /* Drag handle on the left edge to resize the panel (double-click resets to default). */ .chat-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; z-index: 11; cursor: col-resize; touch-action: none; user-select: none; } .chat-resize::before { content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: transparent; transition: background .12s; } .chat-resize:hover::before, body.chat-resizing .chat-resize::before { background: var(--accent-hi); } body.chat-resizing { cursor: col-resize; user-select: none; } body.chat-resizing iframe, body.chat-resizing canvas { pointer-events: none; } .chat-head { display: flex; align-items: center; gap: 8px; position: relative; padding: 8px 10px; border-bottom: 1px solid var(--surface-2); background: var(--surface-2); } .chat-persona, .cs-model, .cs-effort { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12px; } .chat-head .chat-new { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; font-size: 12px; cursor: pointer; } .chat-head .chat-new:hover { color: var(--text); } .chat-head .chat-settings { margin-left: auto; background: none; border: none; color: var(--text-2); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px; } .chat-head .chat-settings:hover { color: var(--text); } .chat-head .chat-close { background: none; border: none; color: var(--text-2); font-size: 20px; line-height: 1; cursor: pointer; } .chat-settings-pop { position: absolute; top: 100%; right: 8px; z-index: 12; margin-top: 4px; width: 250px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; padding: 10px; box-shadow: 0 6px 20px var(--shadow); } .chat-settings-pop[hidden] { display: none; } .cs-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .cs-row label { font-size: 12px; color: var(--text-2); } .cs-row .cs-sub { color: var(--text-mute); } .cs-desc { margin: 0 0 10px; font-size: 11px; color: var(--text-dim); line-height: 1.4; } .cs-desc:last-child { margin-bottom: 0; } .chat-log { flex: 1; overflow-y: auto; padding: 12px; } .chat-msg { margin: 0 0 12px; font-size: 13px; line-height: 1.5; } .chat-user { background: var(--accent); color: var(--text-strong); border-radius: 10px 10px 2px 10px; padding: 7px 10px; margin-left: 40px; white-space: pre-wrap; } .chat-assistant { background: var(--surface-2); border: 1px solid var(--surface-2); border-radius: 10px 10px 10px 2px; padding: 7px 10px; margin-right: 20px; } .chat-errbubble { border-color: var(--danger); } .chat-assistant .chat-body :first-child { margin-top: 0; } .chat-assistant .chat-body :last-child { margin-bottom: 0; } .chat-assistant pre { background: var(--bg); border-radius: 6px; padding: 8px; overflow-x: auto; } .chat-assistant code { font-size: 12px; } .chat-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .chat-tool { font-size: 11px; color: var(--text-2); background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; } .chat-tool.running { color: var(--accent-lt); } /* "thinking" indicator: three bouncing dots while the agent works before the first token */ .chat-thinking { display: inline-flex; gap: 5px; align-items: center; padding: 4px 2px; } .chat-thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-lt); animation: chat-think 1.2s ease-in-out infinite both; } .chat-thinking span:nth-child(2) { animation-delay: .18s; } .chat-thinking span:nth-child(3) { animation-delay: .36s; } @keyframes chat-think { 0%, 70%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .chat-thinking span { animation: none; opacity: .6; } } .chat-notice { font-size: 11px; color: var(--text-dim); font-style: italic; } .chat-img { max-width: 100%; border-radius: 6px; margin-top: 6px; } .chat-cost { font-size: 11px; color: var(--text-mute); margin-top: 6px; } .chat-feedback { margin-top: 4px; } .chat-thumb { background: none; border: none; cursor: pointer; font-size: 13px; opacity: .5; } .chat-thumb:hover, .chat-thumb.on { opacity: 1; } .chat-fb-note { display: flex; gap: 6px; align-items: center; margin-top: 5px; } .chat-fb-input { flex: 1; max-width: 340px; background: var(--bg); color: var(--text); font-family: inherit; border: 1px solid var(--border); border-radius: 5px; padding: 4px 7px; font-size: 12px; } .chat-fb-send { background: none; color: var(--text-2); border: 1px solid var(--border); border-radius: 5px; padding: 4px 9px; font-size: 12px; cursor: pointer; } .chat-fb-send:hover { background: var(--surface-2); color: var(--text); } .chat-fb-thanks { font-size: 11px; color: var(--text-mute); font-style: italic; } .chat-inputrow { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--surface-2); background: var(--surface-2); } .chat-input { flex: 1; resize: none; background: var(--bg); color: var(--text); font-family: inherit; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 13px; } .chat-send { background: var(--accent); color: var(--text-strong); border: none; border-radius: 6px; padding: 0 14px; cursor: pointer; font-size: 13px; } .chat-send:disabled { opacity: .5; cursor: default; } @media print { #chat-panel, #chat-toggle { display: none !important; } #panes { margin-right: 0 !important; } /* the chat strip must not shrink a printed page */ } /* --------------------------------------------------------------------------- Light theme (Stufe 1). Base :root above is dark. Light applies when the OS prefers light AND the user hasn't toggled (`:not([data-theme="dark"])`), or when explicitly toggled light. An explicit `data-theme` always wins over the OS media query (higher specificity). Tokens only — no rule below needs to know which theme is active. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #eef0f3; --surface: #ffffff; --surface-2: #f4f5f7; --surface-3: #e6e9ee; --border: #d4d7dd; --border-2: #c3c7cf; --text: #23262c; --text-2: #3c4048; --text-strong: #0c0e12; --text-dim: #5a5f68; --text-mute: #868b93; --ink: #14161a; --accent: #2f6cb0; --accent-hi: #3576bd; --accent-lt: #1f5fa0; --accent-bg: #e6eef8; --accent-text: #1a4f8c; --accent-border: #b8cbe6; --danger: #c0392b; --danger-text: #b3261e; --ok: #2e7d46; --ok-text: #1e7a3c; --warn: #9a6a00; --warn-bg: #fbeecb; --shadow: rgba(23,26,31,.15); --panel-glass: rgba(255,255,255,.85); --overlay-dim: rgba(255,255,255,.72); --scrim-blue: rgba(238,242,248,.92); --tint-blue: rgba(220,232,247,.6); --accent-glow: rgba(47,108,176,.10); --danger-glow: rgba(192,57,43,.10); --ok-glow: rgba(46,125,70,.12); --border-glass: rgba(0,0,0,.12); color-scheme: light; } } :root[data-theme="light"] { --bg: #eef0f3; --surface: #ffffff; --surface-2: #f4f5f7; --surface-3: #e6e9ee; --border: #d4d7dd; --border-2: #c3c7cf; --text: #23262c; --text-2: #3c4048; --text-strong: #0c0e12; --text-dim: #5a5f68; --text-mute: #868b93; --ink: #14161a; --accent: #2f6cb0; --accent-hi: #3576bd; --accent-lt: #1f5fa0; --accent-bg: #e6eef8; --accent-text: #1a4f8c; --accent-border: #b8cbe6; --danger: #c0392b; --danger-text: #b3261e; --ok: #2e7d46; --ok-text: #1e7a3c; --warn: #9a6a00; --warn-bg: #fbeecb; --shadow: rgba(23,26,31,.15); --panel-glass: rgba(255,255,255,.85); --overlay-dim: rgba(255,255,255,.72); --scrim-blue: rgba(238,242,248,.92); --tint-blue: rgba(220,232,247,.6); --accent-glow: rgba(47,108,176,.10); --danger-glow: rgba(192,57,43,.10); --ok-glow: rgba(46,125,70,.12); --border-glass: rgba(0,0,0,.12); color-scheme: light; }